Make A 2D Game With Unity3D Using Only Free Tools Part 3

Welcome to Part 3 in this series on making a 2D sprite-based game with Unity 3D. In Part 1 I introduced you to the tools we’ll be using to make a Lode Runner style action game and in Part 2 we created the level sprites and built our first level. In this tutorial we’re going to be adding in the player, hooking up the scripts and adding collision to the ladders and ropes so that you’ll finally be able to run the character around in your levels.

This tutorial assumes that you have already followed along with Part 2 of this series so your project should be ready to continue on with the steps below. If you haven’t already done Part 2, you should go back and do that first so you can get a full understanding of how everything fits together. If you’d rather skip ahead, you can download the project up to this point. You can also click here to see how the game will look at the end of Part 3.

Making the Player Sprite Atlas

If you’ve been following the series, I know you’re excited to get the player character running around in the game, so the first thing we need to do is create a sprite atlas in TexturePacker.

  • Download the source sprite .png’s and unzip the file somewhere on your hard drive. If you already downloaded the sprites and added them to your project in Part 2, then you can skip this step.
  • Launch TexturePacker and then drag & drop all of the .png files from the sprites/player folder into the Sprites panel.

Texture Settings / Layout:

  • Set Algorithm to Basic
  • Set Border Padding to 1
  • Set Shape Padding to 1
  • Uncheck Trim

Texture Settings / Output:

  • Leave the Data format set to cocos2d.
  • Under Data File, click the little “…” button and browse to the location in your project’s Asset folder where you want to store your sprites (I put mine in Assets/SpriteAtlases), name the file “player” and then click Save.
  • TexturePacker automatically adds the .plist extension to the Data File, but Unity wants the file to be .xml. So in the text field, replace .plist with .xml.
  • The Texture File path should already be set to the same location as the .xml file except that it will have a .png extension so there’s nothing to do there.

If you followed the steps above, then your settings in TexturePacker should look like this (click the image to see a larger version):

Now if you click the Publish icon in TexturePacker and then switch back to Unity, you should see a player.png file and a player.xml file in the SpriteAtlases folder in the Project view.

If you don’t already have the project open in Unity, open it now and then load the scene that you created in Part 2 (eg. level1.scene).

We need to make a couple of changes to the sprite atlas in Unity so that it looks correct.

  • Select the player.png file in the Project tab. In the Inspector change the Filter Mode to Point.
  • Click the Override for Web box, set the Format to Truecolor and then click Apply.

Making the Player Sprite

Now we’re ready to turn the player’s sprite atlas into animated sprites using the Orthello 2D plugin.

The Sprite Container:

  • In the Unity Project tab, expand the Orthello folders: Orthello –> Objects –> Sprites –> SpriteAtlas and then drag the SpriteAtlas-Cocos2D object into the Hierarchy.
  • In the Hierarchy tab, expand the OT object and then the Containers object and you will see your new container with a name something like “Container (id=-6840)“. This is the Container that will hold all of our player sprites from the atlas we made so you can rename the Container to something obvious like “player“.
  • Drag the player.png from the SpriteAtlases folder and drop it on the “OTSprite Atlas Cocos 2D” script’s Texture slot.
  • Drag the player.xml from the Project, SpriteAtlases folder and drop it on to the Atlas Data File slot. Now if you drop down the little Atlas Data arrow, you should see that it’s populated with all the sprite atlas data that TexturePacker generated for us.

Setting Up The Player Animations:

Now we need to assign all of the frames from the sprite atlas to individual animations.

  • Drag an Animation object from Orthello –> Objects –> Sprites into the Hierarchy. This will add a new object under OT –> Animations named something like “Animation (id=-4320)“. Rename this object to “player anims“.
  • With the new “player anims” OTAnimation still selected, adjust the settings to match those in the following image. To populate the Container field, drag & drop the “player” object from OT –> Containers on to the Container field.

Click the image to see all of the animation settings:

Making The Player Sprite

  • Next find the AnimatingSprite object in Orthello –> Objects –> Sprites object in the Project tab and drag it into the Hierarchy, this will make a new object in the scene with a name like “Animating Sprite (id=-23050)“. Rename this object “player“.
  • With the new player object still selected in the Hierarchy, drag the “player anims” object on to the Animation slot. The Sprite Container slot should automatically fill with a reference to the “player” container object, if it doesn’t you can drag & drop that onto the slot.
  • Now you should see the player sprite in your scene and if you press Play in Unity, the sprite will animate through all of the frames in all of the animations. We don’t want the animation to play on start so uncheck the Play On Start checkbox.

