littlejsengine 1.0.14 → 1.1.8

package/engine/engineWebGL.js

@@ -1,18 +1,37 @@
-/*
-    LittleJS WebGL Interface
-    - All webgl used by the engine is wrapped up here
-    - Can be disabled with glEnable to revert to 2D canvas rendering
-    - Batches sprite rendering on GPU for incredibly fast performance
-    - Sprite transform math is done in the shader where possible
-    - For normal stuff you won't need to call any functions in this file
-    - For advanced stuff there are helper functions to create shaders, textures, etc
-*/
+/** 
+ *  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
+ */
 
 'use strict';
 
-let glCanvas, glContext, glTileTexture, glActiveTexture, glShader, 
-    glPositionData, glColorData, glBatchCount, glDirty, glAdditive;
+/** The WebGL canvas which appears above the main canvas and below the overlay canvas
+ *  @type {HTMLCanvasElement}
+ *  @memberof WebGL */
+let glCanvas;
 
+/** 2d context for glCanvas 
+ *  @type {WebGLRenderingContext}
+ *  @memberof WebGL */
+let glContext;
+
+/** Main tile sheet texture automatically loaded by engine
+ *  @type {WebGLTexture}
+ *  @memberof WebGL */
+let glTileTexture;
+
+// WebGL internal variables not exposed to documentation
+let glActiveTexture, glShader, glPositionData, glColorData, glBatchCount, glBatchAdditive, glDirty, glAdditive;
+
+///////////////////////////////////////////////////////////////////////////////
+
+// Init WebGL, called automatically by the engine
 function glInit()
 {
     if (!glEnable) return;
@@ -24,7 +43,7 @@ function glInit()
 
     if (glOverlay)
     {
-        // firefox is much faster without copying the gl buffer so we just overlay it with some tradeoffs
+        // some browsers are much faster without copying the gl buffer so we just overlay it instead
         document.body.appendChild(glCanvas);
         glCanvas.style = mainCanvas.style.cssText;
     }
@@ -75,20 +94,21 @@ function glInit()
     initVertexAttribArray('b', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 }
 
+/** Set the WebGl blend mode, normally you should call setBlendMode instead
+ *  @param {Boolean} [additive=0]
+ *  @memberof WebGL */
 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
+ *  <br> - This may also flush the gl buffer resulting in more draw calls and worse performance
+ *  @param {WebGLTexture} [texture=glTileTexture]
+ *  @memberof WebGL */
 function glSetTexture(texture=glTileTexture)
 {
     if (!glEnable) return;
@@ -99,6 +119,11 @@ function glSetTexture(texture=glTileTexture)
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = texture);
 }
 
+/** Compile WebGL shader of the given type, will throw errors if in debug mode
+ *  @param {String} source
+ *  @param          type
+ *  @return {WebGLShader}
+ *  @memberof WebGL */
 function glCompileShader(source, type)
 {
     if (!glEnable) return;
@@ -114,6 +139,11 @@ function glCompileShader(source, type)
     return shader;
 }
 
+/** Create WebGL program with given shaders
+ *  @param {WebGLShader} vsSource
+ *  @param {WebGLShader} fsSource
+ *  @return {WebGLProgram}
+ *  @memberof WebGL */
 function glCreateProgram(vsSource, fsSource)
 {
     if (!glEnable) return;
@@ -130,6 +160,12 @@ function glCreateProgram(vsSource, fsSource)
     return program;
 }
 
+/** Create WebGL buffer
+ *  @param bufferType
+ *  @param size
+ *  @param usage
+ *  @return {WebGLBuffer}
+ *  @memberof WebGL */
 function glCreateBuffer(bufferType, size, usage)
 {
     if (!glEnable) return;
@@ -141,15 +177,19 @@ function glCreateBuffer(bufferType, size, usage)
     return buffer;
 }
 
+/** 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);
@@ -158,6 +198,7 @@ function glCreateTexture(image)
     return texture;
 }
 
+// called automatically by engine before render
 function glPreRender(width, height)
 {
     if (!glEnable) return;
@@ -185,24 +226,33 @@ function glPreRender(width, height)
     );
 }
 
+/** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
+ *  @memberof WebGL */
 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
