# Isometric map tile overlap for larger tiles

**URL:** <https://phaser.discourse.group/t/isometric-map-tile-overlap-for-larger-tiles/14938>\
**Category:** Phaser 3\
**Created:** [November 17, 2024, 6:00pm UTC](https://phaser.discourse.group/t/isometric-map-tile-overlap-for-larger-tiles/14938 "2024-11-17T18:00:13Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![artmom](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@artmom](https://phaser.discourse.group/u/artmom)\
**Post date:** [November 17, 2024, 6:00pm UTC](https://phaser.discourse.group/t/isometric-map-tile-overlap-for-larger-tiles/14938/1 "2024-11-17T18:00:13Z")

</div>

Hi there,

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.

 ![image 1](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/2/2a6560ac0aa481753122c094f5baeb78352b6c2d.png)

 ![image 2](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3f15e183b7f0ff036487737277abb92056f84775.png)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [November 17, 2024, 6:08pm UTC](https://phaser.discourse.group/t/isometric-map-tile-overlap-for-larger-tiles/14938/2 "2024-11-17T18:08:05Z")

</div>

👋

How are you ordering or placing the larger tiles?

---

<div class="post-metadata">

**Author:** ![artmom](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@artmom](https://phaser.discourse.group/u/artmom)\
**Post date:** [November 18, 2024, 12:41am UTC](https://phaser.discourse.group/t/isometric-map-tile-overlap-for-larger-tiles/14938/3 "2024-11-18T00:41:05Z")

</div>

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).

 ![image_3](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/bb9bd18dca02a4518e198572a3450f73744c99f4.png)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [November 18, 2024, 1:09am UTC](https://phaser.discourse.group/t/isometric-map-tile-overlap-for-larger-tiles/14938/4 "2024-11-18T01:09:34Z")

</div>

They need to be ordered by the minimum tile they’re occupying, I guess.

---

<div class="post-metadata">

**Author:** ![artmom](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@artmom](https://phaser.discourse.group/u/artmom)\
**Post date:** [November 18, 2024, 1:17am UTC](https://phaser.discourse.group/t/isometric-map-tile-overlap-for-larger-tiles/14938/5 "2024-11-18T01:17:19Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [November 18, 2024, 1:28am UTC](https://phaser.discourse.group/t/isometric-map-tile-overlap-for-larger-tiles/14938/6 "2024-11-18T01:28:22Z")

</div>

If they’re in a Container then `depth` isn’t used, and `z` is never used for rendering, but you can sort by `z` yourself:

```
container.sort('z')

```

By minimum, I mean that a large tile on slots 0, 1, 10, 11 needs to be ordered by 0.

```
tile.setZ(0)

```

---

<div class="post-metadata">

**Author:** ![artmom](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@artmom](https://phaser.discourse.group/u/artmom)\
**Post date:** [November 18, 2024, 1:49am UTC](https://phaser.discourse.group/t/isometric-map-tile-overlap-for-larger-tiles/14938/7 "2024-11-18T01:49:28Z")

</div>

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.

 ![image_4](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/c21eed050c3ee5586ad65239dcb377e710cf37f1.png)

Thank you again for your help today!
