littlejsengine 1.1.2 → 1.1.3

package/engine/engineWebGL.js

@@ -1,12 +1,12 @@
 /** 
- *  LittleJS WebGL Interface
- *  <br> - All webgl used by the engine is wrapped up here
- *  <br> - Can be disabled with glEnable to revert to 2D canvas rendering
- *  <br> - Batches sprite rendering on GPU for incredibly fast performance
- *  <br> - Sprite transform math is done in the shader where possible
- *  <br> - For normal stuff you won't need to call any functions in this file
- *  <br> - For advanced stuff there are helper functions to create shaders, textures, etc
- *  @namespace WebGL
+ * LittleJS WebGL Interface
+ * <br> - All webgl used by the engine is wrapped up here
+ * <br> - For normal stuff you won't need to see or call anything in this file
+ * <br> - For advanced stuff there are helper functions to create shaders, textures, etc
+ * <br> - Can be disabled with glEnable to revert to 2D canvas rendering
+ * <br> - Batches sprite rendering on GPU for incredibly fast performance
+ * <br> - Sprite transform math is done in the shader where possible
+ * @namespace WebGL
  */
 
 'use strict';
@@ -27,7 +27,7 @@ let glContext;
 let glTileTexture;
 
 // WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glPositionData, glColorData, glBatchCount, glDirty, glAdditive;
+let glActiveTexture, glShader, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -38,19 +38,16 @@ function glInit()
 
     // create the canvas and tile texture
     glCanvas = document.createElement('canvas');
-    glContext = glCanvas.getContext('webgl',  {antialias:!pixelated});
+    glContext = glCanvas.getContext('webgl');
+    glCanvas.style = styleCanvas;
     glTileTexture = glCreateTexture(tileImage);
 
-    if (glOverlay)
-    {
-        // firefox is much faster without copying the gl buffer so we just overlay it with some tradeoffs
-        document.body.appendChild(glCanvas);
-        glCanvas.style = mainCanvas.style.cssText;
-    }
+    // some browsers are much faster without copying the gl buffer so we just overlay it instead
+    glOverlay && document.body.appendChild(glCanvas);
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
-        'precision lowp float;'+    // use lowp for better performance
+        'precision highp float;'+   // use highp for better accuracy, lowp for better perf
         'uniform mat4 m;'+          // transform matrix
         'attribute float a;'+       // angle
         'attribute vec2 p,s,t;'+    // position, size, uv
@@ -62,7 +59,7 @@ function glInit()
         'v=t;d=c;e=b;'+             // pass stuff to fragment shader
         '}'                         // end of shader
         ,
-        'precision lowp float;'+             // use lowp for better performance
+        'precision highp float;'+            // use highp for better accuracy, lowp for better perf
         'varying vec2 v;'+                   // uv
         'varying vec4 d,e;'+                 // color, additiveColor
         'uniform sampler2D j;'+              // texture
@@ -78,6 +75,7 @@ function glInit()
     glColorData = new Uint32Array(glVertexData);
 
     // setup the vertex data array
+    let offset = glBatchCount = 0;
     const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
     {
         const location = glContext.getAttribLocation(glShader, name);
@@ -85,7 +83,6 @@ function glInit()
         glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
         offset += size*typeSize;
     }
-    let offset = glDirty = glBatchCount = 0;
     initVertexAttribArray('a', gl_FLOAT, 4, 1);            // angle
     initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
     initVertexAttribArray('s', gl_FLOAT, 4, 2);            // size
