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 want inspiration I would suggest reading up on the roblox hack which is available for free online. 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. 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).
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
Now 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. 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”: 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.
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.