Creating an isometric map - images bigger than tile

Hi, i just want to be sure how to create isometric map before trying to put them in code.
So basically i want to have my map to look like this:

but here i used them as objects in object layer. Most of these objects (tree, bush) will be only part of enviromment with no function so it would be better to put them on different tile layer.

With orthogonal map it is easy to use tileset from picture but with isometric is nearly impossible (at least for me), only if you put tiles one by one somehow. Here is the result:

So i created collection of images and that works fine i suppose. Then i can with collison editor add to each image some collision shapes and so on.

Am i getting the logic right or totally wrong ? :smiley:

How would you do it better ??
Thanks for any comment :slight_smile:

As far as I can see youā€™re doing it exactly right.

You can use the tiles from the image collection on either a tile layer or an object layer, itā€™s up to you. To me it looks like you may want to only use a tile layer for the actual ground tiles, so that the rest of the objects can be placed freely and easily moved around.

For the collision shapes there is currently no ā€œisometricā€ mode yet. Thatā€™s something Iā€™ll probably be adding soon. But if you use polygons then you donā€™t really need it.

Thanks for reply and keep up the good work! :slight_smile:

Hi guys, have another question on this topic.

Cause I use melonjs it would be bad for performance to use ā€œCollection of Imagesā€.
And also there is a problem with the rendere as described here: http://www.html5gamedevs.com/topic/28030-how-to-load-collection-of-images/#comment-161617

So my point is I got to use images much bigger than the default tile size and have to do it with a sprite based tileset.
The problem here is, if I mark the big asset and try to draw it on the map, it gets drawn in isometric style, which looks very crappy. (check out the screenshot) Sure I can take each tile at once and put it on the layer, but that is realy exhaustingā€¦

How is it recommanded from Tiled to implement these ā€œbig assetsā€?

Bump, any ideas or help?

@fishbonebob My recommended way for such assets is to use an image collection tileset. If this performs bad or doesnā€™t work in melonJS, then this is an improvement to be made on their side. But I read they already support texture atlases so hopefully this will also work in combination with image collection tilesets.

That said, Tiled could potentially be changed such that when capturing multi-tile images from the tileset, it would create a stamp that will look the same when placed on the map. The problem is that it is different depending on the map (isometric or staggered isometric with all its variations). It may even be impossible, as is the case for hexagonal maps.

1 Like

Hi Bjorn, I was wondering if it were possible to specify, even on a Tileset level, the anchor point of placement of tiles on the grid?

I had recently thought of using Image Objects to place larger-than-tile-size tiles, but I realised, too, that my main issue was primarily the alignment of the tiles. The larger the tiles get, the higher their offset, because, it appears, the anchor point of placement is on the lower-left corner.

I have this particular issue because in my design, Iā€™m using smaller tiles as a logical map (placement of programmatic markers, such as impassable tiles, containers, etc). I do this so I can move the player more precisely (granularity) in the game. But for graphics, Iā€™m using larger tiles for aesthetic reasons; these tiles are the ā€˜connectableā€™ or ā€˜tileableā€™ graphics, not necessarily stand-alone sprites (eg buildlings, trees). I intend for them to connect/align with each other like walls and fences, hence my concern for placement.

I am currently trying to implement Image Objects into the game engine, replacing my Tile functions, but I thought of suggesting this because I thought it was more elegant to use tiles rather than Image Objects for cases like these.

Thanks for reading.