littlejsengine 1.12.4 → 1.13.1

package/plugins/uiSystem.js

@@ -43,10 +43,20 @@ class UISystemPlugin
         this.defaultButtonColor = hsl(0,0,.5);
         /** @property {Color} - Default hover color for UI elements */
         this.defaultHoverColor = hsl(0,0,.7);
+        /** @property {Color} - Default color for disabled UI elements */
+        this.defaultDisabledColor = hsl(0,0,.2);
         /** @property {number} - Default line width for UI elements */
         this.defaultLineWidth = 4;
+        /** @property {number} - Default rounded rect corner radius for UI elements */
+        this.defaultCornerRadius = 0;
         /** @property {string} - Default font for UI elements */
         this.defaultFont = 'arial';
+        /** @property {Sound} - Default sound when interactive UI element is pressed */
+        this.defaultSoundPress = undefined;
+        /** @property {Sound} - Default sound when interactive UI element is released */
+        this.defaultSoundRelease = undefined;
+        /** @property {Sound} - Default sound when interactive UI element is clicked */
+        this.defaultSoundClick = undefined;
         /** @property {Array<UIObject>} - List of all UI elements */
         this.uiObjects = [];
         /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
@@ -54,18 +64,30 @@ class UISystemPlugin
             
         engineAddPlugin(uiUpdate, uiRender);
 
+        function updateInvisible(o)
+        {
+            for(const c of o.children)
+                updateInvisible(c);
+            o.updateInvisible();
+        }
+
         // setup recursive update and render
         function uiUpdate()
         {
             function updateObject(o)
             {
-                if (!o.visible)
-                    return;
-                if (o.parent)
-                    o.pos = o.localPos.add(o.parent.pos);
-                o.update();
-                for(const c of o.children)
-                    updateObject(c);
+                if (o.visible)
+                {
+                    // set position in parent space
+                    if (o.parent)
+                        o.pos = o.localPos.add(o.parent.pos);
+                    // update in reverse order to detect mouse enter/leave
+                    for(let i=o.children.length; i--;)
+                        updateObject(o.children[i]);
+                    o.update();
+                }
+                else
+                    updateInvisible(o);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || updateObject(o));
         }
@@ -90,18 +112,23 @@ class UISystemPlugin
     *  @param {Vector2} size
     *  @param {Color}   [color=uiSystem.defaultColor]
     *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
-    *  @param {Color}   [lineColor=uiSystem.defaultLineColor] */
-    drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor)
+    *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
+    *  @param {number}  [lineWidth=uiSystem.defaultCornerRadius] */
+    drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius)
     {
-        uiSystem.uiContext.fillStyle = color.toString();
-        uiSystem.uiContext.beginPath();
-        uiSystem.uiContext.rect(pos.x-size.x/2, pos.y-size.y/2, size.x, size.y);
-        uiSystem.uiContext.fill();
+        const context = uiSystem.uiContext;
+        context.fillStyle = color.toString();
+        context.beginPath();
+        if (cornerRadius && context['roundRect'])
+            context['roundRect'](pos.x-size.x/2, pos.y-size.y/2, size.x, size.y, cornerRadius);
+        else
+            context.rect(pos.x-size.x/2, pos.y-size.y/2, size.x, size.y);
+        context.fill();
         if (lineWidth)
         {
-            uiSystem.uiContext.strokeStyle = lineColor.toString();
-            uiSystem.uiContext.lineWidth = lineWidth;
-            uiSystem.uiContext.stroke();
+            context.strokeStyle = lineColor.toString();
+            context.lineWidth = lineWidth;
+            context.stroke();
         }
     }
 
@@ -112,12 +139,13 @@ class UISystemPlugin
     *  @param {Color}   [lineColor=uiSystem.defaultLineColor] */
     drawLine(posA, posB, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor)
     {
-        uiSystem.uiContext.strokeStyle = lineColor.toString();
-        uiSystem.uiContext.lineWidth = lineWidth;
-        uiSystem.uiContext.beginPath();
-        uiSystem.uiContext.lineTo(posA.x, posA.y);
-        uiSystem.uiContext.lineTo(posB.x, posB.y);
-        uiSystem.uiContext.stroke();
+        const context = uiSystem.uiContext;
+        context.strokeStyle = lineColor.toString();
+        context.lineWidth = lineWidth;
+        context.beginPath();
+        context.lineTo(posA.x, posA.y);
+        context.lineTo(posB.x, posB.y);
+        context.stroke();
     }
 
     /** Draw a tile to the UI context
@@ -165,24 +193,40 @@ class UIObject
         this.pos        = pos.copy();
         /** @property {Vector2} - Screen space size of the object */
         this.size       = size.copy();
