npm - littlejsengine - Versions diffs - 1.12.6 → 1.13.4 - Mend

littlejsengine 1.12.6 → 1.13.4

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 (102) hide show

package/README.md +15 -12
package/dist/littlejs.d.ts +466 -236
package/dist/littlejs.esm.js +6126 -5370
package/dist/littlejs.esm.min.js +4 -1
package/dist/littlejs.js +6093 -5359
package/dist/littlejs.min.js +4 -1
package/dist/littlejs.release.js +5614 -4907
package/examples/box2d/game.js +2 -2
package/examples/box2d/gameObjects.js +8 -7
package/examples/box2d/index.html +1 -1
package/examples/box2d/scenes.js +8 -8
package/examples/breakout/game.js +1 -1
package/examples/breakout/gameObjects.js +2 -2
package/examples/breakout/index.html +1 -1
package/examples/breakoutTutorial/README.md +46 -43
package/examples/breakoutTutorial/game.js +3 -3
package/examples/breakoutTutorial/index.html +1 -1
package/examples/electron/build.bat +7 -0
package/examples/electron/build.js +124 -0
package/examples/electron/electron.js +35 -0
package/examples/electron/game.js +140 -0
package/examples/electron/index.html +13 -0
package/examples/electron/package.json +12 -0
package/examples/electron/tiles.png +0 -0
package/examples/empty/game.js +1 -0
package/examples/empty/index.html +1 -1
package/examples/htmlMenu/game.js +1 -1
package/examples/htmlMenu/index.html +1 -1
package/examples/index.html +486 -182
package/examples/module/game.js +6 -3
package/examples/module/index.html +1 -1
package/examples/particles/index.html +12 -3
package/examples/platformer/game.js +4 -4
package/examples/platformer/gameCharacter.js +6 -6
package/examples/platformer/gameEffects.js +74 -57
package/examples/platformer/gameLevel.js +61 -70
package/examples/platformer/gameObjects.js +4 -4
package/examples/platformer/index.html +1 -1
package/examples/puzzle/index.html +1 -1
package/examples/shorts/base.html +23 -3
package/examples/shorts/blending.js +9 -5
package/examples/shorts/box2d.js +1 -1
package/examples/shorts/box2dCar.js +9 -13
package/examples/shorts/clock.js +1 -1
package/examples/shorts/colors.js +2 -2
package/examples/shorts/flappyGame.js +52 -0
package/examples/shorts/helloWorld.js +6 -3
package/examples/shorts/hillGlideGame.js +56 -0
package/examples/shorts/landerGame.js +32 -0
package/examples/shorts/maze.js +47 -0
package/examples/shorts/medals.js +42 -0
package/examples/shorts/nineSlice.js +21 -0
package/examples/shorts/piano.js +52 -0
package/examples/shorts/platformer.js +24 -20
package/examples/shorts/{pong.js → pongGame.js} +1 -1
package/examples/shorts/raycasting.js +71 -0
package/examples/shorts/shapes.js +9 -9
package/examples/shorts/slidingPuzzle.js +42 -0
package/examples/shorts/spaceGame.js +56 -0
package/examples/shorts/starfield.js +15 -0
package/examples/shorts/systemFont.js +1 -1
package/examples/shorts/tileLayer.js +3 -5
package/examples/shorts/tiles.png +0 -0
package/examples/shorts/tiltedView.js +8 -7
package/examples/shorts/topDown.js +18 -26
package/examples/shorts/uiSystem.js +5 -7
package/examples/starter/build.bat +6 -1
package/examples/starter/build.js +9 -8
package/examples/starter/game.js +7 -4
package/examples/starter/index.html +23 -13
package/examples/stress/index.html +7 -8
package/examples/style.css +139 -0
package/examples/typescript/build.js +2 -3
package/examples/typescript/game.js +4 -4
package/examples/typescript/game.ts +6 -3
package/examples/typescript/index.html +1 -1
package/examples/uiSystem/game.js +10 -25
package/examples/uiSystem/index.html +1 -1
package/package.json +2 -2
package/plugins/box2d.js +22 -97
package/plugins/drawUtilities.js +132 -0
package/plugins/newgrounds.js +1 -1
package/plugins/pluginExport.js +7 -1
package/plugins/postProcess.js +9 -2
package/plugins/uiSystem.js +155 -67
package/plugins/zzfxm.js +1 -1
package/reference.md +10 -10
package/src/engine.js +56 -30
package/src/engineAudio.js +15 -6
package/src/engineBuild.bat +6 -1
package/src/engineBuild.js +20 -5
package/src/engineDebug.js +55 -28
package/src/engineDraw.js +321 -177
package/src/engineExport.js +27 -9
package/src/engineInput.js +110 -38
package/src/engineMedals.js +4 -4
package/src/engineObject.js +71 -70
package/src/engineParticles.js +33 -9
package/src/engineSettings.js +69 -23
package/src/engineTileLayer.js +312 -153
package/src/engineUtilities.js +187 -135
package/src/engineWebGL.js +70 -39

