littlejsengine 1.9.0 → 1.9.1

package/package.json

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

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.9.0';
+const engineVersion = '1.9.1';
 
 /** Frames per second to update objects
  *  @type {Number}

package/src/engineDraw.js

@@ -61,7 +61,7 @@ let drawCount;
  * Create a tile info object
  * - This can take vecs or floats for easier use and conversion
  * - If an index is passed in, the tile size and index will determine the position
- * @param {(Number|Vector2)} [pos=Vector2()]        - Top left corner of tile in pixels or index
+ * @param {(Number|Vector2)} [pos=(0,0)]            - Top left corner of tile in pixels or index
  * @param {(Number|Vector2)} [size=tileSizeDefault] - Size of tile in pixels
  * @param {Number} [textureIndex]                   - Texture index to use
  * @return {TileInfo}
@@ -104,7 +104,7 @@ function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
 class TileInfo
 {
     /** Create a tile info object
-     *  @param {Vector2} [pos=Vector2()]        - Top left corner of tile in pixels
+     *  @param {Vector2} [pos=(0,0)]            - Top left corner of tile in pixels
      *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
      *  @param {Number}  [textureIndex]         - Texture index to use
      */
@@ -181,16 +181,16 @@ function worldToScreen(worldPos)
 }
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
- *  @param {Vector2} pos                            - Center of the tile in world space
- *  @param {Vector2} [size=Vector2(1,1)]            - Size of the tile in world space
- *  @param {TileInfo}[tileInfo]                     - Tile info to use, untextured if undefined
- *  @param {Color}   [color=Color()]                - Color to modulate with
- *  @param {Number}  [angle]                        - Angle to rotate by
- *  @param {Boolean} [mirror]                       - If true image is flipped along the Y axis
- *  @param {Color}   [additiveColor=Color(0,0,0,0)] - Additive color to be applied
- *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
- *  @param {Boolean} [screenSpace]                  - If true the pos and size are in screen space
- *  @param {CanvasRenderingContext2D} [context]     - Canvas 2D context to draw to
+ *  @param {Vector2} pos                        - Center of the tile in world space
+ *  @param {Vector2} [size=(1,1)]               - Size of the tile in world space
+ *  @param {TileInfo}[tileInfo]                 - Tile info to use, untextured if undefined
+ *  @param {Color}   [color=(1,1,1,1)]          - Color to modulate with
+ *  @param {Number}  [angle]                    - Angle to rotate by
+ *  @param {Boolean} [mirror]                   - If true image is flipped along the Y axis
+ *  @param {Color}   [additiveColor=(0,0,0,0)]  - Additive color to be applied
+ *  @param {Boolean} [useWebGL=glEnable]        - Use accelerated WebGL rendering
+ *  @param {Boolean} [screenSpace=false]        - If true the pos and size are in screen space
+ *  @param {CanvasRenderingContext2D} [context] - Canvas 2D context to draw to
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
@@ -258,11 +258,11 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
 
 /** Draw colored rect centered on pos
  *  @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]
  *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
@@ -272,8 +272,8 @@ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
 
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
- *  @param {Color}   [color=Color()]
- *  @param {Boolean} [screenSpace]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
 function drawPoly(points, color=new Color, screenSpace, context=mainContext)
@@ -289,9 +289,9 @@ function drawPoly(points, color=new Color, screenSpace, context=mainContext)
  *  @param {Vector2} posA
  *  @param {Vector2} posB
  *  @param {Number}  [thickness]
- *  @param {Color}   [color=Color()]
+ *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
@@ -307,7 +307,7 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, contex
  *  @param {Number}   angle
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
- *  @param {Boolean} [screenSpace]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
 function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
@@ -349,9 +349,9 @@ function setBlendMode(additive, useWebGL=glEnable, context)
  *  @param {String}  text
  *  @param {Vector2} pos
  *  @param {Number}  [size]
- *  @param {Color}   [color=Color()]
+ *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Number}  [lineWidth]
- *  @param {Color}   [lineColor=Color(0,0,0)]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D} [context=overlayContext]
@@ -366,9 +366,9 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  @param {String}  text
  *  @param {Vector2} pos
  *  @param {Number}  [size]
- *  @param {Color}   [color=Color()]
+ *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Number}  [lineWidth]
- *  @param {Color}   [lineColor=Color(0,0,0)]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {CanvasTextAlign}  [textAlign]
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D} [context=overlayContext]
@@ -411,9 +411,9 @@ let engineFontImage;
 class FontImage
 {
     /** Create an image font
-     *  @param {HTMLImageElement} [image] - Image for the font, if undefined default font is used
-     *  @param {Vector2} [tileSize=Vector2(8)] - Size of the font source tiles
-     *  @param {Vector2} [paddingSize=Vector2(0,1)] - How much extra space to add between characters
+     *  @param {HTMLImageElement} [image]    - Image for the font, if undefined default font is used
+     *  @param {Vector2} [tileSize=(8,8)]    - Size of the font source tiles
+     *  @param {Vector2} [paddingSize=(0,1)] - How much extra space to add between characters
      *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
      */
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)

