I'm fairly new to Crafty and have been having problems loading large world maps.
So i have a world split up into multiple js files. They are represented by two arrays of tiles: one for background (which grass sprite to use) and one for detail (which cliff to use). When i start crafty I load the 3x3 surrounding files and render them like so:
for(var i = 0; i < Game.map_grid.map_entities.length; i ++){
if(Game.map_grid.map_entities.hasOwnProperty(i))
Game.map_grid.map_entities[i].keep = false;
}
//render background terrain
for (var i = 0; i < view_map["background"].length; i++) {
var tile_object = view_map["background"][i];
var tile = tile_object["type"];
var x = tile_object["x"] - view_map["xoffset"];
var y = tile_object["y"] - view_map["yoffset"];
if(Game.map_grid.map_entities.length && (tile+"_"+x+"_"+y) in this.map_grid.map_entities)
{
tile_ent.keep = true;
continue;
}
var tile_ent = Crafty.e("Actor", "spr_"+tile);
tile_ent.at(x, y);
tile_ent.z = 0;
tile_ent.keep = true;
this.map_grid.map_entities[tile+"_"+x+"_"+y] = tile_ent;
}
//render background terrain
for (var i = 0; i < view_map["detail"].length; i++) {
var tile_object = view_map["detail"][i];
var tile = tile_object["type"];
var x = tile_object["x"] - view_map["xoffset"];
var y = tile_object["y"] - view_map["yoffset"];
if(Game.map_grid.map_entities.length &&
(tile+"_"+x+"_"+y) in this.map_grid.map_entities)
{
tile_ent.keep = true;
continue;
}
var tile_ent = Crafty.e("Actor", "Solid", "spr_"+tile);
tile_ent.at(x, y);
tile_ent.shift(tile_object["xoffset"], tile_object["yoffset"]);
tile_ent.z = 1;
tile_ent.keep = true;
this.map_grid.map_entities[tile+"_"+x+"_"+y] = tile_ent;
}
for(var i = 0; i < Game.map_grid.map_entities.length; i ++){
//Check if the entities need to be moved
if(Game.map_grid.map_entities.hasOwnProperty(i) &&
!Game.map_grid.map_entities[i].keep)
{
Game.map_grid.map_entities[i].destroy();
delete Game.map_grid.map_entities[i];
}
}
I also use the view port to track the player, showing only a portion of the map.
When the player reaches edge of the 3x3 loaded map, I need to request new maps and render them instead. What i have been using is the "Moved" event to check where the player is near the edge. Once that triggers, all of the original tile entities are .destroyed()'ed (i know i can destroy only the ones i need). The above code is ran again to draw the new map and the player is shifted to keep consistent with the new 3x3 coordinates.
The problem is: it looks like the maps are loaded and rendered, but the destroyed ones don't seem to be refreshed and i think are still there. But also the player isn't being redrawn properly, the Moved events are still triggered but the animation isn't updated
My main question is: Is there a better approach to this?
destroy()
the entities, do you also remove them from themap_entities
array? Also, if you can provide a link to the code in action that would help understand what was actually going wrong -- screenshots or a really specific description would also help! \$\endgroup\$