+ *  @param {CanvasRenderingContext2D} context
+ *  @param {Boolean} [forceDraw=0]
+ *  @memberof WebGL */
 function glCopyToContext(context, forceDraw)
 {
     if (!glEnable || !glDirty)  return;
     
-    // draw any sprites still in the buffer, copy to main canvas and clear
     glFlush();
-
     if (!glOverlay || forceDraw)
     {
         // do not draw/clear in overlay mode because the canvas is visible
@@ -211,12 +261,25 @@ function glCopyToContext(context, forceDraw)
     }
 }
 
-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=0]
+ *  @param [uv0X=0]
+ *  @param [uv0Y=0]
+ *  @param [uv1X=1]
+ *  @param [uv1Y=1]
+ *  @param [rgba=0xffffffff]
+ *  @param [rgbaAdditive=0]
+ *  @memberof WebGL */
+function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, 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
@@ -225,69 +288,45 @@ function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgb
 
     // vertex 0
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX;
-    glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv0X;
-    glPositionData[offset++] = uv1Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = -sizeX; glPositionData[offset++] = -sizeY;
+    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv1Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
     
     // vertex 1
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;
-    glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv1X;
-    glPositionData[offset++] = uv0Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = sizeX;  glPositionData[offset++] = sizeY;
+    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
     
     // vertex 2
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX;
-    glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv0X;
-    glPositionData[offset++] = uv0Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = -sizeX; glPositionData[offset++] = sizeY;
+    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
     
     // vertex 0
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX;
-    glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv0X;
-    glPositionData[offset++] = uv1Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = -sizeX; glPositionData[offset++] = -sizeY;
+    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv1Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
 
     // vertex 3
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;
-    glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv1X;
-    glPositionData[offset++] = uv1Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = sizeX;  glPositionData[offset++] = -sizeY;
+    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv1Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
 
     // vertex 1
     glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;
-    glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;
-    glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv1X;
-    glPositionData[offset++] = uv0Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = x;      glPositionData[offset++] = y;
+    glPositionData[offset++] = sizeX;  glPositionData[offset++] = sizeY;
+    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
 }
 
 ///////////////////////////////////////////////////////////////////////////////

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
+    fixedSize = 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;
@@ -56,11 +56,11 @@ class Block extends EngineObject
         const color1 = this.color;
         const color2 = color1.lerp(new Color, .5);
         new ParticleEmitter(
-            this.pos, this.size, .1, 400, PI,     // pos, emitSize, emitTime, emitRate, emiteCone
+            this.pos, this.size, .1, 200, PI,     // pos, emitSize, emitTime, emitRate, emiteCone
             0, vec2(16),                          // tileIndex, tileSize
             color1, color2,                       // colorStartA, colorStartB
             color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
-            .2, .6, .6, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
+            .2, 1, 1, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
             .99, .95, .4, PI, .1, // damping, angleDamping, gravityScale, particleCone, fadeRate, 
             1, 0, 1               // randomness, collide, additive, randomColorLinear, renderOrder
         );

package/examples/breakout/index.html

@@ -3,6 +3,6 @@
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.js?48></script>
-<script src=game.js?48></script>
-<script src=gameObjects.js?48></script>
+<script src=../../engine/engine.all.min.js?60></script>
+<script src=game.js?60></script>
+<script src=gameObjects.js?60></script>

package/examples/platformer/game.js

@@ -5,8 +5,6 @@
 
 'use strict';
 
-const lowGraphicsMode = glOverlay = !isChrome; // fix slow rendering when not chrome
-
 let score, deaths;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -34,8 +32,8 @@ function gameUpdate()
     // mouse wheel = zoom
     cameraScale = clamp(cameraScale*(1-mouseWheel/10), 1e3, 1);
     
-    // C = drop crate
-    if (keyWasPressed(67))
+    // T = drop test crate
+    if (keyWasPressed(84))
         new Crate(mousePos);
     
     // E = drop enemy
