littlejsengine 1.9.11 → 1.10.4

package/dist/littlejs.release.js

@@ -521,6 +521,7 @@ class Vector2
      * @param {Number} [length] */
     setDirection(direction, length=1)
     {
+        direction = mod(direction, 4);
         ASSERT(direction==0 || direction==1 || direction==2 || direction==3);
         return vec2(direction%2 ? direction-1 ? -length : length : 0, 
             direction%2 ? 0 : direction ? -length : length);
@@ -773,7 +774,7 @@ class Color
      * @return {String} */
     toString(useAlpha = true)      
     { 
-        const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
+        const toHex = (c)=> ((c=clamp(c)*255|0)<16 ? '0' : '') + c.toString(16);
         return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (useAlpha ? toHex(this.a) : '');
     }
     
@@ -1003,7 +1004,7 @@ let tileSizeDefault = vec2(16);
  *  @type {Number}
  *  @default
  *  @memberof Settings */
-let tileFixBleedScale = .5;
+let tileFixBleedScale = 0;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Object settings
@@ -1703,6 +1704,7 @@ class EngineObject
                         this.pos.x = oldPos.x;
                         this.velocity.x *= -this.elasticity;
                     }
+                    debugOverlay && debugPhysics && debugRect(this.pos, this.size, '#f00');
                 }
             }
         }
@@ -1905,12 +1907,13 @@ let drawCount;
 ///////////////////////////////////////////////////////////////////////////////
 
 /** 
- * Create a tile info object
+ * Create a tile info object using a grid based system
  * - 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=(0,0)]            - Top left corner of tile in pixels or index
+ * @param {(Number|Vector2)} [pos=0]                - Index of tile in sheet
  * @param {(Number|Vector2)} [size=tileSizeDefault] - Size of tile in pixels
  * @param {Number} [textureIndex]                   - Texture index to use
+ * @param {Number} [padding]                        - How many pixels padding around tiles
  * @return {TileInfo}
  * @example
  * tile(2)                       // a tile at index 2 using the default tile size of 16
@@ -1919,7 +1922,7 @@ let drawCount;
  * tile(vec2(4,8), vec2(30,10))  // a tile at pixel location (4,8) with a size of (30,10)
  * @memberof Draw
  */
-function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
+function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
 {
     if (headlessMode)
         return new TileInfo;
@@ -1931,17 +1934,17 @@ function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
         size = vec2(size);
     }
 
-    // if pos is a number, use it as a tile index
+    // use pos as a tile index
+    const textureInfo = textureInfos[textureIndex];
+    ASSERT(textureInfo, 'Texture not loaded');
+    const sizePadded = size.add(vec2(padding*2));
+    const cols = textureInfo.size.x / sizePadded.x |0;
     if (typeof pos === 'number')
-    {
-        const textureInfo = textureInfos[textureIndex];
-        ASSERT(textureInfo, 'Texture not loaded');
-        const cols = textureInfo.size.x / size.x |0;
-        pos = vec2((pos%cols)*size.x, (pos/cols|0)*size.y);
-    }
+        pos = vec2(pos%cols, pos/cols|0);
+    pos = vec2(pos.x*sizePadded.x+padding, pos.y*sizePadded.y+padding);
 
     // return a tile info object
-    return new TileInfo(pos, size, textureIndex); 
+    return new TileInfo(pos, size, textureIndex, padding); 
 }
 
 /** 
@@ -1953,8 +1956,9 @@ class TileInfo
      *  @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
+     *  @param {Number}  [padding]              - How many pixels padding around tiles
      */