-        /** @property {Color} */
+        /** @property {Color} - color of the object */
         this.color      = uiSystem.defaultColor;
-        /** @property {Color} */
-        this.lineColor  = uiSystem.defaultLineColor;
-        /** @property {Color} */
+        /** @property {Color} - color for text */
         this.textColor  = uiSystem.defaultTextColor;
-        /** @property {Color} */
+        /** @property {Color} - color used when hovering over the object */
         this.hoverColor = uiSystem.defaultHoverColor;
-        /** @property {number} */
+        /** @property {Color} - color for line drawing */
+        this.lineColor  = uiSystem.defaultLineColor;
+        /** @property {number} - width for line drawing */
         this.lineWidth  = uiSystem.defaultLineWidth;
-        /** @property {string} */
+        /** @property {string} - font for this objecct */
         this.font       = uiSystem.defaultFont;
-        /** @property {boolean} */
+        /** @property {number} - override for text height */
+        this.textHeight   = undefined;
+        /** @property {boolean} - should this object be drawn */
         this.visible    = true;
-        /** @property {Array<UIObject>} */
+        /** @property {Array<UIObject>} - a list of this object's children */
         this.children   = [];
-        /** @property {UIObject} */
+        /** @property {UIObject} - this object's parent, position is in parent space */
         this.parent     = undefined;
+        /** @property {number} - Extra size added when checking if element is touched */
+        this.extraTouchSize = 0;
+        /** @property {Sound} - Sound when interactive element is pressed */
+        this.soundPress = uiSystem.defaultSoundPress;
+        /** @property {Sound} - Sound when interactive element is released */
+        this.soundRelease = uiSystem.defaultSoundRelease;
+        /** @property {Sound} - Sound when interactive element is clicked */
+        this.soundClick = uiSystem.defaultSoundClick;
+        /** @property {boolean} - Is the mouse over this element */
+        this.mouseIsOver = false;
+        /** @property {boolean} - Is this element interactive */
+        this.interactive = false;
+        /** @property {boolean} - Is the mouse held on this element (was pressed while over and hasn't been released) */
+        this.mouseIsHeld = false;
         uiSystem.uiObjects.push(this);
     }
 
@@ -209,55 +253,93 @@ class UIObject
     /** Update the object, called automatically by plugin once each frame */
     update()
     {
-        // track mouse input
         const mouseWasOver = this.mouseIsOver;
+        const mousePress = mouseWasPressed(0);
         const mouseDown = mouseIsDown(0);
-        if (!mouseDown || isTouchDevice)
+        if (mousePress || !mouseDown || this.mouseIsHeld)
         {
-            this.mouseIsOver = isOverlapping(this.pos, this.size, mousePosScreen);
-            if (!mouseDown && isTouchDevice)
-                this.mouseIsOver = false;
-            if (this.mouseIsOver && !mouseWasOver)
-                this.onEnter();
-            if (!this.mouseIsOver && mouseWasOver)
-                this.onLeave();
+            const size = this.size.add(vec2(isTouchDevice && this.extraTouchSize || 0));
+            this.mouseIsOver = isOverlapping(this.pos, size, mousePosScreen);
         }
-        if (mouseWasPressed(0) && this.mouseIsOver)
+        if (this.mouseIsOver)
         {
-            this.mouseIsHeld = true;
-            this.onPress();
-            if (isTouchDevice)
-                this.mouseIsOver = false;
+            if (mousePress)
+                inputClearKey(0,0,0,1,0); // clear mouse was pressed state
+            if (!this.disabled)
+            {
+                if (mousePress)
+                {
+                    if (this.interactive)
+                    {
+                        this.onPress();
+                        if (this.soundPress)
+                            this.soundPress.play();
+                    }
+                    this.mouseIsHeld = true;
+                }
+                if (!mouseDown && this.mouseIsHeld && this.interactive)
+                {
+                    this.onClick();
+                    if (this.soundClick)
+                        this.soundClick.play();
+                }
+            }
         }
-        else if (this.mouseIsHeld && !mouseDown)
+        if (!mouseDown)
         {
+            if (this.mouseIsHeld && this.interactive)
+            {
+                this.onRelease();
+                if (this.soundRelease)
+                    this.soundRelease.play();
+            }
+            if (isTouchDevice)
+                this.mouseIsOver = false;
             this.mouseIsHeld = false;
-            this.onRelease();
         }
+
+        if (this.mouseIsOver != mouseWasOver)
+            this.mouseIsOver ? this.onEnter() : this.onLeave();
     }
 
     /** Render the object, called automatically by plugin once each frame */
     render()
     {
         if (this.size.x && this.size.y)
-            uiSystem.drawRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor);
+            uiSystem.drawRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor, this.cornerRadius);
+    }
+
+    /** Special update for when object is invisible */
+    updateInvisible()
+    {
+        // reset input state when not visible
+        this.mouseIsOver = this.mouseIsHeld = false;
     }
 
     /** Called when the mouse enters the object */
