Sprite stacks - Hovercraft devlog

Have you ever seen pseudo-3D pixel art games? There are multiple methods to achieve this effect, but I will cover only one of them - sprite stacking.

So what is sprite stacking?

2023-10-10 19-44-15_5.gif

Sprite stacking is a technique based on rendering voxel model as many horizontal slices placed on top of each other. This method allows us to easily render big voxel models using traditional rendering methods.

:rocket: Let's look at pros and cons of sprite stacking! Pros: - Looks aesthetically pleasing - Pretty easy to make it working - Kinda does not have an alternative Cons: - Most naive implementation is slow - Realtime version may require multiple optimizations

So, how can we accomplish that? Let's start with creating voxel model:

Catank.PNG

This is the model I created for my game - Hoverspace

Btw, you can play it here: https://ldjam.com/events/ludum-dare/54/hoverspace

I created this model in MagicaVoxel. Image above is rendered with magica's renderer. In order to use this in game, I had to export it as slices:

Slice.PNG

After that, I had to do just one thing - actual sprite stack renderer.

Foremost we need to construct mesh, that we are going to render:

code.png

All these buffers are assigned only to one mesh. It allows us to render all stack just in one draw call! Next, we should define actual rendering logic. In the most simplistic case, we would just set mesh filter or render stack using Graphics.DrawMesh and call it a day.

We are not going to do this. It's just too easy ;)

My approach is slightly more complicated. Here's my algorithm: - In update, check if object rotation has changed. - If it did - render mesh onto render texture. If needed - apply outline shader. - Then draw render texture onto the screen in the correct place.

This allows us to avoid rendering whole mesh each frame, by replacing it with just one quad! Also, this method gives us possibility to apply some effects on top of the texture. In my example, it is outline.

This is how I render mesh onto render texture:

RT.png

If you are interested in render texture utilities like ones used here, here you are: https://github.com/nothke/unity-utils/blob/master/Runtime/RTUtils.cs

Figuring render texture size is done with lots of math. And due to the fact that my approach is not optimal I'll leave this as an excercise for you :smirk:

Though, this method may help you in your journey. It calculates screen space AABB that can be used for setting RT size:

RTSpace.png

Rendering render texture on screen is straightforward.

This algorithm was used in my game - Hoverspace. I would really appreciate if you check it out! https://ldjam.com/events/ludum-dare/54/hoverspace