littlejsengine 1.11.5 → 1.11.6

package/shortExamples/code/blending.js

@@ -1,12 +1,16 @@
 function gameRender()
 {
+    const circleTile = tile(2, 128);
+
     // additive blend
     setBlendMode(1);
-    drawTile(vec2(1, 3), vec2(6), tile(0), rgb(1,0,0));
-    drawTile(vec2(-1,3), vec2(6), tile(0), rgb(0,0,1));
+    drawTile(vec2(-4,-2), vec2(7), circleTile, rgb(1,0,0));
+    drawTile(vec2(-6, 2), vec2(7), circleTile, rgb(0,1,0));
+    drawTile(vec2(-8,-2), vec2(7), circleTile, rgb(0,0,1));
 
     // alpha blend
     setBlendMode(0);
-    drawTile(vec2(1, -3), vec2(6), tile(0), rgb(1,0,0,.5));
-    drawTile(vec2(-1,-3), vec2(6), tile(0), rgb(0,0,1,.5));
+    drawTile(vec2(4,-2), vec2(7), circleTile, rgb(1,0,0,.5));
+    drawTile(vec2(6, 2), vec2(7), circleTile, rgb(0,1,0,.5));
+    drawTile(vec2(8,-2), vec2(7), circleTile, rgb(0,0,1,.5));
 }

package/shortExamples/code/clock.js

@@ -0,0 +1,21 @@
+function gameRender()
+{
+    // draw background
+    for(let i=12; i--;)
+    {
+        const a = i/6*PI;
+        const pos = vec2(0,7).rotate(a);
+        drawRect(pos, vec2(.5,1), hsl(i/12,1,.5), a);
+    }
+
+    // get current time
+    const d = Date().slice(16,24);
+    const s = d.slice(6,8)|0;
+    const m = d.slice(3,5)|0;
+    const h = (d.slice(0,2)|0) + m/60;
+
+    // draw clock hands
+    drawLine(vec2(0,0), vec2(0,4).rotate(h/12*2*PI),  1);
+    drawLine(vec2(0,0), vec2(0,6).rotate(m/60*2*PI), .4);
+    drawLine(vec2(0,0), vec2(0,8).rotate(s/60*2*PI), .1);
+}

package/shortExamples/code/colors.js

@@ -0,0 +1,25 @@
+function gameRender()
+{
+    // color constants
+    drawRect(vec2(-8, 5), vec2(3), RED);
+    drawRect(vec2(-4, 5), vec2(3), YELLOW);
+    drawRect(vec2(-0, 5), vec2(3), GREEN);
+    drawRect(vec2( 4, 5), vec2(3), BLUE);
+    drawRect(vec2( 8, 5), vec2(3), WHITE);
+    
+    // rgb and hsl color
+    drawRect(vec2(-8, 0), vec2(3), new Color(1,0,0));
+    drawRect(vec2(-4, 0), vec2(3), rgb(0,1,1));
+    drawRect(vec2(-0, 0), vec2(3), hsl(0,1,.5));
+    drawRect(vec2( 4, 0), vec2(3), hsl(.6,.5,.5));
+    drawRect(vec2( 8, 0), vec2(3), hsl(0,0,1));
+
+    // color lerpping
+    for(let i=5; i--;)
+    {
+        const color1 = RED;
+        const color2 = YELLOW;
+        const color = color1.lerp(color2, i/4);
+        drawRect(vec2(-8+i*4, -5), vec2(3), color);
+    }
+}

package/shortExamples/code/helloWorld.js

@@ -1,7 +1,8 @@
 function gameRender()
 {
-    // draw to overlay canvas
-    drawTextScreen('Hello World', 
-        mainCanvasSize.scale(.5), 80,   // position, size
-        hsl(0,0,1), 6, hsl(0,0,0));     // color, outline size and color
+    // draw text
+    drawText('Hello World', vec2(0,2), 3);
+        
+    // draw a tile
+    drawTile(vec2(0,-2), vec2(7), tile(3,128));
 }

package/shortExamples/code/playSound.js

