Creating a 2D Zelda Clone in Unity

Although game development is far away from my field, I’ve always enjoyed playing video games and I have some good ideas too. So, in my late 20s , I decided to learn game development. I choose the Unity 3.2 engine because of the multi-platform environment, some great features and a good user community. In this short series of posts (which I will update as I learn more) I will document my efforts trying to learn the basics of movement, animating sprites, creating tile maps and developing a classic 2D action RPG game. It all started with the following video on YouTube (his english is a little bad and the flow is a bit slow, but worth it if you are a beginner). Watch it before you begin:

Now, while I understood a lot with this video, to be 100% honest it confused me at some points, especially with the way the author is explaining what he’s doing. Also, I found some mistakes in it so don’t take it all for granted, it’s great to give you an idea of the basic workflow though. So after hours and hours of research, let us start! Note: I wrote this guide after I implemented all the stuff I describe, so I might be forgetting / skipping parts. If you don’t understand or cannot find something, comment below and I will add the missing parts to this guide.

Part 1: Creating basic animations from a sprite sheet.

Choosing and importing a sprite sheet

I chose the sprite sheet from the video, as it includes not only movement, but also attacking, blocking pulling and other states that we will use in the future to learn extra bits. I grabbed a sprite sheet from google and cropped it. As we can see it’s more than complete for a beginner. What I did was crop the sprite sheet, so as to include only the Link sprites, since with the auto slice feature of Unity, a ton of sprites will be created, which will only make our lives harder.Link sprite sheet   It starts with the movement sprites, which is great. We have 8 sprites for each direction (up, right, down, left – I’m a web designer, so I use the order in which CSS works). After we import the image in our assets, we will click on it, go to the Inspector panel and set the:

  • Texture Type to Sprite.
  • Sprite Mode to Multiple (as the image contains multiple sprites).
  • Filter Mode to Point.
  • Format to 16 bits.
  • Pixels To Units to 16 or 32 (I went with 32).

Sprite Import Settings in the Inspector
Click Apply. That last Pixels To Units part is a little tricky to explain. From what I understood, Unity uses a global size unit for everything, it’s just its way to understand distances. The size of this unit will define movement as well, so depending on our game and for each graphic we use, we have to set how many pixels translate to that unit. Now, as I will be using 32 pixel tiles for the map, which will be the unit of distance measurement in my game (32 pixels = 1 block) I set the Link sprite to 32 pixels per unit. This will scale Link nicely in comparison to the tile map textures with a scale of one. Just to understand Pixels to Units better, If I used 16 as my pixels to units ratio (which is the standard width of each regular Link sprite in this sheet), taking in consideration that the tiles will have a ratio of 32 pixels per unit by their nature, Link would appear twice as big and would take up one whole tile in the scene. Then I would have to set his scale to 0.5 in the scene. But I’m not going to do that, because it doesn’t make a lot of sense to me.

Slicing the sprite sheet

Unity Sprite EditorNow that we imported our player’s sprite sheet, we will slice it with the amazing auto-slice feature of Unity’s sprite editor. In the Inspector, we click on Sprite Editor and click on Slice on the top left. There we set the Type to Automatic and make sure the Pivot parameter is set to Center (more on Pivot later). Then we click on the Slice button. In my case, the aut-slicer did an almost perfect job, only missing a couple of dragging sprites that I resized manually. Here I would suggest finding the 4 idle sprites (first four on the seventh row) and renaming them to something like idle_down, idle_right, idle_up, idle_left, so that afterwards we will be able to type “idle” in the Asset filter and find these four sprites easily. If you have the patience, rename all sprites to stuff like walk_left_1, walk_left_2, etc. It’s not necessary to learn but in a bigger project you would want to do that so as to filter easily and minimize searching time. After we do all that, we click Apply on the top right corner. We’re ready to create some basic animations!

Adding the player sprite to the scene

Now it’s time to start animating! Go to the Project panel, find and click on the sprite sheet we imported. There, in the filter field, type “idle”. This will show the 4 sprites we chose before as idle. Technically these are not animations, but it’s okay. We can create idle animations later, having Link blink or something. For now, one sprite per animation will do, and Link will stay perfectly still while idling. Link idle sprites   We should see all the single sprites we renamed earlier. Take the first sprite in which he’s looking down and drag it into the scene. This will add a sprite layer in the scene, which we will use for our hero. Now rename that layer to “player” and go to the animation panel.

Creating sprite animations

There drag and drop that same sprite in the animation panel, a new dialog will appear. Name it something like idle_down and click Save. Then from the tiny drop-down menu on the top left of the animation panel (on the left of Samples), select Create new Clip and name it idle_up. There, drag and drop the fourth sprite, in which Link is looking up. Repeat the process two more times and create the idle_left and idle_right animations (again, these are not actual animations since they have one sprite each). Here’s what we should see if we filtered by “idle”: Link idle animations As you can see, I have organized my assets in folders, for easier access. I strongly suggest you do that as well. Create four new animation clips as described above, named walk_left, walk_right, walk_up, walk_down. Select walk_left from the drop down, go back to your sprites and remove the search filter. Find the sprites in which Link is walking towards the left. Click on the first one, then shift-click the 8th one, to select them all. Drag and drop them into the animation window (make sure you have walk_left selected there). Set the Samples to 16, in the input field above the animation frames. Select the walk_right animation and repeat. Repeat twice more for the walk_up and walk_down animations. Don’t forget to save the main animation containing all the clips! Name it link. animations in Unity

