Visible spacing between tiles on tilemap

[_ZeeK_]

Hi there. Apologies if this has been asked before but I couldn't find an answer. I'm looking to create a visible grid on a layer of a tilemap.

I could draw 2d lines on top of the layer but I'd much rather if I could have black layer underneath a ground layer and with that ground layer having a 1pixel margin between each tile on the grid.

Hope this makes sense.

Example of what I'm going for:

[hotfeet]

instead of the usual

tileX = x * tileSize
tileY = y * tileSize

i'd do

tileX = x + x * tileSize
tileY = y + y * tileSize

you can check out this fiddle and adjust the spacing var to experiment with the effect

https://jsfiddle.net/hotfeet/2pzuwwtf/

[_ZeeK_]

Thanks for your response. I guess I ought to note that I'm using Phaser and that the map is specified via a JSON file as defined by Tiled.

It looks something like this:

 

Quote

{ "height":10,
 "layers":[
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 104, 104, 104, 104, 104, 104, 104, 104, 104, 104, 153, 153, 153, 153, 153, 153, 153, 153, 153, 153],
         "height":10,
         "name":"groundLayer",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":10,
         "x":0,
         "y":0
        }, 
        {
         "color":"#80ff0000",
         "draworder":"topdown",
         "name":"playerSpawn",
         "objects":[
                {
                 "height":65.6834799851283,
                 "id":1,
                 "name":"",
                 "rotation":0,
                 "type":"",
                 "visible":true,
                 "width":68.1621018713595,
                 "x":69.4014128144752,
                 "y":490.767133473789
                }],
         "opacity":1,
         "type":"objectgroup",
         "visible":true,
         "x":0,
         "y":0
        }, 
        {
         "color":"#800000ff",
         "draworder":"topdown",
         "name":"goalLayer",
         "objects":[
                {
                 "height":65.6834799851283,
                 "id":3,
                 "name":"",
                 "rotation":0,
                 "type":"",
                 "visible":true,
                 "width":65.6834799851283,
                 "x":561.407857231379,
                 "y":492.006444416904
                }],
         "opacity":1,
         "type":"objectgroup",
         "visible":true,
         "x":0,
         "y":0
        }],
 "nextobjectid":4,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.0.2",
 "tileheight":70,
 "tilesets":[
         {
          "columns":12,
          "firstgid":1,
          "image":"tiles_spritesheet.png",
          "imageheight":936,
          "imagewidth":914,
          "margin":0,
          "name":"tiles_spritesheet",
          "spacing":2,
          "tilecount":156,
          "tileheight":70,
          "tilewidth":70
         }],
 "tilewidth":70,
 "type":"map",
 "version":1,
 "width":10
}