Creating 2D Games With Unity3D Part 1

Unity3D IconOne of my goals for 2011 is to write at least one new blog post every week. I’m going to kick off that goal this week by starting a multi-part series on creating 2D games with Unity3D. Please feel free to add comments below, especially if you have insight or questions about making 2D games with Unity3D. Part 2 of the series is now available here.

Introduction

There are tons of different ways to handle creating 2D games in Unity3D. One way would be to make “flat” 3D objects in a 3D modeling package like Maya. Another way would be to create 2D images (sprites) in an image editing program like Photoshop. This series will cover creating 2D games using Sprites for the visuals and 3D objects (either Unity GameObjects or more complex objects created in Maya) for collision. This first article covers the basic tools you’ll need, some basic concepts, and initial camera and scene setup.

Tools

For sprites, I use Sprite Manager 2 which is a 3rd party Unity plugin – you can purchase SM2 on the Above and Beyond Software website or from the Unity Asset Store. As I write this, SM2 is currently selling for $150 but it’s well worth the price if you’re looking to make a few 2D games in Unity, especially if you’re making games for iPhone.  I’ve used it on all but one of my games (it wasn’t out yet when I made Holeshot).  Even if you’re not making 2D games, SM2 is great for making 2D user interfaces like heads up displays, front end menu systems, and in-game pause menus.

There is also a free version of Sprite Manager which you can read about in this Unity Forum post. I’ve never used it and I suspect it’s not as easy to setup as SM2 and it likely doesn’t have all the latest features of SM2, but it should be enough to get you going with 2D sprites in Unity if you’re on a tight budget. There’s a Sprite Manager tutorial on 3D Buzz (registration required) that should be helpful with getting started with the free version.

Be sure to watch the tutorial videos on the AndB website as they’re loaded with information on how to use SM2.

Before I get into the Unity side of 2D games, I also want to mention iTween which is “is a simple, powerful and easy to use animation system for Unity.” iTween isn’t specifically 2D or 3D, but more of a general purpose tweening solution (similar to what you might be used to using if you’re coming from a Flash background). I plan to cover using iTween later in the series.

Main Camera

Main Camera SettingsWhen making 2D games, you’ll typically want to set your Camera’s Projection to Orthographic rather than perspective, which will give you a flat 2D view of the scene.  When setting the camera to Orthographic, you’ll be giving up some of the “automatic parallax” effect that you can achieve with a Perspective camera. But you’ll gain pixel perfect sprites and a much easier scene to deal with in 2D, plus you can still get parallax in your scene by moving background layers at different speeds. You can read more about the perspective/orthographic parallax debate in this Unity forum thread.

32px CubeThe next thing you’ll want to do is to set the Camera’s Size to a number that will give you a 1:1 pixel texture ratio between Photoshop and Unity. For example, if your game’s Resolution (Edit -> Project Settings -> Player: Resolution) is set to 480×320 and your Camera Size is set to 5, then a default Unity cube (GameObject – Create Other -> Cube) at Scale 1, 1, 1 will be 32 pixels square in photoshop. You can test this by taking a screen shot of your Unity game view (not the Scene view), open it in Photoshop and measure the size of the cube (be sure you have your Units set to Pixels in PS).

If you double your project’s resolution to 960×640 and leave the Camera Scale set to 5, then a Cube in Unity at Scale 1, 1, 1 will be 64×64 pixels in Photoshop. If you want to maintain that 32 pixel cube size, then you would set the Camera Scale to 10 – this basically moves the camera 5 additional units away from the scene causing the Cube to appear smaller.

You will have to perform your own calculations for your game depending on the resolution you want to use, how big you want the characters on the screen, etc. I personally like to have a 24 pixel tall character appear exactly 24 pixels tall in the Unity game scene without having to do any kind of additional scaling in Unity.

I always leave the Main Camera set to the default position that it’s at when the scene is created except that by default the camera’s Y position = 1, set that to zero just so the view is center.

When you have your camera set to Orthographic, the Z translation does nothing – you can set the distance with the Size field as I mentioned above. Also if you move your sprites forward or backward on the Z axis, they won’t appear physically bigger or smaller in the game view – however positioning sprites on the Z-axis is important for “layering” sprites in the scene – sprites that are closer to the camera will appear in front of sprites that are further from the camera (more on this later in the series).

Ambient Lighting

Typically 2D games don’t use any kind of real-time lighting, so you may want to adjust the Ambient Light to fully bright. By default, Unity scenes have the Ambient Light set to a dark gray color – change this to full bright by going to Edit -> Render Settings and then click on the dark gray colored bar next to “Ambient Light” to open the color picker. In the color picker, set all the values to 255. This will give you a fully bright scene that is unaffected by light and all of your sprites will appear in the game exactly as they look in Photoshop.

Collision

You’ll still use 3D GameObjects for collision in your 2D game (Unity is a 3D engine after all).  But you can also make 2D collision objects in Maya or any other 3D package if you need to make exact collision shapes to match your 2D art. I plan to cover this in more detail later in the series.

