npm - littlejsengine - Versions diffs - 1.8.5 → 1.8.8 - Mend

littlejsengine 1.8.5 → 1.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/README.md +13 -3
package/build/littlejs.d.ts +22 -15
package/build/littlejs.esm.js +255 -55
package/build/littlejs.esm.min.js +1 -1
package/build/littlejs.js +253 -55
package/build/littlejs.min.js +1 -1
package/build/littlejs.release.js +253 -55
package/examples/breakout/game.js +3 -0
package/examples/breakout/index.html +3 -3
package/examples/breakoutTutorial/index.html +2 -2
package/examples/electron/game.js +3 -0
package/examples/electron/index.html +2 -2
package/examples/js13k/index.html +13 -13
package/examples/logo.png +0 -0
package/examples/module/game.js +3 -0
package/examples/module/index.html +1 -1
package/examples/particles/index.html +1 -1
package/examples/platformer/game.js +3 -0
package/examples/platformer/gamePlayer.js +1 -1
package/examples/platformer/index.html +6 -6
package/examples/puzzle/game.js +3 -0
package/examples/puzzle/index.html +2 -2
package/examples/starter/game.js +3 -0
package/examples/starter/index.html +13 -13
package/examples/stress/index.html +3 -1
package/examples/typescript/game.js +3 -1
package/examples/typescript/game.ts +3 -0
package/examples/typescript/index.html +1 -1
package/package.json +1 -1
package/src/engine.js +186 -9
package/src/engineAudio.js +1 -1
package/src/engineDraw.js +1 -1
package/src/engineExport.js +2 -0
package/src/engineInput.js +24 -14
package/src/engineObject.js +1 -1
package/src/engineParticles.js +1 -1
package/src/engineSettings.js +11 -0
package/src/engineTileLayer.js +8 -8
package/src/engineUtilities.js +5 -6
package/src/engineWebGL.js +15 -14

package/examples/starter/index.html CHANGED Viewed

@@ -6,18 +6,18 @@
 </head><body>
 <!-- LittleJS Engine -->
-<script src=../../src/engineDebug.js?183></script>
-<script src=../../src/engineUtilities.js?183></script>
-<script src=../../src/engineSettings.js?183></script>
-<script src=../../src/engineObject.js?183></script>
-<script src=../../src/engineDraw.js?183></script>
-<script src=../../src/engineInput.js?183></script>
-<script src=../../src/engineAudio.js?183></script>
-<script src=../../src/engineTileLayer.js?183></script>
-<script src=../../src/engineParticles.js?183></script>
-<script src=../../src/engineMedals.js?183></script>
-<script src=../../src/engineWebGL.js?183></script>
-<script src=../../src/engine.js?183></script>
+<script src=../../src/engineDebug.js?188></script>
+<script src=../../src/engineUtilities.js?188></script>
+<script src=../../src/engineSettings.js?188></script>
+<script src=../../src/engineObject.js?188></script>
+<script src=../../src/engineDraw.js?188></script>
+<script src=../../src/engineInput.js?188></script>
+<script src=../../src/engineAudio.js?188></script>
+<script src=../../src/engineTileLayer.js?188></script>
+<script src=../../src/engineParticles.js?188></script>
+<script src=../../src/engineMedals.js?188></script>
+<script src=../../src/engineWebGL.js?188></script>
+<script src=../../src/engine.js?188></script>
 <!-- Add your game scripts here -->
-<script src=game.js?183></script>
+<script src=game.js?188></script>

package/examples/stress/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
 </head><body>
 <!-- LittleJS Engine -->
