How to use isometric tiles with different sizes?

Question

I am trying to create my first games using Godot 3.0 . So far I really like it! I went through some Youtube tutorials and downloaded the city asset from https://kenney.nl/assets/isometric-city (Which is great work, by the way!)

However, the pack contains images of different heights:

Some with 101px height, some with 104px height and heigher tiles with 133px height and 133 px width instead of the default 132px width.

It would be a pain to add every single image to a sprite, so I selected all images in Godot and dragged them onto the 2d view which then automatically generated the sprites for me. I saved the TileSet, created a new scene and made a new TileMap node which was fed with the previously exported TileSet.

For the cell size I use 128x64. I don't know, if this is correct, but the same tiles fit together well. However, tiles of different image sizes don't fit together. The variating heights and widths make the whole scene a mess! They aren't properly aligned or even look like they were on different height levels.

What should I do to solve the problem? (Changing the asset pack is not an option)

Thank you for your time and help.

Comments

Nice question: i think the main problem here is that the tiles in the asset are done with the idea of placing them "on the bottom" (bottom left of the picture on bottom left of the cell), while godot alway place them on the top (top left of the picture on topleft/center/bottomleft of the cell, depending on the cell_tile_origin setting).

Unless there is a magic button i dont know about, the best suggestion i can give you is to manually resize the pictures and to add some extra transparent sky on top of them, so that each one will have the same height (but keep the tilemap grid at 128x64)

---

Hi Andrea,
I think, I get the point. This is IMHO DEFINITELY something that has to be added to Godot. All the isometric assets I used from Kenney.nl come in different sizes. I now wrote a script called "equalizer.py" in python which resizes all images to the largest image size and then puts all image content onto the bottom of the image. That way, I am now able to connect tiles of different heights. However, the problem still is, that the top of my tiles is aligned to the floor in Godot. This looks like everything was in the basement and makes click event handlings and coordinate transformations from normal world vector to map become wrong. To work around this, I temporarily created one TileMap with nothing in it as the base tilemap (handling clicks and more) and a second tilemap with a transform y position of -32 which the tiles are placed on so that they look like they were properly aligned on the first dummy TileMap.

This, however, is a bit unclean workaround, requires a lot of work and makes aligning Tiles to the Godot isometric grid quite hard.

In my opinion, this is an urgent (kind of) "problem" that should be fixed in the next releases. I would be happy :)

Thank you for your help and effort!

---

For your information, I found that https://github.com/godotengine/godot/blob/master/scene/2d/tile_map.cpp is the file to be adjusted to support a bottom left to bottom left option. I found the code for "TILEORIGINBOTTOM_LEFT" for example. I, however, am not really a CPP engineer and I just started using Godot a couple of days ago. Any support and help will be appreciated.

---

Famecastle, isn´t it easier to simply offsetting the value of the worldtomap?
Something like

var p=$Tilemap.world_to_map(get_global_mouse_position())+Vector2(0,-1)

---

Well, this actually IS easier. Thank you. However, the Grid in the Godot 2D View is not properly aligned to the tiles. That's something that is taxing my brain ;-) . If I want to report an issue, where should I report it? On GitHub? Or to a specific E-Mail-Address?