I’m trying to make isometric maps like the “Tactics” series of games. In general these games vertically separated tiles at about half height compared to the ground plane. I’ve been able to simulate this in a very hacky way:
I set the map grid to 16x8
I am using 32x24 “Half Height Blocks”
I only place tiles every other grid placement
This seems to work, but I lose a lot of the benefits of using Tiled! Is there a better way to do this? I think if I were able to offset layers by an amount this wouldn’t be an issue.
Edit:
Oops! I didn’t think to look for offsets in the layer properties. This solves a lot of my issues. Is there a way to automatically offset layers?I feel like that’s my last issue…
I think offsets are the only way to do what you need with a tileset like this. There’s no built-in way to offset layers automatically, but you could probably write a script to do it. However, while at a first glance it sounds like you just need to offset every other tile layer by 8px, in practice this is likely to get more complicated, so it’s something probably best done either manually, or with a script that just toggles the offset for the currently selected layer.
I’d also like to mention another way this sort of thing can be achieved: variable-height tiles, i.e. having both full-height and half-height tiles in the tileset. This method can even be extended to use tiles of many heights, allowing making maps with variable heights using only one layer, which is more convenient to use with some engines. The downside to this approach is the redundant tiles and the texture space they take up.
Are there resources for how to make scripts for Tiled? I think all I’d need is for each layer to be 8px in the Y direction.
Also, mildly related, is there a way to make tilesets that are possibly, uh, rotatable? I know this is a big leap from the above, but the thing I love about isometric maps is the implied 3D. Creating a robust enough tileset isn’t a problem. It’s just doing it by hand is a bit much.
The scripting API is documented in the manual (this is the “latest” version of the manual, which applies when you’re using the development snapshots, which I’d recommend). You can modify the “offset” property of each layer from the script.
Regarding rotation, Tiled currently only supports physically rotating the tile graphic, but in the context of isometric tiles you’d usually want to select from 4 variants of the same tile rotated by various degrees. If you organize your tilesets in a predictable way, you could write a scripted action that rotates by modifying the tiles of the current brush. This could be combined with some custom tile properties that indicate for example which tiles have rotated variants and which do not.
I hope you’re talking about the first image becaus the second image is my reference point and not my game!
Anyways the offsetting is working out, but I’m running into another problem with regards to Z ordering. I’m not sure what I’m doing wrong in this case:
The plants with the red Xs aren’t stacking properly. I’m guessing this is because the one that is overlapping is on a higher layer and each layer always overlaps the previous layer. I’m not really sure how to solve this problem. I tried messing with offsets, but I’m guessing that each higher layer just overlaps every lower layer. What I want is Z ordering each tile the closer they are to the bottom of the screen. Any help
Layers are always drawn in order from bottom to top, correct. Tile z-ordering only applied within a layer.
Objects like this may be better off placed as objects rather than as tiles, since overlaps are likely and objects offer more flexibility with z-ordering and positioning. I think dedicated isometric engines typically z-sort columns to avoid these issues, but Tiled isn’t really designed for that, unless you use a tileset designed with columns in mind, as I mentioned before.
Another possible workaround utilizing more object layers, with some layers just for conflict avoidance. You could probably get away with 2 or 4 of these extra layers.
In this particular case, I would consider ignoring the small rendering issue in Tiled and simply render the tiles in a different order in your game, either using Z buffer or by drawing each stack of tiles individually.
Tiled currently has no option for doing this. It is covered by the following issue:
Btw, I was talking about the second screenshot in your first post, but in any case your last screenshot looks great as well!
I generally use Tiled to quickly test tilesets I make, but maybe I can see how I can export to Unity. I’m much more of an artist than a programmer, tho.
If your goal is to just put together scenes and you’re not worried about performance and game logic, then you could just make extra layers to deal with overlap problems.
That said, if you’re making tilesets for use in games (e.g. to sell as asset packs), it helps to know of these issues and to consider designing tilesets that can work around them. It may help you to look into the tools that creators of isometric games use, and the types of tiles that work best with them. For example, including half- and full-height tiles may be good for some engines, while other engines might work with tile sides, tops, and bottoms.
So here’s the first “big test” for the tileset. I ended up doing this in Aseprite, but I think it gives me a lot of insight into what my workflow and thought process is when building an isometric map
Because I build my tiles with two sides and a topface, I treat them like voxels
I either build columns or quads parallel to a XY, XZ, or ZY
I found myself using either the full tile or just the topface of the tile when I was working on top platforms
I added detail building up columns as well. The front stairs were built column by column
I don’t know if this workflow is consistent w/ how isometric works in Tiled or if this is how isometric is going to change for tiled in the future, but I thought I’d share. Tbh iso seems like it’s all just building up layers on the XY plane? Anyways, thanks for reading!
@Raphael_Azcueta Thanks for providing some additional insight! While the current way of editing isometric maps in Tiled works fine for flat maps like the ones seen in Diablo, is does indeed not support this voxel-based workflow very comfortably, in addition to the rendering order issue. I’m definitely interested in providing support for this in a future version.
That would be fantastic to see! Being able to “extrude” raised platforms and otherwise edit things in the Z dimension would be be convenient and just fun to play with, I think. I’d imagine this would need to be a whole other isometric mode though, one that changes the way some of the tools work, since the conceptualization of what’s being drawn doesn’t match (or at least shouldn’t match, ideally) the actual tile results. For example, if each “column” is built in Tiled out of tiles, it’s likely that there will be a lot of overdraw, and it would be nice if exporting had an option to cull tiles that are entirely behind non-transparent tiles.
It would also be cool to be able to export heightmaps based on terrains built this way, as for some types of isometric games, that’s all that’s needed to reconstruct the level in-engine. The ground and props all have some height and tile type, and it would be neat to export this automatically. This can already be done manually in Tiled by having a heightmap layer where each tile corresponds to a particular height and a terrain type layer (and extra height+type layers for props), but it’d be a lot better if we could visualise the result in Tiled.
Also, your tileset’s looking lovely, @Raphael_Azcueta! Makes me want to make my own.
