npm - littlejsengine - Versions diffs - 1.16.2 → 1.17.5 - Mend

littlejsengine 1.16.2 → 1.17.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/littlejs.d.ts +291 -246
package/dist/littlejs.esm.js +1520 -1271
package/dist/littlejs.esm.min.js +1 -1
package/dist/littlejs.js +1178 -920
package/dist/littlejs.min.js +1 -1
package/dist/littlejs.release.js +1170 -912
package/examples/box2d/gameObjects.js +4 -4
package/examples/breakout/game.js +5 -6
package/examples/electron/index.html +2 -2
package/examples/electron/tiles.png +0 -0
package/examples/htmlMenu/tiles.png +0 -0
package/examples/index.html +9 -8
package/examples/logo.png +0 -0
package/examples/module/build.bat +7 -0
package/examples/module/build.js +121 -0
package/examples/module/tiles.png +0 -0
package/examples/platformer/game.js +1 -1
package/examples/platformer/gameEffects.js +25 -29
package/examples/platformer/gameLevel.js +27 -28
package/examples/puzzle/game.js +2 -2
package/examples/shorts/base.html +4 -1
package/examples/shorts/box2dPool.js +2 -2
package/examples/shorts/box2dTileLayer.js +48 -0
package/examples/shorts/clock.js +3 -3
package/examples/shorts/fontImage.js +4 -3
package/examples/shorts/music.js +2 -2
package/examples/shorts/musicPlayer.js +2 -2
package/examples/shorts/parallax.js +1 -1
package/examples/shorts/sequencer.js +1 -1
package/examples/shorts/shapes.js +1 -1
package/examples/shorts/texture.js +10 -6
package/examples/shorts/tiles.png +0 -0
package/examples/shorts/tiltedView.js +2 -0
package/examples/starter/index.html +2 -2
package/examples/starter/tiles.png +0 -0
package/examples/typescript/tiles.png +0 -0
package/examples/uiSystem/game.js +1 -1
package/examples/uiSystem/tiles.png +0 -0
package/package.json +5 -5
package/plugins/box2d.js +167 -63
package/plugins/postProcess.js +47 -28
package/plugins/uiSystem.js +18 -18
package/plugins/zzfxm.js +2 -2
package/reference.md +4 -3
package/src/engine.js +182 -181
package/src/engineAudio.js +47 -63
package/src/engineDebug.js +8 -8
package/src/engineDraw.js +184 -124
package/src/engineExport.js +325 -334
package/src/engineFont.png +0 -0
package/src/engineInput.js +18 -24
package/src/engineMath.js +24 -113
package/src/engineObject.js +27 -26
package/src/engineParticles.js +2 -2
package/src/engineTileLayer.js +229 -192
package/src/engineUtilities.js +100 -4
package/src/engineWebGL.js +124 -73

package/examples/box2d/gameObjects.js CHANGED Viewed

@@ -76,7 +76,7 @@ export function spawnRandomEdges()
     edgePoints.push(vec2(40,0));
     for (let i=40, y=0; i--;)
         edgePoints.push(vec2(i, y=LJS.clamp(y+LJS.rand(-2,2),0,5)));
-    edgePoints.push(vec2(0,0));
+    edgePoints.push(vec2());
     const o = new LJS.Box2dStaticObject;
     o.addEdgeList(edgePoints);
 }
@@ -126,7 +126,7 @@ export class CarObject extends LJS.Box2dObject
         const maxTorque   = 35;
         const sprite      = Game.spriteAtlas.wheel;
         this.wheels = [];