-    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0)
+    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
     {
         /** @property {Vector2} - Top left corner of tile in pixels */
         this.pos = pos.copy();
@@ -1962,6 +1966,8 @@ class TileInfo
         this.size = size.copy();
         /** @property {Number} - Texture index to use */
         this.textureIndex = textureIndex;
+        /** @property {Number} - How many pixels padding around tiles */
+        this.padding = padding;
     }
 
     /** Returns a copy of this tile offset by a vector
@@ -1978,7 +1984,7 @@ class TileInfo
     frame(frame)
     {
         ASSERT(typeof frame == 'number');
-        return this.offset(vec2(frame*this.size.x, 0));
+        return this.offset(vec2(frame*(this.size.x+this.padding*2), 0));
     }
 
     /** Returns the texture info for this tile
@@ -2003,8 +2009,6 @@ class TextureInfo
         this.size = vec2(image.width, image.height);
         /** @property {WebGLTexture} - webgl texture */
         this.glTexture = glEnable && glCreateTexture(image);
-        /** @property {Vector2} - size to adjust tile to fix bleeding */
-        this.fixBleedSize = vec2(tileFixBleedScale).divide(this.size);
     }
 }
 
@@ -2073,11 +2077,12 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
         if (textureInfo)
         {
             // calculate uvs and render
-            const x = tileInfo.pos.x / textureInfo.size.x;
-            const y = tileInfo.pos.y / textureInfo.size.y;
-            const w = tileInfo.size.x / textureInfo.size.x;
-            const h = tileInfo.size.y / textureInfo.size.y;
-            const tileImageFixBleed = textureInfo.fixBleedSize;
+            const sizeInverse = vec2(1).divide(textureInfo.size);
+            const x = tileInfo.pos.x * sizeInverse.x;
+            const y = tileInfo.pos.y * sizeInverse.y;
+            const w = tileInfo.size.x * sizeInverse.x;
+            const h = tileInfo.size.y * sizeInverse.y;
+            const tileImageFixBleed = sizeInverse.scale(tileFixBleedScale);
             glSetTexture(textureInfo.glTexture);
             glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
                 x + tileImageFixBleed.x,     y + tileImageFixBleed.y, 
@@ -2094,6 +2099,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     {
         // normal canvas 2D rendering method (slower)
         showWatermark && ++drawCount;
+        size = vec2(size.x, -size.y); // fix upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
             if (textureInfo)
@@ -2147,6 +2153,74 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, contex
     drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
 }
 
+/** Draw colored polygon using passed in points
+ *  @param {Array}   points - Array of Vector2 points
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Boolean} [screenSpace=false]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
+function drawPoly(points, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
+{
+    context.fillStyle = color.toString();
+    context.beginPath();
+    for (const point of screenSpace ? points : points.map(worldToScreen))
+        context.lineTo(point.x, point.y);
+    context.closePath();
+    context.fill();
+    if (lineWidth)
+    {
+        context.strokeStyle = lineColor.toString();
+        context.lineWidth = screenSpace ? lineWidth : lineWidth*cameraScale;
+        context.stroke();
+    }
+}
+
+/** Draw colored ellipse using passed in point
+ *  @param {Vector2} pos
+ *  @param {Number}  [width=1]
+ *  @param {Number}  [height=1]
+ *  @param {Number}  [angle=0]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Boolean} [screenSpace=false]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
+function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
+{
+    if (!screenSpace)
+    {
+        pos = worldToScreen(pos);
+        width *= cameraScale;
+        height *= cameraScale;
+        lineWidth *= cameraScale;
+    }
+    context.fillStyle = color.toString();
+    context.beginPath();
+    context.ellipse(pos.x, pos.y, width, height, angle, 0, 9);
+    context.fill();
+    if (lineWidth)
+    {
+        context.strokeStyle = lineColor.toString();
+        context.lineWidth = lineWidth;
+        context.stroke();
+    }
+}
+
+/** Draw colored circle using passed in point
+ *  @param {Vector2} pos
+ *  @param {Number}  [radius=1]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
+ *  @param {Boolean} [screenSpace=false]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
+function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
+{ drawEllipse(pos, radius, radius, 0, color, lineWidth, lineColor, screenSpace, context); }
+
 /** Draw directly to a 2d canvas context in world space
  *  @param {Vector2}  pos
  *  @param {Vector2}  size
@@ -2201,10 +2275,11 @@ function setBlendMode(additive, useWebGL=glEnable, context)
  *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
+ *  @param {Number}  [maxWidth]
  *  @memberof Draw */
-function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, context)
+function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, context, maxWidth)
 {
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, context);
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, context, maxWidth);
 }
 
 /** Draw text on overlay canvas in screen space
@@ -2218,8 +2293,9 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  @param {CanvasTextAlign}  [textAlign]
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
+ *  @param {Number}  [maxWidth]
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext)
+function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext, maxWidth=undefined)
 {
     context.fillStyle = color.toString();
     context.lineWidth = lineWidth;
@@ -2232,8 +2308,8 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     pos = pos.copy();
     (text+'').split('\n').forEach(line=>
     {
-        lineWidth && context.strokeText(line, pos.x, pos.y);
-        context.fillText(line, pos.x, pos.y);
+        lineWidth && context.strokeText(line, pos.x, pos.y, maxWidth);
+        context.fillText(line, pos.x, pos.y, maxWidth);
         pos.y += size;
     });
 }
@@ -2336,13 +2412,14 @@ function isFullscreen() { return !!document.fullscreenElement; }
  *  @memberof Draw */
 function toggleFullscreen()
 {
+    const rootElement = mainCanvas.parentElement;
     if (isFullscreen())
     {
         if (document.exitFullscreen)
             document.exitFullscreen();
     }
-    else if (document.body.requestFullscreen)
-            document.body.requestFullscreen();
+    else if (rootElement.requestFullscreen)
+        rootElement.requestFullscreen();
 }
 /** 
  * LittleJS Input System
@@ -2513,7 +2590,6 @@ function inputInit()
 
     onkeydown = (e)=>
     {
-        if (debug && e.target != document.body) return;
         if (!e.repeat)
         {
             isUsingGamepad = false;
@@ -2526,7 +2602,6 @@ function inputInit()
 
     onkeyup = (e)=>
     {
-        if (debug && e.target != document.body) return;
         inputData[0][e.code] = 4;
         if (inputWASDEmulateDirection)
             inputData[0][remapKey(e.code)] = 4;
@@ -2728,7 +2803,7 @@ function touchInputInit()
             // set event pos and pass it along
             const p = vec2(e.touches[0].clientX, e.touches[0].clientY);
             mousePosScreen = mouseToScreen(p);
-            wasTouching ? isUsingGamepad = false : inputData[0][button] = 3;
+            wasTouching ? isUsingGamepad = touchGamepadEnable : inputData[0][button] = 3;
         }
         else if (wasTouching)
             inputData[0][button] = inputData[0][button] & 2 | 4;
@@ -3178,17 +3253,6 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
 {
     if (!soundEnable || headlessMode) return;
 
-    // prevent sounds from building up if they can't be played
-    if (audioContext.state != 'running')
-    {
-        // fix stalled audio
-        audioContext.resume().then(()=>
-            playSamples(sampleChannels, volume, rate, pan, loop, sampleRate, gainNode));
-
-        // prevent suspended sounds from building up
-        return;
-    }
-
     // create buffer and source
     const channelCount = sampleChannels.length;
     const sampleLength = sampleChannels[0].length;
@@ -3210,8 +3274,16 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
     const pannerNode = new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)});
     source.connect(pannerNode).connect(gainNode);
 
-    // play and return sound
-    source.start();
+    // play the sound
+    if (audioContext.state != 'running')
+    {
+        // fix stalled audio and play
+        audioContext.resume().then(()=>source.start());
+    }
+    else
+        source.start();
+
+    // return sound
     return source;
 }
 
@@ -3527,6 +3599,7 @@ function tileCollisionTest(pos, size=vec2(), object)
         if (tileData && (!object || object.collideWithTile(tileData, vec2(x, y))))
             return true;
     }
+    return false;
 }
 
 /** Return the center of first tile hit (does not return the exact intersection)
@@ -3550,7 +3623,7 @@ function tileCollisionRaycast(posStart, posEnd, object)
     let xi = unit.x * (delta.x < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1);
     let yi = unit.y * (delta.y < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1);
 
-    while (1)
+    while (true)
     {
         // check for tile collision
         const tileData = getTileCollisionData(pos);
@@ -4359,6 +4432,11 @@ let glCanvas;
  *  @memberof WebGL */
 let glContext;
 