@@ -101,14 +98,8 @@ function glSetBlendMode(additive)
 {
     if (!glEnable) return;
         
-    if (additive != glAdditive)
-        glFlush();
-
     // setup blending
     glAdditive = additive;
-    const destBlend = additive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
-    glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
-    glContext.enable(gl_BLEND);
 }
 
 /** Set the WebGl texture, not normally necessary unless multiple tile sheets are used
@@ -118,7 +109,8 @@ function glSetBlendMode(additive)
 function glSetTexture(texture=glTileTexture)
 {
     if (!glEnable) return;
-        
+    
+    // must flush cache with the old texture to set a new one
     if (texture != glActiveTexture)
         glFlush();
 
@@ -183,36 +175,35 @@ function glCreateBuffer(bufferType, size, usage)
     return buffer;
 }
 
-/** Create WebGL texture from an image
+/** Create WebGL texture from an image and set the texture settings
  *  @param {Image} image
  *  @return {WebGLTexture}
  *  @memberof WebGL */
 function glCreateTexture(image)
 {
-    if (!glEnable) return;
+    if (!glEnable || !image || !image.width) return;
 
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(gl_TEXTURE_2D, texture);
     glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
-
+        
     // use point filtering for pixelated rendering
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, pixelated ? gl_NEAREST : gl_LINEAR);
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, pixelated ? gl_NEAREST : gl_LINEAR);
+    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, cavasPixelated ? gl_NEAREST : gl_LINEAR);
+    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, cavasPixelated ? gl_NEAREST : gl_LINEAR);
     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;
 }
 
 // called automatically by engine before render
-function glPreRender(width, height)
+function glPreRender(width, height, cameraX, cameraY, cameraScale)
 {
     if (!glEnable) return;
 
     // clear and set to same size as main canvas
-    glCanvas.width = width;
-    glCanvas.height = height;
-    glContext.viewport(0, 0, width, height);
+    glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height);
+    glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
@@ -227,7 +218,7 @@ function glPreRender(width, height)
             sx, 0, 0, 0,
             0, sy, 0, 0,
             1, 1, -1, 1,
-            -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
+            -1-sx*cameraX, -1-sy*cameraY, 0, 0
         ])
     );
 }
@@ -238,11 +229,16 @@ function glFlush()
 {
     if (!glEnable || !glBatchCount) return;
 
+    const destBlend = glBatchAdditive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
+    glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
+    glContext.enable(gl_BLEND);
+
     // draw all the sprites in the batch and reset the buffer
     glContext.bufferSubData(gl_ARRAY_BUFFER, 0, 
         glPositionData.subarray(0, glBatchCount * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT));
     glContext.drawArrays(gl_TRIANGLES, 0, glBatchCount * gl_VERTICES_PER_QUAD);
     glBatchCount = 0;
+    glBatchAdditive = glAdditive;
 }
 
 /** Draw any sprites still in the buffer, copy to main canvas and clear
@@ -251,29 +247,38 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context, forceDraw)
 {
-    if (!glEnable || !glDirty)  return;
+    if (!glEnable || !glBatchCount) return;
     
     glFlush();
+    
+    // do not draw in overlay mode because the canvas is visible
     if (!glOverlay || forceDraw)
-    {
-        // do not draw/clear in overlay mode because the canvas is visible
-        context.drawImage(glCanvas, 0, glAdditive = glDirty = 0);
-        glContext.clear(gl_COLOR_BUFFER_BIT);
-    }
+        context.drawImage(glCanvas, 0, 0);
 }
 
-// Draw a sprite with the given parameters, used internally by draw functions
-function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgba=0xffffffff, rgbaAdditive=0x00000000)
+/** Add a sprite to the gl draw list, used by all gl draw functions
+ *  @param x
+ *  @param y
+ *  @param sizeX
+ *  @param sizeY
+ *  @param angle
+ *  @param uv0X
+ *  @param uv0Y
+ *  @param uv1X
+ *  @param uv1Y
+ *  @param [rgba=0xffffffff]
+ *  @param [rgbaAdditive=0]
+ *  @memberof WebGL */
+function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffffff, rgbaAdditive=0)
 {
     if (!glEnable) return;
-    
-    // flush if there is no room for more verts
-    if (glBatchCount == gl_MAX_BATCH)
+
+    // flush if there is no room for more verts or if different blend mode
+    if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
         glFlush();
         
     // setup 2 triangles to form a quad
     let offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT;
-    glDirty = 1;
 
     // vertex 0
     glPositionData[offset++] = angle;

package/examples/breakout/game.js

@@ -14,7 +14,7 @@ const sound_bounce     = new Sound([,,1e3,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
-    fixedWidth = 1280, fixedHeight = 720; // 720p
+    canvasFixedSize = vec2(1280, 720); // 720p
     levelSize = vec2(72, 40);
     cameraPos = levelSize.scale(.5);
     paddle = new Paddle(vec2(levelSize.x/2-12,2));

package/examples/breakout/gameObjects.js

@@ -18,7 +18,7 @@ class Paddle extends EngineObject
 
     update()
     {
-        if (usingGamepad)
+        if (isUsingGamepad)
         {
             // control with gamepad
             this.pos.x += gamepadStick(0).x;
@@ -28,7 +28,7 @@ class Paddle extends EngineObject
             // move to mouse
             this.pos.x = mousePos.x;
         }
-        this.pos.x = clamp(this.pos.x, levelSize.x - this.size.x/2, this.size.x/2);
+        this.pos.x = clamp(this.pos.x, this.size.x/2, levelSize.x - this.size.x/2);
     }
 }
 

package/examples/breakout/index.html

@@ -1,8 +1,10 @@
-<html><head><title>LittleJS Breakout Example</title>
-<meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1>
+<html><head><meta charset=utf-8>
+<meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
+<meta name=apple-mobile-web-app-capable content=yes>
+<meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.min.js?56></script>
-<script src=game.js?56></script>
-<script src=gameObjects.js?56></script>
+<script src=../../engine/engine.all.js?93></script>
+<script src=game.js?93></script>
+<script src=gameObjects.js?93></script>

package/examples/platformer/game.js

@@ -10,6 +10,9 @@ let score, deaths;
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
+    // enable touch gamepad on touch devices
+    touchGamepadEnable = 1;
+
     // setup game
     score = deaths = 0;
     gravity = -.01;
@@ -30,7 +33,7 @@ function gameUpdate()
     }
     
     // mouse wheel = zoom
-    cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1e3, 1);
+    cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1, 1e3);
     
     // T = drop test crate
     if (keyWasPressed(84))