Until now, we imported and sliced a sprite sheet, created a new sprite layer in our scene and added eight animations in total to this layer, two for each direction, four for walking and four for idling. In order to animate our character inside the game, we need to hook up the sprite’s states with some transitions, and create a controller script so that our hero will idle or move (always in the correct direction) when pressing or releasing the WASD or arrow keys on the keyboard.

If you want to follow future additions to this guide, write a comment and click the “Notify me of new posts by email” checkbox. Or go directly to Part 2: Creating animator states, transitions and properties.

35 thoughts on “Creating a 2D Zelda Clone in Unity”

  • Nice tut so far. Im stuck at the part where your at conditions:

    Click on the “Any State” state. In the inspector you will see a list of four transitions on the right. Click on the first one. Underneath, uncheck Atomic if it’s checked. In the bottom part, create two conditions (with the + button). One should be moving, true and the other direction, x, where x is your direction number as explained above. Repeat for the other three transitions with different direction values.

    There isnt any other selection under condition other then Exit Time..

  • Poorly written ending. Did well, then randomly dumps code on the user without explanation (doesn’t even mention rigidbody2d which is required for the code to work, also the code is poorly written)
    Solid guide for the most part, but needs a bit of work.

  • I keep getting a compiler error. “Assets/NewBehaviourScript.cs(8,33): error CS0411: The type arguments for method `UnityEngine.Component.GetComponent()’ cannot be inferred from the usage. Try specifying the type arguments explicitly”

    Could I get some help?

    Also I’m really lost at the Debug instruction. I don’t see a Duration box to type into, regardless of whether I’m in Debug mode or Normal.

  • I got a bit lost when you said to replace the contents with the script below, it’s terribly bumbled up and doesn’t work. It’d be better if you just set the script for download.

    • Another thing I’ve noticed is that the Sprite sheet you show us comes up kinda distorted with weird colors.

      • This has nothing to do with the guide. Maybe there’s something wrong in your setup?

      • Just for the record, and in case anyone else has any trouble with it, when you import the sprite sheet, make sure you change it from “compressed”. In this case you can choose either 16 bits or TrueColour, depending on your needs, as the sprites themselves are 16 bit!

    • I know. I need to find a decent code plugin for WordPress so the code will show correctly.

  • Great job! Now, it’s time to wait really looking forward for the next steps. It is easy to understand the lack of time. We all suffer it! =)

  • Regarding the following line “Don’t forget to save the main animation containing all the clips! Name it link.” I got lost at this part, could anyone give me a little more step by step on what to do? All I see to make animations is [Create New Clip]. Thank you in advance =)

  • Bit off-topic, but related to my question on sprite resolution. I just did this, so I thought I’ll put a note on it here. I’m interested in Zelda 3 specifically. Basic technique to increase resolution and keep sprite appearance: I found some (400) 16×16 sprites on zs.ffshrine.org and used imagemagick:

    for file in rawsprites/*; do convert -scale 200% $file uppedsprites/$(basename $file); done

    (200% is the scale factor of each of the 2 dimensions) This does a *nearest-neighbour* interpolation, so that each original pixel becomes 4 new pixels of the same value. You may keep the colors this way, but always have the option to edit any/all sprites in double (? 4x?) resolution, if you would ever want to, and never need to mess with new resolutions in Unity. [In general, look in software for nearest-neighbour interpolation (a.k.a. “no interpolation”) when scaling the sprites this way.]

  • Great introduction! I too hope for more on this. Could we use 64×64 px sprites (assuming we redrew the sprites to greater detail)? Or would that complicate things.

  • Awesome article! Has the next one been released yet?

  • This has been pretty useful, but this was made back in April. Are you planning on making a part two? I’d really enjoy learning more. If you won’t make any more – where can I read a tutorial on how to make a zelda clone on unity with 2d tools?

    • Hi Alex,

      I am not done with this, but I don’t have a lot of time to play with Unity, as I am not a professional game developer, it’s just a hobby. So the next steps will come when they come. In my post, I asked for a pre-made map to save me some time.

      There is no other guide as far as I am concerned, that’s why I made this.

  • I’d also like to mention I know where to find maps to use if I understand what you’re asking for.

  • This is awesome! You’re very clear and helped me a ton with learning how to make animations in Unity! Thank you, I can’t wait to see what else you can teach.

  • Thanks for this!

  • Lookin forward for this 🙂

  • Great guide! Looking forward to the next one 😀 Thanks!

    • It’s gonna take a while since I’m testing different techniques for animation blending, but I’ll get there! Thanks for commenting!

Leave a Reply

Your email address will not be published. Required fields are marked *

*