16px tileset help

[JamesZEMOURI]

when i use a 16px tileset (on a 16px map) load time is extremely long and when is done everything is mess up, for a 20 tile * 20 tile map i wait 15 min i cant find anything in p5.tilemap.js to change the px size can you help me pleas 😄 i miss something but what

[linux-man]

Can you zip and upload your map (or mail me to linux-man at hotmail.com)?

[linux-man]

Didn't receive your email. Also, you could check if your "data encoding" is CSV.

[linux-man]

(Answering to "It loads but takes a long time")

Of course it is. It takes FOREVER to load. The problem is that you are using a tileset with 4096 tiles. All are loaded to future use. My tests show that something above 400 tiles is not practical. You really don't need all that tiles, do you? So, what you should do is to cut the tiles you don't use and optimize your tileset. That means editing the png and refactoring the map.

You can also change the loadTiles function (line 226) to

function loadTiles(imgsrc, n) {
  'use strict';
  var layers = TileMaps[this.name].layers;
  var tileset = TileMaps[this.name].tilesets[n];
  var firstgid = tileset.firstgid;
  var tilewidth = tileset.tilewidth;
  var tileheight = tileset.tileheight;
  var tilecount = tileset.tilecount || 0;
  var columns = tileset.columns || 0;
  var spacing = tileset.spacing || 0;
  var margin = tileset.margin || 0;
  if (tileset.tileoffset) {
    var tileoffsetx = tileset.tileoffset.x || 0;
    var tileoffsety = tileset.tileoffset.y || 0;
  }
  else {
    var tileoffsetx = 0;
    var tileoffsety = 0;
  }
  if (columns == 0) columns = floor((imgsrc.width - margin) / (tilewidth + spacing));
  if (tilecount == 0) tilecount = columns * floor((imgsrc.height - margin) / (tileheight + spacing));
  if (tileset.transparentcolor) applyTransColor(imgsrc, color(tileset.transparentcolor), this.transparentoffset);
  for (var m = 0; m < tilecount; m++) {
    for (var l = 0; l < layers.length; l++) {
      if(layers[l].data && layers[l].data.indexOf(firstgid + m) != -1) {
        var img = imgsrc.get(margin + (m % columns) * (tilewidth + spacing), margin + floor(m / columns) * (tileheight + spacing), tilewidth, tileheight);
        this.tile[firstgid + m] = new Tile(img, tileoffsetx, tileoffsety);
      }
    }
  }
  cicleTilesets.call(this, ++n);
}

I changed it to just load the used tiles. It's still a little longer to load but it doesn't crash. I don't think it's a great idea. You can't use any other tile except the ones that already are part of the map, so you can't change old tiles to new ones, but maybe you're OK with that. This modification is not optimized and will not be pulled to the library.