littlejsengine 1.14.16 → 1.14.23

package/src/engineDraw.js

@@ -173,16 +173,15 @@ class TileInfo
     }
 
     /**
-     * Set this tile to use a full image
-     * @param {HTMLImageElement|OffscreenCanvas} image
-     * @param {WebGLTexture} [glTexture] - WebGL texture
+     * Set this tile to use a full image in a texture info
+     * @param {TextureInfo} textureInfo
      * @return {TileInfo}
      */
-    setFullImage(image, glTexture)
+    setFullImage(textureInfo)
     {
         this.pos = new Vector2;
-        this.size = new Vector2(image.width, image.height);
-        this.textureInfo = new TextureInfo(image, glTexture);
+        this.size = textureInfo.size.copy();
+        this.textureInfo = textureInfo;
         // do not use padding or bleed
         this.bleedScale = this.padding = 0;
         return this;
@@ -198,26 +197,30 @@ class TextureInfo
     /**
      * Create a TextureInfo, called automatically by the engine
      * @param {HTMLImageElement|OffscreenCanvas} image
-     * @param {WebGLTexture} [glTexture] - WebGL texture
+     * @param {boolean} [useWebGL] - Should use WebGL if available?
      */
-    constructor(image, glTexture)
+    constructor(image, useWebGL=true)
     {
-        /** @property {HTMLImageElement} - image source */
+        /** @property {HTMLImageElement|OffscreenCanvas} - image source */
         this.image = image;
         /** @property {Vector2} - size of the image */
-        this.size = vec2(image.width, image.height);
+        this.size = image ? vec2(image.width, image.height) : vec2();
         /** @property {Vector2} - inverse of the size, cached for rendering */
-        this.sizeInverse = vec2(1/image.width, 1/image.height);
+        this.sizeInverse = image ? vec2(1/image.width, 1/image.height) : vec2();
         /** @property {WebGLTexture} - WebGL texture */
-        this.glTexture = glTexture;
+        this.glTexture = undefined;
+        useWebGL && this.createWebGLTexture();
     }
 
-    createWebGLTexture()
-    {
-        ASSERT(!this.glTexture);
-        if (glEnable)
-            this.glTexture = glCreateTexture(this.image);
-    }
+    /** Creates the WebGL texture, updates if already created */
+    createWebGLTexture() { glRegisterTextureInfo(this); }
+
+    /** Destroys the WebGL texture */
+    destroyWebGLTexture() { glUnregisterTextureInfo(this); }
+
+    /** Check if the texture is webgl enabled
+     * @return {boolean} */
+    hasWebGL() { return !!this.glTexture; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -249,6 +252,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     const bleedScale = tileInfo ? tileInfo.bleedScale : 0;
     if (useWebGL)
     {
+        ASSERT(!!glContext, 'WebGL is not enabled!');
         if (screenSpace)
         {
             // convert to world space
@@ -344,6 +348,7 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
     if (useWebGL)
     {
+        ASSERT(!!glContext, 'WebGL is not enabled!');
         if (screenSpace)
         {
             // convert to world space
@@ -355,7 +360,7 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
         const halfSizeX = size.x/2, halfSizeY = size.y/2;
         const colorTopInt = colorTop.rgbaInt();
         const colorBottomInt = colorBottom.rgbaInt();
-        const c = Math.cos(-angle), s = Math.sin(-angle);
+        const c = cos(-angle), s = sin(-angle);
         for (let i=4; i--;)
         {
             const x = i & 1 ? halfSizeX : -halfSizeX;
@@ -406,6 +411,7 @@ function drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0,
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
     if (useWebGL)
     {
+        ASSERT(!!glContext, 'WebGL is not enabled!');
         let scale = 1;
         if (screenSpace)
         {
@@ -455,6 +461,8 @@ function drawLine(posA, posB, width=.1, color, pos=vec2(), angle=0, useWebGL, sc
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(width, halfDelta.length()*2);
     pos = pos.add(posA.add(halfDelta));
+    if (screenSpace)
+        halfDelta.y *= -1;  // flip angle Y if screen space
     angle += halfDelta.angle();
     drawRect(pos, size, color, angle, useWebGL, screenSpace, context);
 }
@@ -482,7 +490,7 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
     for (let i=sides; i--;)
     {
         const a = (i/sides)*PI*2;
-        points.push(vec2(Math.sin(a)*sizeX, Math.cos(a)*sizeY));
+        points.push(vec2(sin(a)*sizeX, cos(a)*sizeY));
     }
     drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebGL, screenSpace, context);
 }
@@ -509,6 +517,7 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
 
     if (useWebGL)
     {
+        ASSERT(!!glContext, 'WebGL is not enabled!');
         let scale = 1;
         if (screenSpace)
         {
@@ -650,12 +659,13 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
  *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {string}  [font=fontDefault]
+ *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth, context=drawContext)
+function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth, context=drawContext)
 {
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, maxWidth, context);
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, fontStyle, maxWidth, context);
 }
 
 /** Draw text on overlay canvas in world space
@@ -668,11 +678,12 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {string}  [font=fontDefault]
+ *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
  *  @memberof Draw */
-function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth)
+function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth)
 {
-    drawText(text, pos, size, color, lineWidth, lineColor, textAlign, font, maxWidth, overlayContext);
+    drawText(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, overlayContext);
 }
 
 /** Draw text on overlay canvas in screen space
@@ -685,10 +696,11 @@ function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textA
  *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {CanvasTextAlign}  [textAlign]
  *  @param {string}  [font=fontDefault]
+ *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, maxWidth, context=overlayContext)
+function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, context=overlayContext)
 {
     ASSERT(isString(text), 'text must be a string');
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -696,15 +708,15 @@ function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=B
     ASSERT(isColor(color), 'color must be a color');
     ASSERT(isNumber(lineWidth), 'lineWidth must be a number');
     ASSERT(isColor(lineColor), 'lineColor must be a color');
-    ASSERT(isColor(lineColor), 'lineColor must be a color');
     ASSERT(['left','center','right'].includes(textAlign), 'align must be left, center, or right');
     ASSERT(isString(font), 'font must be a string');
+    ASSERT(isString(fontStyle), 'fontStyle must be a string');
     
     context.fillStyle = color.toString();
     context.strokeStyle = lineColor.toString();
     context.lineWidth = lineWidth;
     context.textAlign = textAlign;
-    context.font = size + 'px '+ font;
+    context.font = fontStyle + ' ' + size + 'px '+ font;
     context.textBaseline = 'middle';
 
     const lines = (text+'').split('\n');
@@ -727,18 +739,18 @@ function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=B
  *  @memberof Draw */
 function screenToWorld(screenPos)
 {
-    let cameraPosRelativeX = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
-    let cameraPosRelativeY = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
+    let x = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
+    let y = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
     if (cameraAngle)
     {
         // apply camera rotation
-        const cos = Math.cos(-cameraAngle), sin = Math.sin(-cameraAngle);
-        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
-        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
-        cameraPosRelativeX = rotatedX;
-        cameraPosRelativeY = rotatedY;
+        const c = cos(-cameraAngle), s = sin(-cameraAngle);
+        const rotatedX = x * c - y * s;
+        const rotatedY = x * s + y * c;
+        x = rotatedX;
+        y = rotatedY;
     }
-    return new Vector2(cameraPosRelativeX + cameraPos.x, cameraPosRelativeY + cameraPos.y);
+    return new Vector2(x + cameraPos.x, y + cameraPos.y);
 }
 
 /** Convert from world to screen space coordinates
@@ -747,24 +759,64 @@ function screenToWorld(screenPos)
  *  @memberof Draw */
 function worldToScreen(worldPos)
 {
-    let cameraPosRelativeX = worldPos.x - cameraPos.x;
-    let cameraPosRelativeY = worldPos.y - cameraPos.y;
+    let x = worldPos.x - cameraPos.x;
+    let y = worldPos.y - cameraPos.y;
     if (cameraAngle)
     {
         // apply inverse camera rotation
-        const cos = Math.cos(cameraAngle), sin = Math.sin(cameraAngle);
-        const rotatedX = cameraPosRelativeX * cos - cameraPosRelativeY * sin;
-        const rotatedY = cameraPosRelativeX * sin + cameraPosRelativeY * cos;
-        cameraPosRelativeX = rotatedX;
-        cameraPosRelativeY = rotatedY;
+        const c = cos(cameraAngle), s = sin(cameraAngle);
+        const rotatedX = x * c - y * s;
+        const rotatedY = x * s + y * c;
+        x = rotatedX;
+        y = rotatedY;
     }
     return new Vector2
     (
-        cameraPosRelativeX *  cameraScale + mainCanvasSize.x/2 - .5,
-        cameraPosRelativeY * -cameraScale + mainCanvasSize.y/2 - .5
+        x *  cameraScale + mainCanvasSize.x/2 - .5,
+        y * -cameraScale + mainCanvasSize.y/2 - .5
     );
 }
 
+/** Convert from screen to world space coordinates for a directional vector (no translation)
+ *  @param {Vector2} screenDelta
+ *  @return {Vector2}
+ *  @memberof Draw */
+function screenToWorldDelta(screenDelta)
+{
+    let x = screenDelta.x /  cameraScale;
+    let y = screenDelta.y / -cameraScale;
+    if (cameraAngle)
+    {
+        // apply camera rotation
+        const c = cos(-cameraAngle), s = sin(-cameraAngle);
+        const rotatedX = x * c - y * s;
+        const rotatedY = x * s + y * c;
+        x = rotatedX;
+        y = rotatedY;
+    }
+    return new Vector2(x, y);
+}
+
+/** Convert from screen to world space coordinates for a directional vector (no translation)
+ *  @param {Vector2} worldDelta
+ *  @return {Vector2}
+ *  @memberof Draw */
+function worldToScreenDelta(worldDelta)
+{
+    let x = worldDelta.x;
+    let y = worldDelta.y;
+    if (cameraAngle)
+    {
+        // apply inverse camera rotation
+        const c = cos(cameraAngle), s = sin(cameraAngle);
+        const rotatedX = x * c - y * s;
+        const rotatedY = x * s + y * c;
+        x = rotatedX;
+        y = rotatedY;
+    }
+    return new Vector2(x *  cameraScale, y * -cameraScale);
+}
+
 /** Get the camera's visible area in world space
  *  @return {Vector2}
  *  @memberof Draw */
@@ -817,6 +869,8 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
     function isBlack(c) { return c.r <= 0 && c.g <= 0 && c.b <= 0 && c.a <= 0; }
     const sx2 = bleedScale;
     const sy2 = bleedScale;
+    sWidth  = max(1,sWidth|0);
+    sHeight = max(1,sHeight|0);
     const sWidth2  = sWidth  - 2*bleedScale;
     const sHeight2 = sHeight - 2*bleedScale;
     if (!canvasColorTiles || (additiveColor ? isWhite(color.add(additiveColor)) && additiveColor.a <= 0 : isWhite(color)))
@@ -831,7 +885,7 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
         // copy to offscreen canvas
         workCanvas.width = sWidth;
         workCanvas.height = sHeight;
-        workContext.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, sWidth, sHeight);
+        workContext.drawImage(image, sx|0, sy|0, sWidth, sHeight, 0, 0, sWidth, sHeight);
 
         // tint image using offscreen work context
         const imageData = workContext.getImageData(0, 0, sWidth, sHeight);
@@ -912,11 +966,11 @@ let engineFontImage;
 class FontImage
 {
     /** Create an image font
-     *  @param {HTMLImageElement} [image]    - Image for the font, if undefined default font is used
-     *  @param {Vector2} [tileSize=(8,8)]    - Size of the font source tiles
-     *  @param {Vector2} [paddingSize=(0,1)] - How much extra space to add between characters
+     *  @param {HTMLImageElement} [image] - Image for the font, default if undefined
+     *  @param {Vector2} [tileSize=(8,8)] - Size of the font source tiles
+     *  @param {Vector2} [paddingSize=(0,1)] - How much space between characters
      */
-    constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)
+    constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1))
     {
         // load default font image
         if (!engineFontImage)

package/src/engineExport.js

@@ -79,6 +79,7 @@ export
 	gamepadDirectionEmulateStick,
 	inputWASDEmulateDirection,
 	touchGamepadEnable,
+	touchGamepadCenterButton,
 	touchGamepadAnalog,
 	touchGamepadSize,
 	touchGamepadAlpha,
@@ -122,6 +123,7 @@ export
 	setGamepadDirectionEmulateStick,
 	setInputWASDEmulateDirection,
 	setTouchGamepadEnable,
+	setTouchGamepadCenterButton,
 	setTouchGamepadAnalog,
 	setTouchGamepadSize,
 	setTouchGamepadAlpha,
@@ -140,9 +142,18 @@ export
 	// Utilities
 	PI,
 	abs,
+	floor,
+	ceil,
+	round,
 	min,
 	max,
 	sign,
+	hypot,
+	log2,
+	sin,
+	cos,
+	tan,
+	atan2,
 	mod,
 	clamp,
 	percent,
@@ -210,6 +221,8 @@ export
 	drawCount,
 	screenToWorld,
 	worldToScreen,
+	screenToWorldDelta,
+	worldToScreenDelta,
 	drawTile,
 	drawRect,
 	drawRectGradient,

package/src/engineInput.js

@@ -182,9 +182,9 @@ function inputUpdate()
     if(!(touchInputEnable && isTouchDevice) && !document.hasFocus())
         inputClear();
 
-    // update mouse world space position
+    // update mouse world space position and delta
     mousePos = screenToWorld(mousePosScreen);
-    mouseDelta = mouseDeltaScreen.multiply(vec2(1,-1)).rotate(-cameraAngle);
+    mouseDelta = screenToWorldDelta(mouseDeltaScreen);
 
     // update gamepads if enabled
     gamepadsUpdate();
@@ -216,7 +216,6 @@ function inputInit()
     document.addEventListener('wheel', onMouseWheel);
     document.addEventListener('contextmenu', onContextMenu);
     document.addEventListener('blur', onBlur);
-    document.addEventListener('mouseleave', onMouseLeave);
 
     // init touch input
     if (isTouchDevice && touchInputEnable)
@@ -258,7 +257,10 @@ function inputInit()
 
         isUsingGamepad = false;
         inputData[0][e.button] = 3;
+
+        let mousePosScreenLast = mousePosScreen;
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
+        mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
         inputPreventDefault && e.button && e.preventDefault();
     }
     function onMouseUp(e)