Adding Collision To The Player

In order for the player to collide correctly with the ladder and rope colliders we’ll be creating later, we need to set the following.

  • With the the player “OTAnimating Sprite” still selected in the Hierarchy, check the check box next to Collidable. This will automatically add a Rigidbody component to the object.
  • Click the dropdown list next to Physics and select Custom from the list.
  • Under Transform, set the Scale Z to 1.
  • Change the Depth to -1.
  • Under Box Collider, set Center Y to -0.1 and Z to 1. Change Size X to 0.45, Y to 0.6 and Z to 0.4.

If you followed the steps above, the settings on the player sprite should look like the following image.

Click on the image to see all of the settings:

Changing the Depth to -1 and the Center Z to 1 on the Box Collider will position the Collision at 0 on the Z axis while moving the player sprite 1 unit towards the camera. This has 2 effects: it makes sure that the player will always be visible in front of the level sprites while keeping the collision at 0 on the Z so that it will collide with the ladder and rope triggers. It sounds kinda strange, but you can see how it should look in this screen shot:

2dGamePt3 Player Collision

Setting Up The Shooting Animation

We need to add another animating sprite so that when you press the fire button, you’ll see a bullet blob animate from the player and hit the ground.

The Shoot Animation:

  • Drag an Animation object from Orthello –> Objects –> Sprites into the Hierarchy. This will add a new object under OT –> Animations named something like “Animation (id=-4320)“. Rename this object to “shoot anim“.
  • With the new “shoot anim” OTAnimation still selected, adjust the settings to match those in the following image. To populate the Container field, drag & drop the “level” object from OT –> Containers on to the Container field. Remember that we already added the shoot sprite animation to the level sprite atlas in Part 2 of the series.

2dGamePt3 Shoot Sprite Animations

The Shoot Sprite

  • Next find the AnimatingSprite object in Orthello –> Objects –> Sprites in the Project tab and drag it into the Hierarchy, this will make a new object in the scene with a name like “Animating Sprite (id=-23050)“. Rename this object “shoot“.
  • With the new shoot object still selected in the Hierarchy, drag the “shoot anim” object on to the Animation slot. The Sprite Container slot should automatically fill with a reference to the “level” container object, if it doesn’t you can drag & drop that onto the slot.
  • Set the Transform Position X to -1 so that the sprite is position to the left of the player’s sprite.
  • Set the Depth to -1 so that the sprites will appear in front of the level sprites.
  • Set the Frame Index to 18.

Now you should see the shoot sprite in your scene and if you press Play in Unity, the sprite will animate through all of the frames in all of the animations. We don’t want the animation to play on start so uncheck the Play On Start checkbox.

We only want to see the shoot sprite when the player is actually shooting so uncheck the checkbox next to Mesh Render on the shoot sprite. This will hide the sprite in the scene until we show it again later with a script.

Parenting The Shoot Sprite

We want the sprite to move with the player and we also need to flip the sprite so that it’s either on the player’s left or right side depending on which way the character is facing.

  • Go to Game Object –> Create Empty
  • Rename this object to “shoot parent” and make sure the X, Y, Z Position on the object is set to zero.
  • In the Hierarchy, drag and top the shoot sprite on to the shoot parent so that the shoot sprite becomes a child of the shoot parent object.
  • Drag and drop the shoot parent object on to the player sprite so that it’s a child of the player.

If you followed all the steps so far, your Hierarchy should look something like the following image. Note that I put all of my level tiles under an empty game object named LEVEL to keep things organized.

2dGamePt3 Player Parenting

Note that in order for the scripts to work, the child objects under the player must be named exactly as shown in the above image.

Hooking Up The Scripts

We’re finally ready to add the scripts so that the player can move!

  • Download the player scripts and unzip the file somewhere on your hard drive.
  • Drag the Scripts folder from the .zip into your project’s Asset folder.
  • Create an empty game object by going to Game Object –> Create Empty
  • Rename the new object to something like “Scripts“.
  • Drag and drop the xa.cs file from the Project tab onto the Scripts object in the Hierarchy.
  • Drag and drop the player.cs and the playerAnims.cs files from the Project tab on to the player object in the Hierarchy.
  • Make sure that the player is positioned above a brick tile so that she has something to stand on. Remember that it’s the player’s Box Collider that actually collides with objects in the world and not the visible sprite object, so the box will be positioned at something like 0,0,-1 (X and Y can be anywhere in the level but Z should always be -1).