@@ -72,7 +70,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';
@@ -82,8 +80,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

@@ -74,12 +74,12 @@ function explosion(pos, radius=3)
     {
         const h = (cleanupRadius**2 - x**2)**.5;
         for (let y = -h; y < h; ++y)
-            decorateTile(pos.add(vec2(x,y)).int());
+            decorateTile(pos.add(vec2(x,y)).floor());
     }
 
     // kill/push objects
     const maxRangeSquared = (radius*1.5)**2;
-    forEachObject(pos, radius*3, (o)=> 
+    engineObjectsCallback(pos, radius*3, (o)=> 
     {
         const d = o.pos.distance(pos);
         if (o.isGameObject)
@@ -126,7 +126,7 @@ function explosion(pos, radius=3)
 function destroyTile(pos, makeSound = 1, cleanNeighbors = 1)
 {
     // pos must be an int
-    pos = pos.int();
+    pos = pos.floor();
 
     // destroy tile
     const tileType = getTileCollisionData(pos);
@@ -170,9 +170,9 @@ function decorateBackgroundTile(pos)
         if (neighborTileDataA > 0 | neighborTileDataB > 0)
             continue;
 
-        const directionVector = vec2().setAngle(i*PI/2+PI/4, 10).int();
+        const directionVector = vec2().setAngle(i*PI/2+PI/4, 10).floor();
         const drawPos = pos.add(vec2(.5))          // center
-            .scale(16).add(directionVector).int(); // direction offset
+            .scale(16).add(directionVector).floor(); // direction offset
 
         // clear rect without any scaling to prevent blur from filtering
         const s = 2;
@@ -235,7 +235,7 @@ function drawStars()
     // draw stars and planets
     randSeed = skySeed;
     const largeStarCount = 9;
-    for (let i = lowGraphicsMode ? 400 : 1e3; i--;)
+    for (let i = 1e3; i--;)
     {
         let size = randSeeded(6, 1);
         let speed = randSeeded() < .9 ? randSeeded(5) : randSeeded(99,9);
@@ -254,7 +254,7 @@ function drawStars()
             (randSeeded(w)+time*speed)%w-extraSpace,
             (randSeeded(h)+time*speed*randSeeded())%h-extraSpace);
 
-        if (lowGraphicsMode)
+        if (glOverlay)
         {
             // drawing stars with gl is too slow in low graphics mode, just draw rects
             mainContext.fillStyle = color.rgba();

package/examples/platformer/gameLevel.js

@@ -129,7 +129,7 @@ function buildTerrain(size)
 function generateLevel()
 {
     // clear old level
-    destroyAllObjects();
+    engineObjectsDestroy();
 
     // randomize ground level hills
     buildTerrain(levelSize);
@@ -206,7 +206,7 @@ function buildLevel()
     // warm up level
     warmup = 1;
     for (let i=5*FPS; i--;)
-        engineUpdateObjects();
+        engineObjectsUpdate();
     warmup = 0;
 
     // spawn player

package/examples/platformer/gameObjects.js

@@ -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;
@@ -217,7 +217,7 @@ class Weapon extends EngineObject
             3, .1, .1, .15, .1, // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
             1, .95, 1, 0, 0,    // damping, angleDamping, gravityScale, particleCone, fadeRate, 
             .1, 1              // randomness, collide, additive, randomColorLinear, renderOrder
-        ));
+        ), vec2(.1,0), -.8);
         this.shellEmitter.elasticity = .5;
         this.shellEmitter.particleDestroyCallback = persistentParticleDestroyCallback;
     }
@@ -242,12 +242,11 @@ class Weapon extends EngineObject
                 sound_shoot.play(this.pos);
                 this.localAngle = -rand(.2,.15);
                 this.recoilTimer.set(.4);
-                const direction = vec2(this.getMirrorSign(this.bulletSpeed), 0);
+                const direction = vec2(this.bulletSpeed*this.getMirrorSign(), 0);
                 const velocity = direction.rotate(rand(-1,1)*this.bulletSpread);
                 new Bullet(this.pos, this.parent, velocity, this.damage);
 
                 // spawn shell particle
-                this.shellEmitter.localAngle = -.8*this.getMirrorSign();
                 this.shellEmitter.emitParticle();
             }
         }