@@ -70,7 +73,7 @@ function gameRender()
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    const drawOverlayText = (text, x, y, size=70) =>
+    const drawText = (text, x, y, size=70) =>
     {
         overlayContext.textAlign = 'center';
         overlayContext.textBaseline = 'top';
@@ -80,8 +83,8 @@ function gameRenderPost()
         overlayContext.strokeText(text, x, y);
         overlayContext.fillText(text, x, y);
     }
-    drawOverlayText('Score: ' + score,   overlayCanvas.width*1/3, 20);
-    drawOverlayText('Deaths: ' + deaths, overlayCanvas.width*2/3, 20);
+    drawText('Score: ' + score,   overlayCanvas.width*1/3, 20);
+    drawText('Deaths: ' + deaths, overlayCanvas.width*2/3, 20);
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/platformer/gameEffects.js

@@ -89,7 +89,7 @@ function explosion(pos, radius=3)
         }
 
         // push
-        const p = percent(d, radius, 2*radius);
+        const p = percent(d, 2*radius, radius);
         const force = o.pos.subtract(pos).normalize(p*radius*.2);
         o.applyForce(force);
         if (o.isDead && o.isDead())
@@ -157,6 +157,9 @@ function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
 
 function decorateBackgroundTile(pos)
 {
+    if (!tileBackgroundLayer)
+        return;
+
     const tileData = getTileBackgroundData(pos);
     if (tileData <= 0)
         return;
@@ -254,17 +257,11 @@ function drawStars()
             (randSeeded(w)+time*speed)%w-extraSpace,
             (randSeeded(h)+time*speed*randSeeded())%h-extraSpace);
 
-        if (glOverlay)
-        {
-            // drawing stars with gl is too slow in low graphics mode, just draw rects
-            mainContext.fillStyle = color.rgba();
-            if (size < 9)
-                mainContext.fillRect(screenPos.x, screenPos.y, size, size);
-            else
-                mainContext.beginPath(mainContext.fill(mainContext.arc(screenPos.x, screenPos.y, size, 0, 9)));
-        }
+        mainContext.fillStyle = color.rgba();
+        if (size < 9)
+            mainContext.fillRect(screenPos.x, screenPos.y, size, size);
         else