@@ -269,18 +271,13 @@ function inputInit()
     }
     function onMouseMove(e)
     {
+        let mousePosScreenLast = mousePosScreen;
         mousePosScreen = mouseEventToScreen(vec2(e.x,e.y));
-        mouseDeltaScreen = mouseDeltaScreen.add(vec2(e.movementX, e.movementY));
+        mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
     }
     function onMouseWheel(e) { mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY); }
     function onContextMenu(e) { e.preventDefault(); } // prevent right click menu
     function onBlur() { inputClear(); } // reset input when focus is lost
-    function onMouseLeave()
-    {
-        // set mouse position and delta when leaving canvas
-        mousePosScreen = vec2(-1);
-        mouseDeltaScreen = vec2(0);
-    }
 }
 
 // convert a mouse or touch event position to screen space
@@ -324,8 +321,8 @@ function gamepadsUpdate()
         else if (touchGamepadStick.lengthSquared() > .3)
         {
             // convert to 8 way dpad
-            sticks[0].x = Math.round(touchGamepadStick.x);
-            sticks[0].y = -Math.round(touchGamepadStick.y);
+            sticks[0].x = round(touchGamepadStick.x);
+            sticks[0].y = -round(touchGamepadStick.y);
             sticks[0] = sticks[0].clampLength();
         }
 
