Creating 2D Games With Unity3D Part 4

Creating 2D Games With Unity3D Part 4

Posted March 25th, 2011 in  Tutorials,  Unity3D by Tim Miller

This is the 4th installment in my series on Creating 2D games with Unity 3D. Part 1 covered the basic tools you’ll need, some basic concepts, and initial camera and scene setup. Part 2 focused mainly on the Sprite Manager 2 workflow. Part 3 covered some of the techniques I’m applying to my upcoming iOS game and went over the differences between 2D and 3D scene setups in Unity.

In part 4 we’re going to take everything that was covered in the other 3 parts and apply them to an actual game! Before I get started, I wanted to just say thanks to the awesome people who have been following the series, especially those who have said nice things in the comments and on Twitter. This one’s for you!

Design and Goals

Every good game starts with a design and goals. The goals of this design are: to make a game that is simple yet fun, that will be easy to explain in a blog post, and that I can be made in an afternoon.

To satisfy the “simple yet fun” and “easy to explain” goals, I’m borrowing the basic gameplay from an existing iOS game: League of Evil. League of Evil has a brilliantly simple design: the player can move left & right, jump, double jump and slide tackle. The gameplay is equally simple: quickly navigate increasingly challenging levels, slide tackle enemies to kill them, don’t get hit by bullets or sharp things, slide tackle the Scientist to complete the challenge and optionally collect briefcases.

To satisfy the “can be made in an afternoon” goal, I borrowed the character sprites from Load Runner and modified them a bit with some coloring and animation tweaks. And to keep with the Load Runner theme, I created a single brick texture that will be used to construct the levels. All of the assets and scripts are provided as part of this tutorial. Unfortunately I can’t provide you with the complete project file since it requires Spite Manager 2, which I obviously can’t distribute.

Click here to play the game that we will be making in this tutorial.

Sprite Manager

If you haven’t been reading the series so far, I should mention that this tutorial does require a 3rd party plugin called Sprite Manager which automates sprite sheet generation, provides functions for sprite animation playback and other magical awesomeness. If you’re at all serious about making games with Unity (especially if you’re making 2D games for iOS or Android), then buying Sprite Manger 2 should be an easy choice. If you’re still on the fence or just trying out the free version of Unity, there’s also a free version of Sprite Manager and some tutorials on how to set it up on 3D Buzz. This tutorial assumes you’re using Sprite Manager 2, so if you’re using the free Sprite Manager your mileage may vary.

Project Setup

First thing you need to do is to setup the project.