-        const makeWheel = (pos, isMotor) =>
+        const makeWheel = (pos, isMotor)=>
         {
             const wheel = new LJS.Box2dObject(pos, vec2(diameter), sprite);
             const joint = new LJS.Box2dWheelJoint(this, wheel);
@@ -284,7 +284,7 @@ export class SoftBodyObject extends LJS.Box2dObject
         for (let x=sizeCount.x; x--;)
         {
             const o = this.getNode(x, y);
-            const tryAddJoint = (xo, yo) =>
+            const tryAddJoint = (xo, yo)=>
             {
                 const o2 = this.getNode(x+xo, y+yo);
                 const joint = o2 ? new LJS.Box2dWeldJoint(o, o2) : 0;
@@ -360,7 +360,7 @@ export class ClothObject extends LJS.Box2dStaticObject
             const d = y%2 ? 1 : -1;
             const x2 = d>1 ? x : sizeCount.x-1-x;
             const o = this.getNode(x2, y);
-            const tryAddJoint = (xo, yo) =>
+            const tryAddJoint = (xo, yo)=>
             {
                 const o2 = this.getNode(x2+xo, y+yo);
                 const joint = o2 ? new LJS.Box2dRopeJoint(o, o2) : 0;

package/examples/breakout/game.js CHANGED Viewed

@@ -103,13 +103,12 @@ function gameRender()
 function gameRenderPost()
 {
     // use built in image font for text
-    const font = new LJS.FontImage;
-    font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,9.7)), .15, true);
+    const font = LJS.engineFontImage;
+    font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,9.2)), 1);
     if (!brickCount)
-        font.drawText('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
+        font.drawText('You Win!', LJS.cameraPos.add(vec2(0,-5)), 2);
     else if (!ball)
-        font.drawText('Click to Play', LJS.cameraPos.add(vec2(0,-5)), .2, true);
+        font.drawText('Click to Play', LJS.cameraPos.add(vec2(0,-5)), 2);
 }
 ///////////////////////////////////////////////////////////////////////////////
@@ -138,7 +137,7 @@ function setupPostProcess()
         // scan lines
         const float scanlineScale = 2.;
-        const float scanlineAlpha = .3;
+        const float scanlineAlpha = .6;
         c *= 1. - scanlineAlpha*cos(p.y*2.*iResolution.y/scanlineScale);
         {

package/examples/electron/index.html CHANGED Viewed

@@ -7,7 +7,7 @@
 </head><body>
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.16.2></script>
+<script src=../../dist/littlejs.js?1.17.5></script>
 <!-- Add your game scripts here -->
-<script src=game.js?1.16.2></script>
+<script src=game.js?1.17.5></script>

package/examples/electron/tiles.png CHANGED Viewed

Binary file

package/examples/htmlMenu/tiles.png CHANGED Viewed

Binary file

package/examples/index.html CHANGED Viewed

@@ -113,7 +113,6 @@ const exampleList =
     new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard', false, 'music, sound, audio, notes, ui, instrument'),
     new ExampleInfo('Step Sequencer', 'sequencer.js', 'Simple music loop creation tool', false, 'music, sound, audio, notes, ui, instrument'),
     new ExampleInfo('Music Player', 'musicPlayer.js', 'Music player with audio seeking and drag and drop', false, 'sound, loading, audio, ui'),
-    new ExampleInfo('WebGL Shader', 'shader.js', 'Full canvas webgl shader', false, 'webgl, visual, effect'),
     new ExampleInfo('--- MINI GAMES ---'),
     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'),
@@ -128,7 +127,9 @@ const exampleList =
     new ExampleInfo('--- PLUGINS ---'),
     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('Box2d Pool', 'box2dPool.js', 'Billiard table pool game with physics', false, 'objects, game'),
+    new ExampleInfo('Box2d Pool', 'box2dPool.js', 'Billiard table pool game with Box2d physics', false, 'objects, game'),
+    new ExampleInfo('Box2d Tile Layer', 'box2dTileLayer.js', 'Tile layer with Box2d physics', false, 'objects, level, map, grid'),
+    new ExampleInfo('WebGL Shader', 'shader.js', 'Full canvas webgl shader', false, 'webgl, visual, effect'),
     new ExampleInfo('Post Processing', 'postProcess.js', 'Shader effects and filters', false, 'webgl, visual, effect'),
     new ExampleInfo('UI System', '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'),
@@ -159,7 +160,7 @@ function initExampleBrowser()
     // set the selected example from the URL parameters
     const urlParams = new URLSearchParams(window.location.search);
     const selectedExample = urlParams.get('example') || '';
-    let exampleIndex = exampleList.findIndex((example) => example.name === selectedExample);
+    let exampleIndex = exampleList.findIndex((example)=> example.name === selectedExample);
     if (exampleIndex < 0)
         exampleIndex = 1;
     selectExample.selectedIndex = exampleIndex;
@@ -398,7 +399,7 @@ function codeInput()
     // debounce input - get content from code mirror if available, otherwise from textarea
     clearTimeout(inputTimeout);
     const code = codeMirror ? codeMirror.getValue() : textareaCode.value;
-    inputTimeout = setTimeout(() => setCode(code), 500);
+    inputTimeout = setTimeout(()=> setCode(code), 500);
 }
 function restartCode()