package/examples/module/game.js CHANGED Viewed

@@ -77,7 +77,7 @@ function gameInit()
         .99, 1, 1, Math.PI,   // damping, angleDamping, gravityScale, cone
         .05, .5, true, true   // fadeRate, randomness, collide, additive
     );
-    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.restitution = .3; // bounce when it collides
     particleEmitter.trailScale = 2;  // stretch in direction of motion
 }
@@ -101,7 +101,10 @@ function gameUpdate()
     // move particles to mouse location if on screen
     if (LJS.mousePosScreen.x)
+    {
         particleEmitter.pos = LJS.mousePos;
+        particleEmitter.velocity = LJS.mouseDelta.scale(.3*LJS.timeDelta);
+    }
 }
 ///////////////////////////////////////////////////////////////////////////////
@@ -113,8 +116,8 @@ function gameUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
-    // draw a grey square in the background without using webgl
-    LJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
+    // draw a grey square in the background
+    LJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6));
     // draw the logo as a tile
     LJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));

package/examples/module/index.html CHANGED Viewed

@@ -7,4 +7,4 @@
 </head><body>
 <!-- Add your game scripts here -->
-<script src=game.js type=module></script>
+<script src=game.js type=module></script>

package/examples/particles/index.html CHANGED Viewed