Now if everything is setup correctly, when you press Play in Unity the player should stand on a brick tile without falling through it. And if you press left and right on the keyboard the player should move and the run animations should play.

Describing how the scripts work is beyond the scope of this tutorial, but I did add comments to the scripts that should hopefully help you understand how everything is working. If you have questions about anything in the scripts, please feel free to ask in the comments below or email me directly.

Adding The Ladder Colliders

In order for the ladders to work, we need to add colliders to them.

Creating A Ladder:

  • Go to GameObject –> Create Other –> Cube
  • Rename the Cube to something like “Ladder“.
  • Open the Tag Manager by going to to Edit –> Project Settings –> Tags
  • Under Tags in the next available slot (probably Element 1) type “Ladder” and then in the next slot after that, type in “Rope” (without the quotes).
  • While we’re here, we need to add another layer. Under the next empty User Layer (probably User Layer 9), type “NoDraw” (without the quotes).
  • Now click on the Ladder cube you created before and change the Tag to “Ladder” and then change the Layer to “NoDraw“.

Hiding Objects In The Game View:

You’ve probably noticed that the Ladder collider is visible in the Game view but we don’t want to see these in the actual game. To hide them, we need to make a change to the camera.

  • Click on the Main Camera object in the Hierarchy.
  • Under Camera, drop down the list next to Culling Mask and click on “NoDraw” to deselect it. Now any object that is in the “NoDraw” layer will be hidden in the Game view.

Sizing And Positioning The Ladder:

Every ladder in the scene needs to have one of these Ladder colliders and we need to adjust the size of the Ladder colliders to match the height of each of the ladders in the level. The ladder collider needs to be 1 unit taller than the visible ladder – so if your ladder is 4 tiles (sprites) tall, then the collider needs to be 5 units tall.

  • Assuming your ladder is 4 sprites high: Select the Ladder collider and change the Scale Y to 5 (1 unit taller than the visible ladder).
  • Snap the Ladder collider to one of the lower corners of the bottom sprite using the Vertex Snap feature in Unity.
  • You can duplicate this object, resize the Y and snap it to all the other ladder sprites in your level.

Your ladder should look like this (click to see a larger version):
2dGamePt3 Ladder Trigger

Now if you press Play in Unity and then walk the player over to the ladder, she should be able to climb up and down the ladder, the player’s sprite should be playing the climb animation and you should be able to exit the ladder at the top and bottom levels and also fall off the ladder if you exit somewhere in the middle.

Adding the Rope Colliders

The rope colliders follow pretty much the same setup as the ladders.

Creating A Rope:

  • Go to GameObject –> Create Other –> Cube
  • Rename the Cube to something like “Rope“.
  • Change the Tag to “Rope” and then change the Layer to “NoDraw“.

Sizing And Positioning The Rope:

Like the Ladders, every rope in the scene needs to have one of these Rope colliders. But unlike the Ladders, the Rope colliders must be the same width as your rope sprites.

  • Assuming your rope is 4 sprites wide: Select the Rope collider and change the Scale X to 4 (Y and Z scale should be 1).
  • Snap the Rope collider to one of the lower corners of the bottom sprite using the Vertex Snap feature.
  • You can duplicate this object, resize the X and snap it to all the other rope sprites in your level.

Your rope should look like this (click to see a larger version):
2dGamePt3 Rope Trigger

Now if you press Play in Unity and then walk the player over to the rope, she should be able to climb left and right along the rope, you should see the rope hang animation playing and if you press the down arrow while hanging from the rope, she should let go of the rope and fall.

Conclusion

Now you have everything you need to make levels that support the player’s full suite of movements: running, ladder climbing and rope shimmy. In the next tutorial, we’re going to be adding the scoring system, breaking out brick tiles and picking up objects.

You can download the project up to this point and you can play the web version of the project here.

If you like this post, please be sure to say hi in the comments and follow me on Twitter and Facebook. Your support helps to keep these tutorial coming. This blog post is part of iDevBlogADay, a collection of indie developers writing about their development experiences.

Regarding The AI:

When I began this series, It was my intention to include enemies that could follow the player around the level using behaviors similar to the original Lode Runner game. However my time has become increasingly limited and my programming skills aren’t fully up to the task of recreating their AI so I might not be able to get AI into this the series.

