littlejsengine 1.9.2 → 1.9.3

package/README.md

@@ -15,7 +15,7 @@
 ## 🚂 All aboard!
 
 LittleJS is a fast lightweight open source HTML5 game engine for modern web development.
-It's small footprint is packed with a comprehensive feature set including hybrid rendering, physics, particles, sound effects, music, and input handling.
+Its small footprint is packed with a comprehensive feature set including hybrid rendering, physics, particles, sound effects, music, and input handling.
 The code is very clean and well documented with some fun examples to get you started. Choo-Choo!
 
 ### 🚀 Join the First Ever LittleJS Game Jam
@@ -24,7 +24,7 @@ The code is very clean and well documented with some fun examples to get you sta
 
 <div align="center">
 
-## [Demo](https://killedbyapixel.github.io/LittleJS/examples/starter/) | [Docs](https://killedbyapixel.github.io/LittleJS/docs) | [Trailer](https://youtu.be/chuBzGjv7Ms) | [Discord](https://discord.gg/zb7hcGkyZe) | [Tutorial](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/breakoutTutorial/README.md)
+## [Demo](https://killedbyapixel.github.io/LittleJS/examples/starter/) | [Docs](https://killedbyapixel.github.io/LittleJS/docs) | [Trailer](https://youtu.be/chuBzGjv7Ms) | [Discord](https://discord.gg/zb7hcGkyZe) | [Tutorial](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/breakoutTutorial/README.md) | [Quick Reference](https://github.com/KilledByAPixel/LittleJS/blob/main/reference.md)
 
 </div>
 
