# Tilemap with varying height tiles aligned to bottom

**URL:** <https://phaser.discourse.group/t/tilemap-with-varying-height-tiles-aligned-to-bottom/15196>\
**Category:** Phaser 3\
**Created:** [March 7, 2025, 3:40pm UTC](https://phaser.discourse.group/t/tilemap-with-varying-height-tiles-aligned-to-bottom/15196 "2025-03-07T15:40:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mattredding](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mattredding/32/8845_2.png) [@mattredding](https://phaser.discourse.group/u/mattredding)\
**Post date:** [March 7, 2025, 3:40pm UTC](https://phaser.discourse.group/t/tilemap-with-varying-height-tiles-aligned-to-bottom/15196/1 "2025-03-07T15:40:32Z")

</div>

I am creating an isometric tilemap using two tileSetImages, one with terrain tiles and the other with building tiles of double the height. I want the tile images to always align to the bottom, but it seems that by default they align to the top, causing my buildings to sink underneath the map.

Although I am not using Tiled map editor, the issue is very similar to this:

> <https://github.com/phaserjs/phaser/issues/4324>
>
> !\[image\](https://user-images.githubusercontent.com/34615798/51793852-1f854600-21…7c-11e9-9bdb-e059fa5f3182.png)
> 
> The tilemap size is 32x32 and the ninja is a 32x64 sprite (imported in tiled as 32x64 also). In tiled I place it on the bottom left but when rendered in phaser, it is an index off.
> 
> mappy.json
> \`\`\`javascript
> { "height":5,
> "infinite":false,
> "layers":\[
> {
> "data":\[17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17\],
> "height":5,
> "id":3,
> "name":"Tile Layer 1",
> "opacity":1,
> "type":"tilelayer",
> "visible":true,
> "width":5,
> "x":0,
> "y":0
> }, 
> {
> "data":\[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 226, 0, 0, 0, 0\],
> "height":5,
> "id":4,
> "name":"Tile Layer 2",
> "opacity":1,
> "type":"tilelayer",
> "visible":true,
> "width":5,
> "x":0,
> "y":0
> }\],
> "nextlayerid":5,
> "nextobjectid":1,
> "orientation":"orthogonal",
> "renderorder":"right-down",
> "tiledversion":"1.2.1",
> "tileheight":32,
> "tilesets":\[
> {
> "columns":15,
> "firstgid":1,
> "image":"..\\/..\\/32x32Tileset\_gardenTheme.png",
> "imageheight":480,
> "imagewidth":480,
> "margin":0,
> "name":"32x32Tileset\_gardenTheme",
> "spacing":0,
> "tilecount":225,
> "tileheight":32,
> "tilewidth":32
> }, 
> {
> "columns":1,
> "firstgid":226,
> "image":"..\\/..\\/32x64.png",
> "imageheight":64,
> "imagewidth":32,
> "margin":0,
> "name":"32x64",
> "spacing":0,
> "tilecount":1,
> "tileheight":64,
> "tilewidth":32
> }\],
> "tilewidth":32,
> "type":"map",
> "version":1.2,
> "width":5
> }
> 
> //code
> 
> class PlayScene extends Phaser.Scene {
> constructor(){
> super({key: "PlayScene"});
> }
> preload(){
> this.load.image("set32x32", "./32x32Tileset\_gardenTheme.png");
> this.load.image("ninja32x64", "./32x64.png");
> 
> this.load.tilemapTiledJSON("mappy", "./mappy.json");
> 
> }
> create(){
> let mappy = this.make.tilemap({
> key: "mappy"
> });
> 
> let tilesets = \[
> mappy.addTilesetImage("32x32Tileset\_gardenTheme", "set32x32", 32,32),
> mappy.addTilesetImage("32x64", "ninja32x64", 32, 64)
> \]
> mappy.layers.map((value)=\>{
> mappy.createStaticLayer(value.name, tilesets).setScale(2);
> })
> }
> }
> 
> \`\`\`

That seems to have been a rendering error that has been fixed however, so I am wondering if I am just missing some configuration somewhere?

It seems like the [TileSet](https://docs.phaser.io/api-documentation/class/tilemaps-tileset) tileOffset property should allow me to offset the y position, but I have had no luck implementing that.

I have tried setting the tilemap origin as {x:0, y:-229} but it makes no difference.

```typescript
const tileset1 = this.map.addTilesetImage('TerrainTiles', 'tilesOutside', 229, 229, 0, 0, undefined, {x:0, y:0}) as Phaser.Tilemaps.Tileset;
const tileset2 = this.map.addTilesetImage('BuildingTiles1', 'tilesBuilding1', 229, 458, 0, 0, undefined, {x:0, y:-229}) as Phaser.Tilemaps.Tileset;

```

I also tried adding this in the map json

```javascript
         "tileheight":458,
         "tilewidth":229,
         "tileOffset":{"x": 0, "y": -229}

```

If anyone can let me know if this is possible and how to implement I would be very grateful.

---

<div class="post-metadata">

**Author:** ![mattredding](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mattredding/32/8845_2.png) [@mattredding](https://phaser.discourse.group/u/mattredding)\
**Post date:** [March 8, 2025, 1:11am UTC](https://phaser.discourse.group/t/tilemap-with-varying-height-tiles-aligned-to-bottom/15196/2 "2025-03-08T01:11:58Z")

</div>

So I figured out that my tileOffset values were not being set either way.  
As a workaround I set the tileSet tileOffset after making it and it works fine. It is also worth noting that a positive number was needed, I tried both positive and negative in to original settings.

`tileset1.tileOffset.y = 229;`