Best Practice for "behind" capabilities for multi-tile objects?

Simply speaking, I have “objects” I wish to place in my map that are more than 1 tile tall, this causes issues with trying to utilize rendering order by Y position to achieve a desired “character can walk in front and behind of an object”

In the picture above, the red dot is the character’s sprite original, and the green and blue dots are the origins (set to "bottom) of the 2 tiles that make up this lightpost.

Since we utilize render order by y, the “walk behind” trick works just fine for the bottom tile, however the top tile breaks the illusion because its “origin” should realistically be 1 entire tile lower than it actually is.

I am using SuperTiled2Unity to export my Tiled map and tile data into Unity, so I potentially have a way I can post process in unity manually to fix this, but if anyone has a clever trick to make this work without needing to manually “fix” specific tiles in Unity, thatd be appreciated.

Is there any way at all to “group” tiles together to have 1 single origin in Tiled, a way to say “this tiles origin is actually over here”?

Keep in mind we even have objects that are 3, or even 4 tiles tall, which means the tiles for that object need to have variable offsets for their origin.

For example lets say an object in game is 4 tiles tall with tiles A, B, C, and D going down. A would need its origin offset 3 tiles down, B 2 tiles down, C 1 tile down, and D’s bottom origin is fine as is

Another solution I fiddled with but was saddened to find was that a Tile Object cannot have its origin modified, otherwise I could have perhaps set up some form of Automap rule to generate the offset tiles automatically simply by placing the “base” tile and then auto-scaffolding all the top objects above it, but no dice.

The simplest way to deal with such props is to put them in their own tileset(s) where the entire prop can be a single large tile, instead of being made up of multiple tiles. You could have different tilesets for tiles of various sizes, or you can have a single tileset with your various large objects if you use an Image Collection.

An alternative is to use a custom property on the tiles that set a custom pivot and z-sort based on that, but that’ll require extra code in your game, as well as setting all those custom properties.

I can probably work with that. My base tileset I have is a collection of different sized objects that would be difficult to “break up” by hand, do you by chance have a recommended tool that can take a tileset of objects made up already of n x n tiles (in my case all the tiles are 48x48), and I can easily break em out to seperate images?

Effectively I have some 1x2, 2x1, 3x3, 4x2, etc etc “objects” of tiles in my tileset, but all the tiles are same size so, might be handy to have a tool that very quickly can slice the file up into individual images.

Any recommendations?

If you use a recent version of ST2U, you can use an Image Collection where all the tiles use the same tileset image and are different subrects of it, so you don’t have to actually break the tiles out into separate images.

I’ve previously written this tile atlas script for Tiled that lets you create such an Image Collection by defining the tiles in your tileset with Rectangle objects. The first part of the script will create a map for you that displays your source image, set its tile size to 48x48, enable snapping to the grid, define your new tiles, then the second part will create the tileset for you with these tiles.
CreateTileAtlas.js (4.8 KB)

Oh this is brilliant, thank you so much! Ill give it a spin

Well it sort of worked but seems that ST2U is having issues with the import, not sure if its a setting I need to tweak to make it work right but Im not getting this as an output D:

In Tiled it all looks correct and I can place the individual “multi tile” sprites after generating the tsx file and saving it, but once unity imports it all hell breaks loose, Im guessing its some kind of rendering setting I need to fiddle

Is it displaying the entire spritesheet? I thought ST2U supported such tilesets as the ST2U dev mentioned them a couple of months ago, but it looks like support hasn’t actually been implemented yet, the most recent public commit is from before that time.

Looks like I’ve misled you, I apologise! In that case, I guess separate images are the only option unless you’re willing to wait until ST2U adds this feature or contribute it yourself.

For generating separate images, many image editors, such as Aseprite and Photoshop, have a Slices feature that let you define rectangles (with grid-snapping) similar to how my script’s interface works, and export them into separate images. Atlased can also do it, and hopefully it also has snapping options.


Atlased worked perfectly! Definitely now added to my workflow.

After creating the imageset based tileset everything works perfectly, clipping happens precisely how it outta!

I followed the steps here to quickly and easily slice up and export the tileset smoothly

1 Like