@@ -453,11 +450,11 @@ function touchInputInit()
         {
             // set event pos and pass it along
             const pos = vec2(e.touches[0].clientX, e.touches[0].clientY);
-            const lastMousePosScreen = mousePosScreen;
+            const mousePosScreenLast = mousePosScreen;
             mousePosScreen = mouseEventToScreen(pos);
             if (wasTouching)
             {
-                mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(lastMousePosScreen));
+                mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
                 isUsingGamepad = touchGamepadEnable;
             }
             else
@@ -489,7 +486,7 @@ function touchInputInit()
         if (touching)
         {
             touchGamepadTimer.set();
-            if (paused && !wasTouching)
+            if (touchGamepadCenterButton && !wasTouching && paused)
             {
                 // touch anywhere to press start when paused
                 touchGamepadButtons[9] = 1;
@@ -528,7 +525,8 @@ function touchInputInit()
                 if (button < touchGamepadButtonCount)
                     touchGamepadButtons[button] = 1;
             }
-            else if (startCenter.distance(touchPos) < touchGamepadSize && !wasTouching)
+            else if (touchGamepadCenterButton && !wasTouching && 
+                startCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual start button in center
                 touchGamepadButtons[9] = 1;

package/src/engineObject.js

@@ -287,6 +287,27 @@ class EngineObject
                     // test which side we bounced off (or both if a corner)
                     const blockedLayerY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
                     const blockedLayerX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
+
+                    if (blockedLayerX)
+                    {
+                        // try to move up a tiny bit
+                        const epsilon = 1e-3;
+                        const maxMoveUp = .1;
+                        const y = floor(oldPos.y-this.size.y/2+1) +
+                            this.size.y/2 + epsilon;
+                        const delta = y - this.pos.y;
+                        if (delta < maxMoveUp)
+                        if (!tileCollisionTest(vec2(this.pos.x, y), this.size, this))
+                        {   
+                            this.pos.y = y;
+                            debugPhysics && debugRect(this.pos, this.size, '#ff0');
+                            return;
+                        }
+
+                        // move to previous position and bounce
+                        this.pos.x = oldPos.x;
+                        this.velocity.x *= -this.restitution;
+                    }
                     if (blockedLayerY || !blockedLayerX)
                     {
                         // bounce velocity
@@ -310,12 +331,6 @@ class EngineObject
                             this.groundObject = undefined;
                         }
                     }
-                    if (blockedLayerX)
-                    {
-                        // move to previous position and bounce
-                        this.pos.x = oldPos.x;
-                        this.velocity.x *= -this.restitution;
-                    }
                     debugPhysics && debugRect(this.pos, this.size, '#f00');
                 }
             }