Unity’s Built-in 2D Objects

Other than sprites created with SM2, there are some 2D elements built into Unity3D including GUI Texture, GUI Text and 3D Text. I don’t ever use GUI Texture since I use Sprite Manager. Some of the Unity Tutorials use GUI Texture for the joysticks since there’s a way in script to use them for touch detection.

I use GUI Text for all of my UI and HUD elements unless I’m doing fancy texture-based graphical buttons – for those I use sprites but of course that makes it harder to localize if you ever want to go down that road.  For stuff like HUD scores, ammo counts, anything with numbers that are always changing, then use GUI Text.  If you need to have text display at arbitrary positions in the game world – like if you want scores to pop off a dead guys head, then use 3D Text for those. I’ll cover the details on using these later in the series.

Conclusion

That’s all for part 1 of the series. I would like to make this series as useful as possible, so if you have questions or comments or if you spotted an error, please respond below and I’ll be sure to work your suggestions into the series.

More Tutorials In This Series

Creating 2D Games with Unity3D Part 2
Creating 2D Games with Unity3D Part 3
Creating 2D Games with Unity3D Part 4
Creating 2D Games with Unity3D Part 5

And here’s another more recent tutorial series that uses Orthello (free) for the sprite display and animation duties:
Make A 2D Game in Unity3D Using Only Free Tools Part 1
Make A 2D Game in Unity3D Using Only Free Tools Part 2
Make A 2D Game With Unity3D Using Only Free Tools Part 3
Make A 2D Game With Unity3D Using Only Free Tools Part 4
Make A 2D Game With Unity3D Using Only Free Tools: Beginning Enemy AI With A* Pathfinding

Resources

Unity3D
Sprite Manager 2
iTween
Sprite Manager 2 Unity Forum
Sprite Manager Unity Forum
Above and Beyond Software Forum (SM2)
3D Buzz Unity Tutorials

Show Your Support

If you find these tutorials useful, please considering buying one or more of our games and apps for iPhone and iPad. Your support helps to keep the tutorials flowing!

  • Giant Moto: High flying arcade style motocross action!
  • Small Space: Fly a spaceship, eat space creatures, score point!
  • Holeshot Drag Racing: High speed drag racing action!
  • Alien Booth: Transform pictures of your friends into awesome aliens!
  • iSpoof Walken: A hilarious look into the world of Christopher Walken!
  • Gaga Eyes: Transform pictures of your friends to give them huge anime eyes!

About the author

Tim MillerTim Miller is a veteran game developer with over 15 years experience in the video game industry working as a Level Designer and Lead Level Designer at LucasArts, Secret Level and Nihilistic Software. He co-founded Rocket 5 Studios with his wife Cathy and their dog Rocket in 2009. Twitter, LinkedIn, Portfolio

