littlejsengine 1.14.9 → 1.14.11

package/examples/shorts/music.js

@@ -48,7 +48,6 @@ function gameInit()
 
     // stop button
     stopButton = new UIButton(vec2(90, 30), vec2(140, 50), 'Stop');
-    musicPlayer.addChild(stopButton);
     stopButton.onClick = ()=>
     {
         if (!musicInstance)
@@ -57,10 +56,11 @@ function gameInit()
         // stop sound
         musicInstance.stop();
     };
+    musicPlayer.addChild(stopButton);
 
     // progress bar and scrollbar for seeking
     progressBar = new UIScrollbar(vec2(0, 100), vec2(400, 30), 0, 'Progress');
-    musicPlayer.addChild(progressBar);
+    progressBar.disabledColor = RED;
     progressBar.onChange = ()=> 
     {
         // control music seek position
@@ -73,6 +73,7 @@ function gameInit()
         if (!wasPlaying)
             musicInstance.pause();
     };
+    musicPlayer.addChild(progressBar);
 }
 
 function gameUpdate()

package/examples/shorts/particles.js

@@ -4,25 +4,25 @@ function gameInit()
 
     // fire
     new ParticleEmitter(
-        vec2(-5,-2), 0,                 // pos, angle
+        vec2(-5,-2), 0,                  // pos, angle
         2, 0, 200, PI,                  // emitSize, emitTime, emitRate, emitCone
         tile(0),                        // tileInfo
         rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
         rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
-        .7, 2, 0, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
-        .9, 1, -1, PI, .05,  // damp, angleDamp, gravity, particleCone, fade
-        .5, 0, 1, 0, 1e9     // randomness, collide, additive, colorLinear, renderOrder
+        .7, 2, 0, .2, .05,  // time, sizeStart, sizeEnd, speed, angleSpeed
+        .9, 1, -1, PI, .05, // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 1, 0         // randomness, collide, additive, colorLinear
     );
     
     // smoke
     new ParticleEmitter(
-        vec2(5,-2), 0,                    // pos, angle
-        3, 0, 100, PI,                    // emitSize, emitTime, emitRate, emitCone
-        tile(0),                          // tileInfo
-        hsl(0,0,0,.5), hsl(0,0,1,.5),     // colorStartA, colorStartB
+        vec2(5,-2), 0,               // pos, angle
+        3, 0, 100, PI,                // emitSize, emitTime, emitRate, emitCone
+        tile(0),                      // tileInfo
+        hsl(0,0,0,.5), hsl(0,0,1,.5), // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,1,0), // colorEndA, colorEndB
-        1, 1, 5, .2, .01,    // time, sizeStart, sizeEnd, speed, angleSpeed
-        .85, 1, -1, PI, .3,  // damp, angleDamp, gravity, particleCone, fade
-        .5, 0, 0, 1, 1e8     // randomness, collide, additive, colorLinear, renderOrder
+        1, 1, 5, .2, .01,   // time, sizeStart, sizeEnd, speed, angleSpeed
+        .85, 1, -1, PI, .3, // damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 0, 1         // randomness, collide, additive, colorLinear
     );
 }

package/examples/shorts/pongGame.js

@@ -1,4 +1,3 @@
-// globals objects
 let paddle, ball;
 
 class PhysicsObject extends EngineObject

package/examples/shorts/raycasting.js

@@ -31,7 +31,10 @@ function gameUpdate()
         playerAngle += mouseDelta.x * .003;
 
     // update player movement, prevent walking through walls
-    const velocity = keyDirection().scale(.1).rotate(playerAngle);
+    let velocity = keyDirection();
+    if (velocity.y && mouseIsDown(0))
+        velocity.y = 1; // forward movement with mouse
+    velocity = velocity.rotate(playerAngle).scale(.1);
     const newPos = playerPos.add(velocity);
     if (!levelTest(newPos.x, newPos.y))
         playerPos = newPos;

package/examples/shorts/slidingPuzzle.js

