Size Five Games



SIZE FIVE is a BAFTA-winning indie video game developer.

You can check out the games we've made below, find out a little more about us here, or join in our snazzy forums here.

My email address is dan@sizefivegames.com

You can also totally follow me on Twitter: twitter.com/danthat

Using Unity3D for The Swindle’s 2D

Nov 72012

“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:

Camera Stack

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.

Background Layer
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.

Main Layer

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!

If you’re interested in keeping up to date with The Swindle, follow me on Twitter or keep an eye on The Forums.

16 Comments

  1. Nov 82012
    Aubrey,

    Ah! Cool to know you’re doing camera stacking. Nice term for it. I always liken it to photoshop layers. Our game’s using about 5 cameras… background, back HUD, behind game play effects (as to not let fx hide the game play), game play, and front hud. Got a bit indulgent about it, really. But it’s fun to mess with!

  2. Nov 92012
    Micky,

    Personally, I found the more senior and vocal members of the XNA community to be arrogant and ignorant at the best of times which is why I moved to Unity 3D

  3. Nov 102012
    Shawn,

    hey guys- thanks for doing this write-up, I’m exploring unity 2d as well. quick question: how are you handling resolution scaling for different screens? 2dToolkit has a built in system for this with their 2d cameras, but you mentioned using a perspective camera for some of the layers. Wont this produce differing results with your camera stack on different resolutions?

  4. Nov 102012
    Tim,

    Hiya Shawn, thanks for the question.
    Were not doing anything special for that, it only really matters if you doing a pixel perfect game (for example, a 8bit style game). We don’t have to be pixel perfect, as we are zooming the camera in and out all the time.
    Perspective cameras will only give different results if the aspect ratio changes. We do most of our testing in 720p(1280×720). if we were to run at 1080p(1920×1080) we would render the exact same amount of the scene, just at a higher resolution. This isn’t much of a problem, as Dan draws all the art at a higher resolution than we would need in a pixel perfect 720p game. This is because we have to zoom in close to things and we don’t want the game to look pixelated, we want it to look more awesome! This gives us loads of scope to support much greater screen resolutions as well, because all the art is nice and big. On top of that, the game is post processing effects heavy. Combining blur, bloom, noise and film grain will hide a lot of pixilation before it becomes noticable.
    If the aspect ratio changes though, we would be rendering more/less of the scene and that turns out to not be big deal. It would impact on the placement of any UI, but not in the quality of the final render.
    Hope this helps!

    Tl;dr; The games art style makes this a non issue.

  5. Nov 112012
    Shawn,

    Awesome- you just made me realize that I don’t need the 2d camera for my game either. This was also preventing me from having a functioning zoom. I’ll have to do some tests this week.

    Do you guys use a character controller or a custom implementation of the rigidbody? and are your post-processing effects available to anyone using unity, or did you write custom shaders/other for them?

    thanks again

  6. Nov 112012
    Dan,

    All our post process effects are Unity Pro, I think, but there are a couple of handmade overlays.

    Tim’s written some custom character controller stuff, but as I understand it, it’s just a capsule rigid body with some trendy input stuff attached. He’s talking about re-writing it, it still feels quite sluggish to play at the moment.

  7. Nov 122012
    Shawn,

    Cool, I’ll check out unity pro once I’m further in the development cycle. The character controller works very well for me, my only issue is the actual capsule collider which I really wish I could change to a box. results in some odd platform/edge collisions :/

    forgot to add to my last post- will you let the user change to any resolution (resizing the window) or will they picked from fixed resolutions to maintain your aspect ratio? or will you be letterboxing?

    thanks again for your insight, it’s been a huge help. I’ll definitely be picking up this game upon release.

  8. Nov 122012
    Dan,

    Uh, not sure yet. I’ll worry about that when there’s more game done. I’ll probably have half a dozen set resolutions to choose from :)

  9. Nov 122012
    Jason,

    Tim,

    Any chance of going into more detail about the unity editor extensions? I’m fairly new to unity and would love to see how other devs are extending the editor in useful ways.

  10. Nov 132012
    dan,

    Hi Jason,

    Tim expanded that response into a whole new post

    http://www.sizefivegames.com/2012/11/13/editing-unitys-editor/

    :)

  11. Nov 132012
    Xellinus,

    Hey this looks great and helps me a lot with the P. Scrolling issues I’ve been having, however, I can’t seem to get some of the sprites in the middle field (the scrolling area) to stop popping in front of each other. I tried setting up a simple script on the perspective camera to:
    TransparencySortMode trans = TransparencySortMode.Orthographic;
    on start but that seems to do nothing.

    Ah well.
    Your game is looking amazing. I can’t wait to pick it up!

  12. Nov 132012
    Xellinus,

    Crap. Well that’s embarrassing. Fixed my simple problem and I can’t delete the evidence of my incompetence from this public forum. Forever shall I got down in history as the man who couldn’t set a variable. :) So class!

  13. Nov 142012
    dan,

    Ha ha, glad you got it sorted :)

  14. Nov 162012
    Justin,

    Hey guys,

    Just took a look at all of this and love the look!

    I do have a question regarding your bloom. Do you use your alpha channel to determine the amount of bloom and if so how do you get around using it for actual opacity?

    Looks great guys!

  15. Nov 172012
    Tim,

    Hi Justin,
    we just use the default bloom shader that ships with unity pro (http://docs.unity3d.com/Documentation/Components/script-BloomAndLensFlares.html). For the pulse effect we change the bloom intensity and blur separation spread values over time.

    Bloom works by bluring the bright areas of the screen so the light spills out in to the dark areas, because the game has a high contrast art style, only the bright highlights and particle effects contribute to the bloom. we dont have to do anything special like alpha masking to target specific areas in the image :)

    We upgraded to Unity 4 on Friday, and although that ships with new post processing shaders for things like bloom and noise, we still use the effects that shipped with 3.5 for now.

  16. Nov 182012
    Justin,

    Thanks for the response…

    I was using the glow shader which was giving me some headaches with alpha…the built in bloom shader works much better for 2D..

    Thanks again..

Sorry, comments for this entry are closed at this time.