Isometric headache

[Morgomir]

Hi,
I have faced an issue and have no more ideas on how to fix it properly, so I hope someone here might be able to help me. Here is my problem :

In our game, we have a store with a lot of shelves. Customers come in and out, and pick some of the items.
We want all the items to be displayed on the shelves, independently, and they must be displayed properly (masked by some parts of the shelves, like the side, the top or the middle). We’d like to put a lot more items than what is on the screenshot below.
We also want the shelf itself to be displayed properly, appearing in front of or behind units as they come.
It is important to notice that many moving objects (customers) are going here and there and so everything should be rendered properly all the time.

Before adding the items slots in the shelves, I had a working system, inspired by those 2 blogs :

• https://breadcrumbsinteractive.com/two-unity-tricks-isometric-games/
• https://www.gamasutra.com/blogs/MartinPane/20170309/290889/What_I_learned_from_trying_to_make_an_Isometric_game_in_Unity.php

Basically, I play with the rendering order of the SpriteRenderer of every object to display things properly :

protected override void UpdateSortingOrder() {
spriteRenderer.sortingOrder = -(int)(objectTransform.position.y * YFactor);
}

And I do the same with a sorting group when there are added sprites to the object (cf the birdhouse example of the first link)

But as you can see in the 2nd link, this is not enough. When objects aren’t squares (equally wide as they are thick), the sprites must be splitted to be displayed properly.
And apart from being awfully annoying to do (because I would have tried to automate it at some point), it worked pretty good.

But the items are bringing a bigger problem. Because the shelves aren’t very thick, but they are wide, they need to be split in many parts.
The items are rendered like the birdhouse, so they need a pivot, a parent, to tell what is their Y reference for the rendering order.
If the shelf wasn’t splitted, no problem! But it is, and that means we need to pick a pivot amongst the different sprites of the shelf.
The problem stands when the item isn’t completely inside a part. because then, a part of the shelf is going to be displayed on top of it, or the characters going too close might see the item being displayed in front of them.

As you can see on this drawing, the slots are sometimes cut in half by the red lines, which correspond to the sprite splitting of the shelf. That means those slots are broken, there is no way the item in it is going to be displayed properly.

Right now, the only solution I see is to constrain the art/design to try to avoid those problems. Things like making the shelves thicker, spacing the items more. But honestly I hate it.

A friend of me proposed to go 3D for the sprite rendering, but I couldn’t find a way to make that work.

I am not against 3D, but keep in mind that all the assets, ground included, are sprites, and all the logic (pathfinding, collisions, etc …) is 2D as well, working on the X/Y axis.

I would be forever in debt of anyone who could solve this with a long term viable solution.
Thanks in advance,
Matt

[angrypenguin]

This is a graphics question rather than a game design question, so I’d request to have this post moved to the relevant section. More likely to get a useful answer there.

Anyway, the issue is that you only have 2 dimensional display data (a sprite), but you’re interacting with it in 3 dimensions and want your display to reflect that. Splitting it up into pieces will give you more granularity if you’re going to fudge it, but will never fundamentally address the core issue: you want to display stuff that is logically “behind” the picture of the shelf as if it’s in front of parts of it, and vice versa. There is no data for the computer to know how to do that, so it is going to have problems.

First, I would suggest seeing if there is a way you can write custom values into the depth texture. You could then provide a custom depth texture for the sprites where this matters, essentially adding back in the missing 3rd dimension of data. Making those depth textures could be pretty tricky.

My other thought is, would it be easier to display these shelves using 3D models and an ortho projection? Crazy thought: you could even make a shader which just renders your sprite at the object’s location in screen space?

Or, can you place the sprite in the game diagonally, on a rotated quad? That way it will have some of the depth info just from the quad’s position.

In general, games which use 2D graphics use design constraints to avoid issues like this, rather than using technical approaches to solve for all possible cases. For instance: products always draw on top of shelves, and products can only be placed in specific spots on shelves where they look correct. Or, shelves are only ever one unit wide. Or, interactive stuff is only ever on the top shelf. Or, shelves only ever point directly at the screen.

[angrypenguin]

@Morgomir

As you can see on this drawing, the slots are sometimes cut in half by the red lines, which correspond to the sprite splitting of the shelf. That means those slots are broken, there is no way the item in it is going to be displayed properly.

To expand on my last paragraph… this is more difficult than it has to be because it’s being approached backwards. You’ve got art and you’re trying to make your functionality match the art. It’s quite complicated because the art hasn’t taken how the computer works into account.

You can make it work, but it’s going to require enough understanding of how the computer works to modify the system to meet the art’s requirements.

Or, you can get an artist involved and re-design the shelf in a way that fits both the functional and artistic needs. I would suggest designing the shelf to be split vertically, per your drawing with the red lines, with “Shelf Start”, “Shelf Middle” and “Shelf End” sprites, where you both try variations on that design until you find one that works both artistically and functionally.

Or instead of a long shelf with dividers, just make long shelves by putting a bunch of narrow ones next to each other.

Because even if you do make it work with the art as is, it’s going to be a heck of a lot more work, testing, and potential for bugs than if you just ask “Can we make this easier and still meet our goals?” at this point.

[Morgomir]

Hi,
Thank you for your answer !
Sorry for the wrong category, I couldn’t find one that really suited my problem and I found another topic like this one in Game Design.

Anyway, I see now why it can not easily work without huge workarounds …
Honestly, I have no idea what depth textures are and how to customize them. The resources I’ve found on this were talking about lighting and post processing and I’m not sure how this could help my case. Shaders seem a bit heavy for what we want to achieve.

The sprite is not suited to fit a rotated quad since it’s already drawn in isometric perspective.

In the meantime we’ve thought about making the shelves like lego pieces, that are independently working together so I very much understand and agree with you on the second part.

I think we can make it work like that, I just hoped that somehow there was a magical solution to this hahaha.

Thanks again !
Matt

[angrypenguin]

@Morgomir

Shaders seem a bit heavy for what we want to achieve.

To the contrary, shaders are probably the most lightweight way to achieve most graphical effects. Your GPU is running some kind of code for every pixel already, it may as well be code that directly gives you the result you want.

But that requires having someone on your team who knows how to use them, and if you need to make and mess with depth textures they need to understand a fair bit of the graphics pipeline in general.