# Isometric Maps

**URL:** <https://phaser.discourse.group/t/isometric-maps/10221>\
**Category:** Phaser 3\
**Created:** [September 7, 2021, 9:49pm UTC](https://phaser.discourse.group/t/isometric-maps/10221 "2021-09-07T21:49:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![IgnaciousEgg](https://avatars.discourse-cdn.com/v4/letter/i/bc79bd/32.png) [@IgnaciousEgg](https://phaser.discourse.group/u/IgnaciousEgg)\
**Post date:** [September 7, 2021, 9:49pm UTC](https://phaser.discourse.group/t/isometric-maps/10221/1 "2021-09-07T21:49:04Z")

</div>

Hello Phaser 3 community 😃

I have had some trouble finding good resources on building an isometric world in Phaser 3.

I have created 3 layers in Tiled: a Floor, Middle and Top layer.

Unfortunately only the Floor layer is rendering, and I get this weird jagged rendering where Phaser is clearly removing the tiles as I move around - similar to the issue [here](https://github.com/photonstorm/phaser/issues/5494). Here’s a screenshot

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/418de1ec4e37b539383d8deb48445ee1a7df2038.jpeg)

Any thoughts on why this is happening?

---

<div class="post-metadata">

**Author:** ![IgnaciousEgg](https://avatars.discourse-cdn.com/v4/letter/i/bc79bd/32.png) [@IgnaciousEgg](https://phaser.discourse.group/u/IgnaciousEgg)\
**Post date:** [September 8, 2021, 11:14pm UTC](https://phaser.discourse.group/t/isometric-maps/10221/2 "2021-09-08T23:14:05Z")

</div>

I have done a screen recording to demonstrate the issue (but I can’t upload it, you an view it on [the GitHub issue](https://github.com/photonstorm/phaser/issues/5494))

I also tried turning off the skipCull, but then nothing renders to the screen at all:

```javascript
const floorLayer = map.createLayer('Floor', [tileset])
floorLayer.setSkipCull(true)

```

---

<div class="post-metadata">

**Author:** ![IgnaciousEgg](https://avatars.discourse-cdn.com/v4/letter/i/bc79bd/32.png) [@IgnaciousEgg](https://phaser.discourse.group/u/IgnaciousEgg)\
**Post date:** [September 9, 2021, 8:25pm UTC](https://phaser.discourse.group/t/isometric-maps/10221/3 "2021-09-09T20:25:37Z")

</div>

Turns out what solved the problem was setting the cullPadding property using the `setCullPadding()` property.

Per [the docs](https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.TilemapLayer.html):

> When a Camera culls the tiles in this layer it does so using its view into the world, building up a rectangle inside which the tiles must exist or they will be culled. Sometimes you may need to expand the size of this ‘cull rectangle’, especially if you plan on rotating the Camera viewing the layer. Do so by providing the padding values. The values given are in tiles, not pixels. So if the tile width was 32px and you set `paddingX` to be 4, it would add 32px x 4 to the cull rectangle (adjusted for scale)

So you need to use this method on the TileMapLayer you create from your actual Tilemap. For example:

```javascript
const map = this.add.tilemap('map')

const tileset = map.addTilesetImage('spritesheet', 'tiles')
const firstLayer = map.createLayer('LayerNameHere', [tileset])
firstLayer.setCullPadding(8, 8)

```