@@ -278,7 +277,7 @@ class Bullet extends EngineObject
     update()
     {
         // check if hit someone
-        forEachObject(this.pos, this.size, (o)=>
+        engineObjectsCallback(this.pos, this.size, (o)=>
         {
             if (o.isGameObject)
                 this.collideWithObject(o)

package/examples/platformer/gamePlayer.js

@@ -59,9 +59,9 @@ class Character extends GameObject
         if (this.dodgeTimer.active())
         {
             // update roll
-            this.angle = this.getMirrorSign(2*PI*this.dodgeTimer.getPercent());
+            this.angle = this.getMirrorSign()*2*PI*this.dodgeTimer.getPercent();
             if (this.groundObject)
-                this.velocity.x += this.getMirrorSign(.1);
+                this.velocity.x += this.getMirrorSign()*.1;
         }
         else
         {
@@ -296,7 +296,7 @@ class Player extends Character
         this.pressingThrow = mouseIsDown(2) || keyIsDown(67) || gamepadIsDown(1);
 
         // 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

@@ -3,9 +3,9 @@
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.js?48></script>
-<script src=gameObjects.js?48></script>
-<script src=gamePlayer.js?48></script>
-<script src=gameEffects.js?48></script>
-<script src=gameLevel.js?48></script>
-<script src=game.js?48></script>
+<script src=../../engine/engine.all.min.js?60></script>
+<script src=gameObjects.js?60></script>
+<script src=gamePlayer.js?60></script>
+<script src=gameEffects.js?60></script>
+<script src=gameLevel.js?60></script>
+<script src=game.js?60></script>

package/examples/puzzle/game.js

@@ -6,7 +6,6 @@
 
 'use strict';
 
-glOverlay = !isChrome; // fix slow rendering when not chrome
 pixelated = 0; // do not use pixelated rendering
 
 const fallTime = .2;
@@ -43,7 +42,7 @@ const setTile = (pos, data) => level[pos.x + pos.y * levelSize.x] = data;
 function gameInit()
 {
     // setup canvas
-    fixedWidth = 1920, fixedHeight = 1080; // 1080p
+    fixedSize = vec2(1920, 1080); // 1080p
     mainCanvas.style.background = backgroundColor.rgba();
 
     // load high score

package/examples/puzzle/index.html

@@ -3,5 +3,5 @@
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.js?48></script>
-<script src=game.js?48></script>
+<script src=../../engine/engine.all.min.js?60></script>
+<script src=game.js?60></script>

package/examples/stress/index.html

@@ -3,7 +3,7 @@
 <link rel=icon type=image/png href=../../favicon.png>
 </head><body>
 
-<script src=../../engine/engine.all.min.js?48></script>
+<script src=../../engine/engine.all.min.js?60></script>
 <script>
 
 /*
@@ -17,9 +17,6 @@
 
 'use strict';
 
-// use glOverlay for faster rendering by making the glCanvas visible
-glOverlay = 1;
-
 // keep our own list of simple sprites and track fps
 let sprites, timeMS, showFPS, statsDisplay, spriteColor, spriteAdditiveColor, musicSource;
 
@@ -61,11 +58,8 @@ function gameInit()
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate()
 {
-    if (!musicSource && hadInput)
-    {
-        // play music when there is input
+    if (!musicSource && mouseWasPressed(0))
         musicSource = music.play();
-    }
 
     // mouse click = change color
     if (mouseWasPressed(0) || mouseIsDown(2))

package/game.js

@@ -4,8 +4,6 @@
 
 'use strict';
 
-glOverlay = !isChrome; // fix slow rendering when not chrome
-
 // game variables
 let particleEmiter, clickCount = 0;
 
@@ -62,7 +60,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;
@@ -102,19 +100,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';
@@ -124,7 +118,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);
 }
 
 ///////////////////////////////////////////////////////////////////////////////