-    onEnter()   {}
+    onEnter()   
+    {}
 
     /** Called when the mouse leaves the object */
-    onLeave()   {}
+    onLeave()   
+    {}
 
     /** Called when the mouse is pressed while over the object */
-    onPress()   {}
+    onPress()   
+    {}
 
     /** Called when the mouse is released while over the object */
-    onRelease() {}
+    onRelease() 
+    {}
+
+    /** Called when user clicks on this object */
+    onClick()   
+    {}
 
     /** Called when the state of this object changes */
-    onChange()  {}
-}
+    onChange()  
+    {}
+};
 
 ///////////////////////////////////////////////////////////////////////////////
 /** 
@@ -287,7 +369,8 @@ class UIText extends UIObject
     }
     render()
     {
-        uiSystem.drawText(this.text, this.pos, this.size, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
+        const textSize = vec2(this.size.x, this.textHeight || this.size.y);
+        uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
     }
 }
 
@@ -343,14 +426,21 @@ class UIButton extends UIObject
 
         /** @property {string} */
         this.text = text;
+        /** @property {Color} */
+        this.disabledColor = uiSystem.defaultDisabledColor;
+        /** @property {boolean} */
+        this.disabled = false;
+        this.interactive = true;
         this.color = color;
     }
     render()
     {
-        const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
-        const color = this.mouseIsOver? this.hoverColor : this.color;
-        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor);
-        const textSize = vec2(this.size.x, this.size.y*.8);
+        const lineColor = this.mouseIsHeld && !this.disabled ? this.color : this.lineColor;
+        const color = this.disabled ? this.disabledColor : this.mouseIsOver ? this.hoverColor : this.color;
+        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
+        
+        const textScale = .8; // scale text to fit in button
+        const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
     }
@@ -374,8 +464,9 @@ class UICheckbox extends UIObject
 
         /** @property {boolean} */
         this.checked = checked;
+        this.interactive = true;
     }
-    onPress()
+    onClick()
     {
         this.checked = !this.checked;
         this.onChange();
@@ -383,7 +474,7 @@ class UICheckbox extends UIObject
     render()
     {
         const color = this.mouseIsOver? this.hoverColor : this.color;
-        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, this.lineColor);
+        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, this.lineColor, this.cornerRadius);
         if (this.checked)
         {
             // draw an X if checked
@@ -416,8 +507,10 @@ class UIScrollbar extends UIObject
         this.value = value;
         /** @property {string} */
         this.text = text;
-        this.color = color;
+        /** @property {Color} */
         this.handleColor = handleColor;
+        this.color = color;
+        this.interactive = true;
     }
     update()
     {
@@ -437,18 +530,19 @@ class UIScrollbar extends UIObject
     {
         const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
         const color = this.mouseIsOver? this.hoverColor : this.color;
-        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor);
+        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
     
         const handleSize = vec2(this.size.y);
         const handleWidth = this.size.x - handleSize.x;
         const p1 = this.pos.x - handleWidth/2;
         const p2 = this.pos.x + handleWidth/2;
-        const handlePos = vec2(lerp(this.value, p1, p2), this.pos.y);
+        const handlePos = vec2(lerp(p1, p2, this.value), this.pos.y);
         const barColor = this.mouseIsHeld ? this.color : this.handleColor;
-        uiSystem.drawRect(handlePos, handleSize, barColor, this.lineWidth, this.lineColor);
+        uiSystem.drawRect(handlePos, handleSize, barColor, this.lineWidth, this.lineColor, this.cornerRadius);
 
-        const textSize = vec2(this.size.x, this.size.y*.8);
+        const textScale = .8; // scale text to fit in scrollbar
+        const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
     }
