littlejsengine 1.7.13 → 1.8.1

package/examples/platformer/gameObjects.js

@@ -10,9 +10,9 @@
 
 class GameObject extends EngineObject 
 {
-    constructor(pos, size, tileIndex, tileSize, angle)
+    constructor(pos, size, tileInfo, angle)
     {
-        super(pos, size, tileIndex, tileSize, angle);
+        super(pos, size, tileInfo, angle);
         this.health = 0;
         this.isGameObject = 1;
         this.damageTimer = new Timer;
@@ -66,7 +66,7 @@ class Crate extends GameObject
 {
     constructor(pos) 
     { 
-        super(pos, vec2(1), 2, vec2(16), (randInt(4))*PI/2);
+        super(pos, vec2(1), tile(2), (randInt(4))*PI/2);
 
         this.color = (new Color).setHSLA(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);
+        makeDebris(this.pos, this.color, 200);
         this.destroy();
     }
 }
@@ -92,7 +92,7 @@ class Enemy extends GameObject
 {
     constructor(pos) 
     { 
-        super(pos, vec2(.9,.9), 8, vec2(16));
+        super(pos, vec2(.9,.9), tile(5));
 
         this.drawSize = vec2(1);
         this.color = (new Color).setHSLA(rand(), 1, .7);
@@ -140,7 +140,7 @@ class Enemy extends GameObject
         // make bottom flush
         let bodyPos = this.pos;
         bodyPos = bodyPos.add(vec2(0,(this.drawSize.y-this.size.y)/2));
-        drawTile(bodyPos, this.drawSize, this.tileIndex, this.tileSize, this.color, this.angle, this.mirror, this.additiveColor);
+        drawTile(bodyPos, this.drawSize, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
     }
 }
 
@@ -150,7 +150,7 @@ class Grenade extends GameObject
 {
     constructor(pos) 
     {
-        super(pos, vec2(.2), 3, vec2(8));
+        super(pos, vec2(.2), tile(3,8));
 
         this.beepTimer = new Timer(1);
         this.elasticity   = .3;
@@ -178,12 +178,12 @@ class Grenade extends GameObject
        
     render()
     {
-        drawTile(this.pos, vec2(.5), this.tileIndex, this.tileSize, this.color, this.angle);
+        drawTile(this.pos, vec2(.5), this.tileInfo, this.color, this.angle);
 
         // draw additive flash when damaged
         setBlendMode(1);
         const flash = Math.cos(this.getAliveTime()*2*PI);
-        drawTile(this.pos, vec2(2), 0, vec2(16), new Color(1,0,0,.2-.2*flash));
+        drawTile(this.pos, vec2(2), tile(0, 16), new Color(1,0,0,.2-.2*flash));
         setBlendMode(0);
     }
 }
@@ -194,7 +194,7 @@ class Weapon extends EngineObject
 {
     constructor(pos, parent) 
     { 
-        super(pos, vec2(.6), 2, vec2(8));
+        super(pos, vec2(.6), tile(2,8));
 
         // weapon settings
         this.fireRate     = 8;
@@ -211,12 +211,12 @@ class Weapon extends EngineObject
         // shell effect
         this.addChild(this.shellEmitter = new ParticleEmitter(
             vec2(), 0, 0, 0, 0, .1,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
-            undefined, undefined, // tileIndex, tileSize
+            0,                       // tileInfo
             new Color(1,.8,.5), new Color(.9,.7,.5), // colorStartA, colorStartB
             new Color(1,.8,.5), new Color(.9,.7,.5), // colorEndA, colorEndB
-            3, .1, .1, .15, .1, // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
-            1, .95, 1, 0, 0,    // damping, angleDamping, gravityScale, particleCone, fadeRate, 
-            .1, 1              // randomness, collide, additive, randomColorLinear, renderOrder
+            3, .1, .1, .15, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
+            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.particleDestroyCallback = persistentParticleDestroyCallback;
@@ -322,12 +322,12 @@ class Bullet extends EngineObject
         // spark effects
         const emitter = new ParticleEmitter(
             this.pos, 0, 0, .1, 100, .5, // pos, angle, emitSize, emitTime, emitRate, emiteCone
-            undefined, undefined,     // tileIndex, tileSize
+            0,                           // tileInfo
             new Color(1,1,0), new Color(1,0,0), // colorStartA, colorStartB
             new Color(1,1,0), new Color(1,0,0), // colorEndA, colorEndB
-            .2, .2, 0, .1, .1, // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
-            1, 1, .5, PI, .1,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
-            .5, 1, 1           // randomness, collide, additive, randomColorLinear, renderOrder
+            .2, .2, 0, .1, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
+            1, 1, .5, PI, .1,  // damp, angleDamp, gravityScale, particleCone, fade, 
+            .5, 1, 1           // randomness, collide, additive, colorLinear, renderOrder
         );
         emitter.trailScale = 1;
         emitter.elasticity = .3;

package/examples/platformer/gamePlayer.js

@@ -13,7 +13,7 @@ class Character extends GameObject
 {
     constructor(pos)
     { 
-        super(pos, vec2(.6,.95), 32);
+        super(pos, vec2(.6,.95), tile());
 
         this.weapon = new Weapon(pos, this);
         this.lastPos = pos;
@@ -211,8 +211,9 @@ class Character extends GameObject
             this.mirror = moveInput.x < 0;
         
         // set tile to use
-        this.tileIndex = this.isDead() ? 3 : 
+        const tile = this.isDead() ? 3 : 
             this.climbingLadder || this.groundTimer.active() ? 3 + 2*this.walkCyclePercent|0 : 4;
+        this.tileInfo.pos.x = tile * 16;
     }
        
     render()
@@ -226,7 +227,7 @@ class Character extends GameObject
             // make bottom flush
             bodyPos = bodyPos.add(vec2(0,(this.drawSize.y-this.size.y)/2));
         }
-        drawTile(bodyPos, this.drawSize, this.tileIndex, this.tileSize, this.color, this.angle, this.mirror);
+        drawTile(bodyPos, this.drawSize, this.tileInfo, this.color, this.angle, this.mirror);
     }
 
     damage(damage, damagingObject)

package/examples/platformer/index.html

@@ -6,9 +6,9 @@
 <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=gamePlayer.js?1713></script>
-<script src=gameEffects.js?1713></script>
-<script src=gameLevel.js?1713></script>
-<script src=game.js?1713></script> 
+<script src=../../build/littlejs.js?181></script>
+<script src=gameObjects.js?181></script>
+<script src=gamePlayer.js?181></script>
+<script src=gameEffects.js?181></script>
+<script src=gameLevel.js?181></script>
+<script src=game.js?181></script> 

package/examples/puzzle/game.js

@@ -61,7 +61,7 @@ function gameInit()
     // setup game
     cameraPos = levelSize.scale(.5).add(cameraOffset);
     cameraScale = 900/levelSize.y;
-    gravity = -.005;
+    gravity = -.004;
     fallTimer = new Timer;
     comboCount = score = 0;
 }
@@ -208,7 +208,7 @@ function gameRender()
         
         // use darker color for icon
         const color2 = color.scale(.8, 1);
-        drawTile(drawPos, vec2(.5), data, vec2(64), color2);
+        drawTile(drawPos, vec2(.5), tile(data, 64), color2);
     }
 
     // draw a grey square at top to cover up incomming tiles
@@ -225,7 +225,7 @@ function gameRenderPost()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
 
 ///////////////////////////////////////////////////////////////////////////////
 // find and remove all runs of 3 or higher
@@ -288,13 +288,14 @@ function clearMatches()
             const color1 = tileColors[data];
             const color2 = color1.lerp(new Color, .5);
             new ParticleEmitter(
-                pos.add(vec2(.5)), 0, 1, .1, 100, PI,// pos, angle, emitSize, emitTime, emitRate, emiteCone
-                undefined, undefined,                // tileIndex, tileSize
+                pos.add(vec2(.5)), 0,  // pos, angle
+                .5, .1, 200, PI,       // emitSize, emitTime, emitRate, emiteCone
+                0,                     // tileInfo
                 color1, color2,                      // colorStartA, colorStartB
                 color1.scale(1,0), color2.scale(1,0),// colorEndA, colorEndB
-                .5, .3, .3, .05, .05, // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
-                .99, 1, 1, PI, .05,   // damping, angleDamping, gravityScale, particleCone, fadeRate, 
-                .5, 0, 1              // randomness, collide, additive, randomColorLinear, renderOrder
+                .5, .3, .2, .05, .05, // particleTime, sizeStart, sizeEnd, speed, angleSpeed
+                .99, 1, 1, PI, .05,   // damp, angleDamp, gravityScale, particleCone, fadeRate
+                .5, 0, 1              // randomness, collide, additive, colorLinear, renderOrder
             );
         }
     }
@@ -303,6 +304,7 @@ function clearMatches()
     {
         score += ++comboCount*removedCount;
         fallTimer.set();
+        levelFall = [];
     }
     else
         comboCount = 0;

package/examples/puzzle/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?181></script>
+<script src=game.js?181></script>

package/examples/starter/build.js

@@ -4,6 +4,8 @@
  * LittleJS Build System
  */
 
+'use strict';
+
 const PROGRAM_TITLE = 'Little JS Starter Project';
 const PROGRAM_NAME = 'game';
 const BUILD_FOLDER = 'build';

package/examples/starter/game.js

@@ -21,41 +21,47 @@ let particleEmitter;
 function gameInit()
 {
     // create tile collision and visible tile layer
-    initTileCollision(vec2(32, 16));
+    initTileCollision(vec2(32,16));
     const pos = vec2();
     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
-    cameraPos = tileCollisionSize.scale(.5);
+    // setup camera
+    cameraPos = vec2(16,8);
+    cameraScale = 48;
 
     // enable gravity
     gravity = -.01;
 
     // create particle emitter
     particleEmitter = new ParticleEmitter(
-        vec2(16), 0,                            // emitPos, emitAngle
+        vec2(16,15), 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
@@ -99,16 +105,21 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a grey square in the background without using webgl
-    drawRect(cameraPos, tileCollisionSize.add(vec2(5)), new Color(.2,.2,.2), 0, 0);
+    drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, 0);
+    
+    // draw the logo as a tile
+    drawTile(vec2(21,5), vec2(4.5), tile(2));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    drawTextScreen('LittleJS Engine Demo', vec2(mainCanvasSize.x/2, 80), 80);
+    drawTextScreen('LittleJS Engine Demo', 
+        vec2(mainCanvasSize.x/2, 70), 80,   // position, size
+        hsl(0,0,1), 6, hsl(0,0,0));         // color, outline size and color
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/starter/index.html

@@ -7,18 +7,18 @@
 </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?181></script>
+<script src=../../src/engineUtilities.js?181></script>
+<script src=../../src/engineSettings.js?181></script>
+<script src=../../src/engineObject.js?181></script>
+<script src=../../src/engineDraw.js?181></script>
+<script src=../../src/engineInput.js?181></script>
+<script src=../../src/engineAudio.js?181></script>
+<script src=../../src/engineTileLayer.js?181></script>
+<script src=../../src/engineParticles.js?181></script>
+<script src=../../src/engineMedals.js?181></script>
+<script src=../../src/engineWebGL.js?181></script>
+<script src=../../src/engine.js?181></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1713></script>
+<script src=game.js?181></script>

package/examples/stress/index.html

@@ -6,7 +6,7 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../build/littlejs.min.js?1713></script>
+<script src=../../build/littlejs.min.js?181></script>
 <script>
 
 /*
@@ -147,7 +147,7 @@ const tilesImageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCA
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, tilesImageData);
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, [tilesImageData]);
 
 ///////////////////////////////////////////////////////////////////////////////
 // music - Depp Loop

package/examples/typescript/build.js

@@ -4,6 +4,8 @@
  * LittleJS Build System
  */
 
+'use strict';
+
 const PROGRAM_NAME = 'game';
 const BUILD_FOLDER = 'build';
 const ROOT_FOLDER = 'examples/typescript';

package/examples/typescript/game.js

@@ -24,7 +24,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--;) {
             const imageData = mainContext.getImageData(pos.x, 16 * (imageLevelDataRow + 1) - pos.y - 1, 1, 1).data;
@@ -47,7 +48,7 @@ function gameInit() {
     const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0, 9));
     particleEmitter = 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
@@ -91,4 +92,4 @@ function gameRenderPost() {
 }
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);

package/examples/typescript/game.ts

@@ -32,7 +32,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--;)
     {
@@ -61,7 +62,7 @@ function gameInit()
     particleEmitter = 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/typescript/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?181 type=module></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.7.13",
+  "version": "1.8.1",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "build/littlejs.esm.js",
   "repository": {

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.7.13';
+const engineVersion = '1.8.1';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -80,6 +80,9 @@ let paused = 0;
  *  @memberof Engine */
 function setPaused(_paused) { paused = _paused; }
 
+// Frame time tracking
+let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
+
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Start up LittleJS engine with your callback functions
@@ -88,49 +91,13 @@ function setPaused(_paused) { paused = _paused; }
  *  @param {Function} gameUpdatePost  - Called after physics and objects are updated, setup camera and prepare for render
  *  @param {Function} gameRender      - Called before objects are rendered, draw any background effects that appear behind objects
  *  @param {Function} gameRenderPost  - Called after objects are rendered, draw effects or hud that appear above all objects
- *  @param {String} [tileImageSource] - Tile image to use, everything starts when the image is finished loading
+ *  @param {String} [imageSources='tiles.png'] - Image to load
  *  @memberof Engine */
-function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, tileImageSource)
+function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
 {
-    // init engine when tiles load or fail to load
-    tileImage.onerror = tileImage.onload = ()=>
-    {
-        // save tile image info
-        tileImageFixBleed = vec2(tileFixBleedScale).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
-        debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
-
-        // setup html
-        const styleBody = 'margin:0;overflow:hidden;' + // fill the window
-            'background:#000;' +        // set background color
-            'touch-action:none;' +      // prevent mobile pinch to resize
-            'user-select:none;' +       // prevent mobile hold to select
-            '-webkit-user-select:none'; // compatibility for ios
-        document.body.style = styleBody;
-        document.body.appendChild(mainCanvas = document.createElement('canvas'));
-        mainContext = mainCanvas.getContext('2d');
-
-        // init stuff and start engine
-        debugInit();
-        glEnable && glInit();
-
-        // create overlay canvas for hud to appear above gl canvas
-        document.body.appendChild(overlayCanvas = document.createElement('canvas'));
-        overlayContext = overlayCanvas.getContext('2d');
-
-        // set canvas style
-        const styleCanvas = 'position:absolute;' +
-            'top:50%;left:50%;transform:translate(-50%,-50%);' + // center the canvas
-            (canvasPixelated?'image-rendering:pixelated':'');    // set pixelated rendering
-        (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
-        
-        gameInit();
-        engineUpdate();
-    };
-
-    // frame time tracking
-    let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
+    ASSERT(Array.isArray(imageSources)); // pass in images as array
 
-    // main update loop
+    // internal update loop for engine
     function engineUpdate(frameTimeMS=0)
     {
         // update time keeping
@@ -161,9 +128,9 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         }
         else
         {
-             // clear canvas and set size to same as window
-             mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
-             mainCanvas.height = min(innerHeight, canvasMaxSize.y);
+            // clear canvas and set size to same as window
+            mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
+            mainCanvas.height = min(innerHeight, canvasMaxSize.y);
         }
         
         // clear overlay canvas and set size
@@ -195,6 +162,9 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             // update multiple frames if necessary in case of slow framerate
             for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
             {
+                // increment frame and update time
+                time = frame++ / frameRate;
+
                 // update game and objects
                 inputUpdate();
                 gameUpdate();
@@ -242,8 +212,51 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         requestAnimationFrame(engineUpdate);
     }
 
-    // set tile image source to load the image and start the engine
-    tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
+    // setup html
+    const styleBody = 
+        'margin:0;overflow:hidden;' + // fill the window
+        'background:#000;' +          // set background color
+        'touch-action:none;' +        // prevent mobile pinch to resize
+        'user-select:none;' +         // prevent mobile hold to select
+        '-webkit-user-select:none;' + // compatibility for ios
+        '-webkit-touch-callout:none'; // compatibility for ios
+    document.body.style = styleBody;
+    document.body.appendChild(mainCanvas = document.createElement('canvas'));
+    mainContext = mainCanvas.getContext('2d');
+
+    // init stuff and start engine
+    debugInit();
+    glEnable && glInit();
+
+    // create overlay canvas for hud to appear above gl canvas
+    document.body.appendChild(overlayCanvas = document.createElement('canvas'));
+    overlayContext = overlayCanvas.getContext('2d');
+
+    // set canvas style
+    const styleCanvas = 
+        'position:absolute;' +                               // position
+        'top:50%;left:50%;transform:translate(-50%,-50%);' + // center
+        (canvasPixelated?'image-rendering:pixelated':'');    // pixelated rendering
+    (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
+    
+    // load all of the images
+    Promise.all(imageSources.map((src, textureIndex)=>
+        new Promise((resolve, reject)=> 
+        {
+            const image = new Image;
+            image.onerror = image.onload = ()=> 
+            {
+                textureInfos[textureIndex] = new TextureInfo(image);
+                resolve();
+            }
+            image.src = src;
+        })
+    )).then(()=> 
+    {
+        // start the engine
+        gameInit();
+        engineUpdate();
+    });
 }
 
 // Called automatically by engine to setup render system
@@ -281,9 +294,6 @@ function engineObjectsUpdate()
 
     // remove destroyed objects
     engineObjects = engineObjects.filter(o=>!o.destroyed);
-
-    // increment frame and update time
-    time = ++frame / frameRate;
 }
 
 /** Destroy and remove all objects