add tile padding and use sprite atlas

examples/box2d/game.js

@@ -15,13 +15,11 @@
 setShowSplashScreen(true);
 //box2dDebug = 1; // enable box2d debug draw
 
-// fix texture bleeding by shrinking tile slightly
-tileFixBleedScale = .5;
-
 // 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);
     }
 

examples/box2d/gameObjects.js

@@ -12,15 +12,16 @@
 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;
 }
 
 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

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);