-}
+}

package/plugins/zzfxm.js

@@ -160,4 +160,4 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
   }
 
   return [leftChannelBuffer, rightChannelBuffer];
-}
+}

package/reference.md

@@ -39,11 +39,11 @@ sign(value)                                   // Get the sign of value
 mod(dividend, divisor=1)                      // Get remainder of division
 clamp(value, min=0, max=1)                    // Clamps between values
 percent(value, valueA, valueB)                // Get percentage between values
-lerp(percent, valueA, valueB)                 // Linearly interpolates between values
+lerp(valueA, valueB, percent)                 // Linearly interpolates between values
 distanceWrap(valueA, valueB, wrapSize=1)      // Signed wrapped distance between values
-lerpWrap(percent, valueA, valueB, wrapSize=1) // Linearly interpolates with wrapping
+lerpWrap(valueA, valueB, percent, wrapSize=1) // Linearly interpolates with wrapping
 distanceAngle(angleA, angleB)                 // Signed wrapped distance between angles
-lerpAngle(percent, angleA, angleB)            // Linearly interpolates with wrapping
+lerpAngle(angleA, angleB, percent)            // Linearly interpolates with wrapping
 smoothStep(percent)                           // Applies smoothstep function
 nearestPowerOfTwo(value)                      // Returns the nearest power of two
 isOverlapping(pointA, sizeA, pointB, sizeB)   // Checks if bounding boxes overlap
@@ -55,7 +55,7 @@ formatTime(t)                                 // Formats seconds for display
 rand(valueA=1, valueB=0)             // Random float between values
 randInt(valueA, valueB=0)            // Random integer between values
 randSign()                           // Randomly bool either -1 or 1
-randVector(length=1)                 // Random Vector2 with the passed in length
+randVec2(length=1)                   // Random Vector2 with the passed in length
 randInCircle(radius=1, minRadius=0)  // Random Vector2 within a circle
 randColor(colorA, colorB, linear)    // Random color between values
 
@@ -148,7 +148,7 @@ TileInfo.size             // Size of tile in pixels
 TileInfo.textureIndex     // Texture index to use
 TileInfo.offset(offset)   // Offset this tile by a certain amount in pixels
 TileInfo.frame(frame)     // Offset this tile by a number of animation frames
-TileInfo.getTextureInfo() // Returns texture info for this tile
+TileInfo.textureInfo      // The texture info for this tile
 
 // Texture Info Object
 TextureInfo(image)       // Created automatically for each image
@@ -176,7 +176,6 @@ canvasPixelated = true        // Use nearest neighbor canvas scaling for more pi
 tilesPixelated = true         // Disable filtering for crisper pixel art
 showSplashScreen = false      // Show the LittleJS splash screen on startup
 glEnable = true               // Enable fast WebGL rendering
-glOverlay = true              // Prevent compositing the WebGL canvas
 
 // Tile sheet settings
 tileSizeDefault = (16,16)  // Default size of tiles in pixels
@@ -307,7 +306,7 @@ EngineObject.mirror        // Should it flip along y axis when rendered
 EngineObject.mass          // Weight of object, static if 0
 EngineObject.damping       // How much to slow velocity each frame (0-1)
 EngineObject.angleDamping  // How much to slow rotation each frame (0-1)
-EngineObject.elasticity    // How bouncy is it when colliding (0-1)
+EngineObject.restitution   // How bouncy is it when colliding (0-1)
 EngineObject.friction      // How much friction when sliding (0-1)
 EngineObject.gravityScale  // How much to scale gravity by
 EngineObject.renderOrder   // Objects are sorted by render order
@@ -319,7 +318,7 @@ enablePhysicsSolver = true    // Enable collisions between objects?
 objectDefaultMass = 1         // Default object mass for collisions
 objectDefaultDamping = 1      // How much to slow velocity by each frame (0-1)
 objectDefaultAngleDamping = 1 // How much to slow angular velocity each frame (0-1)
-objectDefaultElasticity = 0   // How much to bounce when a collision occurs (0-1)
+objectDefaultRestitution = 0  // How much to bounce when a collision occurs (0-1)
 objectDefaultFriction = .8    // How much to slow when touching (0-1)
 objectMaxSpeed = 1            // Clamp max speed to avoid fast objects missing collisions
 gravity = (0,0)               // How much gravity to apply to objects
