littlejsengine 1.2.0 → 1.3.0

package/engine/engineBuild.bat

@@ -79,7 +79,7 @@ copy engine.all.release.js %OUTPUT_FILENAME%
 
 rem check code with closure
 move %OUTPUT_FILENAME% %OUTPUT_FILENAME%.temp
-call google-closure-compiler --js %OUTPUT_FILENAME%.temp --js_output_file %OUTPUT_FILENAME% --language_out ECMASCRIPT_2019 --warning_level VERBOSE --jscomp_off *
+call npx google-closure-compiler --js=%OUTPUT_FILENAME%.temp --js_output_file=%OUTPUT_FILENAME% --language_out=ECMASCRIPT_2019 --warning_level=VERBOSE --jscomp_off=*
 del %OUTPUT_FILENAME%.temp
 if %ERRORLEVEL% NEQ 0 (
     pause
@@ -87,7 +87,7 @@ if %ERRORLEVEL% NEQ 0 (
 )
 
 rem lightly minify with uglify
-call uglifyjs -o %OUTPUT_FILENAME% -- %OUTPUT_FILENAME%
+call npx uglifyjs -o %OUTPUT_FILENAME% -- %OUTPUT_FILENAME%
 if %ERRORLEVEL% NEQ 0 (
     pause
     exit /b %ERRORLEVEL%
@@ -95,7 +95,7 @@ if %ERRORLEVEL% NEQ 0 (
 
 rem --- BUILD TYPESCRIPT DEFINITIONS ---
 
-call tsc engine.all.js --declaration --allowJs --emitDeclarationOnly --outFile index.d.ts
+call npx tsc engine.all.js --declaration --allowJs --emitDeclarationOnly --outFile index.d.ts
 if %ERRORLEVEL% NEQ 0 (
     pause
     exit /b %ERRORLEVEL%

package/engine/engineDebug.js

@@ -160,7 +160,7 @@ const debugUpdate = ()=>
 {
     if (!debug)
         return;
-        
+
     if (keyWasPressed(192)) // ~
         debugOverlay = !debugOverlay;
     if (debugOverlay)
@@ -273,17 +273,11 @@ const debugRender = ()=>
             drawRect(mousePos.floor().add(vec2(.5)), vec2(1), new Color(0,0,1,.5));
             drawLine(mousePos, bestObject.pos, .1, !raycastHitPos ? new Color(0,1,0,.5) : new Color(1,0,0,.5));
 
-            let pos = mousePos.copy(), height = vec2(0,.5);
-            const printVec2 = (v)=> '(' + (v.x>0?' ':'') + (v.x).toFixed(2) + ',' + (v.y>0?' ':'')  + (v.y).toFixed(2) + ')';
-            const args = [.5, new Color, .05, undefined, undefined, 'monospace'];
-
-            drawText('pos = ' + printVec2(bestObject.pos) 
-                + (bestObject.angle>0?'  ':' ') + (bestObject.angle*180/PI).toFixed(1) + '°', 
-                pos = pos.add(height), ...args);
-            drawText('vel = ' + printVec2(bestObject.velocity), pos = pos.add(height), ...args);
-            drawText('size = ' + printVec2(bestObject.size), pos = pos.add(height), ...args);
-            drawText('type = ' + ( bestObject.constructor.name), pos = mousePos.subtract(height), ...args);
-            drawText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height.scale(2)), ...args);
+            const debugText = 'mouse pos = ' + mousePos + 
+                '\nmouse collision = ' + getTileCollisionData(mousePos) + 
+                '\n\n--- object info ---\n' +
+                bestObject.toString();
+            drawTextScreen(debugText, mousePosScreen, 24, new Color, .05, undefined, undefined, 'monospace');
             mainContext = saveContext;
         }
 
@@ -292,11 +286,12 @@ const debugRender = ()=>
 
     {
         // draw debug primitives
-        overlayContext.save();
         overlayContext.lineWidth = 2;
         const pointSize = debugPointSize * cameraScale;
         debugPrimitives.forEach(p=>
         {
+            overlayContext.save();
+
             // create canvas transform from world space to screen space
             const pos = worldToScreen(p.pos);
             
@@ -332,12 +327,12 @@ const debugRender = ()=>
                 p.fill && overlayContext.fill();
                 overlayContext.stroke();
             }
+            
+            overlayContext.restore();
         });
 
         // remove expired pritives
         debugPrimitives = debugPrimitives.filter(r=>r.time.get()<0);
-
-        overlayContext.restore();
     }
 
     {

package/engine/engineDraw.js

@@ -110,7 +110,7 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
             if (tileIndex < 0)
             {
                 // if negative tile index, force untextured
-                context.fillStyle = color.rgba();
+                context.fillStyle = color;
                 context.fillRect(-.5, -.5, 1, 1);
             }
             else
@@ -215,7 +215,8 @@ function setBlendMode(additive, useWebGL=glEnable)
         mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
-/** Draw text on overlay canvas in world space
+/** Draw text on overlay canvas in screen space
+ *  Automatically splits new lines into rows
  *  @param {String}  text
  *  @param {Vector2} pos
  *  @param {Number}  [size=1]
@@ -224,20 +225,37 @@ function setBlendMode(additive, useWebGL=glEnable)
  *  @param {Color}   [lineColor=new Color(0,0,0)]
  *  @param {String}  [textAlign='center']
  *  @memberof Draw */
-function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault)
+function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault)
 {
-    pos = worldToScreen(pos);
-    overlayContext.font = size*cameraScale + 'px '+ font;
+    overlayContext.fillStyle = color;
+    overlayContext.lineWidth = lineWidth *= cameraScale;
+    overlayContext.strokeStyle = lineColor;
     overlayContext.textAlign = textAlign;
+    overlayContext.font = size + 'px '+ font;
     overlayContext.textBaseline = 'middle';
-    if (lineWidth)
+
+    pos = pos.copy();
+    text.split('\n').forEach(line=>
     {
-        overlayContext.lineWidth = lineWidth*cameraScale;
-        overlayContext.strokeStyle = lineColor.rgba();
-        overlayContext.strokeText(text, pos.x, pos.y);
-    }
-    overlayContext.fillStyle = color.rgba();
-    overlayContext.fillText(text, pos.x, pos.y);
+        lineWidth && overlayContext.strokeText(line, pos.x, pos.y);
+        overlayContext.fillText(line, pos.x, pos.y);
+        pos.y += size;
+    });
+}
+
+/** Draw text on overlay canvas in world space
+ *  Automatically splits new lines into rows
+ *  @param {String}  text
+ *  @param {Vector2} pos
+ *  @param {Number}  [size=1]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=new Color(0,0,0)]
+ *  @param {String}  [textAlign='center']
+ *  @memberof Draw */
+function drawText(text, pos, size=1, color, lineWidth, lineColor, textAlign, font)
+{
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth, lineColor, textAlign, font);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -254,6 +272,9 @@ function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new
  * // draw text
  * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
  */