@@ -373,6 +388,16 @@ class EngineObject
      */
     collideWithObject(object) { return true; }
 
+    /** Get this object's up vector
+     *  @param {number} [scale] - length of the vector
+     *  @return {Vector2} */
+    getUp(scale=1) { return vec2().setAngle(this.angle, scale); }
+
+    /** Get this object's right vector
+     *  @param {number} [scale] - length of the vector
+     *  @return {Vector2} */
+    getRight(scale=1) { return vec2().setAngle(this.angle+PI/2, scale); }
+
     /** How long since the object was created
      *  @return {number} */
     getAliveTime() { return time - this.spawnTime; }

package/src/engineParticles.js

@@ -23,7 +23,7 @@
  *     tile(0, 16),                // tileInfo
  *     rgb(1,1,1,1), rgb(0,0,0,1), // colorStartA, colorStartB
  *     rgb(1,1,1,0), rgb(0,0,0,0), // colorEndA, colorEndB
- *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
+ *     1, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
  *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate,
  *     .5, 1                // randomness, collide, additive, randomColorLinear, renderOrder
  * );
@@ -152,6 +152,12 @@ class ParticleEmitter extends EngineObject
         this.particleCreateCallback = undefined;
         /** @property {number} - Track particle emit time */
         this.emitTimeBuffer    = 0;
