littlejsengine 1.1.2 → 1.1.3

package/engine/engineTileLayer.js

@@ -1,25 +1,29 @@
 /** 
- *  LittleJS Tile Layer System
- *  <br> - Caches arrays of tiles to offscreen canvas for fast rendering
- *  <br> - Unlimted numbers of layers, allocates canvases as needed
- *  <br> - Interfaces with EngineObject for collision
- *  <br> - Collision layer is separate from visible layers
- *  <br> - Tile layers can be drawn to using their context with canvas2d
- *  <br> - It is recommended to have a visible layer that matches the collision
- *  @namespace TileLayer
+ * LittleJS Tile Layer System
+ * <br> - Caches arrays of tiles to off screen canvas for fast rendering
+ * <br> - Unlimted numbers of layers, allocates canvases as needed
+ * <br> - Interfaces with EngineObject for collision
+ * <br> - Collision layer is separate from visible layers
+ * <br> - It is recommended to have a visible layer that matches the collision
+ * <br> - Tile layers can be drawn to using their context with canvas2d
+ * <br> - Drawn directly to the main canvas without using WebGL
+ * @namespace TileCollision
  */
 
 'use strict';
 
-///////////////////////////////////////////////////////////////////////////////
-// Tile Collision
+/** The tile collision layer array, use setTileCollisionData and getTileCollisionData to access
+ *  @memberof TileCollision */
+let tileCollision = [];
 