@@ -6,27 +6,35 @@ class PuzzlePiece extends EngineObject
 {
     constructor(gridPos, size)
     {
-        const color = rgb(gridPos.x/(gridSize.x-1), gridPos.y/(gridSize.y-1), 1);
+        const x = gridPos.x, y = gridPos.y;
+        const color = rgb(x/(gridSize.x-1), y/(gridSize.y-1), 1);
         super(gridPos.multiply(size), size, 0, 0, color);
         this.gridPos = gridPos;
-        this.text = gridPos.x + gridPos.y*gridSize.x;
+        this.text = x + y*gridSize.x;
+        this.moveTimer = new Timer;
+        this.lastPos = this.pos;
     }
 
     update()
     {
+        const deltaX = emptyGridPos.x - this.gridPos.x;
+        const deltaY = emptyGridPos.y - this.gridPos.y;
         if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
-        if (abs(this.gridPos.x-emptyGridPos.x) + abs(this.gridPos.y-emptyGridPos.y) == 1)
+        if (abs(deltaX) + abs(deltaY) === 1)
         {
             // swap with empty space when clicked on
+            this.lastPos = this.pos;
             this.pos = emptyGridPos.multiply(this.size);
             [emptyGridPos, this.gridPos] = [this.gridPos, emptyGridPos];
+            this.moveTimer.set(.2);
         }
     }
 
     render()
     {
-        super.render();
-        drawTextOverlay(this.text, this.pos, 2.5, BLACK);
+        const pos = this.lastPos.lerp(this.pos, this.moveTimer.getPercent());
+        drawRect(pos, this.size, this.color);
+        drawTextOverlay(this.text, pos, 2.5, BLACK);
     }
 }
 

package/examples/shorts/starfield.js

@@ -1,7 +1,7 @@
 function gameRender()
 {
     // precreate variables to avoid overhead
-    const pos = vec2(), size = vec2(), color = WHITE;
+    const pos = vec2(), size = vec2(), color = new Color;
     for (let i=2e3; i--;)
     {
         // use math to generate random star positions

package/examples/shorts/uiSystem.js

@@ -1,7 +1,3 @@
-// globals objects
-const sound_ui = new Sound([1,0]);
-let uiMenu;
-
 function gameInit()
 {
     // setup ui system plugin

package/examples/uiSystem/game.js

@@ -41,14 +41,14 @@ function createUI()
     uiMenu.addChild(uiBackground);
 
     // example large text
-    const textTitle = new LJS.UIText(vec2(0,-220), vec2(500, 90), 'Test Title');
+    const textTitle = new LJS.UIText(vec2(0,-220), vec2(500, 120), 'Test Title');
     uiMenu.addChild(textTitle);
     textTitle.textColor = LJS.RED;
     textTitle.lineWidth = 4;
     textTitle.lineColor = LJS.BLUE;
 
     // example multiline text
-    const textTest = new LJS.UIText(vec2(-60,-120), vec2(300, 50), 'Test Text\nSecond text line.')
+    const textTest = new LJS.UIText(vec2(-60,-120), vec2(350, 60), 'Test Text\nSecond text line.')
     uiMenu.addChild(textTest);
 
     // example tile image
@@ -63,7 +63,7 @@ function createUI()
     // example button
     const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
-    button1.onClick = ()=> console.log('Button 1 clicked');
+    button1.onClick = ()=> LOG('Button 1 clicked');
 
     // example checkbox
     const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
@@ -71,7 +71,7 @@ function createUI()
     checkbox.onChange = ()=> button1.disabled = checkbox.checked;
 
     // text attached to checkbox
-    const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 40), 'Test Checkbox');
+    const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 60), 'Test Checkbox');
     checkbox.addChild(checkboxText);
 
     // exit button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.14.9",
+  "version": "1.14.11",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/box2d.js

@@ -1715,7 +1715,7 @@ async function box2dInit()
     }
     function box2dRender()
     {
-        if (box2dDebug || debugPhysics && debugOverlay)
+        if (box2dDebug || debugPhysics)
             box2d.world.DrawDebugData();
     }
     

package/plugins/newgrounds.js

@@ -76,7 +76,7 @@ class NewgroundsPlugin
         // get medals
         const medalsResult = this.call('Medal.getList');
         this.medals = medalsResult ? medalsResult.result.data['medals'] : [];
