informa
3 MIN READ
Featured Blog

Lovers in a Dangerous Spacetime 2.5D Rendering Challenges

Following up on Matt's last devlog, I'm going to wrap up our character creation process by discussing how we are rendering the 2.5D characters in Lovers in a Dangerous Spacetime. Warning: It's very Unity-y.

gif_jellymaya

Following up on Matt's last devlog, I'm going to wrap up our character creation process by discussing how we are rendering the characters in Lovers in a Dangerous Spacetime. Warning: It's very Unity-y.

When creating the assets in Maya, we typically use multiple quads that are each skinned to the animated rig. If we were to import this model directly into Unity, we would get just that – each quad would have it's own Skinned Mesh Renderer and would account for 1 draw call individually. With this method, we would be looking at between 20 - 40 draw calls per character on screen. Additionally, for our game we needed to be able to use the Unity callback OnBecameVisible/OnBecameInVisible, which uses the GameObject's Mesh Renderer to test camera visibility. Since a character would be made of many meshes, there was no single mesh we could use the callback to check on.

Our solution was simple. In Maya, we would combine all the quads into a single mesh and that would solve all of our problems.

diffuse
Here is the JellyBomber with the default Transparent/Diffuse shader.

As you can see, that is not exactly the result we wanted. Unity isn't properly Z-sorting on the vertices within the mesh, so quads are being drawn on top of each other in the wrong order. But lo! Unity provides another shader just for this: Transparent/Cutout/Diffuse. 

cutout

Unfortunately, this also fails to give us the desired look because it cuts off anything that doesn't have an alpha value higher than the cutoff value. A major contributing factor to the look of our game is the bloom around each object. We accomplish this by 'baking' it into our textures in Photoshop, so we don't want our shader's discarding the semi-transparent bloom.

bloom
Dat bloom!

What we need is a multi-pass shader that combines both of these qualities to properly render our single mesh characters. We want the first pass to sort the geometry, and the second pass to render the bloom. I made a little shader that accomplishes this, which you can get here.

shader

shader-code

It is a very basic vertex-lit shader I implemented using just shaderlab syntax.
In the first pass, "Alphatest Greater [_Cutoff]" only renders pixels with an alpha value greater than the Alpha Cutoff (which can be set between 0 - 0.9). This covers our opaque pixels, and Z-sorts them properly.
In the second pass, we set "ZWrite Off" as well as set "ZTest Less".
These settings make sure that the transparent bloom isn't culled by any other transparent quad in the mesh by preventing them from being written to the Z-buffer. Finally we set "Blend SrcAlpha OneMinusSrcAlpha" which is what makes the texture transparent.

jelly_adjustment
Adjusting the Alpha cutoff amount

Now we are finally able to achieve the look that we want for our characters using a single mesh.

2pass

Caveats:
This is just the way we are rendering our models, it may not make sense for you, and if you know a better way, we'd love it if you shared it below.
This shader uses Alphatest, which is very not-optimized when used on iOS/Android hardware, for some complicated reasons (I think it has something to do with the Tiled Rendering Pipeline). However, since we're focusing on PC/Mac, this shader does the job for our game.

Updated:
Thanks to Joel below for the suggestion, and @trialbyfun on twitter for pointing us to this, but you can in fact control the indexes of the vertices and how the quads will sort by selecting and combining the geometry in Maya from back to front. This will work for some of our geometry but our more complex characters have animations that move in the Z-axis which means that they still need this shader to dynamically sort.
Thanks for the help!

Additional reading:
Unity Shader reference

Original Post:
http://www.asteroidbase.com/devlog/6-2-5d-rendering-challenges/

Latest Jobs

Xbox Game Studios

Redmond, Washington
10.5.22
Technical Lighting Artist

Innogames

Hamburg, Germany
10.5.22
Game Designer - Elvenar

Six Foot

Houston, TX
10.3.22
Six Foot Director, Player Relations

Hometopia Inc.

Remote
10.7.22
Lead Engineer
More Jobs   

CONNECT WITH US

Explore the
Subscribe to
Follow us

Game Developer Job Board

Game Developer Newsletter

@gamedevdotcom

Explore the

Game Developer Job Board

Browse open positions across the game industry or recruit new talent for your studio

Browse
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more