+/** Shoule webgl be setup with antialiasing, must be set before calling engineInit
+ *  @type {Boolean}
+ *  @memberof WebGL */
+let glAntialias = true;
+
 // WebGL internal variables not exposed to documentation
 let glShader, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glInstanceCount, glAdditive, glBatchAdditive;
 
@@ -4371,10 +4449,11 @@ function glInit()
 
     // create the canvas and textures
     glCanvas = document.createElement('canvas');
-    glContext = glCanvas.getContext('webgl2');
+    glContext = glCanvas.getContext('webgl2', {antialias:glAntialias});
 
     // some browsers are much faster without copying the gl buffer so we just overlay it instead
-    glOverlay && document.body.appendChild(glCanvas);
+    const rootElement = mainCanvas.parentElement;
+    glOverlay && rootElement.appendChild(glCanvas);
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
@@ -4429,7 +4508,8 @@ function glPreRender()
     // set up the shader
     glContext.useProgram(glShader);
     glContext.activeTexture(gl_TEXTURE0);
-    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
+    if (textureInfos[0])
+        glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
 
     // set vertex attributes
     let offset = glAdditive = glBatchAdditive = 0;
@@ -4527,8 +4607,14 @@ function glCreateTexture(image)
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(gl_TEXTURE_2D, texture);
-    if (image)
+    if (image && image.width)
         glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