-// Internal variables not exposed to documentation
-let tileCollision = [], tileCollisionSize = vec2();
+/** Size of the tile collision layer
+ *  @type {Vector2} 
+ *  @memberof TileCollision */
+let tileCollisionSize = vec2();
 
 /** Clear and initialize tile collision
  *  @param {Vector2} size
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 function initTileCollision(size)
 {
     tileCollisionSize = size;
@@ -31,14 +35,14 @@ function initTileCollision(size)
 /** Set tile collision data
  *  @param {Vector2} pos
  *  @param {Number}  [data=0]
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 const setTileCollisionData = (pos, data=0)=>
     pos.arrayCheck(tileCollisionSize) && (tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] = data);
 
 /** Get tile collision data
  *  @param {Vector2} pos
  *  @return {Number}
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 const getTileCollisionData = (pos)=>
     pos.arrayCheck(tileCollisionSize) ? tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] : 0;
 
@@ -47,13 +51,13 @@ const getTileCollisionData = (pos)=>
  *  @param {Vector2}      [size=new Vector2(1,1)]
  *  @param {EngineObject} [object]
  *  @return {Boolean}
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 function tileCollisionTest(pos, size=vec2(), object)
 {
-    const minX = max(Math.floor(pos.x - size.x/2), 0);
-    const minY = max(Math.floor(pos.y - size.y/2), 0);
-    const maxX = min(pos.x + size.x/2, tileCollisionSize.x-1);
-    const maxY = min(pos.y + size.y/2, tileCollisionSize.y-1);
+    const minX = max(pos.x - size.x/2|0, 0);
+    const minY = max(pos.y - size.y/2|0, 0);
+    const maxX = min(pos.x + size.x/2, tileCollisionSize.x);
+    const maxY = min(pos.y + size.y/2, tileCollisionSize.y);
     for (let y = minY; y < maxY; ++y)
     for (let x = minX; x < maxX; ++x)
     {
@@ -68,7 +72,7 @@ function tileCollisionTest(pos, size=vec2(), object)
  *  @param {Vector2}      posEnd
  *  @param {EngineObject} [object]
  *  @return {Vector2}
- *  @memberof TileLayer */
+ *  @memberof TileCollision */
 function tileCollisionRaycast(posStart, posEnd, object)
 {
     // test if a ray collides with tiles from start to end
@@ -102,23 +106,32 @@ function tileCollisionRaycast(posStart, posEnd, object)
 ///////////////////////////////////////////////////////////////////////////////
 // Tile Layer Rendering System
 
-// Reuse canvas autmatically when destroyed
-const tileLayerCanvasCache = [];
-
-/** Tile layer data object stores info about how to render a tile */
+/**
+ * Tile layer data object stores info about how to render a tile
+ * @example
+ * // create tile layer data with tile index 0 and random orientation and color
+ * const tileIndex = 0;
+ * const direction = randInt(4)
+ * const mirror = randInt(2);
+ * const color = randColor();
+ * const data = new TileLayerData(tileIndex, direction, mirror, color);
+ */
 class TileLayerData
 {
-    /** Create a tile layer data object
-     *  @param {Number}  [tile] - The tile to use, untextured if undefined
-     *  @param {Number}  [direction=0] - Integer direction of tile, in 90 degree increments
-     *  @param {Boolean} [mirror=0] - If the tile should be mirrored along the x axis
-     *  @param {Color}   [color=new Color(1,1,1)] - Color of the tile
-     */
+    /** Create a tile layer data object, one for each tile in a TileLayer
+     *  @param {Number}  [tile]                   - The tile to use, untextured if undefined
+     *  @param {Number}  [direction=0]            - Integer direction of tile, in 90 degree increments
+     *  @param {Boolean} [mirror=0]               - If the tile should be mirrored along the x axis
+     *  @param {Color}   [color=new Color(1,1,1)] - Color of the tile */
     constructor(tile, direction=0, mirror=0, color=new Color)
     {
+        /** @property {Number}  - The tile to use, untextured if undefined */
         this.tile      = tile;
+        /** @property {Number}  - Integer direction of tile, in 90 degree increments */
         this.direction = direction;
+        /** @property {Boolean} - If the tile should be mirrored along the x axis */
         this.mirror    = mirror;
+        /** @property {Color}   - Color of the tile */
         this.color     = color;
     }
 
@@ -126,44 +139,49 @@ class TileLayerData
     clear() { this.tile = this.direction = this.mirror = 0; color = new Color; }
 }
 
-/** Tile layer object - cached rendering system for tile layers */
+/**
+ * Tile layer object - cached rendering system for tile layers
+ * <br> - Each Tile layer is rendered to an off screen canvas
+ * <br> - To allow dynamic modifications, layers are rendered using canvas 2d
+ * <br> - Some devices like mobile phones are limited to 4k texture resolution
+ * <br> - So with 16x16 tiles this limits layers to 256x256 on mobile devices
+ * @extends EngineObject
+ * @example
+ * // create tile collision and visible tile layer
+ * initTileCollision(vec2(200,100));
+ * const tileLayer = new TileLayer();
+ */
 class TileLayer extends EngineObject
 {
-    /** Create a tile layer data object
+    /** Create a tile layer object
      *  @param {Vector2} [position=new Vector2(0,0)] - World space position
-     *  @param {Vector2} [size=defaultObjectSize] - World space size
-     *  @param {Vector2} [scale=new Vector2(1,1)] - How much to scale this in world space
-     *  @param {Number}  [renderOrder=0] - Objects sorted by renderOrder before being rendered
+     *  @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, scale=vec2(1), renderOrder=0)
+    constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
     {
-        super(pos, size);
+        super(pos, size, -1, tileSize, 0, undefined, renderOrder);
 
-        // create new canvas if necessary
-        this.canvas = tileLayerCanvasCache.length ? tileLayerCanvasCache.pop() : document.createElement('canvas');
+        /** @property {HTMLCanvasElement}        - The canvas used by this tile layer */
+        this.canvas = document.createElement('canvas');
+        /** @property {CanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
         this.context = this.canvas.getContext('2d');
+        /** @property {Vector2}                  - How much to scale this layer when rendered */
         this.scale = scale;
-        this.tileSize = defaultTileSize.copy();
-        this.renderOrder = renderOrder;
-        this.flushGLBeforeRender = 1;
+        /** @property {Boolean} [isOverlay=0]    - If true this layer will render to overlay canvas and appear above all objects */
+        this.isOverlay;
 
         // init tile data
         this.data = [];
         for (let j = this.size.area(); j--;)
             this.data.push(new TileLayerData());
     }
-
-    /** Destroy this tile layer */
-    destroy()
-    {
-        // add canvas back to the cache
-        tileLayerCanvasCache.push(this.canvas);
-        super.destroy();
-    }
     
     /** Set data at a given position in the array 
-     *  @param {Vector2}       position - Local position in array
-     *  @param {TileLayerData} data - Data to set
+     *  @param {Vector2}       position   - Local position in array
+     *  @param {TileLayerData} data       - Data to set
      *  @param {Boolean}       [redraw=0] - Force the tile to redraw if true */
     setData(layerPos, data, redraw)
     {
@@ -188,50 +206,48 @@ class TileLayer extends EngineObject
     {
         ASSERT(mainContext != this.context); // must call redrawEnd() after drawing tiles
 
-        // flush and copy gl canvas because tile canvas does not use gl
-        this.flushGLBeforeRender && glEnable && glCopyToContext(mainContext);
+        // flush and copy gl canvas because tile canvas does not use webgl
+        glEnable && !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
         
-        // draw the entire cached level onto the main canvas
+        // draw the entire cached level onto the canvas
         const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
-        mainContext.drawImage
+        (this.isOverlay ? overlayContext : mainContext).drawImage
         (
             this.canvas, pos.x, pos.y,
             cameraScale*this.size.x*this.scale.x, cameraScale*this.size.y*this.scale.y
         );
     }
 
-    /** Draw all the tile data to an offscreen canvas using webgl if possible */
+    /** Draw all the tile data to an offscreen canvas 
+     *  - This may be slow in some browsers
+    */
     redraw()
     {
-        this.redrawStart();
+        this.redrawStart(1);
         this.drawAllTileData();
         this.redrawEnd();
     }
 
     /** Call to start the redraw process
-     *  @param {Boolean} [clear=1] - Should it clear the canvas before drawing */
-    redrawStart(clear = 1)
+     *  @param {Boolean} [clear=0] - Should it clear the canvas before drawing */
+    redrawStart(clear = 0)
     {
-        // clear and set size
-        const width  = this.size.x * this.tileSize.x;
-        const height = this.size.y * this.tileSize.y;
         if (clear)
         {
-            this.canvas.width  = width;
-            this.canvas.height = height;
+            // clear and set size
+            this.canvas.width  = this.size.x * this.tileSize.x;
+            this.canvas.height = this.size.y * this.tileSize.y;
         }
 
         // save current render settings
-        this.savedRenderSettings = [mainCanvasSize, mainCanvas, mainContext, cameraScale, cameraPos];
+        this.savedRenderSettings = [mainCanvas, mainContext, cameraPos, cameraScale];
 
-        // set camera transform for renering
-        cameraScale = this.tileSize.x;
-        cameraPos = this.size.scale(.5);
+        // use normal rendering system to render the tiles
         mainCanvas = this.canvas;
         mainContext = this.context;
-        mainContext.imageSmoothingEnabled = !pixelated; // disable smoothing for pixel art
-        mainCanvasSize = vec2(width, height);
-        glPreRender(width, height);
+        cameraPos = this.size.scale(.5);
+        cameraScale = this.tileSize.x;
+        enginePreRender();
     }
 
     /** Call to end the redraw process */
@@ -242,7 +258,7 @@ class TileLayer extends EngineObject
         //debugSaveCanvas(this.canvas);
 
         // set stuff back to normal
-        [mainCanvasSize, mainCanvas, mainContext, cameraScale, cameraPos] = this.savedRenderSettings;
+        [mainCanvas, mainContext, cameraPos, cameraScale] = this.savedRenderSettings;
     }
 
     /** Draw the tile at a given position
@@ -270,13 +286,13 @@ class TileLayer extends EngineObject
              this.drawTileData(vec2(x,y));
     }
 
-    /** Draw directly to the 2d canvas in world space (bipass webgl)
+    /** Draw directly to the 2D canvas in world space (bipass webgl)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
-     *  @param {Number}   angle
-     *  @param {Boolean}  mirror
+     *  @param {Number}   [angle=0]
+     *  @param {Boolean}  [mirror=0]
      *  @param {Function} drawFunction */
-    drawCanvas2D(pos, size, angle, mirror, drawFunction)
+    drawCanvas2D(pos, size, angle=0, mirror, drawFunction)
     {
         const context = this.context;
         context.save();
@@ -284,7 +300,7 @@ class TileLayer extends EngineObject
         size = size.multiply(this.tileSize);
         context.translate(pos.x, this.canvas.height - pos.y);
         context.rotate(angle);
-        context.scale(mirror?-size.x:size.x, size.y);
+        context.scale(mirror ? -size.x : size.x, size.y);
         drawFunction(context);
         context.restore();
     }
@@ -293,11 +309,11 @@ class TileLayer extends EngineObject
      *  @param {Vector2} pos
      *  @param {Vector2} [size=new Vector2(1,1)]
      *  @param {Number}  [tileIndex=-1]
-     *  @param {Vector2} [tileSize=defaultTileSize]
+     *  @param {Vector2} [tileSize=tileSizeDefault]
      *  @param {Color}   [color=new Color(1,1,1)]
      *  @param {Number}  [angle=0]
      *  @param {Boolean} [mirror=0] */
-    drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, color=new Color, angle=0, mirror)
+    drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle, mirror)
     {
         this.drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
@@ -310,7 +326,7 @@ class TileLayer extends EngineObject
             else
             {
                 const cols = tileImage.width/tileSize.x;
-                context.globalAlpha = color.a; // full color not supported in this mode
+                context.globalAlpha = color.a; // only alpha, no color, is supported in this mode
                 context.drawImage(tileImage, 
                     (tileIndex%cols)*tileSize.x, (tileIndex/cols|0)*tileSize.x, 
                     tileSize.x, tileSize.y, -.5, -.5, 1, 1);
@@ -323,5 +339,5 @@ 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, 0); }
+    drawRect(pos, size, color, angle) { this.drawTile(pos, size, -1, 0, color, angle); }
 }