@@ -25,11 +25,9 @@ function gameInit()
     new SoundButton(vec2(-6, 5),'💰', new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
     new SoundButton(vec2( 0, 5),'🥊', new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
     new SoundButton(vec2( 6, 5),'✨', new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
-
     new SoundButton(vec2(-6, 0),'🐁', new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
     new SoundButton(vec2( 0, 0),'🎹', new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
-    new SoundButton(vec2( 6, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3]));
-    
+    new SoundButton(vec2( 6, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3])); 
     new SoundButton(vec2(-6,-5),'🌊', new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
     new SoundButton(vec2( 0,-5),'🛰️', new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
     new SoundButton(vec2( 6,-5),'⚡', new Sound([,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.1]));

package/shortExamples/code/shapes.js

@@ -17,7 +17,7 @@ function gameRender()
     drawEllipse(vec2(-5,5), 2, 1, 0, hsl(0,1,.5));
     drawEllipse(vec2(5,5), 1, .5, 0, hsl(.55,1,.5));
 
-    // lines and rects
+    // rects and lines
     drawRect(vec2(0,-5), vec2(13,2), hsl(.6,1,.5));
     drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1));
     drawLine(vec2(-5,-3), vec2(5,-7), .2, hsl(1,1,.5));

package/shortExamples/code/spriteAtlas.js

@@ -9,7 +9,8 @@ function gameInit()
         circle:    gameTile(0),
         crate:     gameTile(1),
         icon:      gameTile(2),
-        largeIcon: gameTile(vec2(1,1),128),
+        circleBig: gameTile(2, 128),
+        iconBig:   gameTile(3, 128),
     };
 }
 
@@ -18,10 +19,16 @@ function gameRender()
     drawRect(vec2(0,0), vec2(100), GRAY); // draw background
 
     // draw a sprite from the atlas
-    let pos = vec2(0,0);             // world position to draw
-    let angle = 0;                   // world space angle to draw the tile
-    let size = vec2(15);              // world size of the tile
-    let mirror = 0;                  // should tile be mirrored?
-    let color = hsl(0,0,1);          // color to multiply the tile by
-    drawTile(pos, size, spriteAtlas.largeIcon, color, angle, mirror);
+    let pos = vec2(Math.sin(time)*5,-3);// world position to draw
+    let angle = 0;                      // world space angle to draw the tile
+    let size = vec2(9);                 // world size of the tile
+    let mirror = 0;                     // should tile be mirrored?
+    let color = hsl(0,0,1);             // color to multiply the tile by
+    let additiveColor = hsl(0,0,0,0);   // color to add to
+    drawTile(pos, size, spriteAtlas.iconBig, color, angle, mirror, additiveColor);
+
+    // draw more sprites from the atlas
+    drawTile(vec2(-7,4), vec2(5), spriteAtlas.crate);
+    drawTile(vec2( 0,4), vec2(5), spriteAtlas.circle);
+    drawTile(vec2( 7,4), vec2(5), spriteAtlas.circleBig);
 }

package/shortExamples/code/systemFont.js

@@ -1,14 +1,16 @@
 function gameRender()
 {
+    // draw text with built in font image system font
     const font = new FontImage;
-    font.drawText('System Font Test ', cameraPos.add(vec2(0,3)), .2, true);
+    font.drawText('System Font Test', cameraPos.add(vec2(0,3)), .2, true);
 
-    for(let j=1; j<4; j++)
+    // show every character in the system font
+    let s = '';
+    for(let i=32; i<128; ++i)
     {
-        let s = '';
-        for(let i=0; i<32; ++i)
-            s += String.fromCharCode(32*j + i);
-        font.drawText(s, cameraPos.add(vec2(0,1-j)), .1, true);
+        if (i%32 == 0)
+            s += '\n';
+        s += String.fromCharCode(i);
     }
-}
-
+    font.drawText(s, cameraPos, .1, true);
+}

package/shortExamples/code/tileLayer.js

