2D Or Not 2D – Creating 2D Games With Unity3D Part 3

My next game is going to be 2D, but the backgrounds will be forced perspective to give the scene a 3D appearance. Before the artists starts artifying the final backgrounds in Photoshop, I want to make sure the levels are properly laid out for gameplay – the last thing I want is to waste the artists time with re-dos for object position fixes. Since my background is primarily in 3D level design, I decided to blockout the levels in Maya and then render them out to 2D textures. I’m still in the early stages of working out the process, but so far there are already some noticeable advantages to this workflow. The main advantage is that I can easily make adjustments to object positions in Maya, render the scene to a .png, rebuild the sprite atlas in Unity and test out the changes.

I know what you’re thinking – since I have 3D levels blocked out in Maya already, why not use those assets in Unity? Unity is a 3D engine after all so it’s pretty easy to import the models directly into the scene. After a few tests rendering the 2D scenes from Maya and seeing how they looked in Unity, I decided to see if using full blow 3D levels would be the better way to go.

Maya Setup

Note that even tho I’m using Maya, you should be able to apply these setups to any 3D app. Before you import 3D objects from Maya, you need to confirm some Maya settings:

  1. In Maya, go to Window -> Settings/Preferences and click on Settings
  2. Set the Up Axis to Y since Y is up in Unity
  3. Set the Linear Working Units to Centimeters. A 1x1x1 centimeter cube in Maya is the same size as a 1x1x1 unit cube in Unity.

You can test that the above settings are correct by creating a 1x1x1 cube in Maya and then importing it into your Unity scene. Create a 1x1x1 cube in Unity, position the 2 next to each other and they should be exactly the same size.

The next thing I did in Maya was to setup the perspective camera (persp) so that its positioned and angled exactly how I want the scene to be viewed in the game. Here’s a pro tip: Once you have the camera positioned exactly how you want it, select the camera, move the Cursor to frame 1 on the Time Slider, and then set a keyframe on it (Animate -> Set Key or just press ‘s’ on the keyboard). Also make sure that the “Auto keyframe toggle” (located in the lower right hand corner on the Time Slider) is off. Now you can freely rotate the camera while building out your 3D scene, and when you want to see what the scene looks like from the game camera, just move the Cursor on the Time Line from frame 1 to frame 2 and then back to frame 1 and your camera will snap back to the frame you set. Awesome!

Another cool trick is to set the Render Settings Image Size so that it’s the same size as what you expect to see in the rendered game view. Basically it’ll add a box to the perspective camera that will show you exactly the area that will be rendered. Note that I’m using Maya 2008 so your options may be different.

  1. In Maya, change to the Rendering menus (drop down in the upper left hand corner)
  2. Render -> Render Current Frame. This will open the Render View and render whatever is visible in the active camera.
  3. In the Render View window, go to Options -> Render Settings
  4. Under Image Size, change the Width and Height to match your games render view. For example, if you’re making an iPhone game you might set this to 480 by 320.
  5. Now if you look back at your Maya scene, you should see a 480×320 rectangle.

With the above correctly setup, you should be able to get an accurate view in Maya of what your game will actually look like on the device. Here’s what my scene looks like (click to see the full sized image):

Unity Setup

Once you have a level blocked out in Maya, the next thing is to bring it into Unity and set everything up so that it looks the same.

  1. To import the level into Unity, all you have to do is save the Maya file into your project’s asset folder (eg. Assets/Models).
  2. Drag the level from the Models folder into the Scene Hierarchy and position the model in the scene.
  3. Change the Camera in your Unity scene from Orthographic to Perspective if it’s not already.
  4. Adjust the Camera’s Position, Rotation and Field of View so that the scene appears exactly has it does in Maya. This will require a bit of trial and error adjustment but eventually you should be able to dial it in exactly.

Prior to this little experiment, my game had been setup to be entirely 2D with objects only moving on the X and Y axis. To make the game truly 3D, you have to bring the Z axis into play. After spending the better part of a day converting my 2D game to 3D (just to test out my theory), I decided that 2D is actually better for my particular gameplay plans. 3D can complicate things rather quickly, especially when dealing with touch events on the iPhone. But none of the above setup is wasted! Because of everything I set above, I can easily go back to my original plan of rendering the 3D scene to a 2D texture in Maya.

Conclusion

This concludes part 3 of the series. I had been planning to take you through the creation of a simple 2D platformer game in this installment, but I’ve been super busy trying to get our new game ready to show to the press at GDC. Instead part 3 went over some of the techniques I’m using to make the new game which hopefully you’ll find useful.

More Tutorials In This Series

Creating 2D Games with Unity3D Part 1
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

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

14 thoughts on “2D Or Not 2D – Creating 2D Games With Unity3D Part 3

  1. Anonymous

    Thank Tim for the useful information. I really look forward to the upcoming parts of the series :) I just started with Unity for like a week, and i want to make a 2D game so your posts help me a lot. However, i got frustrated with scripting recently. I just want to make a game object appear at the mouse clicked position (2D). Here is what i have so far….

    var ball : GameObject;
    var hit : RaycastHit;

    function Update () {
    if(Input.GetButtonDown(“Fire1”))
    {
    var ray = Camera.main.ScreenPointToRay (Input.mousePosition);

    if (Physics.Raycast (ray, hit))
    Instantiate(ball, hit.point, Quaternion.identity);
    }
    }

    Can you take a look and tell me what’s wrong? The object does appear but only works when i click on other game objects (box, ball…etc)

    I did ask for help on Unity forum but haven’t solved my problem yet.

    Thanks :)

  2. Anonymous

    Hi. It’s me again. I got my code working now so you don’t have to worry about that :)

    var cube: GameObject;

    function Update () {
    if (Input.GetButtonDown (“Fire1”))
    {
    var screenPos = Input.mousePosition;
    screenPos.z = 19;
    var p = camera.ScreenToWorldPoint(screenPos);
    Instantiate (cube, p, Quaternion.identity);
    }

    }

  3. Tim Miller

    Oh cool, glad you figured it out. Physics.Raycast (ray, hit) is looking for an object to collide with, so you’d need to add something like a ground plane that the raycast can hit before the Instantiate() could be called. The solution you came up with is just what I was going to suggest.

  4. Anonymous

    Hi

    I want to use an image as my 2D game background and i want it to auto resize to fit the screen resolution. Something like this:
    I create a game background at resolution 1024×600 (Galaxy Tab), when i run my game at resolution 800×480 (Galaxy S), the background will resize to fit and i can still see the whole background.

    What is the best way to archive this?

    I was using the Sprite Manager to create the background but it did’t fit nicely to the screen resolution.

    Thanks :)

  5. Tim Miller

    There are a few different ways to do this, but I assume that eventually you’ll have more assets than just the background to deal with. One way is to have 2 different versions of the asset in the scene and then when the level loads, detect the device you’re using and enable/disable the appropriate background. Another way would be to have 2 completely separate scenes, 1 with the low res art and the other with high res art, at some point you detect which device version the user is using and then load the appropriate scene.

    There’s a thread here http://forum.unity3d.com/threads/41614-1st-gen-iPods that talks about various ways of detecting devices (iPhone/touch in this case) and loading the appropriate texters.

    Hope that helps.

  6. Anonymous

    Thanks for your reply 😀 I got it working now 😉

    Looking forward to the next part! Out soon please 😛

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

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

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

  10. Pingback: Creating 2D Games With Unity3D Part 1 | Rocket 5 Studios

  11. Suryoday Vadlamani

    seems your information is valuable but i cant ifgure it out i am new to unity so please explain me from starting how why and what plz plz plz plz 

Comments are closed.