@@ -453,7 +454,7 @@ function setCode(code, filename)
             const anonymousMatch = stack?.match(/(<anonymous>|injectedScript):(\d+)/);
             return anonymousMatch ? parseInt(anonymousMatch[2]) : -1;
         }
-        iframeContent.onerror = (message, source, lineno, colno, error) =>
+        iframeContent.onerror = (message, source, lineno, colno, error)=>
         {
             let text = message;
             if (lineno)
@@ -463,7 +464,7 @@ function setCode(code, filename)
             setErrorMessage(text);
             setErrorLine(lineno);
         }
-        iframeContent.onunhandledrejection = (event) =>
+        iframeContent.onunhandledrejection = (event)=>
         {
             let text = event.reason;
             setErrorMessage(text);
@@ -510,14 +511,14 @@ function setCode(code, filename)
         {
             // hook up buttons
-            buttonScreenshot.onclick = () =>
+            buttonScreenshot.onclick = ()=>
             {
                 if (iframeContent.debugScreenshot)
                     iframeContent.debugScreenshot();
             }
             // pause/resume functionality
-            buttonPause.onclick = () =>
+            buttonPause.onclick = ()=>
             {
                 if (!iframeContent.getPaused || !iframeContent.setPaused)
                     return;

package/examples/logo.png CHANGED Viewed

Binary file

package/examples/module/build.bat ADDED Viewed

@@ -0,0 +1,7 @@
+rem LittleJS Build Script
+call node build.js
+if %errorlevel% neq 0 (
+    echo Build failed with error level %errorlevel%
+    pause
+    exit /b %errorlevel%
+)

package/examples/module/build.js ADDED Viewed

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+/**
+ * LittleJS Build System
+ */
+'use strict';
+const PROGRAM_TITLE = 'Little JS Starter Project';
+const PROGRAM_NAME = 'game';
+const BUILD_FOLDER = 'build';
+const sourceFiles =
+[
+    'game.js',
+    // add your game's source files here
+];
+const engineFile = '../../dist/littlejs.esm.min.js'; // Use the minified ES module
+const dataFiles =
+[
+    'tiles.png',
+    // add your game's data files here
+];
+console.log(`Building ${PROGRAM_NAME}...`);
+const startTime = Date.now();
+const fs = require('node:fs');
+const child_process = require('node:child_process');
+// rebuild engine
+//child_process.execSync(`npm run build`, { stdio: 'inherit' });
+// remove old files and setup build folder
+fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+fs.rmSync(`${PROGRAM_NAME}.zip`, { force: true });
+fs.mkdirSync(BUILD_FOLDER);
+// copy data files
+for (const file of dataFiles)
+    fs.copyFileSync(file, `${BUILD_FOLDER}/${file}`);
+// copy engine module
+fs.copyFileSync(engineFile, `${BUILD_FOLDER}/littlejs.esm.min.js`);
+Build
+(
+    sourceFiles,
+    [htmlBuildStep, zipBuildStep]
+);
+console.log('');
+console.log(`Build Completed in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
+///////////////////////////////////////////////////////////////////////////////
+// A single build with its own source files, build steps, and output file
+// - each build step is a callback that accepts a single filename
+function Build(files=[], buildSteps=[])
+{
+    // process each source file separately (don't concatenate modules!)
+    for (const file of files)
+    {
+        const outputFile = `${BUILD_FOLDER}/${file}`;
+        fs.copyFileSync(file, outputFile);
+        moduleFixStep(outputFile);
+        uglifyBuildStep(outputFile);
+    }
+    // execute build steps in order
+    for (const buildStep of buildSteps)
+        buildStep();
+}
+function moduleFixStep(filename)
+{
+    console.log(`Fixing module imports in ${filename}...`);
+    let code = fs.readFileSync(filename, 'utf8');
+    // update the import path to use the local minified version
+    code = code.replace(/import \* as LJS from ['"].*littlejs\.esm(?:\.min)?\.js['"];?/g,
+        "import * as LJS from './littlejs.esm.min.js';");
+    // also fix relative imports to other game modules
+    code = code.replace(/from ['"]\.\.\//g, "from './");
+    fs.writeFileSync(filename, code);
+}
+function uglifyBuildStep(filename)
+{
+    console.log('Running uglify...');
+    child_process.execSync(`npx uglifyjs ${filename} -c -m -o ${filename}`, {stdio: 'inherit'});
+};
+function htmlBuildStep()
+{
+    console.log('Building html...');
+    // create html file with module script tag pointing to main game file
+    let buffer = ''
+    buffer += '<!DOCTYPE html>';
+    buffer += '<head>';
+    buffer += `<title>${PROGRAM_TITLE}</title>`;
+    buffer += '<meta charset=utf-8>';
+    buffer += '</head>';
+    buffer += '<body>';
+    buffer += '<script src="game.js" type="module"></script>';
+    buffer += '</body>';
+    // output html file
+    fs.writeFileSync(`${BUILD_FOLDER}/index.html`, buffer, {flag: 'w+'});
+};
+function zipBuildStep()
+{
+    console.log('Zipping...');
+    const sources = ['index.html', 'littlejs.esm.min.js', ...sourceFiles, ...dataFiles];
+    const sourceList = sources.join(' ');
+    child_process.execSync(`npx bestzip ../${PROGRAM_NAME}.zip ${sourceList}`, {cwd:BUILD_FOLDER, stdio: 'inherit'});
+    console.log(`Size of ${PROGRAM_NAME}.zip: ${fs.statSync(`${PROGRAM_NAME}.zip`).size} bytes`);
+};

package/examples/module/tiles.png CHANGED Viewed

Binary file

package/examples/platformer/game.js CHANGED Viewed

@@ -127,7 +127,7 @@ function gameRender()
 function gameRenderPost()
 {
     // draw to main canvas for hud rendering
-    const drawText = (text, x, y, size=40) =>
+    const drawText = (text, x, y, size=40)=>
     {
         const context = LJS.mainContext;
         context.textAlign = 'center';

package/examples/platformer/gameEffects.js CHANGED Viewed

@@ -15,9 +15,6 @@ import * as LJS from '../../dist/littlejs.esm.js';
 import * as GameLevel from './gameLevel.js';
 const {vec2, hsl, rgb} = LJS;
-// use low graphics mode on mobile devices
-const lowGraphicsMode = LJS.isTouchDevice;
 ///////////////////////////////////////////////////////////////////////////////
 // sound effects
@@ -36,15 +33,11 @@ export const sound_score =        new LJS.Sound([,,783,,.03,.02,1,2,,,940,.03,,,
 export const persistentParticleDestroyCallback = (particle)=>
 {
-    if (lowGraphicsMode) return;
     // draw particle to tile layer on death
     LJS.ASSERT(!particle.tileInfo, 'quick draw to tile layer uses canvas 2d so must be untextured');
     if (particle.groundObject)
     {
         GameLevel.foregroundTileLayer.drawTile(particle.pos, particle.size, particle.tileInfo, particle.color, particle.angle, particle.mirror);
-        // update WebGL texture
-        GameLevel.foregroundTileLayer.useWebGL();
     }
 }
@@ -74,26 +67,27 @@ export function explosion(pos, radius=3)
     sound_explosion.play(pos);
-    // destroy level
-    for (let x = -radius; x < radius; ++x)
-    {
-        const h = (radius*radius - x*x)**.5;
-        for (let y = -h; y <= h; ++y)
-            destroyTile(pos.add(vec2(x,y)), 0, 0);
-    }
-    // cleanup neighbors
-    const cleanupRadius = radius + 2;
-    for (let x = -cleanupRadius; x < cleanupRadius; ++x)
     {
-        const h = (cleanupRadius**2 - x**2)**.5;
-        for (let y = -h; y < h; ++y)
-            GameLevel.decorateTile(pos.add(vec2(x,y)).floor());
+        // destroy level
+        const layer = GameLevel.tileLayers[1];
+        layer.redrawStart();
+        for (let x = -radius; x < radius; ++x)
+        {
+            const h = (radius*radius - x*x)**.5;
+            for (let y = -h; y <= h; ++y)
+                destroyTile(pos.add(vec2(x,y)), 0, 0);
+        }
+        // cleanup neighbors
+        const cleanupRadius = radius + 2;
+        for (let x = -cleanupRadius; x < cleanupRadius; ++x)
+        {
+            const h = (cleanupRadius**2 - x**2)**.5;
+            for (let y = -h; y < h; ++y)
+                GameLevel.decorateTile(pos.add(vec2(x,y)).floor(), layer);
+        }
+        layer.redrawEnd();
     }
-    // update WebGL texture
-    GameLevel.foregroundTileLayer.useWebGL();
     // kill/push objects
     LJS.engineObjectsCallback(pos, radius*3, (o)=>
     {
@@ -159,16 +153,18 @@ export function destroyTile(pos, makeSound = 1, cleanup = 1)
     makeSound && sound_destroyObject.play(centerPos);
     // set and clear tile
-    layer.setData(pos, new LJS.TileLayerData, true);
+    layer.clearData(pos, true);
     layer.setCollisionData(pos, GameLevel.tileType_empty);
     // cleanup neighbors and rebuild WebGL
     if (cleanup)
     {
+        const layer = GameLevel.tileLayers[1];
+        layer.redrawStart();
         for (let i=-1;i<=1;++i)
         for (let j=-1;j<=1;++j)
-            GameLevel.decorateTile(pos.add(vec2(i,j)));
-        layer.useWebGL();
+            GameLevel.decorateTile(pos.add(vec2(i,j)), layer);
+        layer.redrawEnd();
     }
     return true;
@@ -198,7 +194,7 @@ export class Sky extends LJS.EngineObject
         // draw stars
         LJS.setBlendMode(true);
         const random = new LJS.RandomGenerator(this.seed);
-        for (let i= lowGraphicsMode ? 500 : 1e3; i--;)
+        for (let i = 1e3; i--;)
         {
             const size = random.float(.5,2)**2;
             const speed = random.float() < .9 ? random.float(5) : random.float(9,99);
@@ -260,7 +256,7 @@ export class ParallaxLayer extends LJS.CanvasLayer
         this.context.clearRect(0,0,1,h);
         // make WebGL texture
-        this.useWebGL();
+        this.updateWebGL();
     }
     render()

package/examples/platformer/gameLevel.js CHANGED Viewed

@@ -96,8 +96,8 @@ function loadLevelData()
                     new GameObjects.Coin(objectPos);
                 // replace with empty tile and empty collision
-                tileLayer.setData(pos, new LJS.TileLayerData);
-                tileLayer.setCollisionData(pos, 0);
+                tileLayer.clearData(pos);
+                tileLayer.clearCollisionData(pos);
                 continue;
             }
@@ -126,35 +126,32 @@ function loadLevelData()
                 }
             }
         }
+        tileLayer.onRedraw = ()=>
+        {
+            // apply decoration to level tiles
+            for (let x=levelSize.x; x--;)
+            for (let y=levelSize.y; y--;)
+                decorateTile(vec2(x,y), tileLayer);
+        }
         tileLayer.redraw();
     }
-    // apply decoration to all level tiles
-    const pos = vec2();
-    const layerCount = tileMapData.layers.length;
-    for (let layer=layerCount; layer--;)
-    {
-        for (pos.x=levelSize.x; pos.x--;)
-        for (pos.y=levelSize.y; pos.y--;)
-            decorateTile(pos, layer);
-        tileLayers[layer].useWebGL();
-    }
 }
-export function decorateTile(pos, layer=1)
+export function decorateTile(pos, tileLayer)
 {
     LJS.ASSERT((pos.x|0) == pos.x && (pos.y|0)== pos.y);
-    const tileLayer = tileLayers[layer];
     if (!tileLayer)
         return;
+    const w = tileLayer.tileInfo.size.x;
     if (tileLayer == foregroundTileLayer)
     {
         const tileType = tileLayer.getCollisionData(pos);
         if (tileType <= 0)
         {
             // force it to clear if it is empty
-            tileType || tileLayer.setData(pos, new LJS.TileLayerData, 1);
+            tileType || tileLayer.clearData(pos, true);
             return;
         }
         if (tileType == tileType_breakable)
@@ -167,12 +164,11 @@ export function decorateTile(pos, layer=1)
             // make pixel perfect outlines
             const size = i&1 ? vec2(2, 16) : vec2(16, 2);
-            tileLayer.context.fillStyle = levelOutlineColor.mutate(.1);
             const drawPos = pos.scale(16)
                 .add(vec2(i==1?14:0,(i==0?14:0)))
                 .subtract((i&1? vec2(0,8-size.y/2) : vec2(8-size.x/2,0)));
-            tileLayer.context.fillRect(
-                drawPos.x, tileLayer.canvas.height - drawPos.y, size.x, -size.y);
+            const color = levelOutlineColor.mutate(.1);
+            tileLayer.drawLayerRect(drawPos, size, color);
         }
     }
     else
@@ -185,15 +181,18 @@ export function decorateTile(pos, layer=1)
             const neighborTileDataB = tileLayer.getData(pos.add(vec2().setDirection((i+1)%4))).tile;
             if (neighborTileDataA > 0 || neighborTileDataB > 0)
                 continue;
-            const directionVector = vec2().setAngle((i+.5)*LJS.PI/2, 10).floor();
-            const drawPos = pos.add(vec2(.5))            // center
-                .scale(16).add(directionVector).floor(); // direction offset
-            // clear rect without any scaling to prevent blur from filtering
-            const s = 2;
-            tileLayer.context.clearRect(
-                drawPos.x - s/2, tileLayer.canvas.height - drawPos.y - s/2, s, s);
+            // get direction of corner
+            const directionVector = vec2();
+            if (i==0) directionVector.set(w-1,w-1);
+            if (i==1) directionVector.set(w-1,1);
+            if (i==2) directionVector.set(1,1);
+            if (i==3) directionVector.set(1,w-1);
+            // clear rect from corner
+            const s = vec2(2);
+            const drawPos = pos.scale(w).add(directionVector).subtract(s.scale(.5));
+            tileLayer.clearLayerRect(drawPos, s);
         }
     }
 }

package/examples/puzzle/game.js CHANGED Viewed

@@ -44,8 +44,8 @@ const tileColors =
 ];
 const tileTypeCount = tileColors.length;
-const getTile = (pos)       => level[pos.x + pos.y * levelSize.x];
-const setTile = (pos, data) => level[pos.x + pos.y * levelSize.x] = data;
+const getTile = (pos)=> level[pos.x + pos.y * levelSize.x];
+const setTile = (pos, data)=> level[pos.x + pos.y * levelSize.x] = data;
 ///////////////////////////////////////////////////////////////////////////////
 function gameReset()

package/examples/shorts/base.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1.16.2></script>
+<script src=../../dist/littlejs.js?1.17.5></script>
 <script src=../../dist/box2d.wasm.js></script>
 <!-- LittleJS Engine Source
@@ -38,6 +38,9 @@ canvasPixelated = false;
 // disable watermark
 debugWatermark = false;
+// disable showing the engine version in console
+showEngineVersion = false;
 // these functions can be overridden for each example
 function gameInit() {}
 function gameUpdate() {}

package/examples/shorts/box2dPool.js CHANGED Viewed

@@ -3,10 +3,10 @@ const maxHitDistance = 6;
 class Ball extends Box2dObject
 {
-    constructor(position, number=0)
+    constructor(pos, number=0)
     {
         const color = hsl(number/9, 1, number? .5 : 1);
-        super(position, vec2(), 0, 0, color);
+        super(pos, vec2(), 0, 0, color);
         this.number = number;
         // setup pool ball physics

package/examples/shorts/box2dTileLayer.js ADDED Viewed

@@ -0,0 +1,48 @@
+let box2DTileLayer;
+async function gameInit()
+{
+    // setup box2d
+    await box2dInit();
+    cameraPos = vec2(16); // setup camera
+    gravity.y = -30; // enable gravity
+    canvasClearColor = hsl(0,0,.2); // background color
+    // create tile layer
+    const pos = vec2();
+    const tileLayer = new TileCollisionLayer(pos, vec2(32));
+    for (pos.x = tileLayer.size.x; pos.x--;)
+    for (pos.y = tileLayer.size.y; pos.y--;)
+    {
+        // check if tile should be solid
+        if (randBool(.7))
+            continue;
+        // set tile data
+        const tileIndex = 11;
+        const direction = randInt(4)
+        const mirror = randBool();
+        const color = randColor(WHITE, hsl(0,0,.2));
+        const data = new TileLayerData(tileIndex, direction, mirror, color);
+        tileLayer.setData(pos, data);
+        tileLayer.setCollisionData(pos);
+    }
+    tileLayer.redraw(); // redraw tile layer with new data
+    box2DTileLayer = new Box2dTileLayer(tileLayer);
+}
+function gameUpdate()
+{
+    if (mouseWasPressed(0))
+    {
+        // clear tile that was clicked
+        box2DTileLayer.tileLayer.clearData(mousePos, true);
+        box2DTileLayer.tileLayer.clearCollisionData(mousePos);
+        box2DTileLayer.buildCollision();
+        // spawn box2d object at mouse position
+        const o = new Box2dObject(mousePos, vec2(), 0, 0, randColor());
+        const friction = .2, restitution = .5;
+        o.addCircle(rand(.5,1), vec2(), 1, friction, restitution);
+    }
+}

package/examples/shorts/clock.js CHANGED Viewed

@@ -15,7 +15,7 @@ function gameRender()
     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);
+    drawLine(vec2(), vec2(0,4).rotate(h/12*2*PI),  1);
+    drawLine(vec2(), vec2(0,6).rotate(m/60*2*PI), .4);
+    drawLine(vec2(), vec2(0,8).rotate(s/60*2*PI), .1);
 }

package/examples/shorts/fontImage.js CHANGED Viewed

@@ -1,8 +1,8 @@
 function gameRender()
 {
     // draw text with built in engine font image
-    const font = new FontImage;
-    font.drawText('Engine Font Test', cameraPos.add(vec2(0,3)), .2);
+    const font = engineFontImage
+    font.drawText('Engine Font', vec2(0,3), 2);
     // show every character in the font
     let s = '';
@@ -12,5 +12,6 @@ function gameRender()
             s += '\n';
         s += String.fromCharCode(i);
     }
-    font.drawText(s, cameraPos, .1);
+    font.drawText(s, vec2());
 }

package/examples/shorts/music.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const musicSound = new SoundWave('song.mp3');
+const musicSound = new Sound('song.mp3');
 let musicVolume = 1, musicInstance;
 function gameInit()
@@ -23,7 +23,7 @@ function gameInit()
     const volumeSlider = new UIScrollbar(vec2(0, -20), vec2(400, 30),
         musicVolume, 'Music Volume');
     musicPlayer.addChild(volumeSlider);
-    volumeSlider.onChange = () =>
+    volumeSlider.onChange = ()=>
     {
         musicVolume = volumeSlider.value;
         musicInstance?.setVolume(musicVolume);

package/examples/shorts/musicPlayer.js CHANGED Viewed

@@ -29,7 +29,7 @@ function gameInit()
     const volumeSlider = new UIScrollbar(vec2(0, -20), vec2(400, 30),
         musicVolume, 'Music Volume');
     musicPlayer.addChild(volumeSlider);
-    volumeSlider.onChange = () =>
+    volumeSlider.onChange = ()=>
     {
         musicVolume = volumeSlider.value;
         musicInstance?.setVolume(musicVolume);
@@ -89,7 +89,7 @@ function gameInit()
             // create new sound from dropped file
             const fileURL = URL.createObjectURL(file);
-            musicSound = new SoundWave(fileURL, musicVolume);
+            musicSound = new Sound(fileURL, musicVolume);
             dropZoneText.text = file.name;
             // reset UI