package/src/engineInput.js

@@ -191,10 +191,10 @@ function inputUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 // Mouse event handlers
 
-onmousedown = (e)=> {isUsingGamepad = false; inputData[0][e.button] = 3; window.onmousemove(e); e.button && e.preventDefault();}
+onmousedown = (e)=> {isUsingGamepad = false; inputData[0][e.button] = 3; mousePosScreen = mouseToScreen(e); e.button && e.preventDefault();}
 onmouseup   = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
 onmousemove = (e)=> mousePosScreen = mouseToScreen(e);
-onwheel     = (e)=> e.ctrlKey || (mouseWheel = sign(e.deltaY));
+onwheel     = (e)=> mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
 oncontextmenu = (e)=> false; // prevent right click menu
 
 // convert a mouse or touch event position to screen space
@@ -288,7 +288,7 @@ function gamepadsUpdate()
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Pulse the vibration hardware if it exists
- *  @param {Number} [pattern] - a single value in miliseconds or vibration interval array
+ *  @param {Number|Array} [pattern] - single value in ms or vibration interval array
  *  @memberof Input */
 function vibrate(pattern=100)
 { vibrateEnable && navigator && navigator.vibrate && navigator.vibrate(pattern); }

package/src/engineObject.js

@@ -32,12 +32,12 @@
 class EngineObject
 {
     /** Create an engine object and adds it to the list of objects
-     *  @param {Vector2}  [pos=Vector2()]     - World space position of the object
-     *  @param {Vector2}  [size=Vector2(1,1)] - World space size of the object
-     *  @param {TileInfo} [tileInfo]          - Tile info to render object (undefined is untextured)
-     *  @param {Number}   [angle]             - Angle the object is rotated by
-     *  @param {Color}    [color=Color()]     - Color to apply to tile when rendered
-     *  @param {Number}   [renderOrder]       - Objects sorted by renderOrder before being rendered
+     *  @param {Vector2}  [pos=(0,0)]       - World space position of the object
+     *  @param {Vector2}  [size=(1,1)]      - World space size of the object
+     *  @param {TileInfo} [tileInfo]        - Tile info to render object (undefined is untextured)
+     *  @param {Number}   [angle]           - Angle the object is rotated by
+     *  @param {Color}    [color=(1,1,1,1)] - Color to apply to tile when rendered
+     *  @param {Number}   [renderOrder]     - Objects sorted by renderOrder before being rendered
      */
     constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color, renderOrder=0)
     {
@@ -337,7 +337,7 @@ class EngineObject
 
     /** Attaches a child to this with a given local transform
      *  @param {EngineObject} child
-     *  @param {Vector2}      [localPos=Vector2()]
+     *  @param {Vector2}      [localPos=(0,0)]
      *  @param {Number}       [localAngle] */
     addChild(child, localPos=vec2(), localAngle=0)
     {

package/src/engineParticles.js

@@ -31,10 +31,10 @@ class ParticleEmitter extends EngineObject
      *  @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 {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

package/src/engineTileLayer.js

@@ -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 */
@@ -169,11 +169,11 @@ class TileLayerData
 class TileLayer extends EngineObject
 {
     /** Create a tile layer object
-    *  @param {Vector2}  [position=Vector2()]     - World space position
+    *  @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=Vector2(1,1)]     - How much to scale this layer when rendered
-    *  @param {Number}   [renderOrder]            - Objects sorted by renderOrder before being rendered
+    *  @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(position, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderOrder=0)
     {
@@ -234,16 +234,18 @@ class TileLayer extends EngineObject
     }
 
     /** 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(true);
-        this.drawAllTileData();
+        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
+     *  - 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)
     {
@@ -251,17 +253,19 @@ class TileLayer extends EngineObject
         /** @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
@@ -279,32 +283,33 @@ class TileLayer extends EngineObject
         [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, false, (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)
         {
+            const pos = this.pos.add(layerPos).add(vec2(.5));
             ASSERT(mainContext == this.context, 'must call redrawStart() before drawing tiles');
-            const tileInfo = tile(d.tile, this.tileInfo.size, this.tileInfo.textureIndex);
+            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
@@ -324,11 +329,11 @@ class TileLayer extends EngineObject
         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)
@@ -353,10 +358,10 @@ class TileLayer extends EngineObject
         });
     }
 
-    /** 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, undefined, color, angle); }

package/src/engineUtilities.js

@@ -121,11 +121,11 @@ function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
 function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
- *  @param {Vector2} pointA  - Center of box A
- *  @param {Vector2} sizeA   - Size of box A
- *  @param {Vector2} pointB  - Center of box B
- *  @param {Vector2} sizeB   - Size of box B
- *  @return {Boolean}        - True if overlapping
+ *  @param {Vector2} pointA - Center of box A
+ *  @param {Vector2} sizeA  - Size of box A
+ *  @param {Vector2} pointB - Center of box B
+ *  @param {Vector2} sizeB  - Size of box B
+ *  @return {Boolean}       - True if overlapping
  *  @memberof Utilities */
 function isOverlapping(pointA, sizeA, pointB, sizeB)
 { 

package/src/engineWebGL.js

@@ -248,6 +248,8 @@ function glCopyToContext(context, forceDraw=false)
  *  @memberof WebGL */
 function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
 {
+    ASSERT(typeof rgba == 'number' && typeof rgbaAdditive == 'number', 'invalid color');
+
     // flush if there is not enough room or if different blend mode
     if (glInstanceCount >= gl_MAX_INSTANCES-1 || glBatchAdditive != glAdditive)
         glFlush();
@@ -276,7 +278,7 @@ let glPostShader, glPostArrayBuffer, glPostTexture, glPostIncludeOverlay;
  *  @param {String} shaderCode
  *  @param {Boolean} includeOverlay
  *  @memberof WebGL */
-function glInitPostProcess(shaderCode, includeOverlay)
+function glInitPostProcess(shaderCode, includeOverlay=false)
 {
     ASSERT(!glPostShader, 'can only have 1 post effects shader');
 
@@ -312,6 +314,8 @@ function glInitPostProcess(shaderCode, includeOverlay)
 
     // hide the original 2d canvas
     mainCanvas.style.visibility = 'hidden';
+    if (glPostIncludeOverlay)
+        overlayCanvas.style.visibility = 'hidden';
 }
 
 // Render the post processing shader, called automatically by the engine
@@ -332,14 +336,8 @@ function glRenderPostProcess()
         glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
     }
 
-    if (glPostIncludeOverlay)
-    {
-        // copy overlay canvas so it will be included in post processing
-        mainContext.drawImage(overlayCanvas, 0, 0);
-
-        // clear overlay canvas
-        overlayCanvas.width = mainCanvas.width;
-    }
+    // copy overlay canvas so it will be included in post processing
+    glPostIncludeOverlay && mainContext.drawImage(overlayCanvas, 0, 0);
 
     // setup shader program to draw one triangle
     glContext.useProgram(glPostShader);