Isometric Sprite Editor

About

One of the hardest challenges I faced when doing an isometric 2D game was sorting. Making the sprites look coherent in-game when there are hundreds of irregular shaped objects became an issue due to sorting.

So a quick background on sorting. You can set a custom pivot in Unity’s settings to do isometric sorting. While this works on regular shaped square sprites, this fails easily on irregular shaped sprites. What do I mean?

In this sprite you can easily see the red dot in the middle which represents the sorting point of the sprite. This means that anything below the red dot is drawn above it while anything behind the red dot is drawn behind. This works well as you can easily change the sorting point of the sprite in the sprite editor. However how would you sort something like this?

¹

This is more difficult due to the fact that only a single point of the sprite determines the sorting point of the renderer. It would easily break the illusion of the game when you move around the scene. This video shows a solution that can solve this issue. They do run-time sorting on the cpu, changing the sorting order based on the location of the objects relative to a point or a line from the object.

¹

While this works perfectly, it has a large run-time cost as this does the sorting every frame and doesn’t scale well when there are many objects. It doesn’t also play well with tilemaps since it manipulates the sorting order instead of the sorting point. The only other solution that doesn’t have these drawbacks is by subdividing the sprite into multiple sprites and letting the renderer do the sorting.

¹

So how do I do perfect sprite subdivision without incurring any errors and doing it quickly?

Solution

By creating a sprite editor similar to Unity’s but specifically catered to isometric sprite subdivision, I can easily automate the task after generating the bounds of the sprite. With a bit of math, I can then just use the generated split sprites then place them perfectly in the tilemaps or sprite renderers to make it seem like they are just one sprite.

Features

• Zooming and panning in the window and selection using the mouse (with dragging)
• Non-destructive exporting
• Dragging, expanding and locking of sprite bounding box
• Isometric pivot placements
• Isometric collision placements
• Other metadata for the game such as irregular polygon collisions, transparency collision, shadow generation etc

*This is an old video of the tool

Closing Thoughts

This was my second custom tool in Unity and up to now I still find ways to improve it, from adding more features that the game needs, to finding some subtle bugs and fixing it. Without this tool, the isometric sprites would’ve been limited to a square shaped in design which would limit the aesthetics of the game.

1. Credits to Scott Steffes for the screenshots in the article ↩ ↩² ↩³