Add gridlines & viv_right

tutorial1.js

@@ -4,6 +4,10 @@ var pixelScale = 4;
 var scaledTileSize = unscaledTileSize * pixelScale;
 // End constants
 
+var debugFlags = {
+    showSquares: true
+}
+
 // global entities
 var player;
 
@@ -15,6 +19,7 @@ var updates = [];
 
 //Create the renderer
 var renderer = PIXI.autoDetectRenderer(256, 256);
+var graphics = new PIXI.Graphics();
 
 //Add the canvas to the HTML document
 document.body.appendChild(renderer.view);
@@ -33,6 +38,7 @@ function setup() {
     );
     player.gridX = 2;
     player.gridY = 2;
+    player.scale.set(pixelScale);
 
     room.sprites.push(player);
 
@@ -47,6 +53,7 @@ function setup() {
     keyUp.actionList.push(function(){player.gridY--;});
     keyDown.actionList.push(function(){player.gridY++;});
 
+    stage.addChild(graphics);
     stage.addChild(player);
     // init controls
     //Tell the `renderer` to `render` the `stage`
@@ -64,12 +71,16 @@ function updateWorld() {
     {
         var sprite = room.sprites[i];
         // move sprite i towards its new position in the grid.
-        var targetX = unscaledTileSize * sprite.gridX;
-        var targetY = unscaledTileSize * sprite.gridY;
+        var targetX = scaledTileSize * sprite.gridX;
+        var targetY = scaledTileSize * sprite.gridY;
         if (sprite.position.x > targetX){ sprite.position.x--; }
         if (sprite.position.x < targetX){ sprite.position.x++; }
         if (sprite.position.y > targetY){ sprite.position.y--; }
         if (sprite.position.y < targetY){ sprite.position.y++; }
+        if (debugFlags.showSquares){
+            graphics.lineStyle(3, 0xFF0000, 0.8);
+            graphics.drawRect(targetX, targetY, scaledTileSize, scaledTileSize);
+        }
     }
     
 }