Share/Bookmark
  • http://www.facebook.com/neo.ca Neo Mb

    This is a great blog post.
    So, one of my goals for 2011 is to read your blog posts.
    Looking forward for what is next.
    Best Regard,
    Neo

  • http://twitter.com/pitaman Carlos Pita

    This is such a value to the Unity3D community. Thank you for taking the time to contribute to this series and to the Unity/Indie community.

    Maybe you can focus on particular techniques or approaches in upcoming parts.

  • http://twitter.com/GFX47 GFX47

    Can’t wait to see this series starting!

  • Btiger

    Great post, I’m doing a 2D game by unity now, your blog is very helpful. Thanks.

  • Rodrigo

    grreat KEEP GOINGG

  • helioxfilm

    Looking forward to see the upcoming post — a really helpful series. Thanks!

  • Pingback: Creating 2D Games With Unity3D Part 2 | Rocket 5 Studios

  • WASI

    please anyone friends please , help me to create 2d pool 3d pool games for doing a business, which software need to create it ? the game should be muliplayer with Internet like online game, anyone help me please ? or become my partner in this business. thanks friends. you can mail me the at wasibmw@yahoo.com

  • Pingback: 5 more hours per day could help… « GFX47's Blog

  • Pingback: Phoenix's Blog » Creating 2D Games With Unity3D Part 2

  • http://www.rocket5studios.com/ Tim Miller

    Unity3D is a great tool for making 2D or 3D games and they have an active community where you might be able to hook up with business partners: http://unity3d.com/

  • GameAreGood

    Nice work! Well written, easy to follow. Looking forward to more in the series! :)

  • http://www.rocket5studios.com/ Tim Miller

    Thanks! Be sure to check out part2 and part3 which are already available.

  • Tomasofen

    Hi Tim, I’m Tom :)

    I have a question. You write here that under a 480×320 resolution, with orthographic camera size of 5, a cube 1x1x1 will have a 32 pixels srpites (with perfect pixels).

    What formula do you use for this? I would like to know to make my own calculations, for example, under a resolution of 1024×768 with the same camera size of 5, what’s the size needed in the cube for a sprite of 45 pixels?

    I was thinking on it, and i couldn’t find the formula :( It would be great if you share it with us.

    Thank’s for your time and your tutorials!

    Tomas

  • http://www.rocket5studios.com/ Tim Miller

    Hi Tom, unfortunately I don’t have a formula for figuring this out. I came up with those numbers by trial and error.

  • Pingback: Creating 2D Games With Unity3D Part 4 | Rocket 5 Studios

  • Pingback: New post format / 5 more hours per day could help… « GFX47's blog

  • Elie

    Brilliant article Tim! Looking forward for more articles in the series.
    Going to read part 2 now :)

  • Pingback: Creating 2D Games with Unity3D Part 5 Complex Collision | Rocket 5 Studios

  • Dav

    Great work.  It looks like there’s further parts to this – might be nice if you dropped a link to the next one in the series at the bottom of the post.

  • Pingback: Tutorial: Developing 2D Games With Unity 3D « g4m3d3v

  • Pingback: 2D Or Not 2D – Creating 2D Games With Unity3D Part 3 | Rocket 5 Studios

  • Pingback: 2D in Unity | iOS Strategy Games

  • Terco Cns

    your tutorial helped me a lot
    thank you, from spain

  • http://www.rocket5studios.com/ Tim Miller

    You’re welcome.  Glad to help.

  • Pingback: Make A 2D Game in Unity3D Using Only Free Tools Part 1 | Rocket 5 Studios

  • http://www.previewlabs.com Bernard François

    Unity3D is indeed great to create 2D games as well; with as the most compelling feature for my customers the fact that you can easily export to different platforms.

    Coincidentally, I’m currently writing a series of articles about exactly the same topic. The last one was about using orthographic projection: http://www.previewlabs.com/2d-game-prototyping-in-unity3d-orthographic-projection/

  • http://www.previewlabs.com Bernard François

    Just finished writing my series of articles, concluding with a post about the advantages and disadvantages of the different methods.

  • Michel Sallaberry

    For the camera size, I set it to half my vertical resolution so in photoshop/illustrator it’s 1:1 pixel scale.
    For instance project is 1920*1080 camera set to 540.
    size of 1*1 cube  = 0,5 * camera size * vertical resolution

  • Jason

     @98638ee0d35a0e25b668e9292ac3ebe6:disqus
    The formula for finding the correct orthographic camera size (distance) for pixel-perfect sprites; or more appropriately – the sprite equivalent of a one meter cube within Unity (1 x 1 x 1), is: x = screen width in pixelsy = screen height in pixelss = sprite height in pixels    x / ((( x / y ) * 2 ) * s ) — Example1:ScreenResolution = 1024x768SpriteSize = 32×32    1024 / ((( 1024 / 768 ) * 2 ) * 32 ) = 12.0 Example2:ScreenResolution = 640x480SpriteSize = 32×32    640 / ((( 640 / 480 ) * 2 ) * 32 ) = 7.5 Example3:ScreenResolution = 480x320SpriteSize = 32×32    480 / ((( 480 / 320 ) * 2 ) * 32 ) = 5.0Hope this helps.Jason

  • http://www.rocket5studios.com/ Tim Miller

    Thanks Jason!

  • Jason

    formatting got munged, any way you can fix?  emailed you fixed version.  its not very readable like this.  thanks.

  • Pingback: The Roadmap to Develop Indie Games | Lion Inn Games

  • Pingback: El camino para desarrollar video juegos indie | Lion Inn Games

  • http://twitter.com/blackhol3_sun Shayananigans

    Your blog helped me a lot in understanding Orthello 2D. There is so little support/ tutorials available online for Orthello and your tutorials made it all very descriptively clear. Thanks, from Pakistan!

  • Pingback: You Should Consider Unity 3 | Spielhaus

  • Jerome Raymond

    Hi how do you make your assets? Do you use photoshop?

  • Varsheen

    I am developing similar game like FirmVille social game. Will it be possible to have such prospective view in Unity3D though its gonna be a 2D social game ?

  • Henz

    Hi. Thank you for your blog post. I’m developing my educational game for my thesis and this is a good resource. Keep on writing. Thanks for the help sir.

  • http://www.rocket5studios.com/ Tim Miller

    You’re very welcome. Keep me posted on progress of your thesis.

  • Chuck

    Are you kidding!? The guy does the work for you and you bitch cause you can’t understand it? Get real.

  • Ryuu Makoto

    free version of Orthello does way more than that overpriced piece of garbage.

  • Reggie Dunk

    Chuck – FAIL!

  • Pingback: Pixel Perfect Calculator for Orthographic Camera : Unity3D | Indie Hood Games

  • Def Aced

    thanks alot for this post!

  • sinister

    i’m 14 year old n wanna make a 2d platformer for android in unity
    pls advice me n thanks in advance

  • Hamish Eady

    Your weblog assisted me a lot in knowing Orthello 2D. There is so little support/ guides available on the internet for Orthello and your guides created it all very descriptively obvious. Thanks, from Pakistan!

    Spybubble Gratis

  • sleepy_hollow

    Go Tim! Go Cathy!
    I love these guys…