“You can’t use Unity for 2D!”, they shout. “Unity uses all three dimensions you idiot, and is therefore useless if you’re only using two of them!”. Those are the words that were hammered impotently into keyboards the world over when I announced I was porting The Swindle from XNA to Unity.
That said, I’ve also had loads of people emailing asking how we’ve managed to make it look so tasty. Well, here’s your answer: we’re using two main Unity assets. 2DToolkit is in charge of all our core spritework, like buildings and tiles. We’re then also using SmoothMoves to animate all our characters. Beyond that, the man in charge of [clever tech] is Tim.
First up, he’s written a couple of Unity editor extensions to make working in 2D a little smoother. For example, any object that has a Toolkit2D sprite component has its Transform settings swapped out for something more suited to 2D work, such as simple degrees-based Rotation or grid snapping options.
In terms of getting a nice 2D display set up, here’s what Tim’s got to say about what’s going on:
Every single frame in The Swindle is built up of three layers: The Atmosphere (the distant skyline, etc), Backgrounds (buildings, etc) and Main Camera (the player, etc). First, it’s worth going over how we get Unity to render these layers. Every game object in unity has a ‘Layer’ property, and every object has to be in one of these layers. Unity uses this for a number of different things, including collision detection and rendering.
Unity uses Camera objects to draw the game world to the screen, and one of the settings on a camera is which layers the camera can draw. The Swindle uses this in its ‘Camera Stack’ system: the main camera has two child cameras attached to it, giving us one camera per layer.
Cameras in Unity have a ‘Depth’ value to control the draw order. We just have to tweak that to make them draw in the right order > Atmosphere first, then Background and finally the Main Camera. Thanks to this parent-child relationship, as the Main Camera moves around the world, the other cameras follow it.
Atmosphere and The Sun
The Atmosphere is the first layer we draw. The Swindle has a fully dynamic day and night cycle, so the lighting in a level can drastically change as time passes. Just like the real world the sun governs how the light changes as these virtual hours pass.
The sky system feeds off the Sun colour setting and the game’s clock to tint the atmosphere and move the sun, stars and moon in to the right position. Once all this setup work is done we can draw the first layer. Here we use an ‘orthographic’ camera to render the atmosphere layer. This means the any object drawn will be the same size, no matter how far away it is from the camera.
Next up we render the background layer to fill in the skyline. This is stuff like trees and buildings. To render this layer we use a perspective camera. Unlike the orthographic camera used by the atmosphere layer, this foreshortens objects as they move away from the camera. This gives us a cool way to implement parallax scrolling. This is also the first camera that has some logic on it; the Atmosphere camera is dumb, it just draws whatever it sees on the atmosphere layer, the background layer however has a number of scripts attached.
That said, the first two are not that interesting. We have one to sync the camera zoom levels up with the main camera and one to set the sort mode. The way unity sorts objects with perspective cameras can cause ‘z fighting‘ in 2D games, so we just tell it to use ‘orthographic’ sorting even in ‘perspective’ mode.
Finally we have the Blur post process. This is the cool bit. After the background is drawn we blur it (and the sky behind it, remember each layer is drawn on top of the last!) to give it a hazy feel. How strong the blur is depends on the time of day. At midday it’s at full strength, but by midnight it has faded out leaving a nice crisp outline to buildings. As you can see in the screenshot below, it’s another thing that helps make the game feel different as time progresses.
Finally, we draw the main gameplay layer on top. This is where all the characters and level geometry live. To render the main layer we use a perspective camera just like with the background layer. The game still doesn’t look like The Swindle yet, and that’s because we’re missing the final post processing pass.
This is 2012, and as such every game has to have some bloom. The Swindle is no exception. As the game uses quite muted dark colours the bloom effect really make the bright yellow highlights glow. It looks great in screenshot but even better when moving! We added in a small script that changes the amount of bloom over time using Perlin noise. This makes the glow pulse in a smooth, natural way and really adds a feel of energy to the scene. Finally we do the one last thing that makes it really feel like The Swindle: Film grain and Vignette. These both simulate different aspects of that old film camera look.
Dan again. Hello. So there you have it. We’ve really not encountered any problems whatsoever doing 2D in Unity, it has been a complete breeze.
We’re hard at work getting the game playable again – Tim’s currently working on AI while I’m getting the player’s toolkit (guns, telekinesis, explosives etc) up and running. You’ll be pleased to hear it’s now possible to shoot out windows and dive through them. Phew!