-<script src=../../build/littlejs.min.js?183></script>
+<script src=../../build/littlejs.min.js?188></script>
 <script>
 /*
@@ -36,6 +36,8 @@ class TestObject extends EngineObject
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
+    canvasFixedSize = vec2(800, 600); // 720p
     // create tile collision
     initTileCollision(vec2(80,50));
     for (let x = tileCollisionSize.x; x--;)

package/examples/typescript/game.js CHANGED Viewed

@@ -6,7 +6,9 @@
 'use strict';
 // import module
 import * as LittleJS from '../../build/littlejs.esm.js';
-const { Vector2, Color, Timer, vec2 } = LittleJS;
+const { Vector2, Color, Timer, vec2, tile } = LittleJS;
+// show the LittleJS splash screen
+LittleJS.setShowSplashScreen(true);
 // sound effects
 const sound_click = new LittleJS.Sound([1, .5]);
 // medals

package/examples/typescript/game.ts CHANGED Viewed

@@ -10,6 +10,9 @@
 import * as LittleJS from '../../build/littlejs.esm.js';
 const {Vector2, Color, Timer, vec2, tile} = LittleJS;
+// show the LittleJS splash screen
+LittleJS.setShowSplashScreen(true);
 // sound effects
 const sound_click = new LittleJS.Sound([1,.5]);

package/examples/typescript/index.html CHANGED Viewed

@@ -6,4 +6,4 @@
 </head><body>
 <!-- Add your game scripts here -->
-<script src=game.js?183 type=module></script>
+<script src=game.js?188 type=module></script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.8.5",
+  "version": "1.8.8",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "build/littlejs.esm.js",
   "types": "build/littlejs.esm.js",

package/src/engine.js CHANGED Viewed

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.8.5';
+const engineVersion = '1.8.8';
 /** Frames per second to update objects
  *  @type {Number}
@@ -213,7 +213,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     }
     // setup html
-    const styleBody =
+     const styleBody =
         'margin:0;overflow:hidden;' + // fill the window
         'background:#000;' +          // set background color
         'touch-action:none;' +        // prevent mobile pinch to resize
@@ -234,14 +234,13 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     // set canvas style
     const styleCanvas =
-        'position:absolute;' +                               // position
-        'top:50%;left:50%;transform:translate(-50%,-50%);' + // center
-        (canvasPixelated?'image-rendering:pixelated':'');    // pixelated rendering
+        'position:absolute;' +                             // position
+        'top:50%;left:50%;transform:translate(-50%,-50%)'; // center
     (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
-    // load all of the images
-    Promise.all(imageSources.map((src, textureIndex)=>
-        new Promise((resolve, reject)=>
+    // create promises for loading images
+    const promises = imageSources.map((src, textureIndex)=>
+        new Promise(resolve =>
         {
             const image = new Image;
             image.onerror = image.onload = ()=>
@@ -251,7 +250,24 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             }
             image.src = src;
         })
-    )).then(()=>
+    )
+    // draw splash screen
+    showSplashScreen && promises.push(new Promise(resolve =>
+    {
+        let t = 0;
+        console.log(`LittleJS Engine v${engineVersion}`);
+        updateSplash();
+        function updateSplash()
+        {
+            clearInput();
+            drawEngineSplashScreen(t+=.01);
+            t>1 ? resolve() : setTimeout(updateSplash,16);
+        }
+    }));
+    // load all of the images
+    Promise.all(promises).then(()=>
     {
         // start the engine
         gameInit();
@@ -329,4 +345,165 @@ function engineObjectsCallback(pos, size, callbackFunction, objects=engineObject
         for (const o of objects)
             pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
     }
+}
+///////////////////////////////////////////////////////////////////////////////
+// LittleJS splash screen and logo
+function drawEngineSplashScreen(t)
+{
+    // background
+    const grayscale = 0;
+    const x = mainContext;
+    const w = mainCanvas.width = innerWidth;
+    const h = mainCanvas.height = innerHeight;
+    const p3 = percent(t, 1, .8);
+    const p4 = percent(t, 0, .5);
+    const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,Math.hypot(w,h)*.7);
+    g.addColorStop(0,hsl(0,0,lerp(p4,0,p3/2),p3));
+    g.addColorStop(1,hsl(0,0,0,p3));
+    x.save();
+    x.fillStyle = g;
+    x.fillRect(0,0,w,h);
+    // logo - fade in and out
+    const rect = (X, Y, W, H, C)=>
+    {
+        x.beginPath();
+        x.rect(X,Y,W,C?H*p:H);
+        x.fillStyle = C;
+        C ? x.fill() : x.stroke();
+    };
+    const line = (X, Y, Z, W)=>
+    {
+        x.beginPath();
+        x.lineTo(X,Y);
+        x.lineTo(Z,W);
+        x.stroke();
+    };
+    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
+    {
+        const D = (A+B)/2, E = p*(B-A)/2;
+        x.beginPath();
+        F && x.lineTo(X,Y);
+        x.arc(X,Y,R,D-E,D+E);
+        x.fillStyle = C;
+        C ? x.fill() : x.stroke();
+    };
+    const color = (c=0, l=0) =>
+        hsl([.98,.3,.57,.14][c%4]-10,grayscale?0:.8,[0,.3,.5,.8,.9][l]);
+    const alpha = wave(1,1,t);
+    const p = percent(alpha, .1, .5);
+    // setup
+    x.translate(w/2,h/2);
+    const size = min(6, min(w,h)/99); // fit to screen
+    x.scale(size,size);
+    x.translate(-40,-35);
+    x.lineJoin = x.lineCap = 'round';
+    x.lineWidth = 1+p;
+    // drawing effect
+    const p2 = percent(alpha,.1,1);
+    x.setLineDash([99*p2,99]);
+    // cab top
+    rect(7,17,18,-8,color(2,2));
+    rect(7,9,18,4,color(2,3));
+    rect(25,9,8,8,color(2,1));
+    rect(25,9,-18,8);
+    rect(25,9,8,8);
+    // cab
+    rect(25,17,7,22,color());
+    rect(11,40,14,-23,color(1,1));
+    rect(11,17,14,17,color(1,2));
+    rect(11,17,14,9,color(1,3));
+    rect(15,31,6,-9,color(2,2));
+    circle(15,23,5,0,PI/2,color(2,4),1);
+    rect(25,17,-14,23);
+    rect(21,22,-6,9);
+    // little stack
+    rect(37,14,9,6,color(3,2));
+    rect(37,14,4,6,color(3,3));
+    rect(37,14,9,6);
+    // big stack
+    rect(50,20,10,-10,color(0,1));
+    rect(50,20,6,-10,color(0,2));
+    rect(50,20,3,-10,color(0,3));
+    rect(50,10,10,10);
+    circle(55,2,11,.5,PI-.5,color(3,3));
+    circle(55,2,11,.5,PI/2,color(3,2),1);
+    circle(55,2,11,.5,PI-.5);
+    rect(45,7,20,-7,color(0,2));
+    rect(45,0,20,3,color(0,3));
+    rect(45,0,20,7);
+    // engine
+    for (let i=5; i--;)
+    {
+        // stagger radius to fix slight seam
+        circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
+        circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
+        circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
+    }
+    // engine outline
+    circle(36,30,10,PI/2,PI*3/2);
+    circle(47,30,10,PI/2,PI*3/2);
+    circle(60,30,10);
+    line(36,20,60,20);
+    // engine front light
+    circle(60,30,4,PI,3*PI,color(3,2));
+    circle(60,30,4,PI,2*PI,color(3,3));
+    circle(60,30,4,PI,3*PI);
+    // front brush
+    for (let i=6; i--;)
+    {
+        x.beginPath();
+        x.lineTo(53,54);
+        x.lineTo(53,40);
+        x.lineTo(53+(1+i*2.9)*p,40);
+        x.lineTo(53+(4+i*3.5)*p,54);
+        x.fillStyle = color(0,i%2+2);
+        x.fill() || i%2 && x.stroke();
+    }
+    // wheels
+    rect(5,40,9,6,color());
+    rect(15,54,38,-14,color())
+    for (let i=3; i--;)
+    for (let j=2; j--;)
+    {
+        circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
+        x.stroke();
+        circle(15*i+15,47,j?7:1,0,PI,color(i,2));
+        x.stroke();
+    }
+    line(6,40,68,40) // center
+    line(77,54,4,54) // bottom
+    // text
+    const s = engineName;
+    x.font = '900 16px arial';
+    x.textAlign = 'center';
+    x.textBaseline = 'top';
+    x.lineWidth = 1+p*3
+    let w2 = 0;
+    for (let i=0; i<s.length; ++i)
+        w2 += x.measureText(s[i]).width;
+    for (let j=2; j--;)
+    for (let i=0, X=41-w2/2; i<s.length; ++i)
+    {
+        x.fillStyle = color(i,grayscale?3:2);
+        const w = x.measureText(s[i]).width;
+        x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
+        X += w;
+    }
+    x.restore();
 }

package/src/engineAudio.js CHANGED Viewed

@@ -213,7 +213,7 @@ class Music extends Sound
      *  @param {Boolean} [loop=1] - True if the music should loop
      *  @return {AudioBufferSourceNode} - The audio source node
      */