@@ -94,7 +94,7 @@ function gameInit()
             if (type == 'color')
             {
                 const color = particleSystem[name];
-                defaultValue = color.toString(0);
+                defaultValue = color.toString(false);
             }
             else if (type == 'alpha')
             {
@@ -266,7 +266,7 @@ function updateSetting(setting, save=1)
     if (type == 'color')
     {
         const color = particleSystem[name];
-        input.value = color.toString(0);
+        input.value = color.toString(false);
     }
     else if (type == 'alpha')
     {
@@ -369,7 +369,16 @@ function gameUpdate()
     if (document.activeElement == document.body)
     {
-        particleSystem.pos = LJS.mouseIsDown(0) ? LJS.mousePos : vec2();
+        if (LJS.mouseIsDown(0))
+        {
+            particleSystem.pos = LJS.mousePos;
+            particleSystem.velocity = LJS.mouseDelta.scale(.3*LJS.timeDelta);
+        }
+        else
+        {
+            particleSystem.pos = vec2();
+            particleSystem.velocity = vec2();
+        }
         if (LJS.mouseWheel)
         {
             // zoom camera

package/examples/platformer/game.js CHANGED Viewed

@@ -16,11 +16,8 @@ import * as GamePlayer from './gamePlayer.js';
 import * as GameLevel from './gameLevel.js';
 const {vec2} = LJS;
-// load the game level data
-export const gameLevelData = await LJS.fetchJSON('gameLevelData.json');
 // globals
-export let spriteAtlas, player, score, deaths;
+export let gameLevelData, spriteAtlas, player, score, deaths;
 export function addToScore(delta=1) { score += delta; }
 export function addToDeaths() { ++deaths; }
@@ -44,6 +41,9 @@ function loadLevel()
 ///////////////////////////////////////////////////////////////////////////////
 async function gameInit()
 {
+    // load the game level data
+    gameLevelData = await LJS.fetchJSON('gameLevelData.json');
     // engine settings
     LJS.setGravity(vec2(0,-.01));
     LJS.setObjectDefaultDamping(.99);

package/examples/platformer/gameCharacter.js CHANGED Viewed

@@ -108,7 +108,7 @@ export class Character extends GameObjects.GameObject
         for (let y=2;y--;)
         {
             const testPos = this.pos.add(vec2(0, y + .1*moveInput.y - this.size.y/2));
-            const collisionData = LJS.getTileCollisionData(testPos);
+            const collisionData = LJS.tileCollisionGetData(testPos);
             touchingLadder ||= collisionData == GameLevel.tileType_ladder;
         }
         if (!touchingLadder)
@@ -133,7 +133,7 @@ export class Character extends GameObjects.GameObject
             moveInput.x *= .2;
             // exit ladder if ground is below
-            this.climbingLadder = moveInput.y >= 0 || LJS.getTileCollisionData(this.pos.subtract(vec2(0,1))) <= 0;
+            this.climbingLadder = moveInput.y >= 0 || LJS.tileCollisionGetData(this.pos.subtract(vec2(0,1))) <= 0;
         }
         else
         {
@@ -234,7 +234,7 @@ export class Character extends GameObjects.GameObject
         if (!this.isDead())
         {
             // bounce pos with walk cycle
-            bodyPos = bodyPos.add(vec2(0,.01+.05*Math.sin(this.walkCyclePercent*LJS.PI)));
+            bodyPos = bodyPos.add(vec2(0,.05*Math.sin(this.walkCyclePercent*LJS.PI)));
             // make bottom flush
             bodyPos = bodyPos.add(vec2(0,(this.drawSize.y-this.size.y)/2));
@@ -281,9 +281,9 @@ export class Character extends GameObjects.GameObject
             if (pos.y + 1 > this.lastPos.y - this.size.y/2)
                 return false;
-            if (LJS.getTileCollisionData(pos.add(vec2(0,1)))      // above
-                && !LJS.getTileCollisionData(pos.add(vec2(1,0)))  // left
-                && !LJS.getTileCollisionData(pos.add(vec2(1,0)))) // right
+            if (LJS.tileCollisionGetData(pos.add(vec2(0,1)))      // above
+                && !LJS.tileCollisionGetData(pos.add(vec2(1,0)))  // left
+                && !LJS.tileCollisionGetData(pos.add(vec2(1,0)))) // right
                 return false; // don't collide if something above it and nothing to left or right
             // allow standing on top of ladders

package/examples/platformer/gameEffects.js CHANGED Viewed

@@ -40,7 +40,7 @@ export const persistentParticleDestroyCallback = (particle)=>
 }
 export function makeBlood(pos, amount) { makeDebris(pos, hsl(0,1,.5), amount, .1, 0); }
-export function makeDebris(pos, color = hsl(), amount = 50, size=.2, elasticity = .3)
+export function makeDebris(pos, color = hsl(), amount = 50, size=.2, restitution = .3)
 {
     const color2 = color.lerp(hsl(), .5);
     const emitter = new LJS.ParticleEmitter(
@@ -52,7 +52,7 @@ export function makeDebris(pos, color = hsl(), amount = 50, size=.2, elasticity
         1, .95, .4, 3.14, 0,   // damp, angleDamp, gravity, particleCone, fade
         .5, 1                  // randomness, collide, additive, colorLinear, renderOrder
     );
-    emitter.elasticity = elasticity;
+    emitter.restitution = restitution;
     emitter.particleDestroyCallback = persistentParticleDestroyCallback;
     return emitter;
 }
@@ -82,6 +82,9 @@ export function explosion(pos, radius=3)
             GameLevel.decorateTile(pos.add(vec2(x,y)).floor());
     }
+    // update webgl texture
+    GameLevel.updateWebGL(GameLevel.foregroundTileLayer);
     // kill/push objects
     LJS.engineObjectsCallback(pos, radius*3, (o)=>
     {
@@ -126,7 +129,7 @@ export function explosion(pos, radius=3)
 ///////////////////////////////////////////////////////////////////////////////
-export function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
+export function destroyTile(pos, makeSound = 1, cleanup = 1)
 {
     // pos must be an int
     pos = pos.floor();
@@ -146,16 +149,17 @@ export function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
     makeDebris(centerPos, layerData.color.mutate());
     makeSound && sound_destroyObject.play(centerPos);
-     // set and clear tile
-    layer.setData(pos, new LJS.TileLayerData, 1);
+    // set and clear tile
+    layer.setData(pos, new LJS.TileLayerData, true);
     layer.setCollisionData(pos, GameLevel.tileType_empty);
-    // cleanup neighbors
-    if (cleanNeighbors)
+    // cleanup neighbors and rebuild webgl
+    if (cleanup)
     {
         for (let i=-1;i<=1;++i)
         for (let j=-1;j<=1;++j)
             GameLevel.decorateTile(pos.add(vec2(i,j)));
+        GameLevel.updateWebGL(layer);
     }
     return true;
@@ -180,16 +184,16 @@ export class Sky extends LJS.EngineObject
     {
         // fill background with a gradient
         const canvas = LJS.mainCanvas;
-        const context = LJS.mainContext;
-        const gradient = context.createLinearGradient(0, 0, 0, canvas.height);
-        gradient.addColorStop(0, this.skyColor);
-        gradient.addColorStop(1, this.horizonColor);
-        context.save();
-        context.fillStyle = gradient;
-        context.fillRect(0, 0, canvas.width, canvas.height);
-        context.globalCompositeOperation = 'lighter';
+        const gradientDelta = 5;
+        for (let y=0; y<canvas.height; y+=gradientDelta)
+        {
+            // draw horizontal lines to create a gradient
+            const color = this.skyColor.lerp(this.horizonColor, y/canvas.height);
+            LJS.drawRect(vec2(0,y), vec2(canvas.width*2, gradientDelta*2), color, 0, undefined, true)
+        }
         // draw stars
+        LJS.setBlendMode(true);
         const random = new LJS.RandomGenerator(this.seed);
         for (let i=1e3; i--;)
         {
@@ -201,61 +205,74 @@ export class Sky extends LJS.EngineObject
             const screenPos = vec2(
                 (random.float(w)+LJS.time*speed)%w-extraSpace,
                 (random.float(h)+LJS.time*speed*random.float())%h-extraSpace);
-            context.fillStyle = color;
-            context.fillRect(screenPos.x, screenPos.y, size, size);
+            LJS.drawRect(screenPos, vec2(size), color, 0, undefined, true)
         }
-        context.restore();
+        LJS.setBlendMode(false);
     }
 }
 ///////////////////////////////////////////////////////////////////////////////
 // parallax background mountain ranges
-export class ParallaxLayer extends LJS.EngineObject
+export class ParallaxLayer extends LJS.CanvasLayer
 {
-    constructor(index)
+    constructor(depth)
     {
-        super();
+        const renderOrder = depth - 3e3;
+        const canvasSize = vec2(512, 256);
+        super(vec2(), vec2(), 0, renderOrder, canvasSize);
+        this.canvasSize = canvasSize;
+        this.depth = depth;
+        // create a gradient for the mountains
+        const topColor = GameLevel.levelColor.mutate(.2).lerp(GameLevel.sky.skyColor, .8 - depth*.15);
+        const bottomColor = GameLevel.levelColor.subtract(LJS.CLEAR_WHITE).mutate(.2);
+        for (let i = canvasSize.y; i--;)
+        {
+            // draw a 1 pixel gradient line on the left side of the canvas
+            const p = i/canvasSize.y;
+            this.context.fillStyle = topColor.lerp(bottomColor, p);
+            this.context.fillRect(0, i, 1, 1);
+        }
-        const size = vec2(1024,512);
-        this.size = size;
-        this.index = index;
-        this.renderOrder = -3e3 + index;
-        this.canvas = document.createElement('canvas');
-        this.context = this.canvas.getContext('2d');
-        this.canvas.width = size.x;
-        this.canvas.height = size.y;
-        // create a gradient
-        const o1 = 40-20*index;
-        const o2 = 100-30*index;
-        const gradient = this.context.createLinearGradient(0,size.y/2-o1,0,size.y/2+o2);
-        const layerColor = GameLevel.levelColor.mutate(.1).lerp(GameLevel.sky.skyColor,1-index*.15);
-        gradient.addColorStop(0,layerColor);
-        gradient.addColorStop(1,layerColor.mutate(.5).scale(.1,1));
-        this.context.fillStyle = gradient;
-        // draw procedural mountains ranges
-        let groundLevel = size.y/2, groundSlope = LJS.rand(-1,1);
-        for (let i=size.x; i--;)
-            this.context.fillRect(i, groundLevel += groundSlope = LJS.rand() < .3 ? LJS.rand(1,-1) :
-                groundSlope + (size.y/2 - groundLevel)/300, 1, size.y);
+        // draw random mountains
+        const pointiness = .2;  // how pointy the mountains are
+        const levelness = .005; // how much the mountains level out
+        const slopeRange = 1;   // max slope of the mountains
+        const startGroundLevel = canvasSize.y/2;
+        let y = startGroundLevel, groundSlope = LJS.rand(-slopeRange, slopeRange);
+        for (let x=canvasSize.x; x--;)
+        {
+            // pull slope towards start ground level
+            y += groundSlope -= (y-startGroundLevel)*levelness;
+            // random change slope
+            if (LJS.rand() < pointiness)
+                groundSlope = LJS.rand(-slopeRange, slopeRange);
+            // draw 1 pixel wide vertical slice of mountain
+            this.context.drawImage(this.canvas, 0, 0, 1, canvasSize.y, x, y, 1, canvasSize.y - y);
+        }
+        // remove gradient sliver from left side
+        this.context.clearRect(0,0,1,canvasSize.y);
+        // make webgl texture
+        this.useWebGL(LJS.glEnable);
     }
     render()
     {
-        // position layer based on camera distance from center of level
-        const parallax = vec2(1e3,-100).scale(this.index**2);
-        const cameraDeltaFromCenter = LJS.cameraPos
-            .subtract(GameLevel.levelSize.scale(.5))
-            .divide(GameLevel.levelSize.divide(parallax));
-        const scale = this.size.scale(2+2*this.index);
-        const pos = LJS.mainCanvasSize.scale(.5)      // center screen
-           .add(vec2(-scale.x/2,-scale.y/2))          // center layer
-           .add(cameraDeltaFromCenter.scale(-.5))     // apply parallax
-           .add(vec2(0,(this.index*.1)*this.size.y)); // separate layers
-        // draw the parallax layer onto the main canvas
-        LJS.mainContext.drawImage(this.canvas, pos.x, pos.y, scale.x, scale.y);
+        const depth = this.depth
+        const distance = 4 + depth;
+        const parallax = vec2(150, 30).scale(depth**2+1);
+        const levelCenter = GameLevel.levelSize.scale(.5);
+        const cameraDeltaFromCenter = LJS.cameraPos.subtract(levelCenter).divide(levelCenter.scale(-1).divide(parallax));
+        const scale = distance/LJS.cameraScale;
+        const positonOffset = vec2(0, 2-depth);
+        const cameraOffset = cameraDeltaFromCenter.scale(1/LJS.cameraScale);
+        this.pos = LJS.cameraPos.add(positonOffset).add(cameraOffset);
+        this.size = this.canvasSize.scale(scale);
+        super.render();
     }
 }

package/examples/platformer/gameLevel.js CHANGED Viewed

@@ -14,6 +14,7 @@ import * as GameEffects from './gameEffects.js';
 import * as Game from './game.js';
 const {vec2, hsl, tile} = LJS;
+export const useWebGLTileLayers = true;
 export const tileType_ladder    = -1;
 export const tileType_empty     = 0;
 export const tileType_solid     = 1;
@@ -31,9 +32,9 @@ export function buildLevel()
     levelColor = LJS.randColor(hsl(0,0,.2), hsl(0,0,.8));
     levelBackgroundColor = levelColor.mutate().scale(.4,1);
     levelOutlineColor = levelColor.mutate().add(hsl(0,0,.4)).clamp();
-    buildLevelData();
+    loadLevelData();
-    // create sky object with gradient and stars
+    // create sky object with gradient background and stars
     sky = new GameEffects.Sky;
     // create parallax layers
@@ -41,114 +42,99 @@ export function buildLevel()
         new GameEffects.ParallaxLayer(i);
 }
-function buildLevelData()
+function loadLevelData()
 {
-    // load level data from an exported Tiled js file
-    let tileMapData = Game.gameLevelData;
-    if (!tileMapData)
-    {
-        // default level data if loading failed
-        tileMapData = {};
-        tileMapData.width = 100;
-        tileMapData.height = 20;
-        tileMapData.layers = [{data:[]}];
-        for(let i=100*20;i--;)
-            tileMapData.layers[0].data[i] = i>100 ? 2 : 0;
-    }
-    levelSize = vec2(tileMapData.width, tileMapData.height);
+    // load the level data
+    const tileMapData = Game.gameLevelData;
+    tileLayers = LJS.tileCollisionLoad(tileMapData, tile(0,16,1));
+    levelSize = tileLayers[0].size;
+    playerStartPos = vec2(0, levelSize.y); // default player start
+    foregroundTileLayer = tileLayers[0];
     // create table for tiles in the level tilemap
     const tileLookup =
     {
-        circle: 1,
-        ground: 2,
-        ladder: 4,
-        metal:  5,
-        player: 17,
-        crate:  18,
-        enemy:  19,
-        coin:   20,
+        circle: 0,
+        ground: 1,
+        ladder: 3,
+        metal:  4,
+        player: 16,
+        crate:  17,
+        enemy:  18,
+        coin:   19,
     }
-    // set all level data tiles
-    tileLayers = [];
-    playerStartPos = vec2(1, levelSize.y);
-    const layerCount = tileMapData.layers.length;
-    for (let layer=layerCount; layer--;)
+    for (let i=tileLayers.length; i--;)
     {
-        const layerData = tileMapData.layers[layer].data;
-        let tileLayer;
-        if (layer < layerCount-1)
-            tileLayer = new LJS.TileLayer(vec2(), levelSize, tile(0,16,1));
-        else
-        {
-            // only foreground layer has collision
-            tileLayer = new LJS.TileCollisionLayer(vec2(), levelSize, tile(0,16,1));
+        const tileLayer = tileLayers[i];
+        const isForeground = i == tileLayers.length - 1;
+        if (isForeground)
             foregroundTileLayer = tileLayer;
-        }
-        tileLayer.renderOrder = -1e3+layer;
-        tileLayers[layer] = tileLayer;
+        else
+            tileLayer.isSolid = false;
         for (let x=levelSize.x; x--;)
         for (let y=levelSize.y; y--;)
         {
             const pos = vec2(x,levelSize.y-1-y);
-            const tile = layerData[y*levelSize.x+x];
-            if (tile >= tileLookup.player)
+            const tileData = tileLayer.getData(pos).tile;
+            if (tileData >= tileLookup.player)
             {
                 // create object instead of tile
                 const objectPos = pos.add(vec2(.5));
-                if (tile == tileLookup.player)
+                if (tileData == tileLookup.player)
                     playerStartPos = objectPos;
-                if (tile == tileLookup.crate)
+                if (tileData == tileLookup.crate)
                     new GameObjects.Crate(objectPos);
-                if (tile == tileLookup.enemy)
+                if (tileData == tileLookup.enemy)
                     new GameObjects.Enemy(objectPos);
-                if (tile == tileLookup.coin)
+                if (tileData == tileLookup.coin)
                     new GameObjects.Coin(objectPos);
+                // replace with empty tile and empty collision
+                tileLayer.setData(pos, new LJS.TileLayerData);
+                tileLayer.setCollisionData(pos, 0);
                 continue;
             }
-            // get tile type for special tiles
-            let tileType = tileType_empty;
-            if (tile > 0)
-                tileType = tileType_breakable;
-            if (tile == tileLookup.ladder)
+            // get tile type
+            let tileType = tileData? tileType_breakable : tileType_empty;
+            if (tileData == tileLookup.ladder)
                 tileType = tileType_ladder;
-            if (tile == tileLookup.metal)
+            if (tileData == tileLookup.metal)
                 tileType = tileType_solid;
             if (tileType)
             {
                 // set collision for solid tiles
-                if (tileLayer == foregroundTileLayer)
+                if (tileLayer.isSolid)
                     tileLayer.setCollisionData(pos, tileType);
-                // randomize tile appearance
-                let direction, mirror, color;
                 if (tileType == tileType_breakable)
                 {
-                    direction = LJS.randInt(4);
-                    mirror = LJS.randInt(2);
-                    color = layer ? levelColor : levelBackgroundColor;
+                    // randomize tile appearance
+                    let direction = LJS.randInt(4);
+                    let mirror = LJS.randInt(2);
+                    let color = i ? levelColor : levelBackgroundColor;
                     color = color.mutate(.03);
-                }
-                // set tile layer data
-                const data = new LJS.TileLayerData(tile-1, direction, mirror, color);
-                tileLayer.setData(pos, data);
+                    // set tile layer data
+                    const data = new LJS.TileLayerData(tileData, direction, mirror, color);
+                    tileLayer.setData(pos, data);
+                }
             }
         }
         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);
+    {
+        for (pos.x=levelSize.x; pos.x--;)
+        for (pos.y=levelSize.y; pos.y--;)
+            decorateTile(pos, layer);
+        updateWebGL(tileLayers[layer]);
+    }
 }
 export function decorateTile(pos, layer=1)
@@ -213,4 +199,9 @@ export function getCameraTarget()
     // camera is above player
     const offset = 100/LJS.cameraScale*LJS.percent(LJS.mainCanvasSize.y, 300, 600);
     return Game.player.pos.add(vec2(0, offset));
+}
+export function updateWebGL(layer)
+{
+    layer.useWebGL(useWebGLTileLayers);
 }

package/examples/platformer/gameObjects.js CHANGED Viewed

@@ -188,7 +188,7 @@ export class Grenade extends GameObject
         super(pos, vec2(.2), Game.spriteAtlas.grenade);
         this.beepTimer = new Timer(1);
-        this.elasticity   = .3;
+        this.restitution   = .3;
         this.friction     = .9;
         this.angleDamping = .96;
         this.renderOrder  = 1e8;
@@ -253,7 +253,7 @@ export class Weapon extends LJS.EngineObject
             1, .95, 1, 0, 0,    // damp, angleDamp, gravity, particleCone, fade
             .1, 1               // randomness, collide, additive, colorLinear, renderOrder
         ), vec2(.1,0), -.8);
-        this.shellEmitter.elasticity = .5;
+        this.shellEmitter.restitution = .5;
         this.shellEmitter.particleDestroyCallback = GameEffects.persistentParticleDestroyCallback;
     }
@@ -263,7 +263,7 @@ export class Weapon extends LJS.EngineObject
         // update recoil
         if (this.recoilTimer.active())
-            this.localAngle = LJS.lerp(this.recoilTimer.getPercent(), this.localAngle, 0);
+            this.localAngle = LJS.lerp(this.localAngle, 0, this.recoilTimer.getPercent());
         this.mirror = this.parent.mirror;
         this.fireTimeBuffer += LJS.timeDelta;
@@ -375,7 +375,7 @@ export class Bullet extends LJS.EngineObject
             .5, 1, 1            // randomness, collide, additive, colorLinear, renderOrder
         );
         emitter.trailScale = 1;
