Hi,
I'm trying to make a tile-based scrollable map. The size of the map is 30x30 and each tile is 90x90 px. At these dimensions, I obtained a map with a total size of 2700x2700px.
Each tile on the map comes from the same sprite sheet. The sprite sheet I use is as follows.
Technically, I create this map with a code similar to the following;
function drawMap() {
var container:Sprite = new Sprite();
var xpos = 0;
var ypos = 0;
for(var i=0; i < 30; i++) {
for(var z = 0; z < 30; z++) {
var m:Image = new Image(sAssets.getTexture("tile_type0000"));
m.x = xpos;
m.y = ypos;
m.pixelSnapping = false;
m.textureSmoothing = TextureSmoothing.BILINEAR;
m.width = 90;
m.height = 90;
container.addChild(m);
xpos += 90;
}
ypos += 90;
}
}
Everything is going great so far. Drawing speed and resource consumption are fine, but there is a visual problem. While scrolling the map, sometimes the grids cannot come together and black (stage color) gaps occur between them. I tried different combinations for PixelSnapping and textureSmoothing values, but there is no change;
In this case, I have two questions;
1- If I want to proceed with this code structure, is it possible for me to solve the above problem?
2- Actually, what I want is one big map image. Can I create a large Image and add it to these images instead of adding them as different objects one by one? I think this is technically possible, but it has to be appropriate in terms of performance and visual dimension. (Container's current total size is 2700x2700px)
Do you have any suggestions?
Thanks