littlejsengine 1.10.4 → 1.10.7

package/dist/littlejs.release.js

@@ -239,7 +239,8 @@ function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
  *  @memberof Random */
 function rand(valueA=1, valueB=0) { return valueB + Math.random() * (valueA-valueB); }
 
-/** Returns a floored random value the two values passed in
+/** Returns a floored random value between the two values passed in
+ *  The upper bound is exclusive. (If 2 is passed in, result will be 0 or 1)
  *  @param {Number} valueA
  *  @param {Number} [valueB]
  *  @return {Number}
@@ -368,18 +369,24 @@ class Vector2
      *  @param {Number} [y] - Y axis location */
     constructor(x=0, y=0)
     {
-        ASSERT(typeof x == 'number' && typeof y == 'number');
         /** @property {Number} - X axis location */
         this.x = x;
         /** @property {Number} - Y axis location */
         this.y = y;
+        ASSERT(this.isValid());
     }
 
     /** Sets values of this vector and returns self
      *  @param {Number} [x] - X axis location
      *  @param {Number} [y] - Y axis location
      *  @return {Vector2} */
-    set(x=0, y=0) { this.x=x; this.y=y; return this; }
+    set(x=0, y=0)
+    {
+        this.x = x;
+        this.y = y;
+        ASSERT(this.isValid());
+        return this;
+    }
 
     /** Returns a new vector that is a copy of this
      *  @return {Vector2} */