+        /** @property {number} - Percentage of velocity to pass to particles (0-1) */
+        this.velocityInheritance = 0;
+
+        // track previous position and angle
+        this.previousAngle = this.angle;
+        this.previousPos = this.pos.copy();
     }
 
     /** Update the emitter to spawn particles, called automatically by engine once each frame */
@@ -160,6 +166,18 @@ class ParticleEmitter extends EngineObject
         // only do default update to apply parent transforms
         this.parent && super.update();
 
+        if (this.velocityInheritance)
+        {
+            // pass emitter velocity to particles
+            const p = this.velocityInheritance;
+            this.velocity.x = p * (this.pos.x - this.previousPos.x);
+            this.velocity.y = p * (this.pos.y - this.previousPos.y);
+            this.angleVelocity = p * (this.angle - this.previousAngle);
+            this.previousAngle = this.angle;
+            this.previousPos.x = this.pos.x;
+            this.previousPos.y = this.pos.y;
+        }
+
         // update emitter
         if (!this.emitTime || this.getAliveTime() <= this.emitTime)
         {
@@ -217,7 +235,7 @@ class ParticleEmitter extends EngineObject
         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.angleVelocity = angleSpeed;
-        if (!this.localSpace)
+        if (!this.localSpace && this.velocityInheritance > 0)
         {
             // apply emitter velocity to particle
             particle.velocity.x += this.velocity.x;
@@ -315,6 +333,16 @@ class Particle extends EngineObject
                 this.velocity.y *= s;
             }
         }
+
+        if (this.lifeTime > 0 && time - this.spawnTime > this.lifeTime)
+        {
+            // destroy particle when its time runs out
+            const c = this.colorEnd;
+            this.color.set(c.r, c.g, c.b, c.a);
+            this.size.set(this.sizeEnd, this.sizeEnd);
+            this.destroyCallback && this.destroyCallback(this);
+            this.destroyed = 1;
+        }
     }
 
     /** Render the particle, automatically called each frame, sorted by renderOrder */