package/engine/engineUtilities.js

@@ -1,10 +1,10 @@
 /**
- *  LittleJS Utility Classes and Functions
- *  <br> - General purpose math library
- *  <br> - Vector2 - fast, simple, easy 2D vector class
- *  <br> - Color - holds a rgba color with some math functions
- *  <br> - Timer - tracks time automatically
- *  @namespace Utilities
+ * LittleJS Utility Classes and Functions
+ * <br> - General purpose math library
+ * <br> - Vector2 - fast, simple, easy 2D vector class
+ * <br> - Color - holds a rgba color with some math functions
+ * <br> - Timer - tracks time automatically
+ * @namespace Utilities
  */
 
 'use strict';
@@ -14,23 +14,12 @@
  *  @memberof Utilities */
 const PI = Math.PI;
 
-/** True if running a Chromium based browser
- *  @const
- *  @memberof Utilities */
-const isChrome = window['chrome'];
-
 /** Returns absoulte value of value passed in
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
 const abs = (a)=> a < 0 ? -a : a;
 
-/** Returns the sign of value passed in
- *  @param {Number} value
- *  @return {Number}
- *  @memberof Utilities */
-const sign = (a)=> a < 0 ? -1 : 1;
-
 /** Returns lowest of two values passed in
  *  @param {Number} valueA
  *  @param {Number} valueB
@@ -45,54 +34,54 @@ const min = (a, b)=> a < b ?  a : b;
  *  @memberof Utilities */
 const max = (a, b)=> a > b ?  a : b;
 