+
+let engineFontImage;
+
 class FontImage
 {
     /** Create an image font
@@ -265,14 +286,14 @@ class FontImage
      */
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), startTileIndex=0, context=overlayContext)
     {
-        if (!image)
+        if (!image && !engineFontImage)
         {
-            // use default font image
-            image = new Image();
-            image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6MCIBdFY+Q0PMNgf0yCgsSAaZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWw1hPWNRcEyWh2npdpBmSUBrRaN1WSlQAWXaWLF0kkwR7C/N7XUvIaQr4xpeqeQigjLwBRZ/6KkufAACcv5z7GYhvgWHII8xN/4C2hvLCkmZSVgIJMHNTxpYOsJOiitEjUQnIQAFFP+opoQfCbjWmfzWiNzCjEvxAPFARmw/Y5Te0sl2zEp4M+m7cToJjdJS7y1xcFlFT7EtWBZ8nl7uLSff7UgYewtlyY6yHM4RrjNrnsfn/W0DBK9xNZctZ7gsTeXTe5eqLqXFlKnAn+vkNXzH6TqPW10ksKoSlauKk1TcncZLSTxNnQ8Av/8RGPXOFIuMCZ/fpwIZx5vU4QIRQ44HwUyHx/QrZhm5VtXFex7ja2se0KBpnPT0DSwS4xd86uAy+SqnLBgkPY5JolhJ33ENyK6n0VyRzCnzebIkFdY/NUtM66lTdhix1KUss6q5snH5ftVJXG0QITb1gUDvzD3z/BbyOLMirwCtPzAAAAAElFTkSuQmCC';
+            // load default font image
+            engineFontImage = new Image();
+            engineFontImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6ECLBdFY+Q0PMNgf0yCgsSAGZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWwtROWpVQEyWh2npdpBmTUFVhb29RINgLIukoXr5LIAvYQ5ve+1FqWEMqNKTX3FAJHyQDRZvmKWubAACcv5z5Gtg2oyCWE+Yk/8JZQX1jTTCpKAFGIgza+dJCNBF2UskRlsgwitHbSV0QLgt9sTPtsRlvJjEr8C/FARWA2bJ/TtJ7lko34dNDn6usJUMzuErP89UUBJbWeozrwLLncXczd508deAjLWipLO4Q5XGPcJvPu92cNDaN0P5G1FL0nSOzddZOrJ6rNhbXGmeDvO3TF7DeJWl4bvaYQTNHCTeuqKZmbjHaSOFes+IX/+IhHrnAkXOAsfn24EM68XieIECoccD4KZLk/odiwzeo2rovYdhvb2HYFgyznJyDpYJdYOmfXgVdJTaUi4xA2uWYNYec9BLeqdl9EsoTw582mSFDX2DxVLbNt9U3YYoeatBad1c2Tj8t2akrjaIGJNywKB/7h75/gN3vCMSaadIUTAAAAAElFTkSuQmCC';
         }
 
-        this.image = image;
+        this.image = image || engineFontImage;
         this.tileSize = tileSize;
         this.paddingSize = paddingSize;
         this.startTileIndex = startTileIndex;

package/engine/engineInput.js

@@ -281,7 +281,7 @@ if (isTouchDevice)
 // touch gamepad, virtual on screen gamepad emulator for touch devices
 
 // touch input internal variables
-let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2(), touchGamepadAnalog = 1;
+let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2();
 
 // create the touch gamepad, called automatically by the engine
 function touchGamepadCreate()
@@ -328,7 +328,7 @@ function touchGamepadCreate()
             {
                 // virtual analog stick
                 if (touchGamepadAnalog)
-                    touchGamepadStick = touchPos.subtract(stickCenter).clampLength(touchGamepadSize/2).scale(2/touchGamepadSize);
+                    touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
                 else
                 {
                     // 8 way dpad
@@ -369,12 +369,28 @@ function touchGamepadRender()
     overlayContext.lineWidth = 3;
 
     // draw left analog stick
-    overlayContext.fillStyle = gamepadStick(0).length() > 0 ? '#fff' : '#000';
+    overlayContext.fillStyle = touchGamepadStick.lengthSquared() > 0 ? '#fff' : '#000';
     overlayContext.beginPath();
-    overlayContext.arc(touchGamepadSize, mainCanvasSize.y-touchGamepadSize, touchGamepadSize/2, 0,9);
-    overlayContext.fill();
-    overlayContext.stroke();
 
+    const leftCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    if (touchGamepadAnalog)
+    {
+        overlayContext.arc(leftCenter.x, leftCenter.y, touchGamepadSize/2, 0, 9);
+        overlayContext.fill();
+        overlayContext.stroke();
+    }
+    else // draw cross shaped gamepad
+    {
+        for(let i=10; i--;)
+        {
+            const angle = i*PI/4;
+            overlayContext.arc(leftCenter.x, leftCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
+            i%2 && overlayContext.arc(leftCenter.x, leftCenter.y, touchGamepadSize*.33, angle, angle);
+            i==1 && overlayContext.fill();
+        }
+        overlayContext.stroke();
+    }
+    
     // draw right face buttons
     const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     for (let i=4; i--;)

package/engine/engineMedals.js

@@ -35,7 +35,7 @@ function medalsInit(saveName)
 {
     // check if medals are unlocked
     medalsSaveName = saveName;
-    debugMedals || medals.forEach(medal=> medal.unlocked = 1 || localStorage[medal.storageKey()]);
+    debugMedals || medals.forEach(medal=> localStorage[medal.storageKey()]);
 }
 
 /** 
@@ -224,6 +224,9 @@ class Newgrounds
         const scoreboardResult = this.call('ScoreBoard.getBoards');
         this.scoreboards = scoreboardResult ? scoreboardResult.result.data.scoreboards : [];
         debugMedals && console.log(this.scoreboards);
+
+        const keepAliveMS = 5 * 60 * 1e3;
+        setInterval(()=>this.call('Gateway.ping', 0, 1), keepAliveMS);
     }
 
     /** Send message to unlock a medal by id
@@ -235,9 +238,6 @@ class Newgrounds
      * @param {Number} value - The score value */
     postScore(id, value) { return this.call('ScoreBoard.postScore', {'id':id, 'value':value}, 1); }
 
-    /** Send message to log a view */
-    logView() { return this.call('App.logView', {'host':this.host}, 1); }
-
     /** Get scores from a scoreboard
      * @param {Number} id         - The scoreboard id
      * @param {String} [user=0]   - A user's id or name
@@ -249,6 +249,9 @@ class Newgrounds
     getScores(id, user=0, social=0, skip=0, limit=10)
     { return this.call('ScoreBoard.getScores', {'id':id, 'user':user, 'social':social, 'skip':skip, 'limit':limit}); }
 
+    /** Send message to log a view */
+    logView() { return this.call('App.logView', {'host':this.host}, 1); }
+
     /** Send a message to call a component of the Newgrounds API
      * @param {String}  component      - Name of the component
      * @param {Object}  [parameters=0] - Parameters to use for call

package/engine/engineObject.js

@@ -36,7 +36,7 @@ class EngineObject
      *  @param {Vector2} [size=objectDefaultSize]    - World space size of the object
      *  @param {Number}  [tileIndex=-1]              - Tile to use to render object, untextured if -1
      *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tile in source pixels
-     *  @param {Number}  [angle=0]                   - Angle to rotate the object
+     *  @param {Number}  [angle=0]                   - Angle the object is rotated by
      *  @param {Color}   [color]                     - Color to apply to tile when rendered
      *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
      */
@@ -352,4 +352,20 @@ class EngineObject
         this.isSolid = isSolid;
         this.collideTiles = collideTiles;
     }
+
+    toString()
+    {
+        let text = 'type = ' + this.constructor.name;
+        if (this.pos.x || this.pos.y)
+            text += '\npos = ' + this.pos;
+        if (this.velocity.x || this.velocity.y)
+            text += '\nvelocity = ' + this.velocity;
+        if (this.size.x || this.size.y)
+            text += '\nsize = ' + this.size;
+        if (this.angle)
+            text += '\nangle = ' + this.angle.toFixed(3);
+        if (this.color)
+            text += '\ncolor = ' + this.color;
+        return text;
+    }
 }

package/engine/engineParticles.js

@@ -15,9 +15,9 @@
  * let pos = vec2(2,3);
  * let particleEmiter = new ParticleEmitter
  * (
- *     pos, 1, 0, 500, PI,  // pos, emitSize, emitTime, emitRate, emiteCone
+ *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
  *     0, vec2(16),                            // tileIndex, tileSize
- *     new Color, new Color(0,0,0),            // colorStartA, colorStartB
+ *     new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
  *     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, 
@@ -28,6 +28,7 @@ class ParticleEmitter extends EngineObject
 {
     /** Create a particle system with the given settings
      *  @param {Vector2} position           - World space position of the emitter
+     *  @param {Number}  [angle=0]          - Angle to emit the particles
      *  @param {Number}  [emitSize=0]       - World space size of the emitter (float for circle diameter, vec2 for rect)
      *  @param {Number}  [emitTime=0]       - How long to stay alive (0 is forever)
      *  @param {Number}  [emitRate=100]     - How many particles per second to spawn, does not emit if 0
@@ -57,6 +58,7 @@ class ParticleEmitter extends EngineObject
     constructor
     ( 
         pos,
+        angle,
         emitSize = 0,
         emitTime = 0,
         emitRate = 100,
@@ -84,7 +86,7 @@ class ParticleEmitter extends EngineObject
         renderOrder = additive ? 1e9 : 0
     )
     {
-        super(pos, new Vector2, tileIndex, tileSize, 0, undefined, renderOrder);
+        super(pos, new Vector2, tileIndex, tileSize, angle, undefined, renderOrder);
 
         // emitter settings
         /** @property {Number} - World space size of the emitter (float for circle diameter, vec2 for rect) */

package/engine/engineSettings.js

@@ -145,6 +145,11 @@ let inputWASDEmulateDirection = 1;
  *  @memberof Settings */
 let touchGamepadEnable = 0;
 
+/** True if touch gamepad should be analog stick or false to use if 8 way dpad
+ *  @default
+ *  @memberof Settings */
+let touchGamepadAnalog = 1;
+
 /** Size of virutal gamepad for touch devices in pixels
  *  @default
  *  @memberof Settings */

package/engine/engineTileLayer.js

@@ -153,14 +153,14 @@ class TileLayerData
  */
 class TileLayer extends EngineObject
 {
-    /** Create a tile layer object
-     *  @param {Vector2} [position=new Vector2()]   - World space position
-     *  @param {Vector2} [size=objectDefaultSize]   - World space size
-     *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
-     *  @param {Vector2} [scale=new Vector2(1,1)]   - How much to scale this layer when rendered
-     *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
-     */
-    constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
+/** Create a tile layer object
+    *  @param {Vector2} [position=new Vector2()]   - World space position
+    *  @param {Vector2} [size=tileCollisionSize]   - World space size
+    *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
+    *  @param {Vector2} [scale=new Vector2(1,1)]   - How much to scale this layer when rendered
+    *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
+    */
+constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
     {
         super(pos, size, -1, tileSize, 0, undefined, renderOrder);
 
@@ -320,7 +320,7 @@ class TileLayer extends EngineObject
             if (tileIndex < 0)
             {
                 // untextured
-                context.fillStyle = color.rgba();
+                context.fillStyle = color;
                 context.fillRect(-.5, -.5, 1, 1);
             }
             else
@@ -339,5 +339,6 @@ class TileLayer extends EngineObject
      *  @param {Vector2} [size=new Vector2(1,1)]
      *  @param {Color}   [color=new Color(1,1,1)]
      *  @param {Number}  [angle=0] */
-    drawRect(pos, size, color, angle) { this.drawTile(pos, size, -1, 0, color, angle); }
+    drawRect(pos, size, color, angle) 
+    { this.drawTile(pos, size, -1, 0, color, angle); }
 }

package/engine/engineUtilities.js

@@ -311,7 +311,13 @@ class Vector2
     /** Returns true if this vector is within the bounds of an array size passed in
      * @param {Vector2} arraySize
      * @return {Boolean} */
-    arrayCheck(arraySize) { return this.x >= 0 && this.y >= 0 && this.x < arraySize.x && this.y < arraySize.y; } 
+    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
+     * @return {String} */
+    toString(digits=3) 
+    { return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -382,7 +388,7 @@ class Color
      * @return {Color} */
     lerp(c, p) { return this.add(c.subtract(this).scale(clamp(p))); }
 
-    /** Sets this color given a hue, saturation, lightness , and alpha
+    /** Sets this color given a hue, saturation, lightness, and alpha
      * @param {Number} [hue=0]
      * @param {Number} [saturation=0]
      * @param {Number} [lightness=1]
@@ -418,21 +424,43 @@ class Color
         ).clamp();
     }
 
-    /** Returns this color expressed as an rgba string
+    /** Returns this color expressed as an CSS color value
      * @return {String} */
-    rgba()      
+    toString()      
     { 
         ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1 && this.a>=0 && this.a<=1);
         return `rgb(${this.r*255|0},${this.g*255|0},${this.b*255|0},${this.a})`; 
     }
     
-    /** Returns this color expressed as 32 bit integer value
+    /** Returns this color expressed as 32 bit integer RGBA value
      * @return {Number} */
     rgbaInt()  
     {
         ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1 && this.a>=0 && this.a<=1);
         return (this.r*255|0) + (this.g*255<<8) + (this.b*255<<16) + (this.a*255<<24); 
     }
+
+    /** Returns this color expressed as a hex code
+     * @return {String} */
+    hex()
+    {
+        const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
+        return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b);
+    }
+
+    /** Set this color from a hex code
+     * @param {String} hex - html hex code
+     * @return {Color} */
+    setHex(hex)
+    {
+        const fromHex = (a)=> parseInt(hex.slice(a,a+2), 16)/255;
+        this.r = fromHex(1);
+        this.g = fromHex(3),
+        this.b = fromHex(5);
+        this.a = 1;
+        ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1);
+        return this;
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -469,7 +497,7 @@ class Timer
 
     /** Returns true if set and elapsed
      * @return {Boolean} */
-    elapsed() { return time >  this.time; }
+    elapsed() { return time > this.time; }
 
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {Number} */
@@ -478,4 +506,8 @@ class Timer
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {Number} */
     getPercent() { return this.isSet()? percent(this.time - time, this.setTime, 0) : 0; }
+    
+    /** Returns this timer expressed as a string
+     * @return {String} */
+    toString() { return this.unset() ? 'unset' : Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ); }
 }

package/engine/engineWebGL.js

@@ -47,24 +47,24 @@ function glInit()
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
-        'precision highp float;'+   // use highp for better accuracy, lowp for better perf
-        'uniform mat4 m;'+          // transform matrix
-        'attribute vec2 p,t;'+      // position, uv
-        'attribute vec4 c,a;'+      // color, additiveColor
-        'varying vec2 v;'+          // return uv
-        'varying vec4 d,e;'+        // return color, additiveColor
-        'void main(){'+             // shader entry point
-        'gl_Position=m*vec4(p,1,1);'+// transform position
-        'v=t;d=c;e=a;'+             // pass stuff to fragment shader
-        '}'                         // end of shader
+        'precision highp float;'+     // use highp for better accuracy
+        'uniform mat4 m;'+            // transform matrix
+        'attribute vec2 p,t;'+        // position, uv
+        'attribute vec4 c,a;'+        // color, additiveColor
+        'varying vec2 v;'+            // return uv
+        'varying vec4 d,e;'+          // return color, additiveColor
+        'void main(){'+               // shader entry point
+        'gl_Position=m*vec4(p,1,1);'+ // transform position
+        'v=t;d=c;e=a;'+               // pass stuff to fragment shader
+        '}'                           // end of shader
         ,
-        '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
-        'void main(){'+                      // shader entry point
-        'gl_FragColor=texture2D(j,v)*d+e;'+  // modulate texture by color plus additive
-        '}'                                  // end of shader
+        'precision highp float;'+           // use highp for better accuracy
+        'varying vec2 v;'+                  // uv
+        'varying vec4 d,e;'+                // color, additiveColor
+        'uniform sampler2D s;'+             // texture
+        'void main(){'+                     // shader entry point
+        'gl_FragColor=texture2D(s,v)*d+e;'+ // modulate texture by color plus additive
+        '}'                                 // end of shader
     );
 
     // init buffers