-            drawTileScreenSpace(screenPos, vec2(size), 0, vec2(16), color);
+            mainContext.beginPath(mainContext.fill(mainContext.arc(screenPos.x, screenPos.y, size, 0, 9)));
     }
 }
 

package/examples/platformer/gameLevel.js

@@ -28,7 +28,7 @@ function buildTerrain(size)
 {
     tileBackground = [];
     initTileCollision(size);
-    let startGroundLevel = 80;
+    let startGroundLevel = 40;
     let groundLevel = startGroundLevel;
     let groundSlope = rand(-1,1);
     let backgroundDelta = 0, backgroundDeltaSlope = 0;
@@ -46,7 +46,7 @@ function buildTerrain(size)
         {
             // big jump
             const jumpDelta = rand(19,-19);
-            startGroundLevel = clamp(startGroundLevel + jumpDelta, 80, 20);
+            startGroundLevel = clamp(startGroundLevel + jumpDelta, 20, 80);
             groundLevel += jumpDelta;
             groundSlope = rand(-1,1);
         }
@@ -58,9 +58,9 @@ function buildTerrain(size)
             backgroundDelta = 0;
         if (rand() < .1)
             backgroundDeltaSlope = rand(-1,1);
-        backgroundDelta = clamp(backgroundDelta, 3, -1)
+        backgroundDelta = clamp(backgroundDelta, -1, 3)
 
-        groundLevel = clamp(groundLevel, 99, 30);
+        groundLevel = clamp(groundLevel, 20, levelSize.y-20);
         for (let y=0; y < size.y; y++)
         {
             const pos = vec2(x,y);
@@ -90,7 +90,7 @@ function buildTerrain(size)
     }
 
     // add ladders
-    for (let ladderCount=50; ladderCount--;)
+    for (let ladderCount = 40; ladderCount--;)
     {
         // pick random pos
         const pos = vec2(randInt(levelSize.x), randInt(levelSize.y))
@@ -122,7 +122,7 @@ function buildTerrain(size)
         new Crate(vec2((randInt(levelSize.x))+.5, randInt(levelSize.y)));
 
     // spawn enemies
-    for (let enemyCount=20; enemyCount--;)
+    for (let enemyCount=10; enemyCount--;)
         new Enemy(vec2(rand(levelSize.x), rand(levelSize.y)));
 }
 
@@ -181,11 +181,18 @@ function makeTileLayers()
     }
     tileLayer.redraw();
     tileBackgroundLayer.redraw();