+/** Returns the sign of value passed in (also returns 1 if 0)
+ *  @param {Number} value
+ *  @return {Number}
+ *  @memberof Utilities */
+const sign = (a)=> a < 0 ? -1 : 1;
+
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {Number} dividend
- *  @param {Number} divisor
+ *  @param {Number} [divisor=1]
  *  @return {Number}
  *  @memberof Utilities */
-const mod = (a, b)=> ((a % b) + b) % b;
+const mod = (a, b=1)=> ((a % b) + b) % b;
 
 /** Clamps the value beween max and min
  *  @param {Number} value
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const clamp = (v, max=1, min=0)=> (ASSERT(max > min), v < min ? min : v > max ? max : v);
+const clamp = (v, min=0, max=1)=> v < min ? min : v > max ? max : v;
 
 /** Returns what percentage the value is between max and min
  *  @param {Number} value
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const percent = (v, max=1, min=0)=> max-min ? clamp((v-min) / (max-min)) : 0;
+const percent = (v, min=0, max=1)=> max-min ? clamp((v-min) / (max-min)) : 0;
 
 /** Linearly interpolates the percent value between max and min
  *  @param {Number} percent
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const lerp = (p, max=1, min=0)=> min + clamp(p) * (max-min);
+const lerp = (p, min=0, max=1)=> min + clamp(p) * (max-min);
 
-/** Formats seconds to 00:00 style for display purposes 
- *  @param {Number} t - time in seconds
- *  @return {String}
- *  @memberof Utilities */
-const formatTime = (t)=> (t/60|0)+':'+(t%60<10?'0':'')+(t%60|0);
-
-/** Returns the nearest power of two not less then the value
+/** Applies smoothstep function to the percentage value
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-const nearestPowerOfTwo = (v)=> 2**Math.ceil(Math.log2(v));
+const smoothStep = (p)=> p * p * (3 - 2 * p);
 
-/** Applies smoothstep function to the percentage value
+/** Returns the nearest power of two not less then the value
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-const smoothStep = (p)=> p * p * (3 - 2 * p);
+const nearestPowerOfTwo = (v)=> 2**Math.ceil(Math.log2(v));
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
  *  @param {Vector2} pointA - Center of box A
@@ -111,6 +100,12 @@ const isOverlapping = (pA, sA, pB, sB)=> abs(pA.x - pB.x)*2 < sA.x + sB.x & abs(
  *  @memberof Utilities */
 const wave = (frequency=1, amplitude=1, t=time)=> amplitude/2 * (1 - Math.cos(t*frequency*2*PI));
 