+    else
+    {
+        // create a white texture
+        const whitePixel = new Uint8Array([255, 255, 255, 255]);
+        glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, 1, 1, 0, gl_RGBA, gl_UNSIGNED_BYTE, whitePixel);
+    }
 
     // use point filtering for pixelated rendering
     const filter = canvasPixelated ? gl_NEAREST : gl_LINEAR;
@@ -4571,6 +4657,15 @@ function glCopyToContext(context, forceDraw=false)
         context.drawImage(glCanvas, 0, 0);
 }
 
+/** Set antialiasing for webgl canvas
+ *  @param {Boolean} [antialias]
+ *  @memberof WebGL */
+function glSetAntialias(antialias=true)
+{
+    ASSERT(!glCanvas, 'must be called before engineInit');
+    glAntialias = antialias;
+}
+
 /** Add a sprite to the gl draw list, used by all gl draw functions
  *  @param {Number} x
  *  @param {Number} y
@@ -4671,7 +4766,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.9.11';
+const engineVersion = '1.10.4';
 
 /** Frames per second to update
  *  @type {Number}
@@ -4715,7 +4810,6 @@ let timeReal = 0;
  *  @default false
  *  @memberof Engine */
 let paused = false;
-
 /** Set if game is paused
  *  @param {Boolean} isPaused
  *  @memberof Engine */
@@ -4748,9 +4842,10 @@ function engineAddPlugin(updateFunction, renderFunction)
  *  @param {Function} gameUpdatePost - Called after physics and objects are updated, setup camera and prepare for render
  *  @param {Function} gameRender     - Called before objects are rendered, draw any background effects that appear behind objects
  *  @param {Function} gameRenderPost - Called after objects are rendered, draw effects or hud that appear above all objects
- *  @param {Array} [imageSources=['tiles.png']] - Image to load
+ *  @param {Array} [imageSources=[]] - Image to load
+ *  @param {HTMLElement} [rootElement] - Root element to attach to, the document body by default
  *  @memberof Engine */