@@ -80,6 +80,8 @@ To get started download the latest LittleJS package from GitHub or install via n
 
 Learn how to make a simple game from scratch with [The Breakout Tutorial.](https://github.com/KilledByAPixel/LittleJS/tree/main/examples/breakoutTutorial)
 
+[LittleJS Engine Quick Reference Sheet](https://github.com/KilledByAPixel/LittleJS/blob/main/reference.md) - This cheat sheet can help you get started.
+
 [Watch this GitNation talk](https://youtu.be/_dXKU0WgAj8?si=ZDXLYAFDWp54hrGT) to hear more about LittleJS works and get some tips on how to use it.
 
 Join our vibrant community on [Discord](https://discord.gg/zb7hcGkyZe) to get help, share your projects, and collaborate with others!

package/dist/littlejs.d.ts

@@ -1,6 +1,6 @@
 declare module "littlejs.esm" {
     /**
-     * LittleJS - The Tiny JavaScript Game Engine That Can!
+     * LittleJS - The Tiny Fast JavaScript Game Engine
      * MIT License - Copyright 2021 Frank Force
      *
      * Engine Features
@@ -28,7 +28,7 @@ declare module "littlejs.esm" {
      *  @default
      *  @memberof Engine */
     export const engineVersion: string;
-    /** Frames per second to update objects
+    /** Frames per second to update
      *  @type {Number}
      *  @default
      *  @memberof Engine */
@@ -46,7 +46,7 @@ declare module "littlejs.esm" {
      *  @type {Number}
      *  @memberof Engine */
     export let frame: number;
-    /** Current engine time since start in seconds, derived from frame
+    /** Current engine time since start in seconds
      *  @type {Number}
      *  @memberof Engine */
     export let time: number;
@@ -63,12 +63,12 @@ declare module "littlejs.esm" {
      *  @param {Boolean} isPaused
      *  @memberof Engine */
     export function setPaused(isPaused: boolean): void;
-    /** Start up LittleJS engine with your callback functions
-     *  @param {Function} gameInit        - Called once after the engine starts up, setup the game
-     *  @param {Function} gameUpdate      - Called every frame at 60 frames per second, handle input and update the game state
-     *  @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
+    /** Startup LittleJS engine with your callback functions
+     *  @param {Function} gameInit       - Called once after the engine starts up, setup the game
+     *  @param {Function} gameUpdate     - Called every frame at 60 frames per second, handle input and update the game state
+     *  @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 {Array} [imageSources=['tiles.png']] - Image to load
      *  @memberof Engine */
     export function engineInit(gameInit: Function, gameUpdate: Function, gameUpdatePost: Function, gameRender: Function, gameRenderPost: Function, imageSources?: any[]): void;
@@ -109,7 +109,7 @@ declare module "littlejs.esm" {
      *  @default
      *  @memberof Debug */
     export let showWatermark: boolean;
-    /** Asserts if the experssion is false, does not do anything in release builds
+    /** Asserts if the expression is false, does not do anything in release builds
      *  @param {Boolean} assert
      *  @param {Object} [output]
      *  @memberof Debug */
@@ -229,7 +229,7 @@ declare module "littlejs.esm" {
      *  @default
      *  @memberof Settings */
     export let enablePhysicsSolver: boolean;
-    /** Default object mass for collison calcuations (how heavy objects are)
+    /** Default object mass for collision calcuations (how heavy objects are)
      *  @type {Number}
      *  @default
      *  @memberof Settings */
@@ -306,7 +306,7 @@ declare module "littlejs.esm" {
      *  @default
      *  @memberof Settings */
     export let touchGamepadAnalog: boolean;
-    /** Size of virutal gamepad for touch devices in pixels
+    /** Size of virtual gamepad for touch devices in pixels
      *  @type {Number}
      *  @default
      *  @memberof Settings */
@@ -548,7 +548,7 @@ declare module "littlejs.esm" {
      *  @return {Number}
      *  @memberof Utilities */
     export function max(valueA: number, valueB: number): number;
-    /** Returns the sign of value passed in (also returns 1 if 0)
+    /** Returns the sign of value passed in
      *  @param {Number} value
      *  @return {Number}
      *  @memberof Utilities */
@@ -580,7 +580,7 @@ declare module "littlejs.esm" {
      *  @returns {Number}
      *  @memberof Utilities */
     export function distanceWrap(valueA: number, valueB: number, wrapSize?: number): number;
-    /** Linearly interpolates between values passed in with wrappping
+    /** Linearly interpolates between values passed in with wrapping
      *  @param {Number} percent
      *  @param {Number} valueA
      *  @param {Number} valueB
@@ -594,7 +594,7 @@ declare module "littlejs.esm" {
      *  @returns {Number}
      *  @memberof Utilities */
     export function distanceAngle(angleA: number, angleB: number): number;
-    /** Linearly interpolates between the angles passed in with wrappping
+    /** Linearly interpolates between the angles passed in with wrapping
      *  @param {Number} percent
      *  @param {Number} angleA
      *  @param {Number} angleB
@@ -1378,7 +1378,7 @@ declare module "littlejs.esm" {
      * @namespace Audio
      */
     /**
-     * Sound Object - Stores a zzfx sound for later use and can be played positionally
+     * Sound Object - Stores a sound for later use and can be played positionally
      *
      * <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
      * @example
@@ -1392,7 +1392,7 @@ declare module "littlejs.esm" {
         /** Create a sound object and cache the zzfx samples for later use
          *  @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
          *  @param {Number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
-         *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
+         *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
          */
         constructor(zzfxSound: any[], range?: number, taper?: number);
         /** @property {Number} - World space max range of sound, will not play if camera is farther away */
@@ -1493,18 +1493,18 @@ declare module "littlejs.esm" {
         sampleChannels: any[];
         /** Play the music
          *  @param {Number}  [volume=1] - How much to scale volume by
-         *  @param {Boolean} [loop=1] - True if the music should loop
+         *  @param {Boolean} [loop] - True if the music should loop
          *  @return {AudioBufferSourceNode} - The audio source node
          */
         playMusic(volume?: number, loop?: boolean): AudioBufferSourceNode;
     }
     /** Play an mp3, ogg, or wav audio from a local file or url
-     *  @param {String}  url - Location of sound file to play
+     *  @param {String}  filename - Location of sound file to play
      *  @param {Number}  [volume] - How much to scale volume by
      *  @param {Boolean} [loop] - True if the music should loop
      *  @return {HTMLAudioElement} - The audio element for this sound
      *  @memberof Audio */
-    export function playAudioFile(url: string, volume?: number, loop?: boolean): HTMLAudioElement;
+    export function playAudioFile(filename: string, volume?: number, loop?: boolean): HTMLAudioElement;
     /** Speak text with passed in settings
      *  @param {String} text - The text to speak
      *  @param {String} [language] - The language/accent to use (examples: en, it, ru, ja, zh)
@@ -1553,7 +1553,7 @@ declare module "littlejs.esm" {
      * - Automatically adds self to object list
      * - Will be updated and rendered each frame
      * - Renders as a sprite from a tilesheet by default
-     * - Can have color and addtive color applied
+     * - Can have color and additive color applied
      * - 2D Physics and collision system
      * - Sorted by renderOrder
      * - Objects can have children attached
@@ -1687,7 +1687,7 @@ declare module "littlejs.esm" {
     /**
      * LittleJS Tile Layer System
      * - Caches arrays of tiles to off screen canvas for fast rendering
-     * - Unlimted numbers of layers, allocates canvases as needed
+     * - Unlimited numbers of layers, allocates canvases as needed
      * - Interfaces with EngineObject for collision
      * - Collision layer is separate from visible layers
      * - It is recommended to have a visible layer that matches the collision
@@ -1719,7 +1719,7 @@ declare module "littlejs.esm" {
     export function getTileCollisionData(pos: Vector2): number;
     /** Check if collision with another object should occur
      *  @param {Vector2}      pos
-     *  @param {Vector2}      [size=(1,1)]
+     *  @param {Vector2}      [size=(0,0)]
      *  @param {EngineObject} [object]
      *  @return {Boolean}
      *  @memberof TileCollision */

package/dist/littlejs.esm.js

@@ -56,7 +56,7 @@ let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParti
 ///////////////////////////////////////////////////////////////////////////////
 // Debug helper functions
 
-/** Asserts if the experssion is false, does not do anything in release builds
+/** Asserts if the expression is false, does not do anything in release builds
  *  @param {Boolean} assert
  *  @param {Object} [output]
  *  @memberof Debug */
@@ -453,7 +453,7 @@ function min(valueA, valueB) { return Math.min(valueA, valueB); }
  *  @memberof Utilities */
 function max(valueA, valueB) { return Math.max(valueA, valueB); }
 
-/** Returns the sign of value passed in (also returns 1 if 0)
+/** Returns the sign of value passed in
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
@@ -500,7 +500,7 @@ function lerp(percent, valueA, valueB) { return valueA + clamp(percent) * (value
 function distanceWrap(valueA, valueB, wrapSize=1)
 { const d = (valueA - valueB) % wrapSize; return d*2 % wrapSize - d; }
 
-/** Linearly interpolates between values passed in with wrappping
+/** Linearly interpolates between values passed in with wrapping
  *  @param {Number} percent
  *  @param {Number} valueA
  *  @param {Number} valueB
@@ -517,7 +517,7 @@ function lerpWrap(percent, valueA, valueB, wrapSize=1)
  *  @memberof Utilities */
 function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*PI); }
 
-/** Linearly interpolates between the angles passed in with wrappping
+/** Linearly interpolates between the angles passed in with wrapping
  *  @param {Number} percent
  *  @param {Number} angleA
  *  @param {Number} angleB
@@ -1259,7 +1259,7 @@ let tileSizeDefault = vec2(16);
  *  @type {Number}
  *  @default
  *  @memberof Settings */
-let tileFixBleedScale = .3;
+let tileFixBleedScale = .1;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Object settings
@@ -1270,7 +1270,7 @@ let tileFixBleedScale = .3;
  *  @memberof Settings */
 let enablePhysicsSolver = true;
 
-/** Default object mass for collison calcuations (how heavy objects are)
+/** Default object mass for collision calcuations (how heavy objects are)
  *  @type {Number}
  *  @default
  *  @memberof Settings */
@@ -1353,7 +1353,7 @@ let touchGamepadEnable = false;
  *  @memberof Settings */
 let touchGamepadAnalog = true;
 
-/** Size of virutal gamepad for touch devices in pixels
+/** Size of virtual gamepad for touch devices in pixels
  *  @type {Number}
  *  @default
  *  @memberof Settings */
@@ -1640,7 +1640,7 @@ function setDebugKey(key) { debugKey = key; }
  * - Automatically adds self to object list
  * - Will be updated and rendered each frame
  * - Renders as a sprite from a tilesheet by default
- * - Can have color and addtive color applied
+ * - Can have color and additive color applied
  * - 2D Physics and collision system
  * - Sorted by renderOrder
  * - Objects can have children attached
@@ -1919,7 +1919,7 @@ class EngineObject
     }
     
     /** Destroy this object, destroy it's children, detach it's parent, and mark it for removal */
-    destroy()             
+    destroy()
     { 
         if (this.destroyed)
             return;
@@ -2108,13 +2108,9 @@ function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
     if (typeof pos === 'number')
     {
         const textureInfo = textureInfos[textureIndex];
-        if (textureInfo)
-        {
-            const cols = textureInfo.size.x / size.x |0;
-            pos = vec2((pos%cols)*size.x, (pos/cols|0)*size.y);
-        }
-        else
-            pos = vec2();
+        ASSERT(textureInfo, 'Texture not loaded');
+        const cols = textureInfo.size.x / size.x |0;
+        pos = vec2((pos%cols)*size.x, (pos/cols|0)*size.y);
     }
 
     // return a tile info object
@@ -2203,6 +2199,11 @@ function worldToScreen(worldPos)
     );
 }
 
+/** Get the camera's visible area in world space
+ *  @return {Vector2}
+ *  @memberof Draw */
+function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
+
 /** Draw textured tile centered in world space, with color applied if using WebGL
  *  @param {Vector2} pos                        - Center of the tile in world space
  *  @param {Vector2} [size=(1,1)]               - Size of the tile in world space
@@ -2880,7 +2881,7 @@ function createTouchGamepad()
     touchGamepadStick = vec2();
 
     const touchHandler = ontouchstart;
-    ontouchstart = ontouchmove = ontouchend = (e)=> 
+    ontouchstart = ontouchmove = ontouchend = (e)=>
     {
         // clear touch gamepad input
         touchGamepadStick = vec2();
@@ -3010,7 +3011,7 @@ function touchGamepadRender()
 
 
 /** 
- * Sound Object - Stores a zzfx sound for later use and can be played positionally
+ * Sound Object - Stores a sound for later use and can be played positionally
  * 
  * <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
  * @example
@@ -3025,7 +3026,7 @@ class Sound
     /** Create a sound object and cache the zzfx samples for later use
      *  @param {Array}  zzfxSound - Array of zzfx parameters, ex. [.5,.5]
      *  @param {Number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
-     *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
+     *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
      */
     constructor(zzfxSound, range=soundDefaultRange, taper=soundDefaultTaper)
     {
@@ -3205,24 +3206,24 @@ class Music extends Sound
 
     /** Play the music
      *  @param {Number}  [volume=1] - How much to scale volume by
-     *  @param {Boolean} [loop=1] - True if the music should loop
+     *  @param {Boolean} [loop] - True if the music should loop
      *  @return {AudioBufferSourceNode} - The audio source node
      */
-    playMusic(volume, loop = false)
+    playMusic(volume, loop=false)
     { return super.play(undefined, volume, 1, 1, loop); }
 }
 
 /** Play an mp3, ogg, or wav audio from a local file or url
- *  @param {String}  url - Location of sound file to play
+ *  @param {String}  filename - Location of sound file to play
  *  @param {Number}  [volume] - How much to scale volume by
  *  @param {Boolean} [loop] - True if the music should loop
  *  @return {HTMLAudioElement} - The audio element for this sound
  *  @memberof Audio */
-function playAudioFile(url, volume=1, loop=false)
+function playAudioFile(filename, volume=1, loop=false)
 {
     if (!soundEnable) return;
 
-    const audio = new Audio(url);
+    const audio = new Audio(filename);
     audio.volume = soundVolume * volume;
     audio.loop = loop;
     audio.play();
@@ -3274,6 +3275,11 @@ function getNoteFrequency(semitoneOffset, rootFrequency=220)
  *  @memberof Audio */
 let audioContext = new AudioContext;
 
+/** Keep track if audio was suspended when last sound was played
+ *  @type {Boolean}
+ *  @memberof Audio */
+let audioSuspended = false;
+
 /** Play cached audio samples with given settings
  *  @param {Array}   sampleChannels - Array of arrays of samples to play (for stereo playback)
  *  @param {Number}  [volume] - How much to scale volume by
@@ -3288,11 +3294,15 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
     if (!soundEnable) return;
 
     // prevent sounds from building up if they can't be played
-    if (audioContext.state != 'running')
+    const audioWasSuspended = audioSuspended;
+    if (audioSuspended = audioContext.state != 'running')
     {
         // fix stalled audio
         audioContext.resume();
-        return;
+
+        // prevent suspended sounds from building up
+        if (audioWasSuspended)
+            return;
     }
 
     // create buffer and source
@@ -3560,7 +3570,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
 /** 
  * LittleJS Tile Layer System
  * - Caches arrays of tiles to off screen canvas for fast rendering
- * - Unlimted numbers of layers, allocates canvases as needed
+ * - Unlimited numbers of layers, allocates canvases as needed
  * - Interfaces with EngineObject for collision
  * - Collision layer is separate from visible layers
  * - It is recommended to have a visible layer that matches the collision
@@ -3612,7 +3622,7 @@ function getTileCollisionData(pos)
 
 /** Check if collision with another object should occur
  *  @param {Vector2}      pos
- *  @param {Vector2}      [size=(1,1)]
+ *  @param {Vector2}      [size=(0,0)]
  *  @param {EngineObject} [object]
  *  @return {Boolean}
  *  @memberof TileCollision */
@@ -4129,16 +4139,17 @@ class ParticleEmitter extends EngineObject
         
         // build particle
         const particle = new Particle(pos, this.tileInfo, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, this.fadeRate, this.additive,  this.trailScale, this.localSpace && this, this.particleDestroyCallback);
-        particle.velocity     = vec2().setAngle(velocityAngle, speed);
-        particle.fadeRate     = this.fadeRate;
-        particle.damping      = this.damping;
-        particle.angleDamping = this.angleDamping;
-        particle.elasticity   = this.elasticity;
-        particle.friction     = this.friction;
-        particle.gravityScale = this.gravityScale;
-        particle.collideTiles = this.collideTiles;
-        particle.renderOrder  = this.renderOrder;
-        particle.mirror       = !!randInt(2);
+        particle.velocity      = vec2().setAngle(velocityAngle, speed);
+        particle.angleVelocity = angleSpeed;
+        particle.fadeRate      = this.fadeRate;
+        particle.damping       = this.damping;
+        particle.angleDamping  = this.angleDamping;
+        particle.elasticity    = this.elasticity;
+        particle.friction      = this.friction;
+        particle.gravityScale  = this.gravityScale;
+        particle.collideTiles  = this.collideTiles;
+        particle.renderOrder   = this.renderOrder;
+        particle.mirror        = !!randInt(2);
 
         // call particle create callaback
         this.particleCreateCallback && this.particleCreateCallback(particle);
@@ -4529,7 +4540,7 @@ class Newgrounds
         }
 
         // build the input object
-        const input = 
+        const input =
         {
             'app_id':     this.app_id,
             'session_id': this.session_id,
@@ -4744,8 +4755,6 @@ function glCreateTexture(image)
     const filter = canvasPixelated ? gl_NEAREST : gl_LINEAR;
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, filter);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_S, gl_CLAMP_TO_EDGE);
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_T, gl_CLAMP_TO_EDGE);
 
     return texture;
 }
@@ -4823,7 +4832,7 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdd
 ///////////////////////////////////////////////////////////////////////////////
 // post processing - can be enabled to pass other canvases through a final shader
 
-let glPostShader, glPostArrayBuffer, glPostTexture, glPostIncludeOverlay;
+let glPostShader, glPostTexture, glPostIncludeOverlay;
 
 /** Set up a post processing shader
  *  @param {String} shaderCode
@@ -4859,7 +4868,6 @@ function glInitPostProcess(shaderCode, includeOverlay=false)
     );
 
     // create buffer and texture
-    glPostArrayBuffer = glContext.createBuffer();
     glPostTexture = glCreateTexture(undefined);
     glPostIncludeOverlay = includeOverlay;
 
@@ -4931,10 +4939,7 @@ gl_NEAREST = 9728,
 gl_LINEAR = 9729,
 gl_TEXTURE_MAG_FILTER = 10240,
 gl_TEXTURE_MIN_FILTER = 10241,
-gl_TEXTURE_WRAP_S = 10242,
-gl_TEXTURE_WRAP_T = 10243,
 gl_COLOR_BUFFER_BIT = 16384,
-gl_CLAMP_TO_EDGE = 33071,
 gl_TEXTURE0 = 33984,
 gl_ARRAY_BUFFER = 34962,
 gl_STATIC_DRAW = 35044,
@@ -4951,7 +4956,7 @@ gl_MAX_INSTANCES = 1e4,
 gl_INSTANCE_BYTE_STRIDE = gl_INDICIES_PER_INSTANCE * 4, // 11 * 4
 gl_INSTANCE_BUFFER_SIZE = gl_MAX_INSTANCES * gl_INSTANCE_BYTE_STRIDE;
 /** 
- * LittleJS - The Tiny JavaScript Game Engine That Can!
+ * LittleJS - The Tiny Fast JavaScript Game Engine
  * MIT License - Copyright 2021 Frank Force
  * 
  * Engine Features
@@ -4982,9 +4987,9 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.9.2';
+const engineVersion = '1.9.3';
 
-/** Frames per second to update objects
+/** Frames per second to update
  *  @type {Number}
  *  @default
  *  @memberof Engine */
@@ -5001,7 +5006,7 @@ const timeDelta = 1/frameRate;
  *  @memberof Engine */
 let engineObjects = [];
 
-/** Array containing only objects that are set to collide with other objects this frame (for optimization)
+/** Array with only objects set to collide with other objects this frame (for optimization)
  *  @type {Array}
  *  @memberof Engine */
 let engineObjectsCollide = [];
@@ -5011,7 +5016,7 @@ let engineObjectsCollide = [];
  *  @memberof Engine */
 let frame = 0;
 
-/** Current engine time since start in seconds, derived from frame
+/** Current engine time since start in seconds
  *  @type {Number}
  *  @memberof Engine */
 let time = 0;
@@ -5037,12 +5042,12 @@ let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Start up LittleJS engine with your callback functions
- *  @param {Function} gameInit        - Called once after the engine starts up, setup the game
- *  @param {Function} gameUpdate      - Called every frame at 60 frames per second, handle input and update the game state
- *  @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
+/** Startup LittleJS engine with your callback functions
+ *  @param {Function} gameInit       - Called once after the engine starts up, setup the game
+ *  @param {Function} gameUpdate     - Called every frame at 60 frames per second, handle input and update the game state
+ *  @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 {Array} [imageSources=['tiles.png']] - Image to load
  *  @memberof Engine */
 function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
@@ -5065,32 +5070,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         frameTimeBufferMS += paused ? 0 : frameTimeDeltaMS;
         if (!debugSpeedUp)
             frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp incase of slow framerate
-
-        if (canvasFixedSize.x)
-        {
-            // clear canvas and set fixed size
-            mainCanvas.width  = canvasFixedSize.x;
-            mainCanvas.height = canvasFixedSize.y;
-            
-            // fit to window by adding space on top or bottom if necessary
-            const aspect = innerWidth / innerHeight;
-            const fixedAspect = mainCanvas.width / mainCanvas.height;
-            (glCanvas||mainCanvas).style.width = mainCanvas.style.width = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
-            (glCanvas||mainCanvas).style.height = mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
-        }
-        else
-        {
-            // 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
-        overlayCanvas.width  = mainCanvas.width;
-        overlayCanvas.height = mainCanvas.height;
-
-        // save canvas size
-        mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
+        updateCanvas();
 
         if (paused)
         {
@@ -5164,6 +5144,35 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         requestAnimationFrame(engineUpdate);
     }
 
+    function updateCanvas()
+    {
+        if (canvasFixedSize.x)
+        {
+            // clear canvas and set fixed size
+            mainCanvas.width  = canvasFixedSize.x;
+            mainCanvas.height = canvasFixedSize.y;
+            
+            // fit to window by adding space on top or bottom if necessary
+            const aspect = innerWidth / innerHeight;
+            const fixedAspect = mainCanvas.width / mainCanvas.height;
+            (glCanvas||mainCanvas).style.width = mainCanvas.style.width = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
+            (glCanvas||mainCanvas).style.height = mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
+        }
+        else
+        {
+            // 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
+        overlayCanvas.width  = mainCanvas.width;
+        overlayCanvas.height = mainCanvas.height;
+
+        // save canvas size
+        mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
+    }
+
     // setup html
      const styleBody = 
         'margin:0;overflow:hidden;' + // fill the window
@@ -5188,6 +5197,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     const styleCanvas = 'position:absolute;' +             // position
         'top:50%;left:50%;transform:translate(-50%,-50%)'; // center
     (glCanvas||mainCanvas).style.cssText = mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
+    updateCanvas();
     
     // create promises for loading images
     const promises = imageSources.map((src, textureIndex)=>
@@ -5384,9 +5394,9 @@ function drawEngineSplashScreen(t)
 
     // big stack
     rect(50,20,10,-10,color(0,1));
-    rect(50,20,6,-10,color(0,2));
-    rect(50,20,3,-10,color(0,3));
-    rect(50,10,10,10);
+    rect(50,20,6.5,-10,color(0,2));
+    rect(50,20,3.5,-10,color(0,3));
+    rect(50,20,10,-10);
     circle(55,2,11.4,.5,PI-.5,color(3,3));
     circle(55,2,11.4,.5,PI/2,color(3,2),1);
     circle(55,2,11.4,.5,PI-.5);
@@ -5405,7 +5415,7 @@ function drawEngineSplashScreen(t)
 
     // engine outline
     circle(36,30,10,PI/2,PI*3/2);
-    circle(47,30,10,PI/2,PI*3/2);
+    circle(48,30,10,PI/2,PI*3/2);
     circle(60,30,10);
     line(36,20,60,20);