Draw Tilemap Tile Number For Development Purposes
ViniGuerrero June 5th, 2018

Hello!

I noticed on the tilemap lib we have the option to draw the grid for development purposes.

I'm trying to build up a function to draw sticky numbers to each tile so during development you can toggle on/off and see what objects you want to map at each tile position, I was able to draw the first x row, however, the tile numbers ( text ) are moving with the player. How can I fix this?

My current function is:

function drawTileNumbers(){
  var count = 0;
  var x = wade.tilemap.getNumTiles().x;
  var y = wade.tilemap.getNumTiles().y;
  for (var i = 0; i < x; i++) {
    var tileSprite = wade.tilemap.getTileSprite(i, 0).getPosition();
    var tileText = new TextSprite(i, '18px Verdana', 'black', 'center');
    var tileObj = new SceneObject(tileText, 0, tileSprite.x, tileSprite.y);
    wade.addSceneObject(tileObj, true);
  }
}

Thanks in advance!

All 3 Comments
Gio June 5th, 2018

Since you are not specifying a layer in the TextSprite constructor, the TextSprite is going to be created on the default layer (and unless you've changed it in your code, the default layer is 1). So all the transform that you have set for layer 1 will be applied to your TextSprites.

I think you want the TextSprite to be on the same layer as the tilemap terrain or perhaps the tilemap objects. So you'd do this:

var terrainLayer = wade.tilemap.getTerrainLayerId();
var tileText = new TextSprite(i, '18px Verdana', 'black', 'center', terrainLayer);

Having said that, I would definitely recommend using Wade's tilemap editor to draw your tilemap and place your objects. Sure you can do it all in code if you like, but using the editor will save you a lot of time. Essentially the editor just generates some JSON code that does what you would do manually.

Indeed June 5th, 2018

May be worth noting, because I only recently discovered this myself, that you can use the wade editor *just* for the map, and do everything else in code: save the map then load it with wade.loadScene, do everything else in code... that's what I'm doing.

Gio can I suggest you add this feature (displaying tile numbers) at the engine level, so it's available to everyone? Would be useful to me.

ViniGuerrero June 5th, 2018

Hey guys!

I'll leave my function here so it could possibly help other in the future...

I'm still trying to find out why first and last tile aren't being added with the text sprites, but the rest is working properly

This is how it looks like:

https://ibb.co/dzDCso

function drawTileNumbers(){
  var counter = 0;
  var terrainLayer = wade.tilemap.getTerrainLayerId();
  var tileSprites = wade.tilemap.getTerrain()._sprites;
  var x = wade.tilemap.getNumTiles().x;
  var y = wade.tilemap.getNumTiles().y;
  for (var a = 0; a < y; a++) {
    for (var b = 0; b < x; b++) {
      var tilePos = wade.tilemap.getTileSprite(b, a).getPosition();
      var tileText = new TextSprite(counter, '18px Verdana', 'black', 'center', terrainLayer);
      var tileObj = new SceneObject(tileText, 0, tilePos.x, tilePos.y);
      wade.addSceneObject(tileObj, true);
      counter++;
    }
  }
}

 

Post a reply
Add Attachment
Submit Reply
Login to Reply