-function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
+function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
 {
     ASSERT(Array.isArray(imageSources), 'pass in images as array');
 
@@ -4792,6 +4887,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             for (const o of engineObjects)
                 o.parent || o.updateTransforms();
             inputUpdate();
+            pluginUpdateList.forEach(f=>f());
             debugUpdate();
             gameUpdatePost();
             inputUpdatePost();
@@ -4907,16 +5003,21 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     }
 
     // setup html
-    const styleBody = 
+    const styleRoot = 
         'margin:0;overflow:hidden;' + // fill the window
+        'width:100vw;height:100vh;' + // fill the window
+        'display:flex;' +             // use flexbox
+        'align-items:center;' +       // horizontal center
+        (canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
+        'justify-content:center;' +   // vertical center
         'background:#000;' +          // set background color
         'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
         (!touchInputEnable ? '' :     // no touch css setttings
         'touch-action:none;' +        // prevent mobile pinch to resize
         '-webkit-touch-callout:none');// compatibility for ios
-    document.body.style.cssText = styleBody;
-    document.body.appendChild(mainCanvas = document.createElement('canvas'));
+    rootElement.style.cssText = styleRoot;
+    rootElement.appendChild(mainCanvas = document.createElement('canvas'));
     mainContext = mainCanvas.getContext('2d');
 
     // init stuff and start engine
@@ -4926,13 +5027,14 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     glInit();
 
     // create overlay canvas for hud to appear above gl canvas
-    document.body.appendChild(overlayCanvas = document.createElement('canvas'));
+    rootElement.appendChild(overlayCanvas = document.createElement('canvas'));
     overlayContext = overlayCanvas.getContext('2d');
 
     // set canvas style
-    const styleCanvas = 'position:absolute;' +             // position
-        'top:50%;left:50%;transform:translate(-50%,-50%)'; // center
-    (glCanvas||mainCanvas).style.cssText = mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
+    const styleCanvas = 'position:absolute'; // allow canvases to overlap
+    mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
+    if (glCanvas)
+        glCanvas.style.cssText = styleCanvas;
     updateCanvas();
     
     // create promises for loading images
@@ -4949,19 +5051,32 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         })
     );
 
-    // draw splash screen
-    showSplashScreen && promises.push(new Promise(resolve => 
+    if (!imageSources.length)
     {
-        let t = 0;
-        console.log(`${engineName} Engine v${engineVersion}`);
-        updateSplash();
-        function updateSplash()
+        // no images to load
+        promises.push(new Promise(resolve => 
         {
-            clearInput();
-            drawEngineSplashScreen(t+=.01);
-            t>1 ? resolve() : setTimeout(updateSplash, 16);
-        }
-    }));
+            textureInfos[0] = new TextureInfo(new Image);
+            resolve();
+        }));
+    }
+
+    if (showSplashScreen)
+    {
+        // draw splash screen
+        promises.push(new Promise(resolve => 
+        {
+            let t = 0;
+            console.log(`${engineName} Engine v${engineVersion}`);
+            updateSplash();
+            function updateSplash()
+            {
+                clearInput();
+                drawEngineSplashScreen(t+=.01);
+                t>1 ? resolve() : setTimeout(updateSplash, 16);
+            }
+        }));
+    }
 
     // load all of the images
     Promise.all(promises).then(startEngine);

package/examples/box2d/game.js

@@ -15,6 +15,9 @@
 setShowSplashScreen(true);
 //box2dDebug = 1; // enable box2d debug draw
 
+// fix texture bleeding by shrinking tile slightly
+tileFixBleedScale = .2;
+
 // game variables
 const maxScenes = 11;
 let scene = 0;
@@ -153,4 +156,4 @@ function gameRenderPost()
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine with Box2D
 
-box2dEngineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+box2dEngineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/box2d/index.html

@@ -1,13 +1,14 @@
 <!DOCTYPE html><head>
-<title>Little JS Starter Project</title>
+<title>LittleJS Box2D Example</title>
+<meta charset=utf-8>
 <meta name=apple-mobile-web-app-capable content=yes>
 <meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
 <script src=../../dist/littlejs.js></script>