+/** Formats seconds to mm:ss style for display purposes 
+ *  @param {Number} t - time in seconds
+ *  @return {String}
+ *  @memberof Utilities */
+const formatTime = (t)=> (t/60|0)+':'+(t%60<10?'0':'')+(t%60|0);
+
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Random global functions
@@ -133,7 +128,7 @@ const randInt = (a=1, b=0)=> rand(a,b)|0;
 /** Randomly returns either -1 or 1
  *  @return {Number}
  *  @memberof Random */
-const randSign = ()=> (rand(2)|0)*2-1;
+const randSign = ()=> (rand(2)|0) * 2 - 1;
 
 /** Returns a random Vector2 within a circular shape
  *  @param {Number} [radius=1]
@@ -169,25 +164,46 @@ let randSeed = 1;
 const randSeeded = (a=1, b=0)=>
 {
     randSeed ^= randSeed << 13; randSeed ^= randSeed >>> 17; randSeed ^= randSeed << 5; // xorshift
-    return b + (a-b)*abs(randSeed % 1e9)/1e9;
+    return b + (a-b) * abs(randSeed % 1e9) / 1e9;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
- *  @param {Number} [x=0]
- *  @param {Number} [y=0]
- *  @return {Vector2}
- *  @memberof Utilities */
+/** 
+ * Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
+ * @param {Number} [x=0]
+ * @param {Number} [y=0]
+ * @return {Vector2}
+ * @example
+ * let a = vec2(0, 1); // vector with coordinates (0, 1)
+ * let b = vec2(a);    // copy a into b
+ * a = vec2(5);        // set a to (5, 5)
+ * b = vec2();         // set b to (0, 0)
+ * @memberof Utilities
+ */
 const vec2 = (x=0, y)=> x.x == undefined ? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y);
 