-        emitter.elasticity = .3;
+        emitter.restitution = .3;
         emitter.angle = this.velocity.angle() + LJS.PI;
     }
 }

package/examples/platformer/index.html CHANGED Viewed

@@ -6,4 +6,4 @@
 <meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
-<script src=game.js type=module></script>
+<script src=game.js type=module></script>

package/examples/puzzle/index.html CHANGED Viewed

@@ -5,4 +5,4 @@
 <meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
-<script src=game.js type=module></script>
+<script src=game.js type=module></script>

package/examples/shorts/base.html CHANGED Viewed

@@ -1,8 +1,28 @@
 <!DOCTYPE html><meta charset=utf-8><body>
+<script src=../../dist/littlejs.js?1133></script>
 <script src=../../dist/box2d.wasm.js></script>
-<script src=../../dist/littlejs.js?1120></script>
-<script>
+<!-- LittleJS Engine Source
+<script src=../../src/engineDebug.js></script>
+<script src=../../src/engineUtilities.js></script>
+<script src=../../src/engineSettings.js></script>
+<script src=../../src/engineObject.js></script>
+<script src=../../src/engineDraw.js></script>
+<script src=../../src/engineInput.js></script>
+<script src=../../src/engineAudio.js></script>
+<script src=../../src/engineTileLayer.js></script>
+<script src=../../src/engineParticles.js></script>
+<script src=../../src/engineMedals.js></script>
+<script src=../../src/engineWebGL.js></script>
+<script src=../../src/engine.js></script>
+<script src=../../plugins/box2d.js></script>
+<script src=../../plugins/box2d.wasm.js></script>
+<script src=../../plugins/drawUtilities.js></script>
+<script src=../../plugins/postProcess.js></script>
+<script src=../../plugins/uiSystem.js></script>
+<script src=../../plugins/zzfxm.js></script>
+-->
+<script>
 'use strict';
 // use fixed size canvas for examples
