Isometric Maps

Phaser 3
1

Hello Phaser 3 community :smiley:

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. Here’s a screenshot

image
image862×393 83.4 KB

Any thoughts on why this is happening?

2

I have done a screen recording to demonstrate the issue (but I can’t upload it, you an view it on the GitHub issue)

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

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

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

Per the docs:

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:

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

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