-        debugMedals && console.log(this.medals);
+        debugMedals && LOG(this.medals);
         for (const newgroundsMedal of this.medals)
         {
             const medal = medals[newgroundsMedal['id']];
@@ -99,7 +99,7 @@ class NewgroundsPlugin
         // get scoreboards
         const scoreboardResult = this.call('ScoreBoard.getBoards');
         this.scoreboards = scoreboardResult ? scoreboardResult.result.data.scoreboards : [];
-        debugMedals && console.log(this.scoreboards);
+        debugMedals && LOG(this.scoreboards);
 
         // keep the session alive with a ping every minute
         const keepAliveMS = 60 * 1e3;
@@ -168,10 +168,10 @@ class NewgroundsPlugin
         try { xmlHttp.send(formData); }
         catch(e)
         {
-            debugMedals && console.log('newgrounds call failed', e);
+            debugMedals && LOG('newgrounds call failed', e);
             return;
         }
-        debugMedals && console.log(xmlHttp.responseText);
+        debugMedals && LOG(xmlHttp.responseText);
         return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
     }
 }

package/plugins/uiSystem.js

@@ -284,7 +284,7 @@ class UIObject
         const mouseDown = mouseIsDown(0);
         const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
         if (!uiSystem.hoverObject)
-        if (mousePress || !mouseDown || isActive)
+        if (mousePress || isActive || (!mouseDown && !isTouchDevice))
         {
             const size = this.size.add(vec2(isTouchDevice && this.extraTouchSize || 0));
             if (isOverlapping(this.pos, size, mousePosScreen))

package/reference.md

@@ -77,7 +77,6 @@ Vector2.normalize(length=1)               // Normalize this vector to length
 Vector2.clampLength(length=1)             // Clamp this vector to length
 Vector2.dot(v)                            // Dot product with vector
 Vector2.cross(v)                          // Cross product with vector
-Vector2.invert()                          // Invert this vector
 Vector2.floor()                           // Floor this vector
 Vector2.area()                            // Get area covered by this vector as a rectangle
 Vector2.lerp(v, percent)                  // Interpolate between vectors
@@ -442,7 +441,6 @@ debug                // Is debug enabled?
 debugPointSize = .5  // Size to render debug points by default
 debugKey = 'Escape'  // Key code used to toggle debug mode
 debugOverlay         // True if the debug overlay is active
-enableAsserts        // True if asserts are enabled
 showWatermark        // True if watermark with FPS should be show
 ```
 

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.9';
+const engineVersion = '1.14.11';
 
 /** Frames per second to update
  *  @type {number}
@@ -119,12 +119,12 @@ function engineAddPlugin(updateFunction, renderFunction)
  *  @example
  *  // Basic engine startup
  *  engineInit(
- *    () => { console.log('Game initialized!'); },  // gameInit
- *    () => { updateGameLogic(); },                 // gameUpdate
- *    () => { updateUI(); },                        // gameUpdatePost
- *    () => { drawBackground(); },                  // gameRender
- *    () => { drawHUD(); },                         // gameRenderPost
- *    ['tiles.png', 'tilesLevel.png']               // images to load
+ *    () => { LOG('Game initialized!'); },  // gameInit
+ *    () => { updateGameLogic(); },         // gameUpdate
+ *    () => { updateUI(); },                // gameUpdatePost
+ *    () => { drawBackground(); },          // gameRender
+ *    () => { drawHUD(); },                 // gameRenderPost
+ *    ['tiles.png', 'tilesLevel.png']       // images to load
  *  );
  *  @memberof Engine */
 async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
@@ -170,16 +170,20 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         if (!debugSpeedUp)
             frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp min framerate
 
+        let wasUpdated = false;
         if (paused)
         {
+            // update everything except the game and objects
+            wasUpdated = true;
             updateCanvas();
+            inputUpdate();
+            pluginUpdateList.forEach(f=>f());
 
             // update object transforms even when paused
             for (const o of engineObjects)
                 o.parent || o.updateTransforms();
 
-            inputUpdate();
-            pluginUpdateList.forEach(f=>f());
+            // do post update
             debugUpdate();
             gameUpdatePost();
             inputUpdatePost();
@@ -196,12 +200,13 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             }
 
             // update multiple frames if necessary in case of slow framerate
-            for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
+            for (; frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
             {
                 // increment frame and update time
                 time = frame++ / frameRate;
 
                 // update game and objects
+                wasUpdated = true;
                 updateCanvas();
                 inputUpdate();
                 gameUpdate();
@@ -212,7 +217,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 debugUpdate();
                 gameUpdatePost();
                 inputUpdatePost();
-
                 if (debugVideoCaptureIsActive())
                     renderFrame();
             }
@@ -229,6 +233,10 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         {
             if (headlessMode) return;
 
+            // canvas must be updated before rendering
+            if (!wasUpdated)
+                updateCanvas();
+
             // render sort then render while removing destroyed objects
             enginePreRender();
             gameRender();
@@ -388,7 +396,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         promises.push(new Promise(resolve =>
         {
             let t = 0;
-            console.log(`${engineName} Engine v${engineVersion}`);
+            LOG(`${engineName} Engine v${engineVersion}`);
             updateSplash();
             function updateSplash()
             {

package/src/engineDebug.js

@@ -16,12 +16,6 @@
  *  @memberof Debug */
 const debug = true;
 
-/** True if asserts are enabled
- *  @type {boolean}
- *  @default
- *  @memberof Debug */
-const enableAsserts = true;
-
 /** Size to render debug points by default
  *  @type {number}
  *  @default
@@ -52,15 +46,16 @@ let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParti
 ///////////////////////////////////////////////////////////////////////////////
 // Debug helper functions
 
-/** Asserts if the expression is false, does not do anything in release builds
+/** Asserts if the expression is false, does nothing in release builds
  *  @param {boolean} assert
  *  @param {...Object} [output] - error message output
  *  @memberof Debug */
-function ASSERT(assert, ...output)
-{
-    if (enableAsserts)
-        console.assert(assert, ...output);
-}
+function ASSERT(assert, ...output) { console.assert(assert, ...output); }
+
+/** Log to console if debug is enabled, does nothing in release builds
+ *  @param {...Object} [output] - message output
+ *  @memberof Debug */
+function LOG(...output) { console.log(...output); }
 
 /** Draw a debug rectangle in world space
  *  @param {Vector2} pos
@@ -455,7 +450,8 @@ function debugRender()
         {
             overlayContext.fillText(`${engineName} v${engineVersion}`, x, y += h/2 );
             overlayContext.fillText('Time: ' + formatTime(time), x, y += h);
-            overlayContext.fillText('FPS: ' + averageFPS.toFixed(1), x, y += h);
+            overlayContext.fillText('FPS: ' + averageFPS.toFixed(1) + (glEnable?' WebGL':' Canvas2D'), 
+                x, y += h);
             overlayContext.fillText('Objects: ' + engineObjects.length, x, y += h);
             overlayContext.fillText('Draw Count: ' + drawCount, x, y += h);
             overlayContext.fillText('---------', x, y += h);
@@ -474,12 +470,18 @@ function debugRender()
             overlayContext.fillText('6: Toggle Video Capture', x, y += h);
 
             let keysPressed = '';
+            let mousePressed = '';
             for (const i in inputData[0])
             {
-                if (keyIsDown(i, 0))
+                if (!keyIsDown(i, 0))
+                    continue;
+                if (parseInt(i) < 3)
+                    mousePressed += i + ' ' ;
+                else if (keyIsDown(i, 0))
                     keysPressed += i + ' ' ;
             }
-            keysPressed && overlayContext.fillText('Keys Down: ' + keysPressed, x, y += h);
+            mousePressed && overlayContext.fillText('Mouse: ' + mousePressed, x, y += h);
+            keysPressed && overlayContext.fillText('Keys: ' + keysPressed, x, y += h);
 
             let buttonsPressed = '';
             if (inputData[1])
@@ -547,7 +549,7 @@ function debugVideoCaptureStart()
     }
 
     // start recording
-    console.log('Video capture started.');
+    LOG('Video capture started.');
     debugVideoCapture.start();
     debugVideoCaptureTimer = new Timer(0);
 
@@ -574,7 +576,7 @@ function debugVideoCaptureStop()
         return; // not recording
 
     // stop recording
-    console.log(`Video capture ended. ${debugVideoCaptureTimer.get().toFixed(2)} seconds recorded.`);
+    LOG(`Video capture ended. ${debugVideoCaptureTimer.get().toFixed(2)} seconds recorded.`);
     debugVideoCapture.stop();
     debugVideoCapture = 0;
     debugVideoCaptureIcon.style.display = 'none';

package/src/engineExport.js

@@ -31,6 +31,7 @@ export
 
 	// Debug
 	ASSERT,
+	LOG,
 	debugRect,
 	debugPoly,
 	debugCircle,

package/src/engineInput.js

@@ -278,7 +278,7 @@ function inputInit()
     function onMouseLeave()
     {
         // set mouse position and delta when leaving canvas
-        mousePosScreen = vec2(Infinity);
+        mousePosScreen = vec2(-1);
         mouseDeltaScreen = vec2(0);
     }
 }
@@ -333,10 +333,12 @@ function gamepadsUpdate()
         const data = inputData[1] || (inputData[1] = []);
         for (let i=10; i--;)
         {
-            const j = i === 3 ? 2 : i === 2 ? 3 : i; // fix button locations
-            const wasDown = gamepadIsDown(j,0);
-            data[j] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
+            const wasDown = gamepadIsDown(i,0);
+            data[i] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
         }
+
+        // disable normal gamepads when touch gamepad is active
+        return;
     }
 
     // return if gamepads are disabled or not supported
@@ -411,6 +413,15 @@ const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
 // touch gamepad internal variables
 let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2();
 
+function touchGamepadButtonCenter()
+{
+    // draw right face buttons
+    let center = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    if (touchGamepadButtonCount <= 2)
+        center.x += touchGamepadSize/2;
+    return center;
+}
+
 // enable touch input mouse passthrough
 function touchInputInit()
 {
@@ -458,8 +469,8 @@ function touchInputInit()
         // set was touching
         wasTouching = touching;
 
-        // prevent default handling like copy and magnifier lens
-        if (inputPreventDefault && document.hasFocus()) // allow document to get focus
+        // prevent default handling like copy, magnifier lens, and scrolling
+        if (inputPreventDefault && document.hasFocus() && e.cancelable)
             e.preventDefault();
 
         // must return true so the document will get focus
@@ -488,25 +499,36 @@ function touchInputInit()
 
         // get center of left and right sides
         const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-        const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
+        const buttonCenter = touchGamepadButtonCenter();
         const startCenter = mainCanvasSize.scale(.5);
 
         // check each touch point
         for (const touch of e.touches)
         {
             const touchPos = mouseEventToScreen(vec2(touch.clientX, touch.clientY));
-            if (touchPos.distance(stickCenter) < touchGamepadSize)
+            if (stickCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual analog stick
                 touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
             }
-            else if (touchPos.distance(buttonCenter) < touchGamepadSize)
+            else if (buttonCenter.distance(touchPos) < touchGamepadSize)
             {
                 // virtual face buttons
-                const button = touchPos.subtract(buttonCenter).direction();
-                touchGamepadButtons[button] = 1;
+                let button = buttonCenter.subtract(touchPos).direction();
+                button = mod(button+2, 4);
+                if (touchGamepadButtonCount === 1)
+                    button = 0;
+                else if (touchGamepadButtonCount === 2)
+                {
+                    const delta = buttonCenter.subtract(touchPos);
+                    button = -delta.x < delta.y ? 1 : 0;
+                }
+                // fix button locations (swap 2 and 3 to match gamepad layout)
+                button = button === 3 ? 2 : button === 2 ? 3 : button;
+                if (button < touchGamepadButtonCount)
+                    touchGamepadButtons[button] = 1;
             }
-            else if (touchPos.distance(startCenter) < touchGamepadSize && !wasTouching)
+            else if (startCenter.distance(touchPos) < touchGamepadSize && !wasTouching)
             {
                 // virtual start button in center
                 touchGamepadButtons[9] = 1;
@@ -537,11 +559,10 @@ function touchGamepadRender()
     // draw left analog stick
     context.fillStyle = touchGamepadStick.lengthSquared() > 0 ? '#fff' : '#000';
     context.beginPath();
-
-    const leftCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     if (touchGamepadAnalog) // draw circle shaped gamepad
     {
-        context.arc(leftCenter.x, leftCenter.y, touchGamepadSize/2, 0, 9);
+        context.arc(stickCenter.x, stickCenter.y, touchGamepadSize/2, 0, 9);
         context.fill();
         context.stroke();
     }
@@ -550,21 +571,27 @@ function touchGamepadRender()
         for (let i=10; i--;)
         {
             const angle = i*PI/4;
-            context.arc(leftCenter.x, leftCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
-            i%2 && context.arc(leftCenter.x, leftCenter.y, touchGamepadSize*.33, angle, angle);
+            context.arc(stickCenter.x, stickCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
+            i%2 && context.arc(stickCenter.x, stickCenter.y, touchGamepadSize*.33, angle, angle);
             i===1 && context.fill();
         }
         context.stroke();
     }
 
     // draw right face buttons
-    const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-    for (let i=4; i--;)
+    const buttonCenter = touchGamepadButtonCenter();
+    const buttonSize = touchGamepadButtonCount > 1 ? touchGamepadSize/4 : touchGamepadSize/2;
+    for (let i=0; i<touchGamepadButtonCount; i++)
     {
-        const pos = rightCenter.add(vec2().setDirection(i, touchGamepadSize/2));
-        context.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
+        let j = mod(i-1, 4);
+        let button = touchGamepadButtonCount > 2 ? 
+            j : min(j, touchGamepadButtonCount-1);
+        // fix button locations (swap 2 and 3 to match gamepad layout)
+        button = button === 3 ? 2 : button === 2 ? 3 : button;
+        const pos = buttonCenter.add(vec2().setDirection(j, touchGamepadSize/2));
+        context.fillStyle = touchGamepadButtons[button] ? '#fff' : '#000';
         context.beginPath();
-        context.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);
+        context.arc(pos.x, pos.y, buttonSize, 0,9);
         context.fill();
         context.stroke();
     }

package/src/engineRelease.js

@@ -18,6 +18,7 @@ const debugMedals = 0;
 
 // debug commands are automatically removed from the final build
 function ASSERT          (){}
+function LOG             (){}
 function debugInit       (){}
 function debugUpdate     (){}
 function debugRender     (){}

package/src/engineSettings.js

@@ -222,6 +222,12 @@ let touchGamepadEnable = false;
  *  @memberof Settings */
 let touchGamepadAnalog = true;
 
+/** Number of buttons on touch gamepad
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let touchGamepadButtonCount = 4;
+
 /** Size of virtual gamepad for touch devices in pixels
  *  @type {number}
  *  @default

package/src/engineTileLayer.js

@@ -108,6 +108,12 @@ function tileCollisionLoad(tileMapData, tileInfo=tile(), renderOrder=0, collisio
         const tileLayer = new TileCollisionLayer(vec2(), levelSize, tileInfo, layerRenderOrder);
         tileLayers[layerIndex] = tileLayer;
 
+        // apply layer color
+        const layerColor = dataLayer.color || WHITE;
+        if (dataLayer.tintcolor)
+            layerColor.setHex(dataLayer.tintcolor);
+        ASSERT(isColor(layerColor), 'layer color is not a color');
+
         for (let x=levelSize.x; x--;)
         for (let y=levelSize.y; y--;)
         {
@@ -115,7 +121,7 @@ function tileCollisionLoad(tileMapData, tileInfo=tile(), renderOrder=0, collisio
             const data = dataLayer.data[x + y*levelSize.x];
             if (data)
             {
-                const layerData = new TileLayerData(data-1);
+                const layerData = new TileLayerData(data-1, 0, false, layerColor);
                 tileLayer.setData(pos, layerData);
 
                 // set collision for top layer