+
+    if (!glEnable)
+    {
+        // get rid of background if webgl is not enabled
+        tileBackgroundLayer.destroy();
+        tileBackgroundLayer = 0;
+    }
 }
 
 function buildLevel()
 {
-    levelSize = vec2(300,200);
+    levelSize = vec2(256);
     levelColor = randColor(new Color(.2,.2,.2), new Color(.8,.8,.8));
     levelGroundColor = levelColor.mutate().add(new Color(.4,.4,.4)).clamp();
 
@@ -205,7 +212,7 @@ function buildLevel()
 
     // warm up level
     warmup = 1;
-    for (let i=5*FPS; i--;)
+    for (let i=5*frameRate; i--;)
         engineObjectsUpdate();
     warmup = 0;
 

package/examples/platformer/gameObjects.js

@@ -25,7 +25,7 @@ class GameObject extends EngineObject
         // flash white when damaged
         if (!this.isDead() && this.damageTimer.isSet())
         {
-            const a = .5*percent(this.damageTimer.get(), 0, .15);
+            const a = .5*percent(this.damageTimer.get(), .15, 0);
             this.additiveColor = new Color(a,a,a,0);
         }
         else
@@ -66,7 +66,7 @@ class Crate extends GameObject
 {
     constructor(pos, typeOverride) 
     { 
-        super(pos, defaultObjectSize, 2, vec2(16), (randInt(4))*PI/2);
+        super(pos, objectDefaultSize, 2, vec2(16), (randInt(4))*PI/2);
 
         this.color = (new Color).setHSLA(rand(),1,.8);
         this.health = 5;

package/examples/platformer/gamePlayer.js

@@ -24,7 +24,7 @@ class Character extends GameObject
         this.deadTimer          = new Timer;
         this.grendeThrowTimer   = new Timer;
         this.drawSize = vec2(1);
-        this.color = (new Color).setHSLA(rand(),1,.5);
+        this.color = (new Color).setHSLA(rand(),1,.7);
         this.renderOrder = 10;
         this.walkCyclePercent = 0;
         this.health = 1;
@@ -169,7 +169,7 @@ class Character extends GameObject
         
         // apply movement acceleration and clamp
         const maxCharacterSpeed = .2;
-        this.velocity.x = clamp(this.velocity.x + moveInput.x * .042, maxCharacterSpeed, -maxCharacterSpeed);
+        this.velocity.x = clamp(this.velocity.x + moveInput.x * .042, -maxCharacterSpeed, maxCharacterSpeed);
 
         // track last pos for ladder collision code
         this.lastPos = this.pos.copy();
@@ -182,7 +182,7 @@ class Character extends GameObject
         if (this.climbingLadder || this.groundTimer.active() && !this.dodgeTimer.active())
         {
             this.walkCyclePercent += speed * .5;
-            this.walkCyclePercent = speed > .01 ? mod(this.walkCyclePercent, 1) : 0;
+            this.walkCyclePercent = speed > .01 ? mod(this.walkCyclePercent) : 0;
         }
         else
             this.walkCyclePercent = 0;
@@ -292,11 +292,11 @@ class Player extends Character
         // player controls
         this.holdingJump   = keyIsDown(38) || gamepadIsDown(0);
         this.holdingShoot  = mouseIsDown(0) || keyIsDown(90) || gamepadIsDown(2);
-        this.pressedDodge  = mouseIsDown(1) || keyIsDown(88) || gamepadIsDown(3);
-        this.pressingThrow = mouseIsDown(2) || keyIsDown(67) || gamepadIsDown(1);
+        this.pressingThrow = mouseIsDown(1) || keyIsDown(67) || gamepadIsDown(1);
+        this.pressedDodge  = mouseIsDown(2) || keyIsDown(88) || gamepadIsDown(3);
 
         // movement control
-        this.moveInput = usingGamepad ? gamepadStick(0) : 
+        this.moveInput = isUsingGamepad ? gamepadStick(0) : 
             vec2(keyIsDown(39) - keyIsDown(37), keyIsDown(38) - keyIsDown(40));
 
         super.update();

package/examples/platformer/index.html

@@ -1,11 +1,13 @@
-<html><head><title>LittleJS Platformer Example</title>
-<meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1>
+<html><head><meta charset=utf-8>
+<meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
+<meta name=apple-mobile-web-app-capable content=yes>
+<meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.min.js?56></script>
-<script src=gameObjects.js?56></script>
-<script src=gamePlayer.js?56></script>
-<script src=gameEffects.js?56></script>
-<script src=gameLevel.js?56></script>
-<script src=game.js?56></script>
+<script src=../../engine/engine.all.js?93></script>
+<script src=gameObjects.js?93></script>
+<script src=gamePlayer.js?93></script>
+<script src=gameEffects.js?93></script>
+<script src=gameLevel.js?93></script>
+<script src=game.js?93></script>

package/examples/puzzle/game.js

@@ -6,7 +6,7 @@
 
 'use strict';
 
-pixelated = 0; // do not use pixelated rendering
+cavasPixelated = 0; // do not use pixelated rendering
 
 const fallTime = .2;
 const cameraOffset = vec2(0,-.5);
@@ -42,7 +42,7 @@ const setTile = (pos, data) => level[pos.x + pos.y * levelSize.x] = data;
 function gameInit()
 {
     // setup canvas
-    fixedWidth = 1920, fixedHeight = 1080; // 1080p
+    canvasFixedSize = vec2(1920, 1080); // 1080p
     mainCanvas.style.background = backgroundColor.rgba();
 
     // load high score
@@ -100,7 +100,7 @@ function gameUpdate()
 
             if (keepFalling)
             {
-                const p = percent(comboCount, 0, 9);
+                const p = percent(comboCount, 9, 0);
                 fallTimer.set(fallTime*p);
                 sound_fall.play();
             }

package/examples/puzzle/index.html

@@ -1,7 +1,9 @@
-<html><head><title>LittleJS Puzzle Example</title>
-<meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1>
+<html><head><meta charset=utf-8>
+<meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
+<meta name=apple-mobile-web-app-capable content=yes>
+<meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.min.js?56></script>
-<script src=game.js?56></script>
+<script src=../../engine/engine.all.js?93></script>
+<script src=game.js?93></script>

package/examples/stress/index.html

@@ -1,9 +1,11 @@
-<html><head><title>LittleJS Stress Test</title>
-<meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1>
+<html><head><meta charset=utf-8>
+<meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
+<meta name=apple-mobile-web-app-capable content=yes>
+<meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.min.js?56></script>
+<script src=../../engine/engine.all.min.js?93></script>
 <script>
 
 /*
@@ -81,7 +83,7 @@ function gameUpdate()
             });
     
     // mouse wheel = zoom
-    cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1e3, 1);
+    cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1, 1e3);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -94,7 +96,7 @@ function gameRender()
 {
     // track fps and update stats
     const frameTimeMS = Date.now();
-    showFPS = lerp(.05, 1e3/(frameTimeMS - timeMS||1), showFPS);
+    showFPS = lerp(.05, showFPS, 1e3/(frameTimeMS - timeMS||1));
     timeMS = frameTimeMS;
 
     const spriteCount = sprites.length

package/game.js

@@ -4,6 +4,10 @@
 
 'use strict';
 
+// popup errors if there are any (help diagnose issues on mobile devices)
+if (debug)
+    onerror = (...parameters)=> alert(parameters);
+
 // game variables
 let particleEmiter, clickCount = 0;
 
@@ -11,7 +15,7 @@ let particleEmiter, clickCount = 0;
 const sound_click = new Sound([.5,.5]);
 
 // medals
-const medal_example    = new Medal(0, 'Example Medal', 'More info about the medal goes here.');
+const medal_example    = new Medal(0, 'Example Medal', 'Medal description goes here.');
 const medal_tenClicks  = new Medal(1, 'Ten Clicks!',   'You have clicked 10 times.', '🖱️');
 medalsInit('Hello World');
 
@@ -60,7 +64,7 @@ function gameInit()
         new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
         2, .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
+        .5, 1, 1                // randomness, collide, additive, randomColorLinear, renderOrder
     );
     particleEmiter.elasticity = .3;
     particleEmiter.trailScale = 2;
@@ -100,19 +104,15 @@ function gameUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
-    // draw a grey square without using webgl
-    drawCanvas2D(cameraPos,  tileCollisionSize.add(vec2(5)), 0, 0, (context)=>
-    {
-        context.fillStyle='#333'
-        context.fillRect(-.5,-.5,1,1);
-    });
+    // draw a grey square in the background without using webgl
+    drawRect(cameraPos, tileCollisionSize.add(vec2(5)), new Color(.2,.2,.2), 0, 0);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    const drawOverlayText = (text, x, y, size=70) =>
+    const drawText = (text, x, y, size=70) =>
     {
         overlayContext.textAlign = 'center';
         overlayContext.textBaseline = 'top';
@@ -122,7 +122,7 @@ function gameRenderPost()
         overlayContext.strokeText(text, x, y);
         overlayContext.fillText(text, x, y);
     }
-    drawOverlayText('Hello World', overlayCanvas.width/2, 40);
+    drawText('Hello World', overlayCanvas.width/2, 40);
 }
 
 ///////////////////////////////////////////////////////////////////////////////