littlejsengine 1.9.2 → 1.9.4

package/examples/platformer/game.js

@@ -11,21 +11,39 @@
 // show the LittleJS splash screen
 setShowSplashScreen(true);
 
-let score, deaths;
+let spriteAtlas, score, deaths;
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
+    // create a table of all sprites
+    spriteAtlas =
+    {
+        // large tiles
+        circle:  tile(0),
+        crate:   tile(2),
+        player:  tile(3),
+        enemy:   tile(5),
+        coin:    tile(6),
+
+        // small tiles
+        gun:     tile(2,8),
+        grenade: tile(3,8),
+    };
+
     // enable touch gamepad on touch devices
     touchGamepadEnable = true;
 
-    // setup game
+    // setup level
+    buildLevel();
+
+    // init game
     score = deaths = 0;
     gravity = -.01;
     objectDefaultDamping = .99;
     objectDefaultAngleDamping = .99;
     cameraScale = 4*16;
-    buildLevel();
+    cameraPos = getCameraTarget();
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -60,20 +78,23 @@ function gameUpdate()
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost()
+function getCameraTarget()
 {
-    // move camera to player
-    cameraPos = cameraPos.lerp(player.pos, clamp(player.getAliveTime()/2));
+    // camera is above player
+    const offset = 3*percent(mainCanvasSize.y, 300, 600);
+    return player.pos.add(vec2(0, offset));
+}
 