@@ -571,6 +578,14 @@ class Vector2
         if (debug)
             return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`;
     }
+
+    /** Checks if this is a valid vector
+     * @return {Boolean} */
+    isValid()
+    {
+        return typeof this.x == 'number' && !isNaN(this.x)
+            && typeof this.y == 'number' && !isNaN(this.y);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -631,6 +646,7 @@ class Color
         this.b = b;
         /** @property {Number} - Alpha */
         this.a = a;
+        ASSERT(this.isValid());
     }
 
     /** Sets values of this color and returns self
@@ -640,7 +656,14 @@ class Color
      *  @param {Number} [a] - alpha
      *  @return {Color} */
     set(r=1, g=1, b=1, a=1)
-    { this.r=r; this.g=g; this.b=b; this.a=a; return this; }
+    {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+        ASSERT(this.isValid());
+        return this;
+    }
 
     /** Returns a new color that is a copy of this
      * @return {Color} */
@@ -723,6 +746,7 @@ class Color
         this.g = f(p, q, h);
         this.b = f(p, q, h - 1/3);
         this.a = a;
+        ASSERT(this.isValid());
         return this;
     }
 
@@ -750,7 +774,6 @@ class Color
             else if (b == max)
                 h =  (r - g) / d + 4;
         }
-
         return [h / 6, s, l, a];
     }
 
@@ -783,11 +806,27 @@ class Color
      * @return {Color} */
     setHex(hex)
     {
-        const fromHex = (c)=> clamp(parseInt(hex.slice(c,c+2),16)/255);
-        this.r = fromHex(1);
-        this.g = fromHex(3),
-        this.b = fromHex(5);
-        this.a = hex.length > 7 ? fromHex(7) : 1;
+        ASSERT(typeof hex == 'string' && hex[0] == '#');
+        ASSERT([4,5,7,9].includes(hex.length), 'Invalid hex');
+
+        if (hex.length < 6)
+        {
+            const fromHex = (c)=> clamp(parseInt(hex[c],16)/15);
+            this.r = fromHex(1);
+            this.g = fromHex(2),
+            this.b = fromHex(3);
+            this.a = hex.length == 5 ? fromHex(4) : 1;
+        }
+        else
+        {
+            const fromHex = (c)=> clamp(parseInt(hex.slice(c,c+2),16)/255);
+            this.r = fromHex(1);
+            this.g = fromHex(3),
+            this.b = fromHex(5);
+            this.a = hex.length == 9 ? fromHex(7) : 1;
+        }
+
+        ASSERT(this.isValid());
         return this;
     }
     
@@ -801,6 +840,16 @@ class Color
         const a = clamp(this.a)*255<<24;
         return r + g + b + a;
     }
+
+    /** Checks if this is a valid color
+     * @return {Boolean} */
+    isValid()
+    {
+        return typeof this.r == 'number' && !isNaN(this.r)
+            && typeof this.g == 'number' && !isNaN(this.g)
+            && typeof this.b == 'number' && !isNaN(this.b)
+            && typeof this.a == 'number' && !isNaN(this.a);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1436,7 +1485,7 @@ class EngineObject
      *  @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)
+    constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color=new Color, renderOrder=0)
     {
         // set passed in params
         ASSERT(isVector2(pos) && isVector2(size), 'ensure pos and size are vec2s');
@@ -1550,15 +1599,18 @@ class EngineObject
 
         // apply physics
         const oldPos = this.pos.copy();
-        this.pos.x += this.velocity.x *= this.damping;
-        this.pos.y += this.velocity.y = this.damping * this.velocity.y 
-            + gravity * this.gravityScale;
+        this.velocity.x *= this.damping;
+        this.velocity.y *= this.damping;
+        if (this.mass) // dont apply gravity to static objects
+            this.velocity.y += gravity * this.gravityScale;
+        this.pos.x += this.velocity.x;
+        this.pos.y += this.velocity.y;
         this.angle += this.angleVelocity *= this.angleDamping;
 
         // physics sanity checks
         ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
         ASSERT(this.damping >= 0 && this.damping <= 1);
-        if (!enablePhysicsSolver || !this.mass) // dont do collision for fixed objects
+        if (!enablePhysicsSolver || !this.mass) // dont do collision for static objects
             return;
 
         const wasMovingDown = this.velocity.y < 0;
@@ -1919,7 +1971,7 @@ let drawCount;
  * tile(2)                       // a tile at index 2 using the default tile size of 16
  * tile(5, 8)                    // a tile at index 5 using a tile size of 8
  * tile(1, 16, 3)                // a tile at index 1 of size 16 on texture 3
- * tile(vec2(4,8), vec2(30,10))  // a tile at pixel location (4,8) with a size of (30,10)
+ * tile(vec2(4,8), vec2(30,10))  // a tile at index (4,8) with a size of (30,10)
  * @memberof Draw
  */
 function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
@@ -2468,7 +2520,7 @@ function keyWasReleased(key, device=0)
 
 /** Clears all input
  *  @memberof Input */
-function clearInput() { inputData = [[]]; }
+function clearInput() { inputData = [[]]; touchGamepadButtons = []; }
 
 /** Returns true if mouse button is down
  *  @function
@@ -2633,6 +2685,7 @@ function inputInit()
     onmousemove   = (e)=> mousePosScreen = mouseToScreen(e);
     onwheel       = (e)=> mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
     oncontextmenu = (e)=> false; // prevent right click menu
+    onblur        = (e) => clearInput(); // reset input when focus is lost
 
     // init touch input
     if (isTouchDevice && touchInputEnable)
@@ -2831,10 +2884,13 @@ function touchInputInit()
         if (touching)
         {
             touchGamepadTimer.set();
-            if (paused)
+            if (paused && !wasTouching)
             {
                 // touch anywhere to press start when paused
                 touchGamepadButtons[9] = 1;
+
+                // call default touch handler so normal touch events still work
+                handleTouchDefault(e);
                 return;
             }
         }
@@ -2859,7 +2915,7 @@ function touchInputInit()
                 const button = touchPos.subtract(buttonCenter).direction();
                 touchGamepadButtons[button] = 1;
             }
-            else if (touchPos.distance(startCenter) < touchGamepadSize)
+            else if (touchPos.distance(startCenter) < touchGamepadSize && !wasTouching)
             {
                 // virtual start button in center
                 touchGamepadButtons[9] = 1;
@@ -2947,7 +3003,7 @@ function touchGamepadRender()
 /** Audio context used by the engine
  *  @type {AudioContext}
  *  @memberof Audio */
-let audioContext;
+let audioContext = new AudioContext;
 
 /** Master gain node for all audio to pass through
  *  @type {GainNode}
@@ -2958,14 +3014,10 @@ function audioInit()
 {
     if (!soundEnable || headlessMode) return;
     
-    // create audio context
-    audioContext = new AudioContext;
-
-    // create and connect gain node
     // (createGain is more widely spported then GainNode construtor)
     audioGainNode = audioContext.createGain();
     audioGainNode.connect(audioContext.destination);
-    setSoundVolume(soundVolume); // update gain volume
+    audioGainNode.gain.value = soundVolume; // set starting value
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -3000,12 +3052,15 @@ class Sound
 
         /** @property {Number} - How much to randomize frequency each time sound plays */
         this.randomness = 0;
+        
+        /** @property {GainNode} - Gain node for this sound */
+        this.gainNode = audioContext.createGain();
 
         if (zzfxSound)
         {
             // generate zzfx sound now for fast playback
             const defaultRandomness = .05;
-            this.randomness = zzfxSound[1] || defaultRandomness;
+            this.randomness = zzfxSound[1] != undefined ? zzfxSound[1] : defaultRandomness;
             zzfxSound[1] = 0; // generate without randomness
             this.sampleChannels = [zzfxG(...zzfxSound)];
             this.sampleRate = zzfxR;
@@ -3046,18 +3101,13 @@ class Sound
 
         // play the sound
         const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
-        this.gainNode = audioContext.createGain();
         return this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate, this.gainNode);
     }
 
     /** Set the sound volume
      *  @param {Number}  [volume] - How much to scale volume by
      */
-    setVolume(volume=1)
-    {
-        if (this.gainNode)
-            this.gainNode.gain.value = volume;
-    }
+    setVolume(volume=1) { this.gainNode.gain.value = volume; }
 
     /** Stop the last instance of this sound that was played */
     stop()
@@ -3541,18 +3591,18 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
 
 
 
-/** The tile collision layer array, use setTileCollisionData and getTileCollisionData to access
+/** The tile collision layer grid, use setTileCollisionData and getTileCollisionData to access
  *  @type {Array} 
  *  @memberof TileCollision */
 let tileCollision = [];
 
-/** Size of the tile collision layer
+/** Size of the tile collision layer 2d grid
  *  @type {Vector2} 
  *  @memberof TileCollision */
 let tileCollisionSize = vec2();
 
 /** Clear and initialize tile collision
- *  @param {Vector2} size
+ *  @param {Vector2} size - width and height of tile collision 2d grid
  *  @memberof TileCollision */
 function initTileCollision(size)
 {
@@ -3562,7 +3612,7 @@ function initTileCollision(size)
         tileCollision[i] = 0;
 }
 
-/** Set tile collision data
+/** Set tile collision data for a given cell in the grid
  *  @param {Vector2} pos
  *  @param {Number}  [data]
  *  @memberof TileCollision */
@@ -3571,7 +3621,7 @@ function setTileCollisionData(pos, data=0)
     pos.arrayCheck(tileCollisionSize) && (tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] = data);
 }
 
-/** Get tile collision data
+/** Get tile collision data for a given cell in the grid
  *  @param {Vector2} pos
  *  @return {Number}
  *  @memberof TileCollision */
@@ -3602,7 +3652,8 @@ function tileCollisionTest(pos, size=vec2(), object)
     return false;
 }
 
-/** Return the center of first tile hit (does not return the exact intersection)
+/** Return the center of first tile hit, undefined if nothing was hit.
+ *  This does not return the exact intersection, but the center of the tile hit.
  *  @param {Vector2}      posStart
  *  @param {Vector2}      posEnd
  *  @param {EngineObject} [object]
@@ -3847,8 +3898,8 @@ class TileLayer extends EngineObject
         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 pos = layerPos.add(vec2(.5));
             const tileInfo = tile(d.tile, s, this.tileInfo.textureIndex);
             drawTile(pos, vec2(1), tileInfo, d.color, d.direction*PI/2, d.mirror);
         }
@@ -4277,7 +4328,7 @@ function medalsInit(saveName)
     // check if medals are unlocked
     medalsSaveName = saveName;
     if (!debugMedals)
-        medalsForEach(medal=> medal.unlocked = (localStorage[medal.storageKey()] | 0));
+        medalsForEach(medal=> medal.unlocked = !!localStorage[medal.storageKey()]);
 
     // engine automatically renders medals
     engineAddPlugin(undefined, medalsRender);
@@ -4340,14 +4391,28 @@ class Medal
     constructor(id, name, description='', icon='🏆', src)
     {
         ASSERT(id >= 0 && !medals[id]);
-
-        // save attributes and add to list of medals
-        medals[this.id = id] = this;
+        
+        /** @property {Number} - The unique identifier of the medal */
+        this.id = id;
+        
+        /** @property {String} - Name of the medal */
         this.name = name;
+        
+        /** @property {String} - Description of the medal */
         this.description = description;
+        
+        /** @property {String} - Icon for the medal */
         this.icon = icon;
+        
+        /** @property {Boolean} - Is the medal unlocked? */
+        this.unlocked = false;
+
+        // load the source image if provided
         if (src)
             (this.image = new Image).src = src;
+
+        // add this to list of medals
+        medals[id] = this;
     }
 
     /** Unlocks a medal if not already unlocked */
@@ -4358,7 +4423,7 @@ class Medal
 
         // save the medal
         ASSERT(medalsSaveName, 'save name must be set');
-        localStorage[this.storageKey()] = this.unlocked = 1;
+        localStorage[this.storageKey()] = this.unlocked = true;
         medalsDisplayQueue.push(this);
     }
 
@@ -4766,7 +4831,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.10.4';
+const engineVersion = '1.10.7';
 
 /** Frames per second to update
  *  @type {Number}
@@ -4829,6 +4894,8 @@ const pluginUpdateList = [], pluginRenderList = [];
  *  @memberof Engine */
 function engineAddPlugin(updateFunction, renderFunction)
 {
+    ASSERT(!pluginUpdateList.includes(updateFunction));
+    ASSERT(!pluginRenderList.includes(renderFunction));
     updateFunction && pluginUpdateList.push(updateFunction);
     renderFunction && pluginRenderList.push(renderFunction);
 }
@@ -4837,12 +4904,12 @@ function engineAddPlugin(updateFunction, renderFunction)
 // Main engine functions
 
 /** Startup LittleJS engine with your callback functions
- *  @param {Function} gameInit       - Called once after the engine starts up, setup the game
- *  @param {Function} gameUpdate     - Called every frame at 60 frames per second, handle input and update the game state
- *  @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=[]] - Image to load
+ *  @param {Function|function():Promise} gameInit - Called once after the engine starts up
+ *  @param {Function} gameUpdate - Called every frame before objects are updated
+ *  @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused
+ *  @param {Function} gameRender - Called before objects are rendered, for drawing the background
+ *  @param {Function} gameRenderPost - Called after objects are rendered, useful for drawing UI
+ *  @param {Array} [imageSources=[]] - List of images 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=[], rootElement=document.body)
@@ -4992,8 +5059,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
     function startEngine()
     {
-        gameInit();
-        engineUpdate();
+        new Promise((resolve) => resolve(gameInit())).then(engineUpdate);
     }
 
     if (headlessMode)
@@ -5008,7 +5074,6 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         '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
@@ -5346,4 +5411,5 @@ function drawEngineSplashScreen(t)
     }
     
     x.restore();
-}
+}
+

package/examples/box2d/game.js

@@ -15,13 +15,11 @@
 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;
 let sceneName;
+let spriteAtlas;
 let groundObject;
 let mouseJoint;
 let car;
@@ -30,6 +28,19 @@ let repeatSpawnTimer = new Timer;
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
+    // create a table of all sprites
+    const gameTile = (i)=>  tile(i, 16, 0, 1);
+    spriteAtlas =
+    {
+        circle:         gameTile(0),
+        dot:            gameTile(1),
+        circleOutline:  gameTile(2),
+        squareOutline:  gameTile(3),
+        wheel:          gameTile(4),
+        gear:           gameTile(5),
+        squareOutline2: gameTile(6),
+    };
+
     loadScene(scene);
 }
 
@@ -128,7 +139,7 @@ function gameRenderPost()
     {
         // draw mouse joint
         const ab = vec2(mouseJoint.GetAnchorB());
-        drawTile(ab, vec2(.3), tile(0), BLACK);
+        drawTile(ab, vec2(.3), spriteAtlas.circle, BLACK);
         drawLine(mousePos, ab, .1, BLACK);
     }
 

package/examples/box2d/gameObjects.js

@@ -12,7 +12,8 @@
 function spawnBox(pos, size=1, color=WHITE, type=box2dBodyTypeDynamic, applyTexture=true, angle=0)
 {
     size = typeof size == 'number' ? vec2(size) : size; // square
-    const o = new Box2dObject(pos, size, applyTexture && tile(3), angle, color, type);
+    const o = new Box2dObject(pos, size, applyTexture && spriteAtlas.squareOutline, angle, color, type);
+    o.drawSize = size.scale(1.02); // slightly enarge to cover gaps
     o.addBox(size);
     return o;
 }
@@ -20,7 +21,7 @@ function spawnBox(pos, size=1, color=WHITE, type=box2dBodyTypeDynamic, applyText
 function spawnCircle(pos, diameter=1, color=WHITE, type=box2dBodyTypeDynamic, applyTexture=true, angle=0)
 {
     const size = vec2(diameter);
-    const o = new Box2dObject(pos, size, applyTexture && tile(2), angle, color, type);
+    const o = new Box2dObject(pos, size, applyTexture && spriteAtlas.circleOutline, angle, color, type);
     o.addCircle(diameter);
     return o;
 }
@@ -115,7 +116,7 @@ class CarObject extends Box2dObject
             const damping     = .7;
             const frequencyHz = 4;
             const maxTorque   = 50;
-            const sprite      = tile(4);
+            const sprite      = spriteAtlas.wheel;
 
             // create wheels
             this.wheels = [];
@@ -208,7 +209,7 @@ class PulleyJointObjects extends Box2dObject
 {
     constructor(pos, size, color, connectionPos)
     {
-        super(pos, size, tile(3), 0, color);
+        super(pos, size, spriteAtlas.squareOutline, 0, color);
         this.addBox(size);
         this.connectionPos = connectionPos;
     }
@@ -228,7 +229,7 @@ class MotorJointObject extends Box2dObject
 {
     constructor(pos, size, color, otherObject)
     {
-        super(pos, size, tile(4), 0, color);
+        super(pos, size, spriteAtlas.wheel, 0, color);
         this.addCircle(size.x);
         this.connectionPos = pos;
         const joint = box2dCreateMotorJoint(otherObject, this);
@@ -265,7 +266,7 @@ class SoftBodyObject extends Box2dObject
             const mass = .1;
             const center = vec2(x-nodeSize.x/2, y-nodeSize.y/2);
             const p = pos.add(center.multiply(spacing));
-            const o = new Box2dObject(p, vec2(objectDiameter*1.1), tile(0), 0, color);
+            const o = new Box2dObject(p, vec2(objectDiameter*1.1), spriteAtlas.circle, 0, color);
             o.addCircle(objectDiameter);
             o.setMass(mass);
             o.setAngularDamping(10);
@@ -336,7 +337,7 @@ class ClothObject extends Box2dObject
             const mass = .5;
             const center = vec2(x-nodeSize.x/2, y-nodeSize.y/2);
             const p = pos.add(center.multiply(spacing));
-            const o = new Box2dObject(p, vec2(.4), tile(0), 0, color);
+            const o = new Box2dObject(p, vec2(.4), spriteAtlas.circle, 0, color);
             o.addCircle(objectDiameter);
             o.setFilterData(2, 2);
             o.setLinearDamping(1);
@@ -463,7 +464,7 @@ function explosion(pos, radius=3, strength=300)
     new ParticleEmitter(
         pos, 0,                     // pos, angle
         radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emiteCone
-        tile(1),                    // tileInfo
+        spriteAtlas.dot,            // tileInfo
         hsl(0,0,0),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
         1, 1, 2, .1, .1,    // time, sizeStart, sizeEnd, speed, angleSpeed
@@ -475,7 +476,7 @@ function explosion(pos, radius=3, strength=300)
     new ParticleEmitter(
         pos, 0,                         // pos, angle
         radius, .1, 100*radius, PI,     // emitSize, emitTime, emitRate, emiteCone
-        tile(1),                        // tileInfo
+        spriteAtlas.dot,                // tileInfo
         hsl(0,1,.5),   hsl(.15,1,.5),   // colorStartA, colorStartB
         hsl(0,1,.5,0), hsl(.1, 1,.5,0), // colorEndA, colorEndB
         .7, 1, .5, .1, .1, // time, sizeStart, sizeEnd, speed, angleSpeed

package/examples/box2d/index.html

@@ -7,8 +7,8 @@
 </head><body>
 
 <script src=../../dist/littlejs.js></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>
+<script src=../../plugins/Box2D_v2.3.1_min.wasm.js?1105></script>
+<script src=../../plugins/box2d.js?1105></script>
+<script src=scenes.js?1105></script>
+<script src=gameObjects.js?1105></script>
+<script src=game.js?1105></script>

package/examples/box2d/scenes.js

@@ -132,7 +132,7 @@ function loadScene(_scene)
             const o1 = spawnCircle(vec2(23.5,3), 3, randColor());
             const j1 = box2dCreateRevoluteJoint(groundObject, o1, o1.pos);
             const o2 = spawnCircle(vec2(28,3), 6, randColor());
-            o1.tileInfo = o2.tileInfo = tile(5);
+            o1.tileInfo = o2.tileInfo = spriteAtlas.gear;
             const j2 = box2dCreateRevoluteJoint(groundObject, o2, o2.pos);
             box2dCreateGearJoint(o1, o2, j1, j2, 2);
         }
@@ -144,21 +144,21 @@ function loadScene(_scene)
         }
         {
             // distance joint
-            const o1 = new Box2dObject(vec2(30,11), vec2(4), tile(2), 0, randColor(), box2dBodyTypeStatic);
+            const o1 = new Box2dObject(vec2(30,11), vec2(4), spriteAtlas.circleOutline, 0, randColor(), box2dBodyTypeStatic);
             o1.renderOrder = -2;
             const o2 = spawnCircle(vec2(30,8), 2, randColor());
             box2dCreateDistanceJoint(o1, o2);
         }
         {
             // motor joint
-            const o = new Box2dObject(vec2(10,8), vec2(4), tile(2), 0, randColor(), box2dBodyTypeStatic);
+            const o = new Box2dObject(vec2(10,8), vec2(4), spriteAtlas.circleOutline, 0, randColor(), box2dBodyTypeStatic);
             o.renderOrder = -2;
             new MotorJointObject(vec2(10,8), vec2(2), randColor(), o);
         }
         {
             // friction joint
             const o = spawnBox(vec2(10,15), 3, randColor());
-            o.tileInfo = tile(6);
+            o.tileInfo = spriteAtlas.squareOutline2;
             const joint = box2dCreateFrictionJoint(groundObject, o);
             joint.SetMaxForce(200);
             joint.SetMaxTorque(200);

package/examples/breakout/index.html

@@ -6,7 +6,7 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../dist/littlejs.js?1100></script>
+<script src=../../dist/littlejs.js?1105></script>
 <script src=../../plugins/postProcess.js></script>
-<script src=gameObjects.js?1100></script>
-<script src=game.js?1100></script>
+<script src=gameObjects.js?1105></script>
+<script src=game.js?1105></script>

package/examples/breakoutTutorial/index.html

@@ -6,5 +6,5 @@
 <link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
-<script src=../../dist/littlejs.js?1100></script>
-<script src=game.js?1100></script>
+<script src=../../dist/littlejs.js?1105></script>
+<script src=game.js?1105></script>

package/examples/electron/game.js

@@ -10,6 +10,9 @@
 // show the LittleJS splash screen
 setShowSplashScreen(true);
 
+// fix texture bleeding by shrinking tile slightly
+tileFixBleedScale = .5;
+
 // sound effects
 const sound_click = new Sound([1,.5]);
 

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1100></script>
+<script src=../../dist/littlejs.js?1105></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1100></script>
+<script src=game.js?1105></script>