@@ -323,7 +351,7 @@ class Particle extends EngineObject
         // lerp color and size
         const p1 = this.lifeTime > 0 ? min((time - this.spawnTime) / this.lifeTime, 1) : 1, p2 = 1-p1;
         const radius = p2 * this.sizeStart + p1 * this.sizeEnd;
-        this.size.x = this.size.y = radius;
+        const size = vec2(radius);
         this.color.r = p2 * this.colorStart.r + p1 * this.colorEnd.r;
         this.color.g = p2 * this.colorStart.g + p1 * this.colorEnd.g;
         this.color.b = p2 * this.colorStart.b + p1 * this.colorEnd.b;
@@ -343,7 +371,7 @@ class Particle extends EngineObject
         {
             // in local space of emitter
             const a = this.localSpaceEmitter.angle;
-            const c = Math.cos(a), s = Math.sin(a);
+            const c = cos(a), s = sin(a);
             pos = this.localSpaceEmitter.pos.add(
                 new Vector2(pos.x*c - pos.y*s, pos.x*s + pos.y*c));
             angle += this.localSpaceEmitter.angle;
@@ -359,21 +387,14 @@ class Particle extends EngineObject
             {
                 // stretch in direction of motion
                 const trailLength = speed * this.trailScale;
-                this.size.y = max(this.size.x, trailLength);
-                angle = Math.atan2(direction.x, direction.y);
-                drawTile(pos, this.size, this.tileInfo, this.color, angle, this.mirror);
+                size.y = max(size.x, trailLength);
+                angle = atan2(direction.x, direction.y);
+                drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror);
             }
         }
         else
-            drawTile(pos, this.size, this.tileInfo, this.color, angle, this.mirror);
+            drawTile(pos, size, this.tileInfo, this.color, angle, this.mirror);
         this.additive && setBlendMode();
-        debugParticles && debugRect(pos, this.size, '#f005', 0, angle);
-
-        if (p1 === 1)
-        {
-            // destroy particle when its time runs out
-            this.destroyCallback && this.destroyCallback(this);
-            this.destroyed = 1;
-        }
+        debugParticles && debugRect(pos, size, '#f005', 0, angle);
     }
 }

package/src/engineRelease.js

@@ -38,4 +38,5 @@ function debugShowErrors(){}
 function debugVideoCaptureIsActive(){ return false; }
 function debugVideoCaptureStart (){}
 function debugVideoCaptureStop  (){}
-function debugVideoCaptureUpdate(){}
+function debugVideoCaptureUpdate(){}
+function debugProtectConstant(o){ return o; }

package/src/engineSettings.js

@@ -216,6 +216,14 @@ let touchInputEnable = true;
  *  @memberof Settings */
 let touchGamepadEnable = false;
 
+/** True if touch gamepad should have start button in the center
+ *  - When the game is paused, any touch will press the button
+ *  - This can function as a way to pause/unpause the game
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let touchGamepadCenterButton = true;
+
 /** True if touch gamepad should be analog stick or false to use if 8 way dpad
  *  @type {boolean}
  *  @default
@@ -391,9 +399,14 @@ function setHeadlessMode(headless) { headlessMode = headless; }
  *  @memberof Settings */
 function setGLEnable(enable)
 {
+    if (enable && !glCanBeEnabled)
+    {
+        console.warn('Can not enable WebGL if it was disabled on start.');
+        return;
+    }
     glEnable = enable;
     if (glCanvas) // hide glCanvas if WebGL is disabled
-        glCanvas.style.visibility = enable ? 'visible' : 'hidden';
+        glCanvas.style.display = enable ? '' : 'none';
 }
 
 /** Set how many sided polygons to use when drawing circles and ellipses with WebGL
@@ -481,6 +494,12 @@ function setTouchInputEnable(enable) { touchInputEnable = enable; }
  *  @memberof Settings */
 function setTouchGamepadEnable(enable) { touchGamepadEnable = enable; }
 
+/** True if touch gamepad should have start button in the center
+ *  - This can function as a way to pause/unpause the game
+ *  @param {boolean} enable
+ *  @memberof Settings */
+function setTouchGamepadCenterButton(enable) { touchGamepadCenterButton = enable; }
+
 /** Set if touch gamepad should be analog stick or 8 way dpad
  *  @param {boolean} analog
  *  @memberof Settings */