littlejsengine 1.14.10 → 1.14.11

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.10';
+const engineVersion = '1.14.11';
 
 /** Frames per second to update
  *  @type {number}
@@ -122,12 +122,12 @@ function engineAddPlugin(updateFunction, renderFunction)
  *  @example
  *  // Basic engine startup
  *  engineInit(
- *    () => { console.log('Game initialized!'); },  // gameInit
- *    () => { updateGameLogic(); },                 // gameUpdate
- *    () => { updateUI(); },                        // gameUpdatePost
- *    () => { drawBackground(); },                  // gameRender
- *    () => { drawHUD(); },                         // gameRenderPost
- *    ['tiles.png', 'tilesLevel.png']               // images to load
+ *    () => { LOG('Game initialized!'); },  // gameInit
+ *    () => { updateGameLogic(); },         // gameUpdate
+ *    () => { updateUI(); },                // gameUpdatePost
+ *    () => { drawBackground(); },          // gameRender
+ *    () => { drawHUD(); },                 // gameRenderPost
+ *    ['tiles.png', 'tilesLevel.png']       // images to load
  *  );
  *  @memberof Engine */
 async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
@@ -173,16 +173,20 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         if (!debugSpeedUp)
             frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp min framerate
 
+        let wasUpdated = false;
         if (paused)
         {
+            // update everything except the game and objects
+            wasUpdated = true;
             updateCanvas();
+            inputUpdate();
+            pluginUpdateList.forEach(f=>f());
 
             // update object transforms even when paused
             for (const o of engineObjects)
                 o.parent || o.updateTransforms();
 
-            inputUpdate();
-            pluginUpdateList.forEach(f=>f());
+            // do post update
             debugUpdate();
             gameUpdatePost();
             inputUpdatePost();
@@ -199,12 +203,13 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             }
 
             // update multiple frames if necessary in case of slow framerate
