littlejsengine 1.7.21 → 1.8.3

package/examples/breakout/game.js

@@ -60,7 +60,7 @@ function gameRender()
 {
     // draw a the background
     drawRect(cameraPos, levelSize.scale(2), new Color(.5,.5,.5));
-    drawRect(cameraPos, levelSize, new Color(.05,.05,.05));
+    drawRect(cameraPos, levelSize, new Color(.02,.02,.02));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -68,7 +68,7 @@ function gameRenderPost()
 {
     // use built in image font for text
     const font = new FontImage;
-    font.drawText('Score: ' + score, cameraPos.add(vec2(0,9.6)), .1, 1);
+    font.drawText('Score: ' + score, cameraPos.add(vec2(0,9.6)), .15, 1);
     if (!brickCount)
         font.drawText('You Win!', cameraPos.add(vec2(0,-5)), .2, 1);
     else if (!ball)
@@ -93,34 +93,37 @@ function initPostProcess()
     }
     void mainImage(out vec4 c, vec2 p)
     {
+        // put uv in texture pixel space
         p /= iResolution.xy;
 
         // apply fuzz as horizontal offset
-        const float fuzz = .001;
+        const float fuzz = .0005;
         const float fuzzScale = 800.;
-        p.x += fuzz*(noise(vec2(p.y*fuzzScale, iTime*9.))*2.-1.);
+        const float fuzzSpeed = 9.;
+        p.x += fuzz*(noise(vec2(p.y*fuzzScale, iTime*fuzzSpeed))*2.-1.);
 
         // init output color
-        c = texture2D(iChannel0, p);
+        c = texture(iChannel0, p);
 
         // chromatic aberration
-        const float chromatic = .003;
-        c.r = texture2D(iChannel0, p - vec2(chromatic, 0)).r;
-        c.b = texture2D(iChannel0, p + vec2(chromatic, 0)).b;
+        const float chromatic = .002;
+        c.r = texture(iChannel0, p - vec2(chromatic,0)).r;
+        c.b = texture(iChannel0, p + vec2(chromatic,0)).b;
 
         // tv static noise
         const float staticNoise = .1;
-        c += staticNoise * hash(vec2(p + mod(iTime, 1e3)));
+        c += staticNoise * hash(p + mod(iTime, 1e3));
 
         // scan lines
-        const float scanlineScale = 800.;
+        const float scanlineScale = 1e3;
         const float scanlineAlpha = .1;
         c *= 1. + scanlineAlpha*sin(p.y*scanlineScale);
 
-        // black vignette around the outside
+        // black vignette around edges
         const float vignette = 2.;
-        float dx = 2.*p.x - 1., dy = 2.*p.y - 1.;
-        c *= 1.-pow((dx*dx + dy*dy)/vignette, 6.);
+        const float vignettePow = 6.;
+        float dx = 2.*p.x-1., dy = 2.*p.y-1.;
+        c *= 1.-pow((dx*dx + dy*dy)/vignette, vignettePow);
     }`;
 
     const includeOverlay = true;
@@ -129,4 +132,4 @@ function initPostProcess()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/breakout/gameObjects.js

@@ -43,7 +43,7 @@ class Brick extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(2,1), 1, vec2(32,16), 0, randColor());
+        super(pos, vec2(2,1), tile(1, vec2(32,16)), 0, randColor());
         ++brickCount;
         
         this.mass = 0; // make object have static physics
@@ -62,15 +62,22 @@ class Brick extends EngineObject
         const color1 = this.color;
         const color2 = color1.lerp(new Color, .5);
         new ParticleEmitter(
-            this.pos, 0,                          // emitPos, emitAngle
+            this.pos, 0,                          // pos, angle
             this.size, .1, 200, PI,               // emitSize, emitTime, emitRate, emiteCone
-            0, vec2(16),                          // tileIndex, tileSize
+            tile(0, 16),                          // tileIndex, tileSize
             color1, color2,                       // colorStartA, colorStartB
             color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
-            .1, .3, 1, .05, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
-            .99, .95, .4, PI,   // damping, angleDamping, gravityScale, cone
-            .1, .5, 0, 1        // fadeRate, randomness, collide, additive
+            .3, .8, .3, .05, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
+            .99, .95, .4, PI,    // damp, angleDamp, gravity, cone
+            .1, .8, 0, 1         // fade, randomness, collide, additive
         );
+
+        // set ball trail color
+        if (o.trailEffect)
+        {
+            o.trailEffect.colorStartA = this.color; 
+            o.trailEffect.colorStartB = this.color.lerp(new Color, .5);
+        }
         
         return 1;
     }
@@ -81,12 +88,26 @@ class Ball extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(.5), 0);
+        super(pos, vec2(.5), tile(0));
 
         // make a bouncy ball
         this.setCollision();
-        this.velocity = vec2(randSign(), -1).scale(.1);
+        this.velocity = vec2(0, -.1);
         this.elasticity = 1;
+        
+        // attach a trail effect
+        const color = hsl(0,0,.2);
+        this.trailEffect = new ParticleEmitter(
+            this.pos, 0,                          // pos, angle
+            this.size, 0, 80, PI,                 // emitSize, emitTime, emitRate, emiteCone
+            tile(0, 16),                          // tileIndex, tileSize
+            color, color,                         // colorStartA, colorStartB
+            color.scale(0), color.scale(0),       // colorEndA, colorEndB
+            2, .4, 1, .001, .05,// time, sizeStart, sizeEnd, speed, angleSpeed
+            .99, .95, 0, PI,    // damp, angleDamp, gravity, cone
+            .1, .5, 0, 1        // fade, randomness, collide, additive
+        );
+        this.addChild(this.trailEffect);
     }
 
     update()

package/examples/breakout/index.html

@@ -6,6 +6,6 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.js?1713></script>
-<script src=gameObjects.js?1713></script>
-<script src=game.js?1713></script>
+<script src=../../build/littlejs.js?183></script>
+<script src=gameObjects.js?183></script>
+<script src=game.js?183></script>

package/examples/breakoutTutorial/README.md

@@ -237,7 +237,7 @@ this.color = new Color(0,0,0,0); // make object invisible
 
 ## Debug Display
 
-This is a good time to try opening up the debug info by pressing ~. This feature will allow for a selection of debug overlays while also showing all game objects with more info displayed for the object closest to the mouse. It can be really useful when trying to diagnose bugs and understand what is going on.
+This is a good time to try opening up the debug info by pressing escape. This feature will allow for a selection of debug overlays while also showing all game objects with more info displayed for the object closest to the mouse. It can be really useful when trying to diagnose bugs and understand what is going on.
 
 ![LittleJS Screenshot](images/7.png)
 
@@ -409,7 +409,7 @@ Make sure you replace the first parameter, vec2(), with this.pos so the effect a
 
 ```javascript
 // create explosion effect
-new ParticleEmitter(this.pos, 0, 0, 0.1, 100, 3.14, -1, vec2(16, 16), new Color(1, 1, 1, 1), new Color(1, 1, 1, 1), new Color(1, 1, 1, 0), new Color(1, 1, 1, 0), 0.5, 0.1, 1, 0.1, 0.05, 1, 1, 0, 3.14, 0.1, 0.2, 0, 0, 1);
+new ParticleEmitter(this.pos, 0, 0, 0.1, 100, 3.14, 0, new Color(1, 1, 1, 1), new Color(1, 1, 1, 1), new Color(1, 1, 1, 0), new Color(1, 1, 1, 0), 0.5, 0.1, 1, 0.1, 0.05, 1, 1, 0, 3.14, 0.1, 0.2, 0, 0, 1);
 ```
 
 Now you should see this simple particle effect play wherever a brick breaks. You can continue tweaking the parameters to make your own effect or use the one I made which also uses this.color to change the particle’s color so it matches the brick.
@@ -420,7 +420,7 @@ const color = this.color;
 new ParticleEmitter(
     this.pos, 0,            // pos, angle
     this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emiteCone
-    -1, vec2(16),           // tileIndex, tileSize
+    0,                      // tileInfo
     color, color,           // colorStartA, colorStartB
     color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB
     .2, .5, 1, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed

package/examples/breakoutTutorial/game.js

@@ -114,12 +114,12 @@ class Brick extends EngineObject
         new ParticleEmitter(
             this.pos, 0,            // pos, angle
             this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emiteCone
-            -1, vec2(16),           // tileIndex, tileSize
-            color, color,           // colorStartA, colorStartB
+            0,                      // tileInfo
+            color, color,                       // colorStartA, colorStartB
             color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB
             .2, .5, 1, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed
-            .99, .95, .4, PI,   // damping, angleDamping, gravityScale, cone
-            .1, .5, 0, 1        // fadeRate, randomness, collide, additive
+            .99, .95, .4, PI,   // damp, angleDamp, gravity, cone
+            .1, .5, 0, 1        // fade, randomness, collide, additive
         );
 
         return 1; // allow object to collide

package/examples/breakoutTutorial/index.html

@@ -6,5 +6,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.js?1713></script>
-<script src=game.js?1713></script>
+<script src=../../build/littlejs.js?183></script>
+<script src=game.js?183></script>

package/examples/electron/game.js

@@ -26,6 +26,7 @@ function gameInit()
 
     // get level data from the tiles image
     const imageLevelDataRow = 1;
+    const tileImage = textureInfos[0].image;
     mainContext.drawImage(tileImage, 0, 0);
     for (pos.x = tileCollisionSize.x; pos.x--;)
     for (pos.y = tileCollisionSize.y; pos.y--;)
@@ -54,7 +55,7 @@ function gameInit()
     particleEmiter = new ParticleEmitter(
         vec2(16), 0,                            // emitPos, emitAngle
         1, 0, 500, PI,                          // emitSize, emitTime, emitRate, emiteCone
-        0, vec2(16),                            // tileIndex, tileSize
+        tile(0, 16),                            // tileIndex, tileSize
         new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
         new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
         2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
@@ -110,4 +111,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/electron/index.html

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

package/examples/empty/game.js

@@ -44,4 +44,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/js13k/game.js

@@ -24,23 +24,28 @@ function gameInit()
     const tileLayer = new TileLayer(pos, tileCollisionSize);
 
     // get level data from the tiles image
-    const imageLevelDataRow = 1;
-    mainContext.drawImage(tileImage, 0, 0);
+    const tileImage = textureInfos[0].image;
+    mainContext.drawImage(tileImage,0,0);
+    const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
     for (pos.x = tileCollisionSize.x; pos.x--;)
     for (pos.y = tileCollisionSize.y; pos.y--;)
     {
-        const imageData = mainContext.getImageData(pos.x, 16*(imageLevelDataRow+1)-pos.y-1, 1, 1).data;
-        if (imageData[0])
-        {
-            const tileIndex = 1;
-            const direction = randInt(4)
-            const mirror = randInt(2);
-            const color = randColor();
-            const data = new TileLayerData(tileIndex, direction, mirror, color);
-            tileLayer.setData(pos, data);
-            setTileCollisionData(pos, 1);
-        }
+        // check if this pixel is set
+        const i = pos.x + tileImage.width*(15 + tileCollisionSize.y - pos.y);
+        if (!imageData[4*i])
+            continue;
+        
+        // set tile data
+        const tileIndex = 1;
+        const direction = randInt(4)
+        const mirror = randInt(2);
+        const color = randColor();
+        const data = new TileLayerData(tileIndex, direction, mirror, color);
+        tileLayer.setData(pos, data);
+        setTileCollisionData(pos, 1);
     }
+
+    // draw tile layer with new data
     tileLayer.redraw();
 
     // move camera to center of collision
@@ -53,7 +58,7 @@ function gameInit()
     particleEmitter = new ParticleEmitter(
         vec2(16), 0,                            // emitPos, emitAngle
         1, 0, 500, PI,                          // emitSize, emitTime, emitRate, emiteCone
-        0, vec2(16),                            // tileIndex, tileSize
+        tile(0, 16),                            // tileIndex, tileSize
         new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
         new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
         2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
@@ -106,4 +111,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/js13k/index.html

@@ -1,18 +1,18 @@
-<head><title>LittleJS JS13K Project</title></head>
+<head><title>LittleJS JS13K Project</title></head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?1713></script>
-<script src=../../src/engineUtilities.js?1713></script>
-<script src=../../src/engineSettings.js?1713></script>
-<script src=../../src/engineObject.js?1713></script>
-<script src=../../src/engineDraw.js?1713></script>
-<script src=../../src/engineInput.js?1713></script>
-<script src=../../src/engineAudio.js?1713></script>
-<script src=../../src/engineTileLayer.js?1713></script>
-<script src=../../src/engineParticles.js?1713></script>
-<script src=../../src/engineMedals.js?1713></script>
-<script src=../../src/engineWebGL.js?1713></script>
-<script src=../../src/engine.js?1713></script>
+<script src=../../src/engineDebug.js?183></script>
+<script src=../../src/engineUtilities.js?183></script>
+<script src=../../src/engineSettings.js?183></script>
+<script src=../../src/engineObject.js?183></script>
+<script src=../../src/engineDraw.js?183></script>
+<script src=../../src/engineInput.js?183></script>
+<script src=../../src/engineAudio.js?183></script>
+<script src=../../src/engineTileLayer.js?183></script>
+<script src=../../src/engineParticles.js?183></script>
+<script src=../../src/engineMedals.js?183></script>
+<script src=../../src/engineWebGL.js?183></script>
+<script src=../../src/engine.js?183></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1713></script>
+<script src=game.js?183></script>

package/examples/module/game.js

@@ -8,7 +8,7 @@
 
 // import module
 import * as LittleJS from '../../build/littlejs.esm.js';
-const {Vector2, Color, Timer, vec2} = LittleJS;
+const {Vector2, Color, Timer, vec2, tile} = LittleJS;
 
 // sound effects
 const sound_click = new LittleJS.Sound([1,.5]);
@@ -31,7 +31,8 @@ function gameInit()
     // get level data from the tiles image
     const imageLevelDataRow = 1;
     const mainContext = LittleJS.mainContext;
-    mainContext.drawImage(LittleJS.tileImage, 0, 0);
+    const tileImage = LittleJS.textureInfos[0].image;
+    mainContext.drawImage(tileImage, 0, 0);
     for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
     for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;)
     {
@@ -60,7 +61,7 @@ function gameInit()
     particleEmiter = new LittleJS.ParticleEmitter(
         center, 0,                              // emitPos, emitAngle
         1, 0, 500, Math.PI,                     // emitSize, emitTime, emitRate, emiteCone
-        0, vec2(16),                            // tileIndex, tileSize
+        LittleJS.tile(0, 16),                   // tileIndex, tileSize
         new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
         new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
         2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
@@ -120,4 +121,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/module/index.html

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

package/examples/particles/index.html

@@ -10,7 +10,7 @@ button { margin:1px; }
 </style>
 </head><body>
 
-<script src=../../build/littlejs.js?1713></script>
+<script src=../../build/littlejs.js?183></script>
 <script>
 
 'use strict';
@@ -31,8 +31,7 @@ addSetting('emitTime',         '', 0, 1e9, .1, 'How long to stay alive (0 is for
 addSetting('emitRate',         '', 0, 1e9, 1,  'How many particles per second to spawn, does not emit if 0');
 addSetting('emitConeAngle',    '', 0, 1e9, .01,'Local angle to apply velocity to particles from emitter');
 addSetting('tileIndex',        '', -1, 1e9, 1, 'Tile to use to render object (-1 is untextured)');
-addSetting('tileSizeX',        '', 0, 1e9, 1, 'X Size of texture tile in source pixelss');
-addSetting('tileSizeY',        '', 0, 1e9, 1, 'Y Size of texture tile in source pixelss');
+addSetting('tileSize',         '', 0, 1e9, 1,  'Size of texture tile in source pixels');
 addSetting('colorStartA',      'color',0,0,0, 'Color at start of life 1');
 addSetting('colorStartA_alpha', 'alpha', 0,    1,   .01, 'Alpha at start of life 1');
 addSetting('colorStartB',      'color',0,0,0, 'Color at start of life 2');
@@ -61,6 +60,7 @@ function makeEmitter()
     if (particleSystem)
         particleSystem.destroy();
     particleSystem = new ParticleEmitter(cameraPos);
+    particleSystem.tileInfo = tile();
     particleSystem.emitConeAngle =
     particleSystem.particleConeAngle = 3.14;
 }
@@ -102,10 +102,8 @@ function gameInit()
                 else if (name == 'colorEndB_alpha')
                     defaultValue = particleSystem.colorEndB.a;
             }
-            else if (name == 'tileSizeX')
-                defaultValue = particleSystem.tileSize.x;
-            else if (name == 'tileSizeY')
-                defaultValue = particleSystem.tileSize.y;
+            else if (name == 'tileSize')
+                defaultValue = particleSystem.tileInfo.size.x;
             else if (type == 'checkbox')
                 defaultValue = particleSystem[name];
             else
@@ -162,7 +160,7 @@ function gameInit()
             if (!confirm('Reset to default?'))
                 return;
             makeEmitter();
-            updateInputs(0);
+            updateInputs();
             cameraScale = 50;
         }
     }
@@ -200,6 +198,7 @@ function gameInit()
     }
 
     updateParticles();
+    particleSystemCode.value = getCode();
 }
 
 function updateParticles(shouldUpdateInput)
@@ -228,14 +227,14 @@ function updateParticles(shouldUpdateInput)
             else if (name == 'colorEndB_alpha')
                 particleSystem.colorEndB.a   = clamp(inputFloat);
         }
-        else if (name == 'tileSizeX')
-        {
-            particleSystem.tileSize = vec2(parseInt(input.value), particleSystem.tileSize.y);
-        }
-        else if (name == 'tileSizeY')
+        else if (name == 'tileIndex')
         {
-            particleSystem.tileSize = vec2(particleSystem.tileSize.x, parseInt(input.value));
+            const tileIndex = parseInt(input.value);
+            particleSystem.tileIndex = tileIndex
+            particleSystem.tileInfo = tile(tileIndex, particleSystem.tileInfo.size);
         }
+        else if (name == 'tileSize')
+            particleSystem.tileInfo.size = vec2(parseInt(input.value));
         else if (type == 'checkbox')
             particleSystem[name] = input.checked ? 1 : 0;
         else if (name == 'emitRate')
@@ -275,10 +274,8 @@ function updateSetting(setting, save=1)
         else if (name == 'colorEndB_alpha')
             input.value = particleSystem.colorEndB.a;
     }
-    else if (name == 'tileSizeX')
-        input.value = particleSystem.tileSize.x;
-    else if (name == 'tileSizeY')
-        input.value = particleSystem.tileSize.y;
+    else if (name == 'tileSize')
+        input.value = particleSystem.tileInfo.size.x;
     else if (type == 'checkbox')
         input.checked = particleSystem[name];
     else
@@ -315,11 +312,11 @@ function getCode()
         const name = setting.name;
         const type = setting.type;
         let value;
-        if (name == 'tileSizeX' || type == 'alpha')
+        if (name == 'tileSize' || type == 'alpha')
             continue;
 
-        if (name == 'tileSizeY')
-            value = `vec2(${particleSystem.tileSize.x}, ${particleSystem.tileSize.y})`;
+        if (name == 'tileIndex')
+            value = `tile(${particleSystem.tileIndex}, ${particleSystem.tileInfo.size.x})`;
         else if (type == 'color')
         {
             const c = particleSystem[name];
@@ -394,6 +391,6 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
 
 </script>

package/examples/platformer/game.js

@@ -78,13 +78,13 @@ function gameRender()
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    const drawText = (text, x, y, size=50) =>
+    const drawText = (text, x, y, size=40) =>
     {
         overlayContext.textAlign = 'center';
         overlayContext.textBaseline = 'top';
         overlayContext.font = size + 'px arial';
         overlayContext.fillStyle = '#fff';
-        overlayContext.lineWidth = 2;
+        overlayContext.lineWidth = 3;
         overlayContext.strokeText(text, x, y);
         overlayContext.fillText(text, x, y);
     }
@@ -94,4 +94,4 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png', 'tilesLevel.png']);

package/examples/platformer/gameEffects.js

@@ -29,9 +29,9 @@ const sound_killEnemy =    new Sound([,,783,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.0
 const persistentParticleDestroyCallback = (particle)=>
 {
     // copy particle to tile layer on death
-    ASSERT(particle.tileIndex < 0); // quick draw to tile layer uses canvas 2d so must be untextured
+    ASSERT(!particle.tileInfo); // quick draw to tile layer uses canvas 2d so must be untextured
     if (particle.groundObject)
-        tileLayer.drawTile(particle.pos, particle.size, particle.tileIndex, particle.tileSize, particle.color, particle.angle, particle.mirror);
+        tileLayer.drawTile(particle.pos, particle.size, particle.tileInfo, particle.color, particle.angle, particle.mirror);
 }
 
 function makeBlood(pos, amount) { makeDebris(pos, new Color(1,0,0), 50, .1, 0); }
@@ -40,12 +40,12 @@ function makeDebris(pos, color = new Color, amount = 100, size=.2, elasticity =
     const color2 = color.lerp(new Color, .5);
     const emitter = new ParticleEmitter(
         pos, 0, 1, .1, 100, PI, // pos, angle, emitSize, emitTime, emitRate, emiteCone
-        undefined, undefined,  // tileIndex, tileSize
-        color, color2,         // colorStartA, colorStartB
-        color, color2,         // colorEndA, colorEndB
-        3, size,size, .1, .05, // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
-        1, .95, .4, PI, 0,     // damping, angleDamping, gravityScale, particleCone, fadeRate, 
-        .5, 1                  // randomness, collide, additive, randomColorLinear, renderOrder
+        0,                      // tileInfo
+        color, color2,          // colorStartA, colorStartB
+        color, color2,          // colorEndA, colorEndB
+        3, size,size, .1, .05,  // time, sizeStart, sizeEnd, speed, angleSpeed
+        1, .95, .4, PI, 0,      // damp, angleDamp, gravity, particleCone, fade
+        .5, 1                   // randomness, collide, additive, colorLinear, renderOrder
     );
     emitter.elasticity = elasticity;
     emitter.particleDestroyCallback = persistentParticleDestroyCallback;
@@ -99,24 +99,26 @@ function explosion(pos, radius=3)
 
     // smoke
     new ParticleEmitter(
-        pos, 0, radius/2, .2, 50*radius, PI, // pos, angle, emitSize, emitTime, emitRate, emiteCone
-        0, undefined,        // tileIndex, tileSize
-        new Color(0,0,0), new Color(0,0,0), // colorStartA, colorStartB
+        pos, 0,                                 // pos, angle
+        radius/2, .2, 50*radius, PI,            // emitSize, emitTime, emitRate, emiteCone
+        0,                                      // tileInfo
+        new Color(0,0,0), new Color(0,0,0),     // colorStartA, colorStartB
         new Color(0,0,0,0), new Color(0,0,0,0), // colorEndA, colorEndB
-        1, .5, 2, .1, .05, // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
-        .9, 1, -.3, PI, .1,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
-        .5, 0, 0, 0, 1e8              // randomness, collide, additive, randomColorLinear, renderOrder
+        1, .5, 2, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
+        .9, 1, -.3, PI, .1,  // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 0, 0, 1e8     // randomness, collide, additive, colorLinear, renderOrder
     );
 
     // fire
     new ParticleEmitter(
-        pos, 0, radius/2, .1, 100*radius, PI, // pos, angle, emitSize, emitTime, emitRate, emiteCone
-        0, undefined,        // tileIndex, tileSize
+        pos, 0,                                 // pos, angle
+        radius/2, .1, 100*radius, PI,           // emitSize, emitTime, emitRate, emiteCone
+        0,                                      // tileInfo
         new Color(1,.5,.1), new Color(1,.1,.1), // colorStartA, colorStartB
         new Color(1,.5,.1,0), new Color(1,.1,.1,0), // colorEndA, colorEndB
-        .5, .5, 2, .1, .05, // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
-        .9, 1, 0, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
-        .5, 0, 1, 0, 1e9              // randomness, collide, additive, randomColorLinear, renderOrder
+        .7, .8, .2, .2, .05,  // time, sizeStart, sizeEnd, speed, angleSpeed
+        .9, 1, -.2, PI, .05,  // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 1, 0, 1e9      // randomness, collide, additive, colorLinear, renderOrder
     );
 }
 

package/examples/platformer/gameLevel.js

@@ -143,9 +143,9 @@ function generateLevel()
 function makeTileLayers()
 {
     // create tile layers
-    tileLayer = new TileLayer(vec2(), levelSize);
+    tileLayer = new TileLayer(vec2(), levelSize, tile(0,16,1));
     tileLayer.renderOrder = -1e3;
-    tileBackgroundLayer = new TileLayer(vec2(), levelSize);
+    tileBackgroundLayer = new TileLayer(vec2(), levelSize, tile(0,16,1));
     tileBackgroundLayer.renderOrder = -2e3;
 
     const pos = vec2();
@@ -159,13 +159,13 @@ function makeTileLayers()
             let direction, mirror, tileIndex, color;
             if (tileType == tileType_solid)
             {
-                tileIndex = 5 + rand()**3*2|0;
+                tileIndex = 1 + rand()**3*2|0;
                 color = levelColor.mutate(.03);
                 direction = randInt(4);
                 mirror = randInt(2);
             }
             else if (tileType == tileType_ladder)
-                tileIndex = 7;
+                tileIndex = 3;
 
             const data = new TileLayerData(tileIndex, direction, mirror, color);
             tileLayer.setData(pos, data);
@@ -175,7 +175,7 @@ function makeTileLayers()
         tileType = getTileBackgroundData(pos);
         if (tileType)
         {
-            const data = new TileLayerData(5 + rand()**3*2|0, randInt(4), randInt(2), levelColor.mutate().scale(.4,1));
+            const data = new TileLayerData(1 + rand()**3*2|0, randInt(4), randInt(2), levelColor.mutate().scale(.4,1));
             tileBackgroundLayer.setData(pos, data);
         }
     }
@@ -212,7 +212,7 @@ function buildLevel()
 
     // warm up level
     warmup = 1;
-    for (let i=5*frameRate; i--;)
+    for (let i = 500; i--;)
         engineObjectsUpdate();
     warmup = 0;