With the relatively recent release of Unity 4.3, tools for creating 2D games appeared. Of course, such games could be created before, but it was done with additional tricks (here is an example from the habr). Now the game supports 2D out of the box. I hope the developers will continue to develop it, but for now I want to talk about some tricks of working with new 2D tools.
For the basis of the lesson I took the official video lesson from Unity3d.com. In it, an animated controllable 2D character is created. He can stand, run, and jump. All this is accompanied by appropriate animations. The tutorial is quite long (almost an hour and a half) and contains a little “water”, so I decided to do some text translation. In this part we are going to talk about the very basics – let’s create a static platform for our character, the character himself, and make the character’s animation rest. We will consider running and jumping later, but we will create the basis for that now. I will try to describe all the operations in detail, but you should have a basic knowledge of the Unity interface. There are also good and quick tutorials on the interface on the official Unity website.
So, let’s get started. Create a new project in Unity. Choose a folder to locate the project, we will not import additional packages. Make sure to specify that we create a project that is configured for a 2D game (Setup defaults for: 2D).
The project is created. In the window Project we should have one folder – Assets. Let’s create a subfolder in Sprites, where we will store sprites – graphic files needed to display characters, background, floor, bonuses and other game objects. We need a sprite to display the platform on which our character will run. Any rectangular image will do. At the end of the post I provided a link to the archive with the sprites that were used in the lesson. These are some sprites from the game Captain Claw. The platform sprite file is called Platform.png. Let’s copy it to the Sprites folder. Now we need to drag and drop the Platform sprite onto the Scene window.
Our project has a camera named Main Camera. It is what will display what we see in the game. Drag the platform sprite to put it in the bottom corner of the camera’s field of view (if you click on the camera there will be a Camera Preview window at the bottom of the scene where you can see what the camera sees at the moment). Unity will automatically create a game object with two components – Transform and Sprite Render. The first is responsible for positioning our platform, the second for rendering it. But we still need to keep the character from falling through the platform, so we will add to the platform object a Box Collider 2D component, from the Physics 2D section. So, now we should have something like this:
Now let’s deal with the character. Create an empty game object (Game Object – Create Empty) and drag it so that it hangs over the left side of the platform. Let’s rename this object as Character and add to it the Rigidbody 2D component, to give our character the physical properties of a solid body. In the Rigidbody 2D component, check the Fixed Angle checkbox to prevent accidental rotations of our character, for example, from collisions with other solids. Then set the Interpolate field to Interpolate. Unity’s documentation recommends setting this value for player-controlled characters, especially if the camera follows him. This is because of the synchronization of the physics calculation and the rendering of the graphics. See the documentation for details.
Next, we need to add a Sprite Renderer component, for rendering the character. Why can’t we just transfer the desired sprite, and get an automatically generated Sprite Render, as in the case of the platforms? Because our character, unlike the platforms, will be rendered not by one but by several sprites to get an animated character. To do this we have to do a number of things and the first is to get the right sprite sheets (Sprite Sheet).
A sprite sheet is an image that contains the animation frames for our character. I think it’s no secret that animation is a sequential and fast display of non-animated frames, each one slightly different from the previous one. Google Sprite Sheet, and you’ll immediately understand what it is. We need spritesheets for the resting, running, and jumping states. The archive with the sprites contains the files Idle.png, Run.png, and Jump.png. Let’s copy them to the Sprites folder. At this point it should be as follows:
Let’s proceed to animating the character, and specifically to animating the state of rest, when the character just stands there and does nothing. To be more precise, he does nothing in terms of game logic, but he can shuffle from foot to foot, blink, make gestures to show that he’s bored just standing there and so on. For the rest animation we need the file Idle from our Sprites folder. Let’s select this file. The Inspector window displays the properties of this file. The Texture Type property is set as Sprite, which is what we need, but the value of the Sprite Mode property should be changed from Single to Multiple.
So we have indicated that the file is not a single sprite but a collection of sprites. However, this collection still needs to be initialized. To do this, just click on the Sprite Editor button, which is in the same Inspector window just below the Pixels To Units property. A new window will open. In it we see the contents of our sprite for the quiescent state: several frames that look similar to each other. We need to cut them into separate images. To do this we click on the Slice button in the upper left corner of the window. First of all we have to set the slice type: Grid or Automatic.
The first one will slice our image with a grid with adjustable cell sizes (Pixel Size – X… Y…). In this mode, you have to choose such values so that all the frames fit into the cells normally, so that nothing is cut off, etc. In the second mode, the frames will be sliced automatically. The slicing itself will occur after you press the Slice button. Try different slicing methods and see what happens. In the case of my sprite sheet, the Automatic method is fine.
Even if some of the frames are a bit unsuccessful, you can edit them by clicking on them and changing the height/width/position and other parameters in the corresponding window or with the mouse. Confirm the slicing by clicking the Apply button in the upper right corner and close this window.
Now we have to find our imported Idle file in the Project window. There is a triangle on the right side of the file (or on the left side, with the smallest icons). Clicking on the triangle will expand the collection of sliced images. They will be named Idle_0, Idle_1, etc. Now in the Hierarchy window let’s choose our Character, and drag the Idle_0 image into the Sprite field of the Sprite Render component. Our character will appear on the scene. If it turns out to be small, you can increase its size to the required size. Here we go:
Let’s immediately add the Box Collider 2D component to our character, so that it doesn’t fall through the platform. In doing so, let’s adjust the size and location of the collider so that it is not too big and is located at the level of the character’s legs. This is enough to keep the character from falling through the platform. You can run the game and check it out.
Let’s go back to the rest of the animation. To do this let’s add another component to our Character – Animator (Miscellaneous section). Let’s change some of its properties by deselect Apply Root Motion and set the flag Animate Physics. Apply Root Motion allows you to change the position of the object from the animation itself (which we now do not need), and the enabled flag Animate Physics sets the animation in the loop to calculate the physics, which is exactly what is recommended for moving solids. Now create a file Animator Controller in the Assets folder. Let’s name it CharacterController. In the Hierarchy window, select our Character and drag the CharacterController to the Controller field of the Animator component:
Double-click on CharacterController – a new Animator window will open. Here we will create different animation states (rest, run, jump) and set the transition conditions between them. To create the animations themselves, we need the Animation window. If you don’t have it yet it can be activated from the main menu of Unity (Window – Animation). Now let’s choose our Character in the Hierarchy window, and in the Animation window click the button to create a new animation and choose Create New Clip. In the screenshot below I marked this button with a red circle:
In the standard file saving dialog box, first create the Animations folder, and in it save our animation file, calling it Idle.
After saving, our Idle animation will appear in the Animator window as an orange rectangle. The orange color means that this will be the default animation – just what we need right now.
There are only a couple of steps left. Go to the Sprites folder, expand the Idle sprite, select the first Idle_0 image, press the shifter and select the last Idle_7 image. All the selected images are transferred to the Animation window with the mouse. Let’s set the Sample value to 10-this parameter means the number of animation frames per second.
You know, for good animation you need to display at least 24 frames per second, but in our case the animation has a very small number of frames and at 24 it will display too fast.
Let’s run the game! If everything is done correctly, our Captain Claw should be standing on the platform, breathing, and wagging his tail. That’s all for now. Next time we’ll talk about the implementation of the running right-left character and the corresponding animation.