@@ -24,4 +44,4 @@ function gameUpdatePost() {}
 function gameRender() {}
 function gameRenderPost() {}
-</script>
+</script>

package/examples/shorts/blending.js CHANGED Viewed

@@ -1,16 +1,20 @@
+// use smoother textures
+setCanvasPixelated(false);
+setTilesPixelated(false);
 function gameRender()
 {
     const circleTile = tile(2, 128); // get the circle tile
     // additive blend
     setBlendMode(1);
-    drawTile(vec2(-4,-2), vec2(7), circleTile, rgb(1,0,0));
+    drawTile(vec2(-8,-2), vec2(7), circleTile, rgb(0,0,.5), 0, false, rgb(0,0,.5));
     drawTile(vec2(-6, 2), vec2(7), circleTile, rgb(0,1,0));
-    drawTile(vec2(-8,-2), vec2(7), circleTile, rgb(0,0,1));
+    drawTile(vec2(-4,-2), vec2(7), circleTile, rgb(1,0,0));
     // alpha blend
     setBlendMode(0);
-    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));
+    drawTile(vec2(4,-2), vec2(7), circleTile, hsl(time/9    ,1,.5), 0, false, hsl(1,1,.5));
+    drawTile(vec2(8,-2), vec2(7), circleTile, hsl(time/9+1/3,1,.5,.5));
+    drawTile(vec2(6, 2), vec2(7), circleTile, hsl(time/9+2/3,1,.5,.5));
 }