1. Download the assets folder then unzip it. You should see a folder called 2DTutorial.
2. In Unity, go to File -> Open Project, click Open Other, browse to the 2DTutorial folder, select it and then click Open.
3. Add Sprite Manager to the project by going to Assets -> Import Package -> Custom Package and then browse to the location of the package file (eg. SM2 1.8.unitypackage) and then click the Import button. Note that you’ll get some console errors like “The type or namespace name `PackedSprite’ could not be found” until you import the Sprite Manager package.
4. Optional: change the platform to Web Player by going to File -> Build Settings -> Web Player and then click on Switch Platform.
5. I want the game to be easily deployed on either the web or on iOS so we need to change the Resolution. Go to Edit -> Project Settings -> Player and then click on Resolution and Presentation. Under Resolution change the Default Screen Width to 480 and the Default Screen Height to 320.
6. Now in the Game panel, click the dropdown under the Game tab (it probably says “Free Aspect”) and change it to Web (480×320).
7. Go to Edit -> Render Settings, click on Ambient Light and change the color to white since we want the scene to be full bright.
8. Save the scene by going to File -> Save Scene, make a new folder called “Scenes”, give it a name like “game” and click Save.

Your project should now look something like this screenshot.

Main Camera Settings

Since this is a 2D game, we need to make some changes to the default Unity Camera.

1. Select Main Camera in the Hierarchy tab.
2. Change Projection to Orthographic
3. Change Size to 5
4. Change Far to 20
5. Change Position Y to 0
6. Background: change this to any color you like, I set mine to black for this game.

Texture Settings

By default, Unity is going to force your textures to be power of 2. Since the sprite textures we’re using for this game are 24×24 instead of a power of 2 like 32×32 we need to make some changes to the Texture Importer. Your project should already have the ChangeTextureImportSettingsUnity3.cs script in the Editor folder. If it is, then you should also have a “Custom” menu item in Unity. See the Creating Textures section in Part2 of the series for an explanation of this.

1. Open up the Sprites folder in the Project tab.
2. Select all of the textures in the folder.
3. Go to Custom -> Texture -> Change Non Power Of 2 -> None
4. Go to Custom -> Texture -> Change MipMap -> Disable MipMap

Player Character Sprite

Now it’s time to actually start making the game! We’ll start by making the player character.

1. GameObject -> Create Empty and then name the game object “player sprite”
2. Zero out the x,y,z Transform Position
3. Component -> Scripts -> Packed Sprite (this will add SM2′s Packed Sprite script to the GameObject)
4. Window -> Sprite Timeline (opens SM2′s Sprite Timeline window)
5. Drag player_walk_left1 from the Project tab (in the Sprites folder) to the Static Texture area in the Sprite Timeline window.
6. Drag and drop Sprite Material from the Material folder onto the “player sprite” game object.
7. In the Inspector window, check the Pixel Perfect checkbox which will also automatically check the Auto Resize checkbox.

Player Animations

Now we need to create the individual animations that we’ll be able to call from script. There are 6 individual animations for walking, standing and sliding. Note that the stands and slides are single frame animations so Loop and FPS settings aren’t used for them so we’ll just leave them at the default settings.

1. With the “player sprite” game object still selected, in the Sprite Timeline window click the + button to add an animation
2. Name: walkleft
3. Shift select player_walk_left1, player_walk_left2, player_walk_left3 in the Project tab Sprites folder
4. Drag and drop them onto the light gray bar under Static Texture in the Spite Timeline window.
5. Loop Cycles: -1 (this will make the animation loop)
6. FPS: 12
7. Click the Preview button to see the little guy animate.
8. Your Sprite Timeline window should look like this.
9. Click the + button to add another animation
10. Name: walkright
11. Shift select player_walk_right1, player_walk_right2, player_walk_right3 in the Project tab Sprites folder
12. Drag and drop them onto the light gray bar in the Sprite Timeline window
13. Loop Cycles: -1 (this will make the animation loop)
14. FPS: 12
15. Click the + button to add another animation
16. Name: standleft
17. Drag and drop player_walk_left1 onto the light gray bar in the Sprite Timeline window.
18. Click the + button to add another animation
19. Name: standright
20. Drag and drop player_walk_right1 onto the light gray bar in the Sprite Timeline window.
21. Click the + button to add another animation
22. Name: slideleft
23. Drag and drop player_slide_left onto the light gray bar in the Sprite Timeline window.
24. Click the + button to add another animation
25. Name: slideright
26. Drag and drop player_slide_right onto the light gray bar in the Sprite Timeline window.

With the “player sprite” game object selected, your inspector should look like this.

After you’ve created all of the animations and assigned the sprites, we can create the sprite atlas.

1. Go to Custom -> Build Atlases and click Create
2. Press the Play button in Unity and you should see your player sprite standing in the center of the scene.

When you build the atlases, a new folder is created in the Project called Spite Atlases and a new Spite Material file is created in the folder. The Spite Material is a .png file that contains all of the textures you assigned to the player character’s sprite. By default this material is set by Unity to be compressed, we don’t want that.

1. Select the Sprite Material in the Sprite Atlases Folder.
2. In the Inspector tab, click Override for Web
3. Format: Truecolor

Player Collision

Next we need to setup the player collision so he can move around in the world.

1. Go to Game Object -> Create Other -> Capsule
2. Zero out the x,y,z Transform Position (it should in the same position as the player sprite)
3. In the Inspector tab, uncheck the box next to Mesh Renderer since we don’t want to see it in the game.
4. Under Capsule Collider change the radius to 0.2 and the Height to 0.75 so the sprite fits nicely inside the collision
5. Rename the Capsule game object to PLAYER
6. Go to Component -> Physics -> Rigidbody to add the Rigidbody component to PLAYER
7. We need to freeze the rotations on the character: In the Inspector under Rigidbody, click on Constraints and check the X Y and Z boxes next to Freeze Rotation (note these settings look different in older versions of Unity.).

Player Slide Tackle Collision

We need another collider on the player character that will be enabled while the player is sliding to cause damage to the enemies.

1. Go to Game Object -> Create Other -> Cube
2. Rename the Cube to “slide collision”
3. In the Inspector tab, uncheck the box next to Mesh Renderer since we don’t want to see it in the game.
4. Under Box Collider, check the Is Trigger checkbox.
5. Click the dropdown box next to Tag (Unchecked) and then click on Add Tag
6. Click the dropdown next to Tags type “slideCollision” (without the quotes) in the Element 0 slot and press enter.
7. Click on the slide collision game object in the Hierarchy, click on the dropdown list next to Tab in the Inspector and select slideCollision.
8. Set the Transform Position to X: 0 Y: -0.15 Z: 0
9. Set the Transform Scale to X: 0.8 Y: 0.35 Z: 0
10. Uncheck the checkbox in the upper left corner of the Inspector (above the word Tag). This will disable the game object, we will re-enable it in script while the player is sliding.

Next we need to make the player sprite and slide collision game objects children of the PLAYER game object so that they will move when the player moves.

1. In the Hierarchy tab, drag and drop the player sprite onto the PLAYER game object so that the player sprite becomes a child of it.
2. Drag and drop the slide collision onto the PLAYER game object too.

Player Script

Now we need to add the Controls script to the player and assign the player sprite and slide collider to the script.

1. Drag and drop the Controls script from the Scripts folder in the Project tab on to the PLAYER game object in the Hierarchy.
2. Select the PLAYER in the Hierarchy
3. Drag and drop the player sprite from the Hierarchy onto the Player Sprite field under Controls (Script) in the Inspector.
4. Drag and drop the slide collider from the Hierarchy onto the Slide Collider field under Controls (Script) in the Inspector.

If you press the Play button in Unity the PLAYER should fall (since he’s affected by gravity) and you shouldn’t see any errors in the Console window.

Here’s what your project should look like at this point.

Making Bricks

Lets make a brick that we’ll use to create the physical world so that the player will have something to walk on. Move PLAYER away from the center of the screen so it’s not in the way when we make the brick object.

1. First we need to make the brick sprite, to do this start by following the steps from Player Character Sprite above.
2. In step 5 of Player Character Sprite instead of dragging player_walk_left1 into the Static Texture field, drag and drop brickA
3. Name the game object “brick”
4. Go to Custom -> Build Atlases -> Build and then press Play to see the new brick sprite appear in the views.

Next we need to add collision to the brick sprite.

1. Go to Game Object -> Create Other -> Cube
2. Zero out the x,y,z Transform Position (the brick sprite you created in the previous steps should also be at 0,0,0)
3. Rename Cube to “collision”
4. Change the Transform Scale to X: 0.75 Y: 0.75 Z: 0.75
5. Uncheck Mesh Renderer since we don’t want to see the cube.
6. Drag and drop the collision onto the brick sprite so that the collision is a child of the sprite.

Building A Level

Now you have a brick object that you can duplicate over and over to create a level. Before you start moving around the bricks, we need to make a quick change to Unity’s snap settings.

1. Go to Edit -> Snap Settings
2. Change Move X, Move Y and Move Z to 0.25

Now if you hold down the Command key (mac) or the Alt key (windows) and then drag the X or Y manipulator handles, the object will move in 0.25 unit increments which will allow are bricks to easily snap together perfectly. This is also a good way to move around the player and enemies (that we’ll make later) – just make sure that you start with them at 0,0,0 and you’ll always be able to snap them around so that their feet will be aligned with the floor.

Duplicate the bricks and position them until you have a level that looks something like in the image below. Your project should now look like this. Note that I also added a couple of border collision objects on the left and right side of the scene so that the player can’t walk out of the level.

Making Enemies

The enemy character is very similar to the player character that you created in the Player Character Sprite, Player Animations and the Player Collisions sections above.

1. Follow the steps described in the Player Character Sprite section above.
   1. Rename the game object to “enemy sprite”.
   2. In step 5 of Player Character Sprite instead of dragging player_walk_left1 into the Static Texture field, drag and drop zombie_walk_left1
2. Follow the steps described in the Player Animation section above.
   1. In Step3, Shift select zombie_walk_left1, zombie_walk_left2, zombie_walk_left3 in the Project tab Sprites folder
   2. In Step1, Shift select zombie_walk_right1, zombie_walk_right2, zombie_walk_right3 in the Project tab Sprites folder
   3. FPS for both walkleft and walkright should be set to 8 (it’s a zombie, they walk slower)
3. Skip steps 21 – 27 since the enemy doesn’t have slide animations.
4. Follow the steps in the Player Collisions section above.
   1. Rename the Capsule game object to ENEMY.
   2. On the enemies Rigidbody, check the Is Kinematic checkbox and uncheck the Use Gravity checkbox.
5. Add a new Tag named “Enemy” following Steps 5 – 7 in the Player Slide Collision section above and assign it to the ENEMY game object.

Enemy Waypoints

We’re going to give the enemy a very basic patrol behavior using iTween which is an easy to use (and free!) animation system for Unity.

1. Go to Game Object -> Create Other -> Sphere
2. Zero out the x,y,z Transform Position
3. Rename the Sphere to “waypointA”
4. Scale the sphere to X: 0.2 Y: 0.2 Z: 0.2
5. Remove the collision from the sphere: Click on the little gear icon on the right side of the Inspector next to the Sphere Collider Component and then click “Remove Component”.

Since we want to be able to see the waypoints in the Scene view so we can easily adjust their positions but we don’t want to see them in the Game, we need to make some changes.

1. Add a new Layer by clicking on the drop down next to Layer in the Inspector.
2. Under User Layer 8 type “Waypoint” (without the quotes) and press enter
3. Select waypointA in the Hierarchy, click the dropdown next to Layer in the Inspector and select Waypoint.
4. Select Main Camera in the Hierarchy and click the dropdown next to Culling Mask (Everything), then click on Waypoint to uncheck it. The sphere should no longer be visible in the Game view.

We need 2 waypoints so duplicate waypointA and rename it waypointB.

Enemy Organization

Since our enemy now has waypoints associated with it, we need to organize him so that it’s obvious which waypoints go with which enemy.

1. Go to Game Object -> Create Empty
2. Zero out the x,y,z Transform Position
3. Rename GameObject to “_ENEMY1″
4. Make sure that the ENEMY character and both waypoints are at 0,0,0 in the scene.
5. In the Hierarchy window, drag and drop ENEMY, waypointA and waypointB onto _ENEMY1 so that those objects are children of _ENEMY1.

Enemy Script:

Now we need to add the EnemyPatrol script which will allow him to do a simple move patrol and die if the player slide tackles him.

1. Drag and drop the EnemyPatrol script from the Scripts folder in the Hierarchy onto the ENEMY game object.
2. Select the ENEMY game object in the Hierarchy.
3. Drag and drop enemy sprite onto the Enemy Sprite field on the Enemy Patrol (Script) in the Inspector.
4. Drag and drop waypointA onto the Waypoint A field on the Enemy Patrol (Script) in the Inspector.
5. Drag and drop waypointB onto the Waypoint B field on the Enemy Patrol (Script) in the Inspector.

Your enemy should look like this.

Enemy Placement

Ok so we have the enemy and his waypoints nicely grouped. Now you can position him in the level and adjust the location of the waypoints so that he will move between them.

1. Select the _ENEMY1 game object in the hierarchy
2. Move the group to a good position in the level (remember to hold down Command to snap).
3. Select waypointB and move it away from the player along the X axis.
4. The enemy starts his patrol at waypointA so waypointA and the ENEMY should be placed at the same location.

Your scene should now look something like this.

If you want more enemies in the level, simply duplicate _ENEMY1, rename it to _ENEMY2, move it to another position in the level and then adjust waypointB position.

Making the Goal

We have one more character to make: the “goal”. This character is much simpler than the player and enemies since he doesn’t have any animations and he doesn’t move.

1. Follow the steps in the Player Character Sprite section above.
   1. Rename the game object “goal sprite”
2. Follow the steps in the Player Collision section above.
   1. Rename the Capsule game object to GOAL
3. 3. Drag and drop the Goal script from the Scripts folder in the Project window onto the GOAL game object.

HUD Manager

We’re almost done! We just need to make a simple HUD (heads up display) manager.

1. Go to Game Object -> Create Empty
2. Zero out the x,y,z Transform Position
3. Rename GameObject to “HUDManager”
4. Drag and drop the HUDManager script from the Scripts folder in the Project view onto the HUDManager game object.

Now we need to make a couple of text objects that will appear based on death and victory conditions.

1. Game Object -> Create Other -> GUI Text
2. Zero out the x,y,z Transform Position
3. Rename GUI Text to “text gameOver”
4. In the Inspector, change the Text to “GAME OVER”.
5. Change Anchor to upper center
6. Change Pixel Offset X to 240 and Pixel Offset Y to 300
7. Uncheck the box next to GUIText in the Inspector so that the text doesn’t display in the Game until we turn it on later in script.

To make the second text object.

1. Duplicate the text object we made in the previous steps.
2. Rename it to “text victory”
3. Change the Text to “YOU WIN!!!!!!!!”

Now we need to hook these up to the HUDManager and then hook up the HUDManager to the other scripts.

1. Select the HUDManager game object in the Hierarchy window.
2. Drag and drop “text gameOver” from the Hierarchy window onto the Game Over Text field on the HUDManager (Script) in the Inspector.
3. Drag and drop “text victory” from the Hierarchy window onto the Victory Text field on the HUDManager (Script) in the Inspector.
4. Select the PLAYER game object in the Hierarchy window.
5. Drag and drop “HUDManager” from the Hierarchy window onto the HUD Manager field on the Controls (Script) in the Inspector.
6. Select the GOAL game object in the Hierarchy window.
7. Drag and drop “HUDManager” from the Hierarchy window onto the HUD Manager field on the Goal (Script) in the Inspector.

Conclusion

You now have the basic building blocks to create a simple little platformer game. Here’s what myfinal scene looks like after I added a few more enemies and moved the goal to the end of the level.

Be sure to play the game by clicking here.

I hope you got as much out of following this tutorial series as I had making it! If you find any errors or have any questions, please feel free to let me know in the comments below! Also be sure to look me up on Twitter @rocket5studios.

Later,
Tim

//

http://www.rocket5studios.com/tutorials/creating-2d-games-with-unity3d-part-4/