littlejsengine 1.14.9 → 1.14.11

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.9';
+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} */
@@ -1932,6 +1939,12 @@ let touchGamepadEnable = false;
  *  @memberof Settings */
 let touchGamepadAnalog = true;
 
+/** Number of buttons on touch gamepad
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let touchGamepadButtonCount = 4;
+
 /** Size of virtual gamepad for touch devices in pixels
  *  @type {number}
  *  @default
@@ -3962,7 +3975,7 @@ function inputInit()
     function onMouseLeave()
     {
         // set mouse position and delta when leaving canvas
-        mousePosScreen = vec2(Infinity);
+        mousePosScreen = vec2(-1);
         mouseDeltaScreen = vec2(0);
     }
 }
@@ -4017,10 +4030,12 @@ function gamepadsUpdate()
         const data = inputData[1] || (inputData[1] = []);
         for (let i=10; i--;)
         {
-            const j = i === 3 ? 2 : i === 2 ? 3 : i; // fix button locations
-            const wasDown = gamepadIsDown(j,0);
-            data[j] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
+            const wasDown = gamepadIsDown(i,0);
+            data[i] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
         }
+
+        // disable normal gamepads when touch gamepad is active
+        return;
     }
 
     // return if gamepads are disabled or not supported
@@ -4095,6 +4110,15 @@ const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
 // touch gamepad internal variables
 let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2();
 
+function touchGamepadButtonCenter()
+{
+    // draw right face buttons
+    let center = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    if (touchGamepadButtonCount <= 2)
+        center.x += touchGamepadSize/2;
+    return center;
+}
+
 // enable touch input mouse passthrough
 function touchInputInit()
 {
@@ -4142,8 +4166,8 @@ function touchInputInit()
         // set was touching
         wasTouching = touching;
 
-        // prevent default handling like copy and magnifier lens
-        if (inputPreventDefault && document.hasFocus()) // allow document to get focus
+        // prevent default handling like copy, magnifier lens, and scrolling
+        if (inputPreventDefault && document.hasFocus() && e.cancelable)
             e.preventDefault();
 
         // must return true so the document will get focus
@@ -4172,25 +4196,36 @@ function touchInputInit()
 
         // get center of left and right sides
         const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-        const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
+        const buttonCenter = touchGamepadButtonCenter();
         const startCenter = mainCanvasSize.scale(.5);
 
         // check each touch point
         for (const touch of e.touches)
         {
             const touchPos = mouseEventToScreen(vec2(touch.clientX, touch.clientY));
-            if (touchPos.distance(stickCenter) < touchGamepadSize)
+            if (stickCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual analog stick
                 touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
             }
-            else if (touchPos.distance(buttonCenter) < touchGamepadSize)
+            else if (buttonCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual face buttons
-                const button = touchPos.subtract(buttonCenter).direction();
-                touchGamepadButtons[button] = 1;
+                let button = buttonCenter.subtract(touchPos).direction();
+                button = mod(button+2, 4);
+                if (touchGamepadButtonCount === 1)
+                    button = 0;
+                else if (touchGamepadButtonCount === 2)
+                {
+                    const delta = buttonCenter.subtract(touchPos);
+                    button = -delta.x < delta.y ? 1 : 0;
+                }
+                // fix button locations (swap 2 and 3 to match gamepad layout)
+                button = button === 3 ? 2 : button === 2 ? 3 : button;
+                if (button < touchGamepadButtonCount)
+                    touchGamepadButtons[button] = 1;
             }
-            else if (touchPos.distance(startCenter) < touchGamepadSize && !wasTouching)
+            else if (startCenter.distance(touchPos) < touchGamepadSize && !wasTouching)
             {
                 // virtual start button in center
                 touchGamepadButtons[9] = 1;
@@ -4221,11 +4256,10 @@ function touchGamepadRender()
     // draw left analog stick
     context.fillStyle = touchGamepadStick.lengthSquared() > 0 ? '#fff' : '#000';
     context.beginPath();
-
-    const leftCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     if (touchGamepadAnalog) // draw circle shaped gamepad
     {
-        context.arc(leftCenter.x, leftCenter.y, touchGamepadSize/2, 0, 9);
+        context.arc(stickCenter.x, stickCenter.y, touchGamepadSize/2, 0, 9);
         context.fill();
         context.stroke();
     }
@@ -4234,21 +4268,27 @@ function touchGamepadRender()
         for (let i=10; i--;)
         {
             const angle = i*PI/4;
-            context.arc(leftCenter.x, leftCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
-            i%2 && context.arc(leftCenter.x, leftCenter.y, touchGamepadSize*.33, angle, angle);
+            context.arc(stickCenter.x, stickCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
+            i%2 && context.arc(stickCenter.x, stickCenter.y, touchGamepadSize*.33, angle, angle);
             i===1 && context.fill();
         }
         context.stroke();
     }
 
     // draw right face buttons
-    const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-    for (let i=4; i--;)
-    {
-        const pos = rightCenter.add(vec2().setDirection(i, touchGamepadSize/2));
-        context.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
+    const buttonCenter = touchGamepadButtonCenter();
+    const buttonSize = touchGamepadButtonCount > 1 ? touchGamepadSize/4 : touchGamepadSize/2;
+    for (let i=0; i<touchGamepadButtonCount; i++)
+    {
+        let j = mod(i-1, 4);
+        let button = touchGamepadButtonCount > 2 ? 
+            j : min(j, touchGamepadButtonCount-1);
+        // fix button locations (swap 2 and 3 to match gamepad layout)
+        button = button === 3 ? 2 : button === 2 ? 3 : button;
+        const pos = buttonCenter.add(vec2().setDirection(j, touchGamepadSize/2));
+        context.fillStyle = touchGamepadButtons[button] ? '#fff' : '#000';
         context.beginPath();
-        context.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);
+        context.arc(pos.x, pos.y, buttonSize, 0,9);
         context.fill();
         context.stroke();
     }
@@ -5038,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--;)
         {
@@ -5045,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
@@ -6939,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']];
@@ -6962,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;
@@ -7031,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);
     }
 }
@@ -7604,7 +7650,7 @@ class UIObject
         const mouseDown = mouseIsDown(0);
         const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
         if (!uiSystem.hoverObject)
-        if (mousePress || !mouseDown || isActive)
+        if (mousePress || isActive || (!mouseDown && !isTouchDevice))
         {
             const size = this.size.add(vec2(isTouchDevice && this.extraTouchSize || 0));
             if (isOverlapping(this.pos, size, mousePosScreen))
@@ -9631,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/blending.js

@@ -1,4 +1,4 @@
-// use smoother textures
+// use smooth blending
 setCanvasPixelated(false);
 setTilesPixelated(false);
 

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
+        );
     }
 }