@@ -34,7 +34,7 @@ function gameUpdate()
     {
         // create particle emitter
         const hue = rand();
-        let particleEmitter = new ParticleEmitter(
+        const particleEmitter = new ParticleEmitter(
             mousePos, 0,                // emitPos, emitAngle
             0, 0.1, 500, PI,            // emitSize, emitTime, emitRate, emitCone
             tile(0, 16),                // tileIndex, tileSize

package/shortExamples/code/timers.js

@@ -0,0 +1,36 @@
+class TimerButton extends EngineObject
+{
+    constructor(pos, time)
+    {
+        super(pos, vec2(5.5));
+        this.time = time;
+        this.timer = new Timer;
+    }
+
+    update()
+    {
+        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
+            this.timer.isSet() ? this.timer.unset() : this.timer.set(this.time);
+    }
+
+    render()
+    {
+        this.color = this.timer.isSet() ? this.timer.active() ? BLUE : RED : GRAY;
+        drawRect(this.pos, this.size, this.color);
+        if (this.timer.isSet())
+        {
+            drawTextOverlay(this.timer.get().toFixed(1), this.pos.add(vec2(0,1)), 2);
+            const percent = this.timer.getPercent()*100|0;
+            drawTextOverlay(percent+'%', this.pos.add(vec2(0,-1)), 2);
+        }
+        else
+            drawTextOverlay('Click\nto set', this.pos, 2);
+    }
+}
+
+function gameInit()
+{
+    new TimerButton(vec2(-7, 0), 3);
+    new TimerButton(vec2( 0, 0), 1);
+    new TimerButton(vec2( 7, 0), 0);
+}

package/shortExamples/index.html

@@ -44,7 +44,7 @@ iframe
 }
 #textareaError
 {
-    flex-grow: 1;
+    flex-grow: .3;
     padding: 5px;
     resize: none;
     display: none;
@@ -108,12 +108,16 @@ const exampleList =
 [
     new ExampleInfo('Hello World', 'helloWorld.js', 'Simplest example'),
     new ExampleInfo('Shapes', 'shapes.js', 'How to draw geometric shapes'),
+    new ExampleInfo('Colors', 'colors.js', 'How to use the color object'),
     new ExampleInfo('Blending', 'blending.js', 'Shows different blending modes'),
+    new ExampleInfo('Timers', 'timers.js', 'How to use the timer object'),
     new ExampleInfo('Texture', 'texture.js', 'How to display a full texture'),
     new ExampleInfo('Particles', 'particles.js', 'How to use the particle system'),
     new ExampleInfo('Play Sound', 'playSound.js', 'How to play sounds with zzfx'),
     new ExampleInfo('System Font', 'systemFont.js', 'Demo of the included system font'),
     new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'How to set up a simple sprite atlas'),
+    new ExampleInfo('Animation', 'animation.js', 'How to animate sprites'),
+    new ExampleInfo('Clock', 'clock.js', 'A simple clock showing the time'),
     new ExampleInfo('Tile Layer', 'tileLayer.js', 'How to use a tile layer for collision and rendering'),
     new ExampleInfo('Pong Game', 'pong.js', 'A simple pong game using LittleJS physics'),
     
@@ -226,7 +230,7 @@ function setCode(code)
             return; // stop if script error
         
         // start LittleJS engine
-        iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png']);
+        iframeContent.engineInit(iframeContent.gameInit, iframeContent.gameUpdate, iframeContent.gameUpdatePost, iframeContent.gameRender, iframeContent.gameRenderPost, ['tiles.png?1']);
     }
     iframeExample.src = 'base.html';
 }

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.11.5';
+const engineVersion = '1.11.6';
 
 /** Frames per second to update
  *  @type {Number}

package/src/engineDraw.js

@@ -458,7 +458,10 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     context.lineJoin = 'round';
 
     pos = pos.copy();
-    (text+'').split('\n').forEach(line=>
+
+    const lines = (text+'').split('\n');
+    pos.y -= (lines.length-1) * size/2; // center text vertically
+    lines.forEach(line=>
     {
         lineWidth && context.strokeText(line, pos.x, pos.y, maxWidth);
         context.fillText(line, pos.x, pos.y, maxWidth);

package/src/engineObject.js

@@ -338,19 +338,19 @@ class EngineObject
 
     /** Convert from local space to world space
      *  @param {Vector2} pos - local space point */
-    localToWorld(pos) { return this.pos.add(pos.rotate(-this.angle)); }
+    localToWorld(pos) { return this.pos.add(pos.rotate(this.angle)); }
 
     /** Convert from world space to local space
      *  @param {Vector2} pos - world space point */
-    worldToLocal(pos) { return pos.subtract(this.pos).rotate(this.angle); }
+    worldToLocal(pos) { return pos.subtract(this.pos).rotate(-this.angle); }
 
     /** Convert from local space to world space for a vector (rotation only)
      *  @param {Vector2} vec - local space vector */
-    localToWorldVector(vec) { return vec.rotate(this.angle); }
+    localToWorldVector(vec) { return vec.rotate(-this.angle); }
 
     /** Convert from world space to local space for a vector (rotation only)
      *  @param {Vector2} vec - world space vector */
-    worldToLocalVector(vec) { return vec.rotate(-this.angle); }
+    worldToLocalVector(vec) { return vec.rotate(this.angle); }
     
     /** Called to check if a tile collision should be resolved
      *  @param {Number}  tileData - the value of the tile at the position

package/src/engineUtilities.js

@@ -482,7 +482,7 @@ class Vector2
     rotate(angle)
     { 
         const c = Math.cos(angle), s = Math.sin(angle); 
-        return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
+        return new Vector2(this.x*c + this.y*s, this.x*s + this.y*c);
     }
 
     /** Set the integer direction of this vector, corresponding to multiples of 90 degree rotation (0-3)
@@ -914,7 +914,7 @@ class Timer
 
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {Number} */
-    getPercent() { return this.isSet()? percent(this.time - time, this.setTime, 0) : 0; }
+    getPercent() { return this.isSet()? 1-percent(this.time - time, 0, this.setTime) : 0; }
     
     /** Returns this timer expressed as a string
      * @return {String} */