I am creating an isometric city simulator game (map tile sprites are 32px) however I need to incorporate larger map tiles (64px, 96px, and 128px) and I’m having this issue with sprite overlap (image 1)? Any ideas on how to fix?
The ordering of the sprites in the map container array determines which renders atop which. If its helpful, I’ve included how the tiles are laid out in the array (image 2), however the size of the map isn’t fixed, in this image its 10x10 tiles but it can be 25x25, or 100x100, etc.
I hope this makes some sense and thanks in advance for any suggestions! Let me know if I can clarify anything.
Thanks for getting back to me!
I had been placing them on the front-most tile (pink arrow) of the place large tile array (designated by bare ground sprites). I’ve now tried to place the at the center tile (red arrow), however it still causes overlapping issues (right pic).
I’ve tried to set the depth when the tiles are initially placed to create the map (placing a large tile just sets the texture to something else) using this: tile.setZ(tile.y); Is this correct or am I missing a step here to set depth for a sprite? I’ve tried tile.setDepth() and tile.depth = and tile.z = but it doesn’t seem to be affecting anything…
Thank you! I was able to container.sort(‘y’) to fix the rendering order. I kept the large sprite placed in the center tile, because the minimum tile would cause the same overlapping issues as seen in pic 2 of image_3, even with the sorting.