-            for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
+            for (; frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
             {
                 // increment frame and update time
                 time = frame++ / frameRate;
 
                 // update game and objects
+                wasUpdated = true;
                 updateCanvas();
                 inputUpdate();
                 gameUpdate();
@@ -215,7 +220,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 debugUpdate();
                 gameUpdatePost();
                 inputUpdatePost();
-
                 if (debugVideoCaptureIsActive())
                     renderFrame();
             }
@@ -232,6 +236,10 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         {
             if (headlessMode) return;
 
+            // canvas must be updated before rendering
+            if (!wasUpdated)
+                updateCanvas();
+
             // render sort then render while removing destroyed objects
             enginePreRender();
             gameRender();
@@ -391,7 +399,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         promises.push(new Promise(resolve =>
         {
             let t = 0;
-            console.log(`${engineName} Engine v${engineVersion}`);
+            LOG(`${engineName} Engine v${engineVersion}`);
             updateSplash();
             function updateSplash()
             {
@@ -690,6 +698,7 @@ const debugMedals = 0;
 
 // debug commands are automatically removed from the final build
 function ASSERT          (){}
+function LOG             (){}
 function debugInit       (){}
 function debugUpdate     (){}
 function debugRender     (){}
@@ -927,7 +936,12 @@ function wave(frequency=1, amplitude=1, t=time, offset=0)
  *  @param {number} t - time in seconds
  *  @return {string}
  *  @memberof Utilities */
-function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
+function formatTime(t)
+{
+    const sign = t < 0 ? '-' : '';
+    t = abs(t)|0;
+    return sign + (t/60|0) + ':' + (t%60<10?'0':'') + t%60;
+}
 
 /** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
  *  @param {string} url - URL of JSON file
@@ -1263,11 +1277,7 @@ class Vector2
     direction()
     { return abs(this.x) > abs(this.y) ? this.x < 0 ? 3 : 1 : this.y < 0 ? 2 : 0; }
 
-    /** Returns a copy of this vector that has been inverted
-     * @return {Vector2} */
-    invert() { return new Vector2(this.y, -this.x); }
-
-    /** Returns a copy of this vector absolute values
+    /** Returns a copy of this vector with absolute values
      * @return {Vector2} */
     abs() { return new Vector2(abs(this.x), abs(this.y)); }
 
@@ -1309,13 +1319,10 @@ class Vector2
     toString(digits=3)
     {
         ASSERT_NUMBER_VALID(digits);
-        if (debug)
-        {
-            if (this.isValid())
-                return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`;
-            else
-                return `(${this.x}, ${this.y})`;
-        }
+        if (this.isValid())
+            return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`;
+        else
+            return `(${this.x}, ${this.y})`;
     }
 
     /** Checks if this is a valid vector
@@ -1704,7 +1711,7 @@ class Timer
 
     /** Returns this timer expressed as a string
      * @return {string} */
-    toString() { if (debug) { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }}
+    toString() { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }
 
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {number} */
@@ -5071,6 +5078,12 @@ function tileCollisionLoad(tileMapData, tileInfo=tile(), renderOrder=0, collisio
         const tileLayer = new TileCollisionLayer(vec2(), levelSize, tileInfo, layerRenderOrder);
         tileLayers[layerIndex] = tileLayer;
 
+        // apply layer color
+        const layerColor = dataLayer.color || WHITE;
+        if (dataLayer.tintcolor)
+            layerColor.setHex(dataLayer.tintcolor);
+        ASSERT(isColor(layerColor), 'layer color is not a color');
+
         for (let x=levelSize.x; x--;)
         for (let y=levelSize.y; y--;)
         {
@@ -5078,7 +5091,7 @@ function tileCollisionLoad(tileMapData, tileInfo=tile(), renderOrder=0, collisio
             const data = dataLayer.data[x + y*levelSize.x];
             if (data)
             {
-                const layerData = new TileLayerData(data-1);
+                const layerData = new TileLayerData(data-1, 0, false, layerColor);
                 tileLayer.setData(pos, layerData);
 
                 // set collision for top layer
@@ -6972,7 +6985,7 @@ class NewgroundsPlugin
         // get medals
         const medalsResult = this.call('Medal.getList');
         this.medals = medalsResult ? medalsResult.result.data['medals'] : [];
-        debugMedals && console.log(this.medals);
+        debugMedals && LOG(this.medals);
         for (const newgroundsMedal of this.medals)
         {
             const medal = medals[newgroundsMedal['id']];
@@ -6995,7 +7008,7 @@ class NewgroundsPlugin
         // get scoreboards
         const scoreboardResult = this.call('ScoreBoard.getBoards');
         this.scoreboards = scoreboardResult ? scoreboardResult.result.data.scoreboards : [];
-        debugMedals && console.log(this.scoreboards);
+        debugMedals && LOG(this.scoreboards);
 
         // keep the session alive with a ping every minute
         const keepAliveMS = 60 * 1e3;
@@ -7064,10 +7077,10 @@ class NewgroundsPlugin
         try { xmlHttp.send(formData); }
         catch(e)
         {
-            debugMedals && console.log('newgrounds call failed', e);
+            debugMedals && LOG('newgrounds call failed', e);
             return;
         }
-        debugMedals && console.log(xmlHttp.responseText);
+        debugMedals && LOG(xmlHttp.responseText);
         return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
     }
 }
@@ -9664,7 +9677,7 @@ async function box2dInit()
     }
     function box2dRender()
     {
-        if (box2dDebug || debugPhysics && debugOverlay)
+        if (box2dDebug || debugPhysics)
             box2d.world.DrawDebugData();
     }
     

package/examples/index.html

@@ -53,7 +53,7 @@ Theme:
 
 class ExampleInfo
 {
-    constructor(name, filename, description='', largeExample=false)
+    constructor(name, filename, description='', largeExample=false, tags='')
     {
         if (filename && !largeExample)
             filename = 'shorts/' + filename;
@@ -61,62 +61,66 @@ class ExampleInfo
         this.filename = filename;
         this.description = description;
         this.largeExample = largeExample;
+        this.tags = tags;
         this.isHeading = !filename;
         this.text = this.name;
         if (this.description)
             this.text += ' - ' + this.description;
+        this.selectText = this.text;
+        if (this.tags)
+            this.selectText += ' (' + this.tags + ')';
     }
 }
 
 const exampleList = 
 [
     new ExampleInfo('--- SHORT EXAMPLES ---'),
-    new ExampleInfo('Hello World', 'helloWorld.js', 'Minimal starter example'),
-    new ExampleInfo('Texture', 'texture.js', 'Texture display and manipulation'),
-    new ExampleInfo('Animation', 'animation.js', 'Sprite animation system'),
-    new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes and primitives'),
-    new ExampleInfo('Colors', 'colors.js', 'Color manipulation and HSL'),
-    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield'),
-    new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'Sprite atlas and tile rendering'),
-    new ExampleInfo('Blending', 'blending.js', 'Additive blending and transparency'),
-    new ExampleInfo('Tile Layer', 'tileLayer.js', 'Tile layer rendering system'),
-    new ExampleInfo('Particles', 'particles.js', 'Particle system'),
-    new ExampleInfo('Timers', 'timers.js', 'Timer objects and UI'),
-    new ExampleInfo('Sound Effects', 'sound.js', 'ZzFX sound effect generator'),
-    new ExampleInfo('Music', 'music.js', 'Music playback and controls'),
-    new ExampleInfo('Font Image', 'systemFont.js', 'Bitmap font system with built-in system font'),
-    new ExampleInfo('Parallax', 'parallax.js', 'Parallax scrolling mountains'),
-    new ExampleInfo('Maze Generator', 'maze.js', 'Procedural maze generation'),
-    new ExampleInfo('Medals', 'medals.js', 'Achievement system'),
-    new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard'),
-    new ExampleInfo('Clock', 'clock.js', 'Animated analog clock'),
+    new ExampleInfo('Hello World', 'helloWorld.js', 'Minimal starter example', false, 'beginner, gradient, text, tiles'),
+    new ExampleInfo('Texture', 'texture.js', 'Texture display and manipulation', false, 'sprites, loading, tiles'),
+    new ExampleInfo('Animation', 'animation.js', 'Sprite animation system', false, 'frames, loop, tiles, sprites'),
+    new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes and primitives', false, 'circle, ellipses, rectangles, polygon, lines'),
+    new ExampleInfo('Colors', 'colors.js', 'Color manipulation and HSL', false, 'hue, saturation, blending, rectangles'),
+    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield', false, 'space, movement, depth, rectangles'),
+    new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'Sprite atlas and tile rendering', false, 'sheet, frames, tiles'),
+    new ExampleInfo('Blending', 'blending.js', 'Additive blending and transparency', false, 'alpha, color, tiles, smooth'),
+    new ExampleInfo('Tile Layer', 'tileLayer.js', 'Tile layer rendering system', false, 'level, map, grid, particles'),
+    new ExampleInfo('Particles', 'particles.js', 'Particle system', false, 'effects, emitter, physics, fire, smoke'),
+    new ExampleInfo('Timers', 'timers.js', 'Timer objects and UI', false, 'delay, interval, slider'),
+    new ExampleInfo('Sound Effects', 'sound.js', 'ZzFX sound effect generator', false, 'audio, volume, ui'),
+    new ExampleInfo('Music', 'music.js', 'Music playback and controls', false, 'audio, streaming, volume, ui'),
+    new ExampleInfo('Font Image', 'systemFont.js', 'Bitmap font system with built-in system font', false, 'text, characters'),
+    new ExampleInfo('Parallax', 'parallax.js', 'Parallax scrolling mountains', false, 'generative, canvas, background'),
+    new ExampleInfo('Maze Generator', 'maze.js', 'Procedural maze generation', false, 'generative, level, tiles, map, grid'),
+    new ExampleInfo('Medals', 'medals.js', 'Achievement system', false, 'unlock, progress, newgrounds'),
+    new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard', false, 'music, notes, ui, instrument'),
+    new ExampleInfo('Clock', 'clock.js', 'Animated analog clock', false, 'time, rotation, lines, rectangles'),
     new ExampleInfo('--- MINI GAMES ---'),
-    new ExampleInfo('Pong Game', 'pongGame.js', 'Classic paddle ball bouncing'),
-    new ExampleInfo('Platformer Game', 'platformer.js', 'Jump and run side view'),
-    new ExampleInfo('Top Down Game', 'topDown.js', 'Top-down style camera'),
-    new ExampleInfo('Tilted View Game', 'tiltedView.js', 'Pseudo-3D oblique view'),
-    new ExampleInfo('Flappy Game', 'flappyGame.js', 'Flappy bird style game'),
-    new ExampleInfo('Lander Game', 'landerGame.js', 'Lunar lander style game'),
-    new ExampleInfo('Hill Glide Game', 'hillGlideGame.js', 'Tiny wings style sliding game'),
-    new ExampleInfo('Sliding Puzzle', 'slidingPuzzle.js', '15 tile sliding puzzle'),
-    new ExampleInfo('Space Game', 'spaceGame.js', 'Spaceship shooter with parallax'),
-    new ExampleInfo('Raycasting 3D Game', 'raycasting.js', 'Wolfenstein-style raycasting'),
+    new ExampleInfo('Pong Game', 'pongGame.js', 'Classic paddle ball bouncing', false, 'objects, collision'),
+    new ExampleInfo('Platformer Game', 'platformer.js', 'Jump and run side view', false, 'objects, gravity, level, tiles, camera'),
+    new ExampleInfo('Top Down Game', 'topDown.js', 'Top-down style camera', false, 'objects, movement, exploration'),
+    new ExampleInfo('Tilted View Game', 'tiltedView.js', 'Pseudo-3D oblique view', false, 'isometric, depth'),
+    new ExampleInfo('Flappy Game', 'flappyGame.js', 'Flappy bird style game', false, 'objects, obstacles'),
+    new ExampleInfo('Lander Game', 'landerGame.js', 'Lunar lander style game', false, 'objects, physics'),
+    new ExampleInfo('Hill Glide Game', 'hillGlideGame.js', 'Tiny wings style sliding game', false, 'objects, physics, speed'),
+    new ExampleInfo('Sliding Puzzle', 'slidingPuzzle.js', '15 tile sliding puzzle', false, 'objects, numbers, ui'),
+    new ExampleInfo('Space Game', 'spaceGame.js', 'Spaceship shooter with parallax', false, 'objects, weapons, stars, camera, rotation'),
+    new ExampleInfo('Raycasting 3D Game', 'raycasting.js', 'Pseudo 3D raycasting demo', false, '3D, maze, camera'),
     new ExampleInfo('--- PLUGINS ---'),
-    new ExampleInfo('Box2d Demo', 'box2d.js', 'Box2D physics plugin'),
-    new ExampleInfo('Box2d Car', 'box2dCar.js', 'Drivable car with Box2D physics'),
-    new ExampleInfo('Post Processing', 'postProcess.js', 'Shader effects and filters'),
-    new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Buttons, sliders, and checkboxes'),
-    new ExampleInfo('Nine Slice', 'nineSlice.js', 'Scalable UI panels'),
+    new ExampleInfo('Box2d Demo', 'box2d.js', 'Box2D physics plugin', false, 'objects, mouse'),
+    new ExampleInfo('Box2d Car', 'box2dCar.js', 'Drivable car with Box2D physics', false, 'objects, vehicle, suspension, wheels'),
+    new ExampleInfo('Post Processing', 'postProcess.js', 'Shader effects and filters', false, 'webgl, visual, effect'),
+    new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Buttons, sliders, and checkboxes', false, 'objects, widgets, interactive'),
+    new ExampleInfo('Nine Slice', 'nineSlice.js', 'Scalable UI panels', false, 'three slice, stretch, corners, text, tiles'),
     new ExampleInfo('--- FULL EXAMPLES ---'),
-    new ExampleInfo('Starter', 'starter', 'Clean project template', true),
-    new ExampleInfo('Breakout Tutorial', 'breakoutTutorial', 'Step-by-step breakout tutorial', true),
-    new ExampleInfo('Breakout Game', 'breakout', 'Complete breakout game', true),
-    new ExampleInfo('Platforming Game', 'platformer', 'Full platformer with levels', true),
-    new ExampleInfo('Puzzle Game', 'puzzle', 'Match-3 puzzle game', true),
-    new ExampleInfo('Stress Test', 'stress', 'Performance and music test', true),
-    new ExampleInfo('Box2D Plugin', 'box2d', 'Full Box2D physics demo', true),
-    new ExampleInfo('HTML Menus', 'htmlMenu', 'HTML UI integration', true),
-    new ExampleInfo('UI System Plugin', 'uiSystem', 'Complete UI system demo', true),
+    new ExampleInfo('Starter', 'starter', 'Clean project template', true, 'base, empty, particles'),
+    new ExampleInfo('Breakout Tutorial', 'breakoutTutorial', 'Step-by-step breakout game tutorial', true, 'objects, physics, score'),
+    new ExampleInfo('Breakout Game', 'breakout', 'Complete breakout game', true, 'objects, physics, score'),
+    new ExampleInfo('Platforming Game', 'platformer', 'Platformer with level loading', true, 'jump, world, tiles, pixel art, sprites'),
+    new ExampleInfo('Puzzle Game', 'puzzle', 'Match 3 style puzzle game', true, 'match, swap, sprites'),
+    new ExampleInfo('Stress Test', 'stress', 'Performance and music test', true, 'optimization, tiles, sprites'),
+    new ExampleInfo('Box2D Plugin', 'box2d', 'Full Box2D physics demo', true, 'objects, bodies, joints'),
+    new ExampleInfo('HTML Menus', 'htmlMenu', 'HTML UI integration', true, 'web, browser, overlay, button, slider, textbox'),
+    new ExampleInfo('UI System Plugin', 'uiSystem', 'Complete UI system demo', true, 'menu, overlay, button, slider, checkbox'),
 ];
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -313,9 +317,10 @@ function filterExamples(reset=0)
         if (!example.filename)
             continue;
             
-        // Check if search term matches name or description
+        // Check if search term matches name, description, or tags
         if (example.name.toLowerCase().includes(searchTerm) || 
-            example.description.toLowerCase().includes(searchTerm))
+            example.description.toLowerCase().includes(searchTerm) ||
+            example.tags.toLowerCase().includes(searchTerm))
             matchingIndices.push(i);
     }
     
@@ -345,7 +350,7 @@ function filterExamples(reset=0)
         else if (matchingIndices.includes(i))
         {
             // add matching example
-            const o = new Option(example.text);
+            const o = new Option(example.selectText);
             o.originalIndex = i;
             selectExample.add(o);
         }

package/examples/platformer/gameCharacter.js

@@ -22,10 +22,9 @@ const {vec2, hsl, Timer} = LJS;
 export class Character extends GameObjects.GameObject 
 {
     constructor(pos)
-    { 
+    {
         super(pos, vec2(.6,.95));
 
-        this.weapon = new GameObjects.Weapon(pos, this);
         this.lastPos = pos;
         this.groundTimer        = new Timer;
         this.jumpTimer          = new Timer;
@@ -41,6 +40,11 @@ export class Character extends GameObjects.GameObject
         this.health = 1;
         this.climbingLadder = false;
         this.setCollision(true,false);
+        
+        // attach weapon
+        this.weapon = new GameObjects.Weapon(pos);
+        this.weapon.renderOrder = this.renderOrder + 1;
+        this.addChild(this.weapon, vec2(this.size.x,0));
     }
     
     update() 

package/examples/platformer/gameLevel.js

@@ -50,7 +50,7 @@ function loadLevelData()
 {
     // load the level data
     const tileMapData = Game.gameLevelData;
-    tileLayers = LJS.tileCollisionLoad(tileMapData, tile(0,16,1));
+    tileLayers = LJS.tileCollisionLoad(tileMapData, tile(0,16,1), 0, 1);
     levelSize = tileLayers[0].size;
     playerStartPos = vec2(0, levelSize.y); // default player start
     foregroundTileLayer = tileLayers[0];

package/examples/platformer/gameObjects.js

@@ -101,10 +101,14 @@ export class Coin extends LJS.EngineObject
 
     render()
     {
+        // side of coin
+        LJS.drawTile(this.pos, vec2(.1, .6), 0, this.color);
+
         // make it appear to spin
         const t = LJS.time+this.pos.x/4+this.pos.y/4;
-        LJS.drawTile(this.pos, vec2(.1, .6), 0, this.color); // edge of coin
-        LJS.drawTile(this.pos, vec2(.5+.5*Math.sin(t*2*LJS.PI), 1), this.tileInfo, this.color);
+        const spinSize = vec2(.5+.5*Math.sin(t*2*LJS.PI), 1);
+        if (spinSize.x > .1)
+        LJS.drawTile(this.pos, spinSize, this.tileInfo, this.color);
     }
 
     update()
@@ -227,7 +231,7 @@ export class Grenade extends GameObject
 
 export class Weapon extends LJS.EngineObject 
 {
-    constructor(pos, parent) 
+    constructor(pos) 
     { 
         super(pos, vec2(.6), Game.spriteAtlas.gun);
 
@@ -238,10 +242,8 @@ export class Weapon extends LJS.EngineObject
         this.damage        = 1;
 
         // prepare to fire
-        this.renderOrder = parent.renderOrder + 1;
         this.fireTimeBuffer = this.localAngle = 0;
         this.recoilTimer = new Timer;
-        parent.addChild(this, vec2(.6,0));
 
         // shell effect
         this.addChild(this.shellEmitter = new LJS.ParticleEmitter(

package/examples/shorts/landerGame.js

@@ -4,14 +4,38 @@ class Player extends EngineObject
     {
         super(pos, vec2(1,2), tile(8), 0, RED);
         this.setCollision(); // make object collide
+        this.angleDamping = .95;
     }
 
     update()
     {
         super.update();
+        
+        // space ship controls
+        const moveInput = keyDirection();
+        this.applyAngularAcceleration(moveInput.x * .002);
+        this.applyAcceleration(vec2().setAngle(this.angle, moveInput.y*.002));
+    }
+
+    // explode when it collides
+    collideWithObject()
+    {
+        // don't explode if player is almost still and not tilted
+        if (abs(this.angle) < .2)
+        if (this.velocity.length() < .05)
+            return true;
 
-        // apply movement controls
-        this.applyAcceleration(keyDirection().scale(.002));
+        this.destroy();
+        new ParticleEmitter(
+            this.pos, 0,      // pos, angle
+            1, .1, 300, 3.14, // emitSize, emitTime, emitRate, emitCone
+            0,                              // tileInfo
+            rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
+            rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
+            .7, .8, .2, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
+            .9, 1, -.2, 3.14, .05, // damp, angleDamp, gravity, particleCone, fade
+            1, 0, 1               // randomness, collide, additive
+        );
     }
 }
 

package/examples/shorts/music.js

@@ -48,7 +48,6 @@ function gameInit()
 
     // stop button
     stopButton = new UIButton(vec2(90, 30), vec2(140, 50), 'Stop');
-    musicPlayer.addChild(stopButton);
     stopButton.onClick = ()=>
     {
         if (!musicInstance)
@@ -57,10 +56,11 @@ function gameInit()
         // stop sound
         musicInstance.stop();
     };
+    musicPlayer.addChild(stopButton);
 
     // progress bar and scrollbar for seeking
     progressBar = new UIScrollbar(vec2(0, 100), vec2(400, 30), 0, 'Progress');
-    musicPlayer.addChild(progressBar);
+    progressBar.disabledColor = RED;
     progressBar.onChange = ()=> 
     {
         // control music seek position
@@ -73,6 +73,7 @@ function gameInit()
         if (!wasPlaying)
             musicInstance.pause();
     };
+    musicPlayer.addChild(progressBar);
 }
 
 function gameUpdate()

package/examples/shorts/particles.js

@@ -4,7 +4,7 @@ function gameInit()
 
     // fire
     new ParticleEmitter(
-        vec2(-5,-2), 0,                 // pos, angle
+        vec2(-5,-2), 0,                  // pos, angle
         2, 0, 200, PI,                  // emitSize, emitTime, emitRate, emitCone
         tile(0),                        // tileInfo
         rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
@@ -16,7 +16,7 @@ function gameInit()
     
     // smoke
     new ParticleEmitter(
-        vec2(-5,-2), 0,               // pos, angle
+        vec2(5,-2), 0,               // pos, angle
         3, 0, 100, PI,                // emitSize, emitTime, emitRate, emitCone
         tile(0),                      // tileInfo
         hsl(0,0,0,.5), hsl(0,0,1,.5), // colorStartA, colorStartB

package/examples/shorts/raycasting.js

@@ -31,7 +31,10 @@ function gameUpdate()
         playerAngle += mouseDelta.x * .003;
 
     // update player movement, prevent walking through walls
-    const velocity = keyDirection().scale(.1).rotate(playerAngle);
+    let velocity = keyDirection();
+    if (velocity.y && mouseIsDown(0))
+        velocity.y = 1; // forward movement with mouse
+    velocity = velocity.rotate(playerAngle).scale(.1);
     const newPos = playerPos.add(velocity);
     if (!levelTest(newPos.x, newPos.y))
         playerPos = newPos;

package/examples/shorts/slidingPuzzle.js

@@ -6,27 +6,35 @@ class PuzzlePiece extends EngineObject
 {
     constructor(gridPos, size)
     {
-        const color = rgb(gridPos.x/(gridSize.x-1), gridPos.y/(gridSize.y-1), 1);
+        const x = gridPos.x, y = gridPos.y;
+        const color = rgb(x/(gridSize.x-1), y/(gridSize.y-1), 1);
         super(gridPos.multiply(size), size, 0, 0, color);
         this.gridPos = gridPos;
-        this.text = gridPos.x + gridPos.y*gridSize.x;
+        this.text = x + y*gridSize.x;
+        this.moveTimer = new Timer;
+        this.lastPos = this.pos;
     }
 
     update()
     {
+        const deltaX = emptyGridPos.x - this.gridPos.x;
+        const deltaY = emptyGridPos.y - this.gridPos.y;
         if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
-        if (abs(this.gridPos.x-emptyGridPos.x) + abs(this.gridPos.y-emptyGridPos.y) == 1)
+        if (abs(deltaX) + abs(deltaY) === 1)
         {
             // swap with empty space when clicked on
+            this.lastPos = this.pos;
             this.pos = emptyGridPos.multiply(this.size);
             [emptyGridPos, this.gridPos] = [this.gridPos, emptyGridPos];
+            this.moveTimer.set(.2);
         }
     }
 
     render()
     {
-        super.render();
-        drawTextOverlay(this.text, this.pos, 2.5, BLACK);
+        const pos = this.lastPos.lerp(this.pos, this.moveTimer.getPercent());
+        drawRect(pos, this.size, this.color);
+        drawTextOverlay(this.text, pos, 2.5, BLACK);
     }
 }
 

package/examples/shorts/starfield.js

@@ -1,7 +1,7 @@
 function gameRender()
 {
     // precreate variables to avoid overhead
-    const pos = vec2(), size = vec2(), color = WHITE;
+    const pos = vec2(), size = vec2(), color = new Color;
     for (let i=2e3; i--;)
     {
         // use math to generate random star positions

package/examples/uiSystem/game.js

@@ -41,14 +41,14 @@ function createUI()
     uiMenu.addChild(uiBackground);
 
     // example large text
-    const textTitle = new LJS.UIText(vec2(0,-220), vec2(500, 90), 'Test Title');
+    const textTitle = new LJS.UIText(vec2(0,-220), vec2(500, 120), 'Test Title');
     uiMenu.addChild(textTitle);
     textTitle.textColor = LJS.RED;
     textTitle.lineWidth = 4;
     textTitle.lineColor = LJS.BLUE;
 
     // example multiline text
-    const textTest = new LJS.UIText(vec2(-60,-120), vec2(300, 50), 'Test Text\nSecond text line.')
+    const textTest = new LJS.UIText(vec2(-60,-120), vec2(350, 60), 'Test Text\nSecond text line.')
     uiMenu.addChild(textTest);
 
     // example tile image
@@ -63,7 +63,7 @@ function createUI()
     // example button
     const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
-    button1.onClick = ()=> console.log('Button 1 clicked');
+    button1.onClick = ()=> LOG('Button 1 clicked');
 
     // example checkbox
     const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
@@ -71,7 +71,7 @@ function createUI()
     checkbox.onChange = ()=> button1.disabled = checkbox.checked;
 
     // text attached to checkbox
-    const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
+    const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 60), 'Test Checkbox');
     checkbox.addChild(checkboxText);
 
     // exit button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.14.10",
+  "version": "1.14.11",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/box2d.js

@@ -1715,7 +1715,7 @@ async function box2dInit()
     }
     function box2dRender()
     {
-        if (box2dDebug || debugPhysics && debugOverlay)
+        if (box2dDebug || debugPhysics)
             box2d.world.DrawDebugData();
     }