@@ -276,44 +276,44 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffff
 
     // prepare to create the verts from size and angle
     const c = Math.cos(angle)/2, s = Math.sin(angle)/2;
-    const cX = c*sizeX, cY = c*sizeY, sX = s*sizeX, sY = s*sizeY;
+    const cx = c*sizeX, cy = c*sizeY, sx = s*sizeX, sy = s*sizeY;
         
     // setup 2 triangles to form a quad
     let offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT;
 
     // vertex 0
-    glPositionData[offset++] = x - cX - sY;
-    glPositionData[offset++] = y - cY + sX;
+    glPositionData[offset++] = x - cx - sy;
+    glPositionData[offset++] = y - cy + sx;
     glPositionData[offset++] = uv0X; glPositionData[offset++] = uv1Y;
     glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
     
     // vertex 1
-    glPositionData[offset++] = x + cX + sY;
-    glPositionData[offset++] = y + cY - sX;
+    glPositionData[offset++] = x + cx + sy;
+    glPositionData[offset++] = y + cy - sx;
     glPositionData[offset++] = uv1X; glPositionData[offset++] = uv0Y;
     glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
     
     // vertex 2
-    glPositionData[offset++] = x - cX + sY;
-    glPositionData[offset++] = y + cY + sX;
+    glPositionData[offset++] = x - cx + sy;
+    glPositionData[offset++] = y + cy + sx;
     glPositionData[offset++] = uv0X; glPositionData[offset++] = uv0Y;
     glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
     
     // vertex 0
-    glPositionData[offset++] = x - cX - sY;      
-    glPositionData[offset++] = y - cY + sX;  
+    glPositionData[offset++] = x - cx - sy;      
+    glPositionData[offset++] = y - cy + sx;  
     glPositionData[offset++] = uv0X; glPositionData[offset++] = uv1Y;
     glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
 
     // vertex 3
-    glPositionData[offset++] = x + cX - sY;
-    glPositionData[offset++] = y - cY - sX;
+    glPositionData[offset++] = x + cx - sy;
+    glPositionData[offset++] = y - cy - sx;
     glPositionData[offset++] = uv1X; glPositionData[offset++] = uv1Y;
     glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
 
     // vertex 1
-    glPositionData[offset++] = x + cX + sY;
-    glPositionData[offset++] = y + cY - sX;
+    glPositionData[offset++] = x + cx + sy;
+    glPositionData[offset++] = y + cy - sx;
     glPositionData[offset++] = uv1X; glPositionData[offset++] = uv0Y;
     glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
 }