-<script src=../../plugins/Box2D_v2.3.1_min.wasm.js?198></script>
-<script src=../../plugins/box2d.js?198></script>
-<script src=scenes.js?198></script>
-<script src=gameObjects.js?198></script>
-<script src=game.js?198></script>
+<script src=../../plugins/Box2D_v2.3.1_min.wasm.js?1100></script>
+<script src=../../plugins/box2d.js?1100></script>
+<script src=scenes.js?1100></script>
+<script src=gameObjects.js?1100></script>
+<script src=game.js?1100></script>

package/examples/breakout/game.js

@@ -135,4 +135,4 @@ function setupPostProcess()
 
 ///////////////////////////////////////////////////////////////////////////////
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, ['tiles.png']);

package/examples/breakout/index.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html><head>
-<title>Little JS Breakout Game</title>
+<title>LittleJS Breakout Game</title>
+<meta charset=utf-8>
 <meta name=apple-mobile-web-app-capable content=yes>
 <meta name=mobile-web-app-capable content=yes>
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../dist/littlejs.js?198></script>
+<script src=../../dist/littlejs.js?1100></script>
 <script src=../../plugins/postProcess.js></script>
-<script src=gameObjects.js?198></script>
-<script src=game.js?198></script>
+<script src=gameObjects.js?1100></script>
+<script src=game.js?1100></script>

package/examples/breakoutTutorial/README.md

@@ -53,6 +53,8 @@ for(let y=0; y<=levelSize.y; y+=1)
 ## Move the Camera
 
 Let’s move the camera to the center of our level by setting the cameraPos variable to half the level size.
+You can also change the camera zoom by using camaraScale which controls the number of pixels for each world space unit.
+For this example the camera will just remain stationary, but in other types of games it is very useful!
 
 ```javascript
 setCameraPos(levelSize.scale(.5)); // center camera in level
@@ -307,7 +309,7 @@ collideWithObject(o)
 But wait! This will cause the ball to careen through the bricks without bouncing. Maybe fun for a special powerup, but not our goal here. This function should return a Boolean value to indicate if the collision needs to be resolved, if it returns false then the ball will not bounce. So the answer is to just add another line of code to the collideWithObject function that returns a truthy value indicating that the collision should occur.
 
 ```javascript
-return 1; // allow object to collide
+return true; // allow object to collide
 ```
 
 ![LittleJS Screenshot](images/8.png)
@@ -356,7 +358,7 @@ To play the sound we will override collideWithObject for the Ball class. Also re
 collideWithObject(o)              
 {
     sound_bounce.play(); // play bounce sound
-    return 1; // allow object to collide
+    return true; // allow object to collide
 }
 ```
 Let’s also make a brick break sound. You can use the ZzFX sound designer again to create your own sound, for this one try the Hit preset.
@@ -422,12 +424,12 @@ const color = this.color;
 new ParticleEmitter(
     this.pos, 0,            // pos, angle
     this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emiteCone
-    0,                      // tileInfo
+    undefined,              // tileInfo
     color, color,           // colorStartA, colorStartB
     color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB
     .2, .5, 1, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed
     .99, .95, .4, PI,   // damping, angleDamping, gravityScale, cone
-    .1, .5, 0, 1        // fadeRate, randomness, collide, additive
+    .1, .5, false, true // fadeRate, randomness, collide, additive
 );
 ```
 
@@ -446,7 +448,7 @@ collideWithObject(o)
 {
     // prevent colliding with paddle if moving upwards
     if (o == paddle && this.velocity.y > 0)
-        return 0;
+        return false;
 
     sound_bounce.play(); // play bounce sound
 
@@ -460,10 +462,10 @@ collideWithObject(o)
         this.velocity.y = max(-this.velocity.y, .2);
         
         // prevent default collision code
-        return 0;
+        return false;
     }
 
-    return 1; // allow object to collide
+    return true; // allow object to collide
 }
 ```