littlejsengine 1.8.9 → 1.9.1

package/src/engineParticles.js

@@ -25,36 +25,36 @@ 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|Vector2}  [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
-     *  @param {Number}  [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
+     *  @param {Number} [angle] - Angle to emit the particles
+     *  @param {Number|Vector2}  [emitSize] - World space size of the emitter (float for circle diameter, vec2 for rect)
+     *  @param {Number} [emitTime] - How long to stay alive (0 is forever)
+     *  @param {Number} [emitRate] - How many particles per second to spawn, does not emit if 0
+     *  @param {Number} [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
      *  @param {TileInfo} [tileInfo] - Tile info to render particles (undefined is untextured)
-     *  @param {Color}   [colorStartA=Color()] - Color at start of life 1, randomized between start colors
-     *  @param {Color}   [colorStartB=Color()] - Color at start of life 2, randomized between start colors
-     *  @param {Color}   [colorEndA=Color(1,1,1,0)] - Color at end of life 1, randomized between end colors
-     *  @param {Color}   [colorEndB=Color(1,1,1,0)] - Color at end of life 2, randomized between end colors
-     *  @param {Number}  [particleTime=.5]      - How long particles live
-     *  @param {Number}  [sizeStart=.1]         - How big are particles at start
-     *  @param {Number}  [sizeEnd=1]            - How big are particles at end
-     *  @param {Number}  [speed=.1]             - How fast are particles when spawned
-     *  @param {Number}  [angleSpeed=.05]       - How fast are particles rotating
-     *  @param {Number}  [damping=1]            - How much to dampen particle speed
-     *  @param {Number}  [angleDamping=1]       - How much to dampen particle angular speed
-     *  @param {Number}  [gravityScale=0]       - How much does gravity effect particles
-     *  @param {Number}  [particleConeAngle=PI] - Cone for start particle angle
-     *  @param {Number}  [fadeRate=.1]          - How quick to fade in particles at start/end in percent of life
-     *  @param {Number}  [randomness=.2]        - Apply extra randomness percent
-     *  @param {Boolean} [collideTiles=0]       - Do particles collide against tiles
-     *  @param {Boolean} [additive=0]           - Should particles use addtive blend
-     *  @param {Boolean} [randomColorLinear=1]  - Should color be randomized linearly or across each component
-     *  @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
-     *  @param {Boolean}  [localSpace=0]        - Should it be in local space of emitter (world space is default)
+     *  @param {Color} [colorStartA=(1,1,1,1)] - Color at start of life 1, randomized between start colors
+     *  @param {Color} [colorStartB=(1,1,1,1)] - Color at start of life 2, randomized between start colors
+     *  @param {Color} [colorEndA=(1,1,1,0)] - Color at end of life 1, randomized between end colors
+     *  @param {Color} [colorEndB=(1,1,1,0)] - Color at end of life 2, randomized between end colors
+     *  @param {Number} [particleTime]      - How long particles live
+     *  @param {Number} [sizeStart]         - How big are particles at start
+     *  @param {Number} [sizeEnd]           - How big are particles at end
+     *  @param {Number} [speed]             - How fast are particles when spawned
+     *  @param {Number} [angleSpeed]        - How fast are particles rotating
+     *  @param {Number} [damping]           - How much to dampen particle speed
+     *  @param {Number} [angleDamping]      - How much to dampen particle angular speed
+     *  @param {Number} [gravityScale]      - How much gravity effect particles
+     *  @param {Number} [particleConeAngle] - Cone for start particle angle
+     *  @param {Number} [fadeRate]          - How quick to fade particles at start/end in percent of life
+     *  @param {Number} [randomness]    - Apply extra randomness percent
+     *  @param {Boolean} [collideTiles] - Do particles collide against tiles
+     *  @param {Boolean} [additive]     - Should particles use addtive blend
+     *  @param {Boolean} [randomColorLinear] - Should color be randomized linearly or across each component
+     *  @param {Number} [renderOrder] - Render order for particles (additive is above other stuff by default)
+     *  @param {Boolean}  [localSpace] - Should it be in local space of emitter (world space is default)
      */
     constructor
     ( 
-        pos,
+        position,
         angle,
         emitSize = 0,
         emitTime = 0,
@@ -76,14 +76,14 @@ class ParticleEmitter extends EngineObject
         particleConeAngle = PI,
         fadeRate = .1,
         randomness = .2, 
-        collideTiles,
-        additive,
-        randomColorLinear = 1,
+        collideTiles = false,
+        additive = false,
+        randomColorLinear = true,
         renderOrder = additive ? 1e9 : 0,
-        localSpace
+        localSpace = false
     )
     {
-        super(pos, vec2(), tileInfo, angle, undefined, renderOrder);
+        super(position, vec2(), tileInfo, angle, undefined, renderOrder);
 
         // emitter settings
         /** @property {Number|Vector2} - World space size of the emitter (float for circle diameter, vec2 for rect) */
@@ -132,14 +132,17 @@ class ParticleEmitter extends EngineObject
         this.randomness        = randomness;
         /** @property {Boolean} - Do particles collide against tiles */
         this.collideTiles      = collideTiles;
-        /** @property {Number} - Should particles use addtive blend */
+        /** @property {Boolean} - Should particles use addtive blend */
         this.additive          = additive;
         /** @property {Boolean} - Should it be in local space of emitter */
-        this.localSpace          = localSpace;
-        /** @property {Number} - If set the partile is drawn as a trail, stretched in the drection of velocity */
+        this.localSpace        = localSpace;
+        /** @property {Number} - If non zero the partile is drawn as a trail, stretched in the drection of velocity */
         this.trailScale        = 0;
-
-        // internal variables
+        /** @property {Function}   - Callback when particle is destroyed */
+        this.particleDestroyCallback = undefined;
+        /** @property {Function}   - Callback when particle is created */
+        this.particleCreateCallback = undefined;
+        /** @property {Number} - Track particle emit time */
         this.emitTimeBuffer    = 0;
     }
     
@@ -171,18 +174,16 @@ class ParticleEmitter extends EngineObject
     emitParticle()
     {
         // spawn a particle
-        let pos = this.emitSize.x != undefined ? // check if vec2 was used for size
-            vec2(rand(-.5,.5), rand(-.5,.5))
-                .multiply(this.emitSize).rotate(this.angle) // box emitter
-            : randInCircle(this.emitSize/2);                // circle emitter
+        let pos = typeof this.emitSize === 'number' ? // check if number was used
+            randInCircle(this.emitSize/2)              // circle emitter
+            : vec2(rand(-.5,.5), rand(-.5,.5))         // box emitter
+                .multiply(this.emitSize).rotate(this.angle)
         let angle = rand(this.particleConeAngle, -this.particleConeAngle);
         if (!this.localSpace)
         {
             pos = this.pos.add(pos);
             angle += this.angle;
         }
-            
-        const particle = new Particle(pos, this.tileInfo, this.tileSize, angle);
 
         // randomness scales each paremeter by a percentage
         const randomness = this.randomness;
@@ -198,30 +199,21 @@ class ParticleEmitter extends EngineObject
         const colorStart    = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
         const colorEnd      = randColor(this.colorEndA,   this.colorEndB, this.randomColorLinear);
         const velocityAngle = this.localSpace ? coneAngle : this.angle + coneAngle;
+        
+        // build particle
+        const particle = new Particle(pos, this.tileInfo, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, this.fadeRate, this.additive,  this.trailScale, this.localSpace && this, this.particleDestroyCallback);
+        particle.velocity     = vec2().setAngle(velocityAngle, speed);
+        particle.fadeRate     = this.fadeRate;
+        particle.damping      = this.damping;
+        particle.angleDamping = this.angleDamping;
+        particle.elasticity   = this.elasticity;
+        particle.friction     = this.friction;
+        particle.gravityScale = this.gravityScale;
+        particle.collideTiles = this.collideTiles;
+        particle.renderOrder  = this.renderOrder;
+        particle.mirror       = !!randInt(2);
 
-        // build particle settings
-        particle.colorStart    = colorStart;
-        particle.colorEndDelta = colorEnd.subtract(colorStart);
-        particle.velocity      = vec2().setAngle(velocityAngle, speed);
-        particle.angleVelocity = angleSpeed;
-        particle.lifeTime      = particleTime;
-        particle.sizeStart     = sizeStart;
-        particle.sizeEndDelta  = sizeEnd - sizeStart;
-        particle.fadeRate      = this.fadeRate;
-        particle.damping       = this.damping;
-        particle.angleDamping  = this.angleDamping;
-        particle.elasticity    = this.elasticity;
-        particle.friction      = this.friction;
-        particle.gravityScale  = this.gravityScale;
-        particle.collideTiles  = this.collideTiles;
-        particle.additive      = this.additive;
-        particle.renderOrder   = this.renderOrder;
-        particle.trailScale    = this.trailScale;
-        particle.mirror        = randInt(2);
-        particle.localSpaceEmitter = this.localSpace && this;
-
-        // setup callbacks for particles
-        particle.destroyCallback = this.particleDestroyCallback;
+        // call particle create callaback
         this.particleCreateCallback && this.particleCreateCallback(particle);
 
         // return the newly created particle
@@ -240,13 +232,47 @@ class ParticleEmitter extends EngineObject
 class Particle extends EngineObject
 {
     /**
-     * Create a particle with the given settings
-     * @param {Vector2} position                   - World space position of the particle
-     * @param {TileInfo} [tileInfo]                - Tile info to render particles (undefined is untextured)
-     * @param {Number}  [angle=0]                  - Angle to rotate the particle
+     * Create a particle with the given shis.colorStart = undefined;ettings
+     * @param {Vector2}  position     - World space position of the particle
+     * @param {TileInfo} [tileInfo]   - Tile info to render particles
+     * @param {Number}   [angle]      - Angle to rotate the particle
+     * @param {Color}    [colorStart] - Color at start of life
+     * @param {Color}    [colorEnd]   - Color at end of life
+     * @param {Number}   [lifeTime]   - How long to live for
+     * @param {Number}   [sizeStart]  - Angle to rotate the particle
+     * @param {Number}   [sizeEnd]    - Angle to rotate the particle
+     * @param {Number}   [fadeRate]   - Angle to rotate the particle
+     * @param {Boolean}  [additive]   - Angle to rotate the particle
+     * @param {Number}   [trailScale] - If a trail, how long to make it
+     * @param {ParticleEmitter} [localSpaceEmitter] - Parent emitter if local space
+     * @param {Function}  [destroyCallback] - Called when particle dies
      */
-    constructor(pos, tileInfo, angle)
-    { super(pos, vec2(), tileInfo, angle); }
+    constructor(position, tileInfo, angle, colorStart, colorEnd, lifeTime, sizeStart, sizeEnd, fadeRate, additive, trailScale, localSpaceEmitter, destroyCallback
+    )
+    { 
+        super(position, vec2(), tileInfo, angle); 
+    
+        /** @property {Color} - Color at start of life */
+        this.colorStart = colorStart;
+        /** @property {Color} - Calculated change in color */
+        this.colorEndDelta = colorEnd.subtract(colorStart);
+        /** @property {Number} - How long to live for */
+        this.lifeTime = lifeTime;
+        /** @property {Number} - Size at start of life */
+        this.sizeStart = sizeStart;
+        /** @property {Number} - Calculated change in size */
+        this.sizeEndDelta = sizeEnd - sizeStart;
+        /** @property {Number} - How quick to fade in/out */
+        this.fadeRate = fadeRate;
+        /** @property {Boolean} - Is it additive */
+        this.additive = additive;
+        /** @property {Number} - If a trail, how long to make it */
+        this.trailScale = trailScale;
+        /** @property {ParticleEmitter} - Parent emitter if local space */
+        this.localSpaceEmitter = localSpaceEmitter;
+        /** @property {Function} - Called when particle dies */
+        this.destroyCallback = destroyCallback;
+    }
 
     /** Render the particle, automatically called each frame, sorted by renderOrder */
     render()
@@ -264,7 +290,7 @@ class Particle extends EngineObject
              (p < fadeRate ? p/fadeRate : p > 1-fadeRate ? (1-p)/fadeRate : 1)); // fade alpha
 
         // draw the particle
-        this.additive && setBlendMode(1);
+        this.additive && setBlendMode(true);
 
         let pos = this.pos, angle = this.angle;
         if (this.localSpaceEmitter)

package/src/engineRelease.js

@@ -7,7 +7,7 @@
 'use strict';
 
 let showWatermark = 0;
-let debugKey = 0;
+let debugKey = '';
 const debug = 0;
 const debugOverlay = 0;
 const debugPhysics = 0;

package/src/engineSettings.js

@@ -41,7 +41,7 @@ let canvasFixedSize = vec2();
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let canvasPixelated = 1;
+let canvasPixelated = true;
 
 /** Default font used for text rendering
  *  @type {String}
@@ -53,7 +53,7 @@ let fontDefault = 'arial';
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let showSplashScreen = 0;
+let showSplashScreen = false;
 
 ///////////////////////////////////////////////////////////////////////////////
 // WebGL settings
@@ -62,13 +62,13 @@ let showSplashScreen = 0;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let glEnable = 1;
+let glEnable = true;
 
 /** Fixes slow rendering in some browsers by not compositing the WebGL canvas
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let glOverlay = 1;
+let glOverlay = true;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Tile sheet settings
@@ -92,7 +92,7 @@ let tileFixBleedScale = .3;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let enablePhysicsSolver = 1;
+let enablePhysicsSolver = true;
 
 /** Default object mass for collison calcuations (how heavy objects are)
  *  @type {Number}
@@ -114,7 +114,7 @@ let objectDefaultAngleDamping = 1;
 
 /** How much to bounce when a collision occurs (0-1)
  *  @type {Number}
- *  @default 0
+ *  @default
  *  @memberof Settings */
 let objectDefaultElasticity = 0;
 
@@ -132,7 +132,7 @@ let objectMaxSpeed = 1;
 
 /** How much gravity to apply to objects along the Y axis, negative is down
  *  @type {Number}
- *  @default 0
+ *  @default
  *  @memberof Settings */
 let gravity = 0;
 
@@ -149,33 +149,33 @@ let particleEmitRateScale = 1;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let gamepadsEnable = 1;
+let gamepadsEnable = true;
 
 /** If true, the dpad input is also routed to the left analog stick (for better accessability)
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let gamepadDirectionEmulateStick = 1;
+let gamepadDirectionEmulateStick = true;
 
 /** If true the WASD keys are also routed to the direction keys (for better accessability)
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let inputWASDEmulateDirection = 1;
+let inputWASDEmulateDirection = true;
 
 /** True if touch gamepad should appear on mobile devices
  *  - Supports left analog stick, 4 face buttons and start button (button 9)
  *  - Must be set by end of gameInit to be activated
  *  @type {Boolean}
- *  @default 0
+ *  @default
  *  @memberof Settings */
-let touchGamepadEnable = 0;
+let touchGamepadEnable = false;
 
 /** True if touch gamepad should be analog stick or false to use if 8 way dpad
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let touchGamepadAnalog = 1;
+let touchGamepadAnalog = true;
 
 /** Size of virutal gamepad for touch devices in pixels
  *  @type {Number}
@@ -193,7 +193,7 @@ let touchGamepadAlpha = .3;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let vibrateEnable = 1;
+let vibrateEnable = true;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Audio settings
@@ -202,7 +202,7 @@ let vibrateEnable = 1;
  *  @type {Boolean}
  *  @default
  *  @memberof Settings */
-let soundEnable = 1;
+let soundEnable = true;
 
 /** Volume scale to apply to all sound, music and speech
  *  @type {Number}
@@ -251,9 +251,9 @@ let medalDisplayIconSize = 50;
 
 /** Set to stop medals from being unlockable (like if cheats are enabled)
  *  @type {Boolean}
- *  @default 0
+ *  @default
  *  @memberof Settings */
-let medalsPreventUnlock;
+let medalsPreventUnlock = false;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Setters for global variables
@@ -324,12 +324,12 @@ function setEnablePhysicsSolver(enable) { enablePhysicsSolver = enable; }
 function setObjectDefaultMass(mass) { objectDefaultMass = mass; }
 
 /** Set how much to slow velocity by each frame
- *  @param {Number} damping
+ *  @param {Number} damp
  *  @memberof Settings */
 function setObjectDefaultDamping(damp) { objectDefaultDamping = damp; }
 
 /** Set how much to slow angular velocity each frame
- *  @param {Number} damping
+ *  @param {Number} damp
  *  @memberof Settings */
 function setObjectDefaultAngleDamping(damp) { objectDefaultAngleDamping = damp; }
 
@@ -349,9 +349,9 @@ function setObjectDefaultFriction(friction) { objectDefaultFriction = friction;
 function setObjectMaxSpeed(speed) { objectMaxSpeed = speed; }
 
 /** Set how much gravity to apply to objects along the Y axis
- *  @param {Number} gravity
+ *  @param {Number} newGravity
  *  @memberof Settings */
-function setGravity(g) { gravity = g; }
+function setGravity(newGravity) { gravity = newGravity; }
 
 /** Set to scales emit rate of particles
  *  @param {Number} scale
@@ -449,6 +449,6 @@ function setMedalsPreventUnlock(preventUnlock) { medalsPreventUnlock = preventUn
 function setShowWatermark(show) { showWatermark = show; }
 
 /** Set key code used to toggle debug mode, Esc by default
- *  @param {Number} key
+ *  @param {String} key
  *  @memberof Debug */
 function setDebugKey(key) { debugKey = key; }

package/src/engineTileLayer.js

@@ -35,7 +35,7 @@ function initTileCollision(size)
 
 /** Set tile collision data
  *  @param {Vector2} pos
- *  @param {Number}  [data=0]
+ *  @param {Number}  [data]
  *  @memberof TileCollision */
 function setTileCollisionData(pos, data=0)
 {
@@ -53,7 +53,7 @@ function getTileCollisionData(pos)
 
 /** Check if collision with another object should occur
  *  @param {Vector2}      pos
- *  @param {Vector2}      [size=Vector2(1,1)]
+ *  @param {Vector2}      [size=(1,1)]
  *  @param {EngineObject} [object]
  *  @return {Boolean}
  *  @memberof TileCollision */
@@ -68,7 +68,7 @@ function tileCollisionTest(pos, size=vec2(), object)
     {
         const tileData = tileCollision[y*tileCollisionSize.x+x];
         if (tileData && (!object || object.collideWithTile(tileData, vec2(x, y))))
-            return 1;
+            return true;
     }
 }
 
@@ -134,11 +134,11 @@ function tileCollisionRaycast(posStart, posEnd, object)
 class TileLayerData
 {
     /** 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=Color()] - Color of the tile */
-    constructor(tile, direction=0, mirror=0, color=new Color())
+     *  @param {Number}  [tile]      - The tile to use, untextured if undefined
+     *  @param {Number}  [direction] - Integer direction of tile, in 90 degree increments
+     *  @param {Boolean} [mirror]    - If the tile should be mirrored along the x axis
+     *  @param {Color}   [color]     - Color of the tile */
+    constructor(tile, direction=0, mirror=false, color=new Color())
     {
         /** @property {Number}  - The tile to use, untextured if undefined */
         this.tile      = tile;
@@ -151,7 +151,7 @@ class TileLayerData
     }
 
     /** Set this tile to clear, it will not be rendered */
-    clear() { this.tile = this.direction = this.mirror = 0; color = new Color; }
+    clear() { this.tile = this.direction = 0; this.mirror = false; this.color = new Color; }
 }
 
 /**
@@ -168,25 +168,25 @@ class TileLayerData
  */
 class TileLayer extends EngineObject
 {
-/** Create a tile layer object
-    *  @param {Vector2} [position=Vector2()]       - World space position
-    *  @param {Vector2} [size=tileCollisionSize]   - World space size
-    *  @param {TileInfo} [tileInfo]                - Tile info for layer
-    *  @param {Vector2} [scale=Vector2(1,1)]       - How much to scale this layer when rendered
-    *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
+    /** Create a tile layer object
+    *  @param {Vector2}  [position=(0,0)]     - World space position
+    *  @param {Vector2}  [size=tileCollisionSize] - World space size
+    *  @param {TileInfo} [tileInfo]    - Tile info for layer
+    *  @param {Vector2}  [scale=(1,1)] - How much to scale this layer when rendered
+    *  @param {Number}   [renderOrder] - Objects are sorted by renderOrder
     */
-constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderOrder=0)
+    constructor(position, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderOrder=0)
     {
-        super(pos, size, tileInfo, 0, undefined, renderOrder);
+        super(position, size, tileInfo, 0, undefined, renderOrder);
 
-        /** @property {HTMLCanvasElement}        - The canvas used by this tile layer */
+        /** @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 */
+        /** @property {Vector2} - How much to scale this layer when rendered */
         this.scale = scale;
-        /** @property {Boolean} [isOverlay=0]    - If true this layer will render to overlay canvas and appear above all objects */
-        this.isOverlay;
+        /** @property {Boolean} - If true this layer will render to overlay canvas and appear above all objects */
+        this.isOverlay = false;
 
         // init tile data
         this.data = [];
@@ -195,10 +195,10 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     }
     
     /** Set data at a given position in the array 
-     *  @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)
+     *  @param {Vector2}       layerPos - Local position in array
+     *  @param {TileLayerData} data     - Data to set
+     *  @param {Boolean}       [redraw] - Force the tile to redraw if true */
+    setData(layerPos, data, redraw=false)
     {
         if (layerPos.arrayCheck(this.size))
         {
@@ -219,7 +219,7 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     // Render the tile layer, called automatically by the engine
     render()
     {
-        ASSERT(mainContext != this.context); // must call redrawEnd() after drawing tiles
+        ASSERT(mainContext != this.context, 'must call redrawEnd() after drawing tiles');
 
         // flush and copy gl canvas because tile canvas does not use webgl
         glEnable && !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
@@ -234,33 +234,38 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     }
 
     /** Draw all the tile data to an offscreen canvas 
-     *  - This may be slow in some browsers
-    */
+     *  - This may be slow in some browsers but only needs to be done once */
     redraw()
     {
-        this.redrawStart(1);
-        this.drawAllTileData();
+        this.redrawStart(true);
+        for (let x = this.size.x; x--;)
+        for (let y = this.size.y; y--;)
+            this.drawTileData(vec2(x,y), false);
         this.redrawEnd();
     }
 
     /** Call to start the redraw process
-     *  @param {Boolean} [clear=0] - Should it clear the canvas before drawing */
-    redrawStart(clear = 0)
+     *  - This can be used to manually update small parts of the level
+     *  @param {Boolean} [clear] - Should it clear the canvas before drawing */
+    redrawStart(clear=false)
     {
         // save current render settings
+        /** @type {[HTMLCanvasElement, CanvasRenderingContext2D, Vector2, Vector2, number]} */
         this.savedRenderSettings = [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale];
 
-        // hack: use normal rendering system to render the tiles
+        // use webgl rendering system to render the tiles if enabled
+        // this works by temporally taking control of the rendering system
         mainCanvas = this.canvas;
         mainContext = this.context;
+        mainCanvasSize = this.size.multiply(this.tileInfo.size);
         cameraPos = this.size.scale(.5);
         cameraScale = this.tileInfo.size.x;
 
         if (clear)
         {
             // clear and set size
-            mainCanvas.width  = this.size.x * this.tileInfo.size.x;
-            mainCanvas.height = this.size.y * this.tileInfo.size.y;
+            mainCanvas.width  = mainCanvasSize.x;
+            mainCanvas.height = mainCanvasSize.y;
         }
 
         // begin a new render for the tile canvas
@@ -270,40 +275,41 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
     /** Call to end the redraw process */
     redrawEnd()
     {
-        ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
-        glEnable && glCopyToContext(mainContext, 1);
+        ASSERT(mainContext == this.context, 'must call redrawStart() before drawing tiles');
+        glEnable && glCopyToContext(mainContext, true);
         //debugSaveCanvas(this.canvas);
 
         // set stuff back to normal
         [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale] = this.savedRenderSettings;
     }
 
-    /** Draw the tile at a given position
-     *  @param {Vector2} layerPos */
-    drawTileData(layerPos)
+    /** Draw the tile at a given position in the tile grid
+     *  This can be used to clear out tiles when they are destroyed
+     *  Tiles can also be redrawn if isinde a redrawStart/End block
+     *  @param {Vector2} layerPos 
+     *  @param {Boolean} [clear] - should the old tile be cleared out
+     */
+    drawTileData(layerPos, clear=true)
     {
-        // first clear out where the tile was
-        const pos = layerPos.floor().add(this.pos).add(vec2(.5));
-        this.drawCanvas2D(pos, vec2(1), 0, 0, (context)=>context.clearRect(-.5, -.5, 1, 1));
+        // clear out where the tile was, for full opaque tiles this can be skipped
+        const s = this.tileInfo.size;
+        if (clear)
+        {
+            const pos = layerPos.multiply(s);
+            this.context.clearRect(pos.x, this.canvas.height-pos.y, s.x, -s.y);
+        }
 
         // draw the tile if not undefined
         const d = this.getData(layerPos);
         if (d.tile != undefined)
         {
-            ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
-            const tileInfo = tile(d.tile, this.tileInfo.size, this.tileInfo.textureIndex);
+            const pos = this.pos.add(layerPos).add(vec2(.5));
+            ASSERT(mainContext == this.context, 'must call redrawStart() before drawing tiles');
+            const tileInfo = tile(d.tile, s, this.tileInfo.textureIndex);
             drawTile(pos, vec2(1), tileInfo, d.color, d.direction*PI/2, d.mirror);
         }
     }
 
-    /** Draw all the tiles in this layer */
-    drawAllTileData()
-    {
-        for (let x = this.size.x; x--;)
-        for (let y = this.size.y; y--;)
-             this.drawTileData(vec2(x,y));
-    }
-
     /** Draw directly to the 2D canvas in world space (bipass webgl)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
@@ -323,11 +329,11 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
         context.restore();
     }
 
-    /** Draw a tile directly onto the layer canvas
+    /** Draw a tile directly onto the layer canvas in world space
      *  @param {Vector2}  pos
-     *  @param {Vector2}  [size=Vector2(1,1)]
+     *  @param {Vector2}  [size=(1,1)]
      *  @param {TileInfo} [tileInfo]
-     *  @param {Color}    [color=Color()]
+     *  @param {Color}    [color=(1,1,1,1)]
      *  @param {Number}   [angle=0]
      *  @param {Boolean}  [mirror=0] */
     drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
@@ -352,11 +358,11 @@ constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderO
         });
     }
 
-    /** Draw a rectangle directly onto the layer canvas
+    /** Draw a rectangle directly onto the layer canvas in world space
      *  @param {Vector2} pos
-     *  @param {Vector2} [size=Vector2(1,1)]
-     *  @param {Color}   [color=Color()]
+     *  @param {Vector2} [size=(1,1)]
+     *  @param {Color}   [color=(1,1,1,1)]
      *  @param {Number}  [angle=0] */
     drawRect(pos, size, color, angle) 
-    { this.drawTile(pos, size, -1, 0, color, angle); }
+    { this.drawTile(pos, size, undefined, color, angle); }
 }