-    // update parallax background relative to camera
-    updateParallaxLayers();
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost()
+{
+    // update camera
+    cameraPos = cameraPos.lerp(getCameraTarget(), clamp(player.getAliveTime()/2));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
-    drawSky();
-    drawStars();
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/platformer/gameCharacter.js

@@ -210,15 +210,16 @@ class Character extends GameObject
         // update mirror
         if (moveInput.x && !this.dodgeTimer.active())
             this.mirror = moveInput.x < 0;
-        
-        // set tile to use
-        const tile = this.isDead() ? 3 : 
-            this.climbingLadder || this.groundTimer.active() ? 3 + 2*this.walkCyclePercent|0 : 4;
-        this.tileInfo.pos.x = tile * 16;
     }
        
     render()
     {
+        // update animation
+        const animationFrame = this.isDead() ? 0 :
+            this.climbingLadder || this.groundTimer.active() ?
+            2*this.walkCyclePercent|0 : 1;
+        this.tileInfo = spriteAtlas.player.frame(animationFrame);
+
         let bodyPos = this.pos;
         if (!this.isDead())
         {
@@ -245,7 +246,7 @@ class Character extends GameObject
         if (this.isDead())
             return;
 
-        makeBlood(this.pos, 300);
+        makeBlood(this.pos, 100);
         sound_die.play(this.pos);
 
         this.health = 0;

package/examples/platformer/gameEffects.js

@@ -34,12 +34,12 @@ const persistentParticleDestroyCallback = (particle)=>
         tileLayers[foregroundLayerIndex].drawTile(particle.pos, particle.size, particle.tileInfo, particle.color, particle.angle, particle.mirror);
 }
 
-function makeBlood(pos, amount) { makeDebris(pos, hsl(0,1,.5), 50, .1, 0); }
-function makeDebris(pos, color = hsl(), amount = 100, size=.2, elasticity = .3)
+function makeBlood(pos, amount) { makeDebris(pos, hsl(0,1,.5), amount, .1, 0); }
+function makeDebris(pos, color = hsl(), amount = 50, size=.2, elasticity = .3)
 {
     const color2 = color.lerp(hsl(), .5);
     const emitter = new ParticleEmitter(
-        pos, 0, 1, .1, 100, PI, // pos, angle, emitSize, emitTime, emitRate, emiteCone
+        pos, 0, 1, .1, amount/.1, PI, // pos, angle, emitSize, emitTime, emitRate, emiteCone
         0,                      // tileInfo
         color, color2,          // colorStartA, colorStartB
         color, color2,          // colorEndA, colorEndB
@@ -163,87 +163,96 @@ function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
 ///////////////////////////////////////////////////////////////////////////////
 // sky with background gradient, stars, and planets
 
-let skySeed, skyColor, horizonColor;
-
-function initSky()
+class Sky extends EngineObject
 {
-    skySeed = rand(1e9);
-    skyColor = randColor(hsl(0,0,.5), hsl(0,0,.9));
-    horizonColor = skyColor.subtract(hsl(0,0,.05)).mutate(.3).clamp();
-}
+    constructor() 
+    {
+        super();
 
-function drawSky()
-{
-    // fill background with a gradient
-    const gradient = mainContext.fillStyle = mainContext.createLinearGradient(0, 0, 0, mainCanvas.height);
-    gradient.addColorStop(0, skyColor);
-    gradient.addColorStop(1, horizonColor);
-    mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
-}
+        this.renderOrder = -1e4;
+        this.seed = randInt(1e9);
+        this.skyColor = randColor(hsl(0,0,.5), hsl(0,0,.9));
+        this.horizonColor = this.skyColor.subtract(hsl(0,0,.05,0)).mutate(.3);
+    }
 
-function drawStars()
-{
-    // draw stars and planets
-    const random = new RandomGenerator(skySeed);
-    for (let i = 1e3; i--;)
+    render()
     {
-        const size = random.float(1, 6);
-        const speed = random.float() < .9 ? random.float(5) : random.float(9,99);
-        const color = hsl(random.float(-.3,.2), random.float()**9, random.float(.5,1), random.float(.3,.9));
-        const extraSpace = 200;
-        const w = mainCanvas.width+2*extraSpace, h = mainCanvas.height+2*extraSpace;
-        const screenPos = vec2(
-            (random.float(w)+time*speed)%w-extraSpace,
-            (random.float(h)+time*speed*random.float())%h-extraSpace);
-
-        mainContext.fillStyle = color;
-        mainContext.fillRect(screenPos.x, screenPos.y, size, size);
+        // fill background with a gradient
+        const gradient = mainContext.createLinearGradient(0, 0, 0, mainCanvas.height);
+        gradient.addColorStop(0, this.skyColor);
+        gradient.addColorStop(1, this.horizonColor);
+        mainContext.save();
+        mainContext.fillStyle = gradient;
+        mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
+        mainContext.globalCompositeOperation = 'lighter';
+        
+        // draw stars
+        const random = new RandomGenerator(this.seed);
+        for (let i=1e3; i--;)
+        {
+            const size = random.float(.5,2)**2;
+            const speed = random.float() < .9 ? random.float(5) : random.float(9,99);
+            const color = hsl(random.float(-.3,.2), random.float(), random.float());
+            const extraSpace = 50;
+            const w = mainCanvas.width+2*extraSpace, h = mainCanvas.height+2*extraSpace;
+            const screenPos = vec2(
+                (random.float(w)+time*speed)%w-extraSpace,
+                (random.float(h)+time*speed*random.float())%h-extraSpace);
+            mainContext.fillStyle = color;
+            mainContext.fillRect(screenPos.x, screenPos.y, size, size);
+        }
+        mainContext.restore();
     }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // parallax background mountain ranges
 
-let tileParallaxLayers;
-
-function initParallaxLayers()
+class ParallaxLayer extends EngineObject
 {
-    tileParallaxLayers = [];
-    for (let i=3; i--;)
+    constructor(index) 
     {
-        // setup the layer
-        const parallaxSize = vec2(600,300), startGroundLevel = 99+i*30;
-        const tileParallaxLayer = tileParallaxLayers[i] = new TileLayer(vec2(), parallaxSize);
-        tileParallaxLayer.renderOrder = -3e3+i;
-        tileParallaxLayer.canvas.width = parallaxSize.x;
+        super();
+
+        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 layerColor = levelColor.mutate(.2).lerp(skyColor,.95-i*.15);
-        const gradient = tileParallaxLayer.context.fillStyle = 
-            tileParallaxLayer.context.createLinearGradient(0,0,0,tileParallaxLayer.canvas.height = parallaxSize.y);
+        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 = levelColor.mutate(.1).lerp(sky.skyColor,1-index*.15);
         gradient.addColorStop(0,layerColor);
-        gradient.addColorStop(1,layerColor.subtract(hsl(0,0,1,0)).mutate(.1).clamp());
-
-        // draw mountains ranges
-        let groundLevel = startGroundLevel, groundSlope = rand(-1,1);
-        for (let x=parallaxSize.x;x--;)
-            tileParallaxLayer.context.fillRect(x,groundLevel += groundSlope = rand() < .05 ? rand(1, -1) :
-                groundSlope + (startGroundLevel - groundLevel)/2e3, 1, parallaxSize.y)
+        gradient.addColorStop(1,layerColor.mutate(.5).scale(.1,1));
+        this.context.fillStyle = gradient;
+
+        // draw procedural mountains ranges
+        let groundLevel = size.y/2, groundSlope = rand(-1,1);
+        for (let i=size.x; i--;)
+            this.context.fillRect(i, groundLevel += groundSlope = rand() < .3 ? rand(1,-1) :
+                groundSlope + (size.y/2 - groundLevel)/300, 1, size.y);
     }
-}
 
-function updateParallaxLayers()
-{
-    tileParallaxLayers.forEach((tileParallaxLayer, i)=>
+    render()
     {
-        // position layer depending on camera position
-        const distance = 4+i;
-        const parallax = vec2(150,30).scale((i*i+1));
-        const cameraDeltaFromCenter = cameraPos.subtract(levelSize.scale(.5)).divide(levelSize.scale(-.5).divide(parallax));
-        tileParallaxLayer.scale = vec2(distance/cameraScale);
-        tileParallaxLayer.pos = cameraPos
-            .subtract(tileParallaxLayer.size.multiply(tileParallaxLayer.scale).scale(.5))
-            .add(cameraDeltaFromCenter.scale(1/cameraScale))
-            .subtract(vec2(0,150/cameraScale))
-    });
+        // position layer based on camera distance from center of level
+        const parallax = vec2(1e3,-100).scale(this.index**2);
+        const cameraDeltaFromCenter = cameraPos
+            .subtract(levelSize.scale(.5))
+            .divide(levelSize.divide(parallax));
+        const scale = this.size.scale(2+2*this.index);
+        const pos = 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
+        mainContext.drawImage(this.canvas, pos.x, pos.y, scale.x, scale.y);
+    }
 }

package/examples/platformer/gameLevel.js

@@ -8,12 +8,12 @@
 
 'use strict';
 
-const tileType_ladder      = -1;
-const tileType_empty       = 0;
-const tileType_solid       = 1;
-const tileType_breakable   = 2;
+const tileType_ladder    = -1;
+const tileType_empty     = 0;
+const tileType_solid     = 1;
+const tileType_breakable = 2;
 
-let player, playerStartPos, tileData, tileLayers, foregroundLayerIndex;
+let player, playerStartPos, tileData, tileLayers, foregroundLayerIndex, sky;
 let levelSize, levelColor, levelBackgroundColor, levelOutlineColor, warmup;
 
 const setTileData = (pos, layer, data)=>
@@ -27,10 +27,14 @@ function buildLevel()
     levelColor = randColor(hsl(0,0,.2), hsl(0,0,.8));
     levelBackgroundColor = levelColor.mutate().scale(.4,1);
     levelOutlineColor = levelColor.mutate().add(hsl(0,0,.4)).clamp();
-
     loadLevel();
-    initSky();
-    initParallaxLayers();
+
+    // create sky object with gradient and stars
+    sky = new Sky;
+
+    // create parallax layers
+    for (let i=3; i--;)
+        new ParallaxLayer(i);
     
     // apply decoration to all level tiles
     const pos = vec2();
@@ -47,7 +51,7 @@ function buildLevel()
     warmup = 0;
 
     // spawn player
-    player = new Player(cameraPos = playerStartPos);
+    player = new Player(playerStartPos);
 }
 
 function loadLevel()
@@ -59,6 +63,19 @@ function loadLevel()
     initTileCollision(levelSize);
     engineObjectsDestroy();
 
+    // 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,
+    }
+
     // set all level data tiles
     tileData = [];
     tileLayers = [];
@@ -79,19 +96,18 @@ function loadLevel()
             const pos = vec2(x,levelSize.y-1-y);
             const tile = layerData[y*levelSize.x+x];
 
-            if (tile >= 17 && tile <= 20)
+            if (tile >= tileLookup.player)
             {
                 // create object instead of tile
                 const objectPos = pos.add(vec2(.5));
-                if (tile == 17)
+                if (tile == tileLookup.player)
                     playerStartPos = objectPos;
-                if (tile == 18)
+                if (tile == tileLookup.crate)
                     new Crate(objectPos);
-                if (tile == 19)
+                if (tile == tileLookup.enemy)
                     new Enemy(objectPos);
-                if (tile == 20)
+                if (tile == tileLookup.coin)
                     new Coin(objectPos);
-                setTileData(pos, layer, 0);
                 continue;
             }
 
@@ -102,9 +118,9 @@ function loadLevel()
             let tileType = tileType_empty;
             if (tile > 0)
                 tileType = tileType_breakable;
-            if (tile == 4)
+            if (tile == tileLookup.ladder)
                 tileType = tileType_ladder;
-            if (tile == 5)
+            if (tile == tileLookup.metal)
                 tileType = tileType_solid;
             if (tileType)
             {

package/examples/platformer/{gameTileData.js → gameLevelData.js}

@@ -7,7 +7,7 @@
  }
  if(typeof module === 'object' && module && module.exports) {
   module.exports = data;
- }})("gameTileData",
+ }})("gameLevelData",
 { "compressionlevel":-1,
  "height":64,
  "infinite":false,
@@ -118,7 +118,7 @@
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 2, 5, 2, 5, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 4, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 5, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 2, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 5, 0, 0, 5, 0, 0, 5, 0, 0, 0, 0, 0, 2, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 5, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 5, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 4, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 20, 20, 20, 20, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 18, 0, 5, 5, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 18, 0, 0, 0, 0, 0, 0, 5, 4, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 0, 0, 5, 5, 5, 0, 0, 0, 0, 0, 0, 5, 5, 5, 5, 0, 0, 5, 5, 5, 0, 0, 0, 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 18, 0, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 20, 20, 20, 20, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 0, 0, 0, 0, 0, 0, 0, 0, 19, 0, 4, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 18, 18, 0, 5, 5, 0, 0, 19, 0, 0, 0, 5, 5, 0, 18, 18, 18, 0, 19, 19, 0, 0, 5, 4, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 19, 0, 19, 0, 0, 0, 0, 0, 0, 0, 19, 0, 0, 19, 0, 0, 0, 0, 0, 4, 0, 19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 5, 0, 0, 5, 5, 5, 5, 0, 19, 0, 0, 5, 5, 5, 5, 5, 0, 0, 5, 5, 5, 5, 0, 0, 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 19, 0, 0, 0, 19, 0, 0, 0, 18, 18, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 20, 20, 20, 20, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 0, 0, 0, 0, 0, 0, 0, 0, 19, 0, 4, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 18, 18, 0, 5, 5, 0, 0, 19, 0, 0, 0, 5, 5, 0, 18, 18, 18, 0, 19, 0, 0, 0, 5, 4, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 19, 0, 0, 0, 0, 0, 4, 0, 19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 5, 0, 0, 5, 5, 5, 5, 0, 19, 0, 0, 5, 5, 5, 5, 5, 0, 0, 5, 5, 5, 5, 0, 0, 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 19, 0, 0, 0, 19, 0, 0, 0, 18, 18, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 20, 20, 20, 20, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 3, 2, 2, 2, 3, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 5, 5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
             2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 3, 2, 3, 2, 2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 5, 5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2,
             2, 2, 3, 2, 2, 3, 2, 2, 3, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 3, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 0, 0, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
@@ -172,7 +172,7 @@
  "tilesets":[
         {
          "firstgid":1,
-         "source":"data\/gameTileData.tsx"
+         "source":"data\/gameLevelData.tsx"
         }],
  "tilewidth":16,
  "type":"map",

package/examples/platformer/gameObjects.js

@@ -66,7 +66,7 @@ class Crate extends GameObject
 {
     constructor(pos) 
     { 
-        super(pos, vec2(1), tile(2), (randInt(4))*PI/2);
+        super(pos, vec2(1), spriteAtlas.crate, (randInt(4))*PI/2);
 
         this.color = hsl(rand(),1,.8);
         this.health = 5;
@@ -81,7 +81,7 @@ class Crate extends GameObject
             return;
 
         sound_destroyObject.play(this.pos);
-        makeDebris(this.pos, this.color, 200);
+        makeDebris(this.pos, this.color, 30);
         this.destroy();
     }
 }
@@ -92,7 +92,7 @@ class Coin extends EngineObject
 {
     constructor(pos) 
     { 
-        super(pos, vec2(1), tile(6));
+        super(pos, vec2(1), spriteAtlas.coin);
         this.color = hsl(.15,1,.5);
     }
 
@@ -127,7 +127,7 @@ class Enemy extends GameObject
 {
     constructor(pos) 
     { 
-        super(pos, vec2(.9,.9), tile(5));
+        super(pos, vec2(.9,.9), spriteAtlas.enemy);
 
         this.drawSize = vec2(1);
         this.color = hsl(rand(), 1, .7);
@@ -147,7 +147,7 @@ class Enemy extends GameObject
         if (this.groundObject && rand() < .01 && this.pos.distance(player.pos) < 20)
         {
             this.velocity = vec2(rand(.1,-.1), rand(.4,.2));
-            sound_jump.play(this.pos);
+            sound_jump.play(this.pos, .4, 2);
         }
 
         // damage player if touching
@@ -162,7 +162,7 @@ class Enemy extends GameObject
 
         ++score;
         sound_score.play(this.pos);
-        makeDebris(this.pos, this.color, 300);
+        makeDebris(this.pos, this.color);
         this.destroy();
     }
        
@@ -185,7 +185,7 @@ class Grenade extends GameObject
 {
     constructor(pos) 
     {
-        super(pos, vec2(.2), tile(3,8));
+        super(pos, vec2(.2), spriteAtlas.grenade);
 
         this.beepTimer = new Timer(1);
         this.elasticity   = .3;
@@ -218,7 +218,7 @@ class Grenade extends GameObject
         // draw additive flash exploding
         setBlendMode(true);
         const flash = Math.cos(this.getAliveTime()*2*PI);
-        drawTile(this.pos, vec2(2), tile(0, 16), hsl(0,1,.5,.2-.2*flash));
+        drawTile(this.pos, vec2(2), spriteAtlas.circle, hsl(0,1,.5,.2-.2*flash));
         setBlendMode(false);
     }
 }
@@ -229,7 +229,7 @@ class Weapon extends EngineObject
 {
     constructor(pos, parent) 
     { 
-        super(pos, vec2(.6), tile(2,8));
+        super(pos, vec2(.6), spriteAtlas.gun);
 
         // weapon settings
         this.fireRate      = 8;
@@ -263,7 +263,7 @@ class Weapon extends EngineObject
 
         // update recoil
         if (this.recoilTimer.active())
-            this.localAngle = lerp(this.recoilTimer.getPercent(), 0, this.localAngle);
+            this.localAngle = lerp(this.recoilTimer.getPercent(), this.localAngle, 0);
 
         this.mirror = this.parent.mirror;
         this.fireTimeBuffer += timeDelta;
@@ -274,8 +274,8 @@ class Weapon extends EngineObject
             {
                 // create bullet
                 sound_shoot.play(this.pos);
-                this.localAngle = -rand(.2,.15);
-                this.recoilTimer.set(.4);
+                this.localAngle = -rand(.2,.25);
+                this.recoilTimer.set(.1);
                 const direction = vec2(this.bulletSpeed*this.getMirrorSign(), 0);
                 const velocity = direction.rotate(rand(-1,1)*this.bulletSpread);
                 new Bullet(this.pos, this.parent, velocity, this.damage);
@@ -323,8 +323,8 @@ class Bullet extends EngineObject
         this.range -= this.velocity.length();
         if (this.range < 0)
         {
-            const emitter = new ParticleEmitter(
-                this.pos, 0, .2, .1, 50, PI, tile(0),  // pos, angle, emit info, tileInfo
+            new ParticleEmitter(
+                this.pos, 0, .2, .1, 50, PI, spriteAtlas.circle, // pos, emit info, tileInfo
                 rgb(1,1,.1), rgb(1,1,1),    // colorStartA, colorStartB
                 rgb(1,1,.1,0), rgb(1,1,1,0),// colorEndA, colorEndB
                 .1, .5, .1, .05, 0, // particleTime, sizeStart, sizeEnd, speed, angleSpeed

package/examples/platformer/index.html

@@ -12,5 +12,5 @@
 <script src=gamePlayer.js?192></script>
 <script src=gameEffects.js?192></script>
 <script src=gameLevel.js?192></script>
-<script src=gameTileData.js?192></script>
+<script src=gameLevelData.js?192></script>
 <script src=game.js?192></script>

package/examples/stress/index.html

@@ -11,7 +11,7 @@
 
 /*
     LittleJS Stress Test
-    - Render over 50,000 sprites at 60 fps in Chrome
+    - Render over 100,000 sprites at 60 fps in Chrome
     - Also plays music in the background with zzfxm
     - All code and the image is contained in this html file
 */

package/examples/typescript/game.js

@@ -6,7 +6,7 @@
 'use strict';
 // import module
 import * as LittleJS from '../../dist/littlejs.esm.js';
-const { Vector2, Color, Timer, tile, vec2, hsl, rgb } = LittleJS;
+const { tile, vec2, hsl } = LittleJS;
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);
 // sound effects

package/examples/typescript/game.ts

@@ -8,7 +8,7 @@
 
 // import module
 import * as LittleJS from '../../dist/littlejs.esm.js';
-const {Vector2, Color, Timer, tile, vec2, hsl, rgb} = LittleJS;
+const {tile, vec2, hsl} = LittleJS;
 
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);

package/package.json

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