-    play(volume, loop = 1)
+    playMusic(volume, loop = 1)
     { return super.play(0, volume, 1, 1, loop); }
 }

package/src/engineDraw.js CHANGED Viewed

@@ -52,7 +52,7 @@ let mainCanvasSize = vec2();
  *  @memberof Draw */
 let textureInfos = [];
-// Engine internal variables not exposed to documentation
+// Keep track of how many draw calls there were each frame for debugging
 let drawCount;
 ///////////////////////////////////////////////////////////////////////////////

package/src/engineExport.js CHANGED Viewed

@@ -43,6 +43,7 @@ export {
 	canvasFixedSize,
 	canvasPixelated,
 	fontDefault,
+	showSplashScreen,
 	tileSizeDefault,
 	tileFixBleedScale,
 	enablePhysicsSolver,
@@ -80,6 +81,7 @@ export {
 	setCanvasFixedSize,
 	setCanvasPixelated,
 	setFontDefault,
+	setShowSplashScreen,
 	setGlEnable,
 	setGlOverlay,
 	setTileSizeDefault,

package/src/engineInput.js CHANGED Viewed

@@ -146,23 +146,33 @@ function inputUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 // Keyboard event handlers
-onkeydown = (e)=>
 {
-    if (debug && e.target != document.body) return;
-    e.repeat || (inputData[isUsingGamepad = 0][remapKey(e.which)] = 3);
-    preventDefaultInput && e.preventDefault();
-}
+    onkeydown = (e)=>
+    {
+        if (debug && e.target != document.body) return;
+        if (!e.repeat)
+        {
+            inputData[isUsingGamepad = 0][e.which] = 3;
+            if (inputWASDEmulateDirection)
+                inputData[0][remapKey(e.which)] = 3;
+        }
+        preventDefaultInput && e.preventDefault();
+    }
-onkeyup = (e)=>
-{
-    if (debug && e.target != document.body) return;
-    inputData[0][remapKey(e.which)] = 4;
-}
+    onkeyup = (e)=>
+    {
+        if (debug && e.target != document.body) return;
+        inputData[0][e.which] = 4;
+        if (inputWASDEmulateDirection)
+            inputData[0][remapKey(e.which)] = 4;
+    }
-function remapKey(c)
-{
-    return inputWASDEmulateDirection ?
-        c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
+    // handle remapping wasd keys to directions
+    function remapKey(c)
+    {
+        return inputWASDEmulateDirection ?
+            c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
+    }
 }
 ///////////////////////////////////////////////////////////////////////////////

package/src/engineObject.js CHANGED Viewed

@@ -85,7 +85,7 @@ class EngineObject
         // init other internal object stuff
         this.spawnTime = time;
         this.children = [];
-        this.collideTiles = 1;
+        this.collideTiles = false;
         // add to list of objects
         engineObjects.push(this);

package/src/engineParticles.js CHANGED Viewed

@@ -130,7 +130,7 @@ class ParticleEmitter extends EngineObject
         this.fadeRate          = fadeRate;
         /** @property {Number} - Apply extra randomness percent */
         this.randomness        = randomness;
-        /** @property {Number} - Do particles collide against tiles */
+        /** @property {Boolean} - Do particles collide against tiles */
         this.collideTiles      = collideTiles;
         /** @property {Number} - Should particles use addtive blend */
         this.additive          = additive;

package/src/engineSettings.js CHANGED Viewed

@@ -49,6 +49,12 @@ let canvasPixelated = 1;
  *  @memberof Settings */
 let fontDefault = 'arial';
+/** Enable to show the LittleJS splash screen be shown on startup
+ *  @type {Boolean}
+ *  @default
+ *  @memberof Settings */
+let showSplashScreen = 0;
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
@@ -282,6 +288,11 @@ function setCanvasPixelated(pixelated) { canvasPixelated = pixelated; }
  *  @memberof Settings */
 function setFontDefault(font) { fontDefault = font; }
+/** Set if the LittleJS splash screen be shown on startup
+ *  @param {Boolean} show
+ *  @memberof Settings */
+function setShowSplashScreen(show) { showSplashScreen = show; }
 /** Set if webgl rendering is enabled
  *  @param {Boolean} enable
  *  @memberof Settings */

package/src/engineTileLayer.js CHANGED Viewed

@@ -307,10 +307,10 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     /** Draw directly to the 2D canvas in world space (bipass webgl)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
-     *  @param {Number}   [angle=0]
-     *  @param {Boolean}  [mirror=0]
+     *  @param {Number}   angle
+     *  @param {Boolean}  mirror
      *  @param {Function} drawFunction */
-    drawCanvas2D(pos, size, angle=0, mirror, drawFunction)
+    drawCanvas2D(pos, size, angle, mirror, drawFunction)
     {
         const context = this.context;
         context.save();
@@ -324,12 +324,12 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     }
     /** Draw a tile directly onto the layer canvas
-     *  @param {Vector2} pos
-     *  @param {Vector2} [size=Vector2(1,1)]
+     *  @param {Vector2}  pos
+     *  @param {Vector2}  [size=Vector2(1,1)]
      *  @param {TileInfo} [tileInfo]
-     *  @param {Color}   [color=Color()]
-     *  @param {Number}  [angle=0]
-     *  @param {Boolean} [mirror=0] */
+     *  @param {Color}    [color=Color()]
+     *  @param {Number}   [angle=0]
+     *  @param {Boolean}  [mirror=0] */
     drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
     {
         this.drawCanvas2D(pos, size, angle, mirror, (context)=>

package/src/engineUtilities.js CHANGED Viewed

@@ -407,7 +407,7 @@ class Vector2
     arrayCheck(arraySize) { return this.x >= 0 && this.y >= 0 && this.x < arraySize.x && this.y < arraySize.y; }
     /** Returns this vector expressed as a string
-     * @param {float} digits - precision to display
+     * @param {Number} digits - precision to display
      * @return {String} */
     toString(digits=3)
     { if (debug) { return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`; }}
@@ -596,11 +596,10 @@ class Color
      * @return {Number} */
     rgbaInt()
     {
-        const toByte = (c)=> clamp(c)*255|0;
-        const r = toByte(this.r);
-        const g = toByte(this.g)<<8;
-        const b = toByte(this.b)<<16;
-        const a = toByte(this.a)<<24;
+        const r = clamp(this.r)*255|0;
+        const g = clamp(this.g)*255<<8;
+        const b = clamp(this.b)*255<<16;
+        const a = clamp(this.a)*255<<24;
         return r + g + b + a;
     }
 }

package/src/engineWebGL.js CHANGED Viewed

@@ -23,7 +23,7 @@ let glCanvas;
 let glContext;
 // WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glArrayBuffer, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
+let glActiveTexture, glShader, glArrayBuffer, glVertexData, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
 ///////////////////////////////////////////////////////////////////////////////
@@ -60,10 +60,10 @@ function glInit()
     );
     // init buffers
-    const vertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
+    glVertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
+    glPositionData = new Float32Array(glVertexData);
+    glColorData = new Uint32Array(glVertexData);
     glArrayBuffer = glContext.createBuffer();
-    glPositionData = new Float32Array(vertexData);
-    glColorData = new Uint32Array(vertexData);
     glBatchCount = 0;
 }
@@ -91,7 +91,7 @@ function glPreRender()
         glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
         offset += size*typeSize;
     }
-    initVertexAttribArray('p', gl_FLOAT, 4, 4);            // position & texture coords
+    initVertexAttribArray('p', gl_FLOAT, 4, 4);            // position & texture
     initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
     initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
@@ -161,7 +161,7 @@ function glCreateProgram(vsSource, fsSource)
     return program;
 }
-/** Create WebGL texture from an image and set the texture settings
+/** Create WebGL texture from an image and init the texture settings
  *  @param {Image} image
  *  @return {WebGLTexture}
  *  @memberof WebGL */
@@ -170,7 +170,8 @@ function glCreateTexture(image)
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(gl_TEXTURE_2D, texture);
-    image && image.width && glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
+    if (image)
+        glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
     // use point filtering for pixelated rendering
     const filter = canvasPixelated ? gl_NEAREST : gl_LINEAR;
@@ -178,6 +179,7 @@ function glCreateTexture(image)
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
     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;
 }
@@ -192,8 +194,7 @@ function glFlush()
     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_INDICIES_PER_VERT));
+    glContext.bufferSubData(gl_ARRAY_BUFFER, 0, glVertexData);
     glContext.drawArrays(gl_TRIANGLE_STRIP, 0, glBatchCount);
     glBatchCount = 0;
     glBatchAdditive = glAdditive;
@@ -248,11 +249,11 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdd
     // setup 2 triangle strip quad
     for(let i = vertCount, offset = glBatchCount * gl_INDICIES_PER_VERT; i--;)
     {
-        let j = clamp(i-1, 0, 3)*4;  // degenerate tri at ends
-        glPositionData[offset++] = positionData[j++];
-        glPositionData[offset++] = positionData[j++];
-        glPositionData[offset++] = positionData[j++];
-        glPositionData[offset++] = positionData[j++];
+        const j = clamp(i-1, 0, 3)*4;  // degenerate tri at ends
+        glPositionData[offset++] = positionData[j+0];
+        glPositionData[offset++] = positionData[j+1];
+        glPositionData[offset++] = positionData[j+2];
+        glPositionData[offset++] = positionData[j+3];
         glColorData[offset++] = rgba;
         glColorData[offset++] = rgbaAdditive;
     }