Adding debug rendering method to tilemap and layers

Author: mikewesthad

v3/src/gameobjects/tilemap/Tilemap.js

@@ -514,6 +514,14 @@ var Tilemap = new Class({
         return TilemapComponents.RemoveTileAtWorldXY(worldX, worldY, replaceWithNull, recalculateFaces, camera, layer);
     },
 
+    renderDebug: function (graphics, styleConfig, layer)
+    {
+        layer = this.getLayer(layer);
+        if (layer === null) { return this; }
+        TilemapComponents.RenderDebug(graphics, styleConfig, layer);
+        return this;
+    },
+
     replaceByIndex: function (findIndex, newIndex, tileX, tileY, width, height, layer)
     {
         layer = this.getLayer(layer);

v3/src/gameobjects/tilemap/components/RenderDebug.js

@@ -0,0 +1,70 @@
+var GetTilesWithin = require('./GetTilesWithin');
+var Color = require('../../../display/color');
+
+/**
+ * Draws a debug representation of the layer to the given Graphics. This is helpful when you want to
+ * get a quick idea of which of your tiles are colliding and which have interesting faces. The tiles
+ * are drawn starting at (0, 0) in the Graphics, allowing you to place the debug representation
+ * wherever you want on the screen.
+ *
+ * @param {Graphics} graphics - The target Graphics object to draw upon.
+ * @param {object} styleConfig - An object specifying the colors to use for the debug drawing.
+ * @param {Color|null} [styleConfig.tileColor=blue] - Color to use for drawing a filled rectangle at
+ * non-colliding tile locations. If set to null, non-colliding tiles will not be drawn.
+ * @param {Color|null} [styleConfig.collidingTileColor=orange] - Color to use for drawing a filled
+ * rectangle at colliding tile locations. If set to null, colliding tiles will not be drawn.
+ * @param {Color|null} [styleConfig.faceColor=grey] - Color to use for drawing a line at interesting
+ * tile faces. If set to null, interesting tile faces will not be drawn.
+ * @param {LayerData} layer - [description]
+ */
+var RenderDebug = function (graphics, styleConfig, layer)
+{
+    if (styleConfig === undefined) { styleConfig = {}; }
+
+    // Default colors without needlessly creating Color objects
+    var tileColor = styleConfig.tileColor !== undefined
+        ? styleConfig.tileColor
+        : new Color(105, 210, 231, 150);
+    var collidingTileColor = styleConfig.collidingTileColor !== undefined
+        ? styleConfig.collidingTileColor
+        : new Color(243, 134, 48, 200);
+    var faceColor = styleConfig.faceColor !== undefined
+        ? styleConfig.faceColor
+        : new Color(40, 39, 37, 150);
+
+    var tiles = GetTilesWithin(0, 0, layer.width, layer.height, null, layer);
+
+    for (var i = 0; i < tiles.length; i++)
+    {
+        var tile = tiles[i];
+
+        var tw = tile.width;
+        var th = tile.height;
+        var x = tile.worldX;
+        var y = tile.worldY;
+
+        var color = tile.collides ? collidingTileColor : tileColor;
+        if (color !== null)
+        {
+            graphics.fillStyle(color.color, color.alpha / 255);
+            graphics.fillRect(x, y, tw, th);
+        }
+
+        // Inset the face line to prevent neighboring tile's lines from overlapping
+        x += 1;
+        y += 1;
+        tw -= 2;
+        th -= 2;
+
+        if (faceColor !== null)
+        {
+            graphics.lineStyle(1, faceColor.color, faceColor.alpha / 255);
+            if (tile.faceTop) { graphics.lineBetween(x, y, x + tw, y); }
+            if (tile.faceRight) { graphics.lineBetween(x + tw, y, x + tw, y + th); }
+            if (tile.faceBottom) { graphics.lineBetween(x, y + th, x + tw, y + th); }
+            if (tile.faceLeft) { graphics.lineBetween(x, y, x, y + th); }
+        }
+    }
+};
+
+module.exports = RenderDebug;

v3/src/gameobjects/tilemap/components/index.js

@@ -22,6 +22,7 @@ module.exports = {
     RemoveTileAt: require('./RemoveTileAt'),
     RemoveTileAtWorldXY: require('./RemoveTileAtWorldXY'),
     ReplaceByIndex: require('./ReplaceByIndex'),
+    RenderDebug: require('./RenderDebug'),
     SetCollision: require('./SetCollision'),
     SetCollisionBetween: require('./SetCollisionBetween'),
     SetCollisionByExclusion: require('./SetCollisionByExclusion'),

v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayer.js

@@ -164,6 +164,12 @@ var DynamicTilemapLayer = new Class({
         return TilemapComponents.RemoveTileAtWorldXY(worldX, worldY, replaceWithNull, recalculateFaces, camera, this.layer);
     },
 
+    renderDebug: function (graphics, styleConfig)
+    {
+        TilemapComponents.RenderDebug(graphics, styleConfig, this.layer);
+        return this;
+    },
+
     replaceByIndex: function (findIndex, newIndex, tileX, tileY, width, height)
     {
         TilemapComponents.ReplaceByIndex(findIndex, newIndex, tileX, tileY, width, height, this.layer);

v3/src/gameobjects/tilemap/staticlayer/StaticTilemapLayer.js

@@ -279,6 +279,12 @@ var StaticTilemapLayer = new Class({
         return TilemapComponents.HasTileAtWorldXY(worldX, worldY, camera, this.layer);
     },
 
+    renderDebug: function (graphics, styleConfig)
+    {
+        TilemapComponents.RenderDebug(graphics, styleConfig, this.layer);
+        return this;
+    },
+
     setCollision: function (indexes, collides, recalculateFaces)
     {
         TilemapComponents.SetCollision(indexes, collides, recalculateFaces, this.layer);