-/** 2D Vector object with vector math library */
+/** 
+ * 2D Vector object with vector math library
+ * <br> - Functions do not change this so they can be chained together
+ * @example
+ * let a = new Vector2(2, 3); // vector with coordinates (2, 3)
+ * let b = new Vector2;       // vector with coordinates (0, 0)
+ * let c = vec2(4, 2);        // use the vec2 function to make a Vector2
+ * let d = a.add(b).scale(5); // operators can be chained
+ */
 class Vector2
 {
     /** Create a 2D vector with the x and y passed in, can also be created with vec2()
-     *  @param {Number} [x=0] - x axis position
-     *  @param {Number} [y=0] - y axis position */
-    constructor(x=0, y=0) { this.x = x; this.y = y; }
+     *  @param {Number} [x=0] - X axis location
+     *  @param {Number} [y=0] - Y axis location */
+    constructor(x=0, y=0)
+    {
+        /** @property {Number} - X axis location */
+        this.x = x;
+        /** @property {Number} - Y axis location */
+        this.y = y;
+    }
 
     /** Returns a new vector that is a copy of this
      *  @return {Vector2} */
@@ -278,10 +294,6 @@ class Vector2
      * @return {Vector2} */
     invert() { return new Vector2(this.y, -this.x); }
 
-    /** Returns a copy of this vector with the axies flipped
-     * @return {Vector2} */
-    flip() { return new Vector2(this.y, this.x); }
-
     /** Returns a copy of this vector with each axis floored
      * @return {Vector2} */
     floor() { return new Vector2(Math.floor(this.x), Math.floor(this.y)); }
@@ -304,15 +316,31 @@ class Vector2
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Color object (red, green, blue, alpha) with some helpful functions */
+/** 
+ * Color object (red, green, blue, alpha) with some helpful functions
+ * @example
+ * let a = new Color;             // white
+ * let b = new Color(1, 0, 0);    // red
+ * let c = new Color(0, 0, 0, 0); // transparent black
+ */
 class Color
 {
     /** Create a color with the components passed in, white by default
-     *  @param {Number} [r=1] - red
-     *  @param {Number} [g=1] - green
-     *  @param {Number} [b=1] - blue
-     *  @param {Number} [a=1] - alpha */
-    constructor(r=1, g=1, b=1, a=1) { this.r=r; this.g=g; this.b=b; this.a=a; }
+     *  @param {Number} [red=1]
+     *  @param {Number} [green=1]
+     *  @param {Number} [blue=1]
+     *  @param {Number} [alpha=1] */
+    constructor(r=1, g=1, b=1, a=1)
+    {
+        /** @property {Number} - Red */
+        this.r = r;
+        /** @property {Number} - Green */
+        this.g = g;
+        /** @property {Number} - Blue */
+        this.b = b;
+        /** @property {Number} - Alpha */
+        this.a = a;
+    }
 
     /** Returns a new color that is a copy of this
      * @return {Color} */
@@ -409,7 +437,15 @@ class Color
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Timer object tracks how long has passed since it was set */
+/**
+ * Timer object tracks how long has passed since it was set
+ * @example
+ * let a = new Timer;    // creates a timer that is not set
+ * a.set(3);             // sets the timer to 3 seconds
+ *
+ * let b = new Timer(1); // creates a timer with 1 second left
+ * b.unset();            // unsets the timer
+ */
 class Timer
 {
     /** Create a timer object set time passed in
@@ -435,11 +471,11 @@ class Timer
      * @return {Boolean} */
     elapsed() { return time >  this.time; }
 
-    /** Get how long since elapsed, returns 0 if not set
+    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {Number} */
     get() { return this.isSet()? time - this.time : 0; }
 
     /** 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, 0, this.setTime) : 0; }
+    getPercent() { return this.isSet()? percent(this.time - time, this.setTime, 0) : 0; }
 }