@@ -358,11 +357,12 @@ TileLayerData.clear()      // Clear this tile data
 
 // Tile Collision Layer
 TileCollisionLayer(position, size, tileInfo=tile()) // Create a tile collision layer object
-TileCollisionLayer.size                             // Size of the tile collision layer
 TileCollisionLayer.setCollisionData(pos, data=1)    // Set tile collision data at pos
-getTileCollisionData(pos)                           // Get tile collision data at pos
+tileCollisionGetData(pos)                           // Get tile collision data at pos
 tileCollisionTest(pos, size=(0,0), object)          // Check if collision should occur
 tileCollisionRaycast(posStart, posEnd, object)      // Return the center of tile if hit
+tileCollisionLoad(tileMapData, tileInfo)            // Load tile layers from exported data
+
 ```
 
 ## LittleJS Particle System

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.12.4';
+const engineVersion = '1.13.1';
 
 /** Frames per second to update
  *  @type {number}
@@ -75,10 +75,15 @@ let timeReal = 0;
  *  @memberof Engine */
 let paused = false;
 
+/** Get if game is paused
+ *  @return {boolean}
+ *  @memberof Engine */
+function getPaused() { return paused; }
+
 /** Set if game is paused
- *  @param {boolean} isPaused
+ *  @param {boolean} [isPaused]
  *  @memberof Engine */
-function setPaused(isPaused) { paused = isPaused; }
+function setPaused(isPaused=true) { paused = isPaused; }
 
 // Frame time tracking
 let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
@@ -101,18 +106,28 @@ function engineAddPlugin(updateFunction, renderFunction)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// Main engine functions
+// Main Engine Functions
 
 /** Startup LittleJS engine with your callback functions
- *  @param {Function|function():Promise} gameInit - Called once after the engine starts up
- *  @param {Function} gameUpdate - Called every frame before objects are updated
- *  @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused
- *  @param {Function} gameRender - Called before objects are rendered, for drawing the background
- *  @param {Function} gameRenderPost - Called after objects are rendered, useful for drawing UI
- *  @param {Array<string>} [imageSources=[]] - List of images to load
- *  @param {HTMLElement} [rootElement] - Root element to attach to, the document body by default
+ *  @param {Function|function():Promise} gameInit - Called once after the engine starts up, can be async for loading
+ *  @param {Function} gameUpdate - Called every frame before objects are updated (60fps), use for game logic
+ *  @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused, use for UI updates
+ *  @param {Function} gameRender - Called before objects are rendered, use for drawing backgrounds/world elements
+ *  @param {Function} gameRenderPost - Called after objects are rendered, use for drawing UI/overlays
+ *  @param {Array<string>} [imageSources=[]] - List of image file paths to preload (e.g., ['player.png', 'tiles.png'])
+ *  @param {HTMLElement} [rootElement] - Root DOM element to attach canvas to, defaults to document.body
+ *  @example
+ *  // Basic engine startup
+ *  engineInit(
+ *    () => { console.log('Game initialized!'); },  // gameInit
+ *    () => { updatePlayer(); },                    // gameUpdate  
+ *    () => { updateUI(); },                        // gameUpdatePost
+ *    () => { drawBackground(); },                  // gameRender
+ *    () => { drawHUD(); },                         // gameRenderPost
+ *    ['tiles.png', 'tilesLevel.png']               // images to load
+ *  );
  *  @memberof Engine */
-function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
+async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
 {
     ASSERT(!mainContext, 'engine already initialized');
     ASSERT(Array.isArray(imageSources), 'pass in images as array');
@@ -145,7 +160,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
-            averageFPS = lerp(.05, averageFPS, 1e3/(frameTimeDeltaMS||1));
+            averageFPS = lerp(averageFPS, 1e3/(frameTimeDeltaMS||1), .05);
         const debugSpeedUp   = debug && keyIsDown('Equal'); // +
         const debugSpeedDown = debug && keyIsDown('Minus'); // -
         if (debug) // +/- to speed/slow time
@@ -154,9 +169,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         frameTimeBufferMS += paused ? 0 : frameTimeDeltaMS;
         if (!debugSpeedUp)
             frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp min framerate
-        if (debug && debugVideoCaptureIsActive())
-            frameTimeBufferMS = 0; // disable time smoothing when capturing video
-
+        if (debugVideoCaptureIsActive())
+            frameTimeBufferMS = 0; // no time smoothing when capturing video
         updateCanvas();
 
         if (paused)
@@ -215,11 +229,12 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             pluginRenderList.forEach(f=>f());
             touchGamepadRender();
             debugRender();
-            glCopyToContext(mainContext);
+            glFlush();
+            debugVideoCaptureUpdate();
 
-            if (showWatermark)
+            if (showWatermark && !debugVideoCaptureIsActive())
             {
-                // update fps
+                // update fps display
                 overlayContext.textAlign = 'right';
                 overlayContext.textBaseline = 'top';
                 overlayContext.font = '1em monospace';
@@ -230,11 +245,10 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
                 overlayContext.fillText(text, mainCanvas.width-3, 3);
                 overlayContext.fillStyle = '#fff';
                 overlayContext.fillText(text, mainCanvas.width-2, 2);
-                drawCount = 0;
             }
+            if (debug || showWatermark)
+                drawCount = 0;
         }
-
-        debugVideoCaptureUpdate();
         requestAnimationFrame(engineUpdate);
     }
 
@@ -269,20 +283,19 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
     }
 
-    function startEngine()
+    // wait for gameInit to load
+    async function startEngine()
     {
-        new Promise((resolve) => resolve(gameInit())).then(engineUpdate);
+        await gameInit();
+        engineUpdate();
     }
-
     if (headlessMode)
-    {
-        startEngine();
-        return;
-    }
+        return startEngine();
 
     // setup html
     const styleRoot = 
         'margin:0;' +                 // fill the window
+        'overflow:hidden;' +          // no scroll bars
         'background:#000;' +          // set background color
         (canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
         'user-select:none;' +         // prevent hold to select
@@ -291,8 +304,9 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         'touch-action:none;' +        // prevent mobile pinch to resize
         '-webkit-touch-callout:none');// compatibility for ios
     rootElement.style.cssText = styleRoot;
-    rootElement.appendChild(mainCanvas = document.createElement('canvas'));
-    mainContext = mainCanvas.getContext('2d');
+    drawCanvas = mainCanvas = document.createElement('canvas');
+    rootElement.appendChild(mainCanvas);
+    drawContext = mainContext = mainCanvas.getContext('2d');
 
     // init stuff and start engine
     inputInit();
@@ -301,7 +315,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     glInit();
 
     // create overlay canvas for hud to appear above gl canvas
-    rootElement.appendChild(overlayCanvas = document.createElement('canvas'));
+    overlayCanvas = document.createElement('canvas')
+    rootElement.appendChild(overlayCanvas);
     overlayContext = overlayCanvas.getContext('2d');
 
     // set canvas style
@@ -319,7 +334,9 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             const image = new Image;
             image.onerror = image.onload = ()=> 
             {
-                textureInfos[textureIndex] = new TextureInfo(image);
+                const textureInfo = new TextureInfo(image);
+                textureInfo.createWebGLTexture();
+                textureInfos[textureIndex] = textureInfo;
                 resolve();
             }
             image.crossOrigin = 'anonymous';
@@ -332,7 +349,9 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         // no images to load
         promises.push(new Promise(resolve => 
         {
-            textureInfos[0] = new TextureInfo(new Image);
+            const textureInfo = new TextureInfo(new Image);
+            textureInfos[0] = textureInfo;
+            textureInfo.createWebGLTexture();
             resolve();
         }));
     }
@@ -347,15 +366,16 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             updateSplash();
             function updateSplash()
             {
-                clearInput();
+                inputClear();
                 drawEngineSplashScreen(t+=.01);
                 t>1 ? resolve() : setTimeout(updateSplash, 16);
             }
         }));
     }
 
-    // load all of the images
-    Promise.all(promises).then(startEngine);
+    // wait for all the promises to finish
+    await Promise.all(promises);
+    return startEngine();
 }
 
 /** Update each engine object, remove destroyed objects, and update time
@@ -471,7 +491,7 @@ function drawEngineSplashScreen(t)
         const p3 = percent(t, 1, .8);
         const p4 = percent(t, 0, .5);
         const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,Math.hypot(w,h)*.7);
-        g.addColorStop(0,hsl(0,0,lerp(p4,0,p3/2),p3).toString());
+        g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
         g.addColorStop(1,hsl(0,0,0,p3).toString());
         x.save();
         x.fillStyle = g;
@@ -622,4 +642,4 @@ function drawEngineSplashScreen(t)
     }
     
     x.restore();
-}
+}