If you are a programmer who would like to contribute an AI behavior solution to this tutorial series, please contact me.

More Tutorials In This Series

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

And here’s another tutorial series that uses Sprite Manager 2 for the sprite display and animation duties:
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 5

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

128 thoughts on “Make A 2D Game With Unity3D Using Only Free Tools Part 3

  1. Paul Bartocillo

    Hello Tim… Can i ask something? please help me… This is a very good tutorial thats why im following it.. but i got stuck in the part where i will create another Animation Object from OT.. When i drag animation Object from OT in project view into the hierarchy it will create a new object but it duplicates the properties of the first animation object i did… and when i click apply…it changes the animation properties of the first one… Exaample.. i created a “level anim” for level animation..when i create a new animation for “player anims” and changes it properties and apply it…it will also change the properties of the level anims i created earlier… Please help me…I dont know where did i gone wrong… if u have some idea on what is the issue i encounter…i would gladly ppreciate your help…THank you again…Goodluck!

  2. Dang Nit

    hlo tim

    hws u..????

    its a great pleasure for me to join your tutorials. I learnt a lot from your tutorials and in part 3 i have one problem the problem is that my player object do not collide with any other object and any of my objects is not animating,,, plz help me to sort out this problem..how to player object with other objects… reply me soon

  3. Southpaw

    Anyone that is still having issues with the player falling through the bricks, make sure your brick Prefabs are set to “Ground” on their Tag and Layer drop downs in the in inspector. Also make sure all your bricks in the the scene are updated with any changes you make to the prefab.

  4. Joanne

    Just finished this part. Had to make a few modifications to get it to work properly, probably mostly because of the software updates, but nothing inaccessible to a decent programmer.

    The tutorial is great. Some more explanations would be welcome regarding particular settings or arbitrarily chosen values. I’ll have a look at your more recent tutorials for that.

    I’m completely new to Unity, and used to programming but not for games. Found this tutorial really clear and simple. Perfect to get around Unity while having fun :)

    Thank you!

  5. Anderson Taborga

    I had problems with the tag, however after arranges them on line 144 of player.cs also needs to be fixed, there was a change in orthello, it took me to find the error. had to revise the documentation to find possible solution. Thanks for posting Will and Southpaw.

  6. Rizz

    Thank you Kyle, that seemed to work for the animation issues I was having for this part in the tutorial.

  7. Mark Wilson

    Hi Everyone, Clearly a lot of people have had problems after the section where the code is added. I tried a lot of the recommended solutions (including changing the code, which is something I have not even started learning about yet).

    with no luck.

    Here are the steps I used to fix my problems and hopefully it will help someone out, firstly I did not have to make any changes to the code.

    Firstly I realised that my player was too far along the z axis and so the collider box was not touching the bricks, I was also unable to make changes to the z axis, when I typed in a new number it simply reverted back.

    As someone has already mentioned, if you change the depth of the player instead of the z axis in the transformation section you can successfully move the player.

    Second, my bricks were not aligned properly in the z axis and could not be moved similar to player. To fix this I selected the GameObject that they where connected too (in this case “Level”) and I reset the axis’ to 0 and this fixed the problem of the player falling through the floor.
    Doing this also fixed the animation problem I was having. The player was flickering between poses but after fixing the problem with the object positioning this fixed itself for some reason.
    I recommend you try those if you are having similar problems to me, it took me a lot of trial and error to fix this and I hope it will help someone else.

  8. Jay

    gahhhhhhh

    I’ve spent a few hours the last couple of nights trying to figure out why my character keeps failing through the bricks and landing on the bottom game object. The character also seems to “vibrate” on that bottom game object as well, which seems odd.

    I have to say I’ve gotten pretty good with unity due to this bug.

    I thought it was a problem with the box collider. I messed with those box colliders for like 3 hours. Select bricks and player switch to left view hmmmm green box colliders seem to be along the same z plane. Switch back to front view hit play and watch my character fall through the bricks.

    @f611fc154a709cc6aacea9dc7146006a:disqus
    I came into work this morning after having nightmares about falling through floors and decided to check out the comments. First comment I see is this one. I should have checked the comments section right away I just figured I was the problem, not the code.

    Thanks for the fix.

    I’ll try it when I get home tonight.

    Today I see 2d Toolkit is on sale (Asset Store Summer Daily Deals). I’ll probably pick it up. People seems to like it quite a bit more then SM2 and now at a 1/4 of the price it seems like a no brainer.

  9. Jay

    Thanks @rocket05:disqus for the tutorial. I don’t know why there does not seem to be official tutorials by these 2d framework makers (2d Toolkit, Orthello, SM2). I probably would have bought one by now if I knew I could fallow a tutorial and see how hard or difficult the tool was.

    I was thinking I would try out Orthello using your tutorial and then if I felt I needed the extra functionality of the pro-version I would buy it.

    However now I see 2d Toolkit is on sale and at that price and the amount of positive reviews I think I will pick that up. I wish there where some tutorials like this for 2d Toolkit.

  10. Jay

    @rocket05:disqus
    What other tools do you use for game development?

    I see all these cool assets on the asset store and am not all that sure how useful they are to someone with a lot of software development experience but very little game development experience.

    Many of the assets seem geared towards removing coding as part of the game development work flow.

    I find it hard to find information on what “cheap” indie developers are using to make commercial games.

  11. KikkoDeveloper

    Hi Tim
    a lot of compliments for this perfect tutorial, your job is amazing and rare on the web.

    I completed this part and everything works for me, even if i don’t know why when i play the game, it gives me an error “IndexOutOfRangeException: Frame number out fo range!”.

    I don’t understand why it appears, considering that i did everything correctly as the tutorial and everything works fine in the game.

    What can be that error message for ?

    Thank you very much again

  12. PA

    Seems a bit late in replying this tutorial… but I wanna ask one thing that how the player sprite got “blocked” by using raytrace in script when she tries to walk through the margin of the game screen? Is there some blocking blocks built outside the camera view ?(am I missed when looking through the tutorial?) Looking forward for helps, thanks!

  13. Matt Borgard

    PA,

    There are no physical blocks. The script checks if the ray intersects the size of the screen, and if so, blocks the character from progressing.

    // is the player on the far right edge of the screen?

    if (thisTransform.position.x + xa.playerHitboxX > (Camera.mainCamera.transform.position.x + xa.orthSizeX))

    {

    xa.blockedRight = true;

    }

    // is the player on the far left edge of the screen?

    if (thisTransform.position.x – xa.playerHitboxX < (Camera.mainCamera.transform.position.x – xa.orthSizeX))

    {

    xa.blockedLeft = true;

    }

  14. 4KbShort

    This helped with an issue where the character model was “always falling” and then would fall through the tiles if I tried to move them. Thanks!

  15. Juan Pablo Correa

    Thanks you very much for all the tutorials, but i have to said, that this inst really a tutorial, i think is just a step by step guide to do something but not understanding nothing of wath is going on behind. sorry for my english..

  16. SZ

    Great tutorial. was having the falling through issue, Changed 143 in Player.cs like Will said, but I was still having the issue. Then I figured that I put all the elements under LEVEL like Tim did & it changed their Z position in Transform. After couple of try & error I changed Z to 0 so the player’s “box collider” would position right on top of the bricks. Fixed the problem

  17. Tsukasa

    Everyone having the fall through issue here is what I did to fix it.
    Create an empty game object called LEVEL. Place all of the bricks, rope, bottom floor in it. Select the LEVEL object and in Transform set the position to 0,0,0.
    Next edit Player.cs and change line 145 as other said to -1f. If you don’t do that you will notice your collider being reset to 0 and then you fall through.

    Tested on Unity 4.2.1f4 and Othello 2.9c

  18. Tsukasa

    To fix the fall through issue here is what I did on Unity 4.2.1f1 Othello 2.9c

    Create an empty game object and place the Transform position at 0,0,0.
    Put all of the level objects inside of it. Bricks, Ropes, Ladders.
    Edit line 145 of playrer.cs and change it to -1f.
    Change Depth in OTAnimating to -1.

  19. lasergames

    In the Start() method of the PlayerAnims script, mySprite is null for me unless I do the following:

    mySprite = GameObject.Find(“player”).GetComponent();

    That is, the original line “mySprite = GetComponent()” does not get me the sprite.

    Any thoughts would be appreciated! Thanks!

  20. Sylwek

    I’ve figured that out!
    You have to change the frame number to be in range of the current frameset. As the runLeft and runRight animations are 3 frames long, you have to keep it in range of 0-2.

  21. Pingback: Unity3D+免费工具开发2D游戏之三:创建人物动画 | 游戏开发者

Comments are closed.