Welcome to another exciting tutorial on Unity3D. Today’s lesson will focus on animations within Unity3D. Since animations occur not only in 2D games but 3D games as well, Ive decided to break this up into two separate tutorials. This tutorial will focus on 2D animations, and a subsequent tutorial in the future will discuss 3D animation techniques.
As always, I have broken this tutorial down into two distinct segments. The first segment explaining the basic premise of how animations work within Unity3D, and the second segment will be an actual implementation of animations within a scene that you can control.
Learn online to create Unity games
Unity 3D from Scratch – The Complete Series is your one-stop resource to learn all the basics of this fantastic framework so you can start making games in no time!
- A basic understanding of the C# language
- Basic knowledge of the Unity3D editor (see my previous tutorial)
Segment 1: Animation Basics
Unity3D allows for multiple animations to play at the same time in multiple layers or a single animation to play on a base layer. This makes for Unity3D to be extremely flexible in how you can create a game. For example, let’s say you wanted to build a game where you have a ship that tilts left and right according to movement trigger and auto fires constantly. Unity3D’s animation allows you to do this with relative ease.
Let’s explore how to start working with animations in Unity.
Section 1: Setting up the Project
The art used in this tutorial was from http://opengameart.org under the public domain license.
–http://opengameart.org/content/animated-robot-set-png – Without SpriteSheet artwork
–http://opengameart.org/content/ghost-animated – With SpriteSheet artwork
Zip file for the entire project is located here.
To begin, let’s start by opening Unity3D and creating a new project. We will name the project “2D Animations Tutorial”, make sure the 2D option is selected, and we want the Visual Studio 2015/ 2013 tools asset imported.
We want the Texture Type to be Sprite( 2D and UI), SpriteMode to be Multiple, Pixels Per Unit to be 1 instead of 100, Generate Mip Maps to be checked, Filter Mode to be Bilinear, Max Size 2048, and Format to be compressed.
After these have been set, click on Apply.
On the top of the Sprite Editor Window, select slice. Type should be Automatic, Pivot center, method is delete existing. Click on the button called Slice.
(Note: If for any reason the slice method did not slice the images into their own sprite block, you can manually do this. Simply select somewhere within the editor box and drag, it will create a box that you can modify in size.)
After you are done, click on apply to apply the changes made.
Before we move on to the next section, I want to point out 2 very useful window components for animations within the main Unity3D editor. Animator and Animations.
Click on the Window button and select Animator. You will see why it is important in the next section.
Section 2: Let’s Make an Animation
We are done with the Animator tab, I just wanted to show a brief preview of how the Animator is displayed. Don’t worry, the next section will deal heavily with using it.Now we can view the Animation tab.
At the top of the Animaton tab, you will notice a box that has the name Samples in it. The original sample rate is 12 and if you play the animation, it is going a bit too fast. Let’s change the sample rate from 12 to 5.
Go back to the scene view and press play. the ghost should now be animated on the screen. That is the overall basics of Animations within Unity3D. Before we go into the next section, let’s finish this off to prepare for the next section.Click on file, New Scene. It will ask you if you want to save the old scene.
Section 2: Controlling animations via Scripting
I realized that anyone reading this tutorial would say, “Well, I know how to make an animation, but how do I control it using code?”; And this section will explain it all to you, using the scene we already created to show that. This section will be relatively short and to the point, so if you don’t fully understand it, Segment 2 will show it in more detail with more controls.
To get started, load Scene1 back up. To do this, click on the scene’s folder and double click on Scene1.
Open up the script inside Visual Studio or MonoDevelop and Remove the Start and Update Methods from the editor.Create a public Animator and call it animator. We also want a void Awake method. The awake method should get the component of the Animator from the animator. Your code editor should look like the image below:
Now we want to add a void Update method. This next part is super simple. We take the animator’s transform position which is a Vector 3 location and add to its current position a new Vector 3 to add 1 to its x position.Your code editor should look like this image below.
Go back into Unity3D, make sure the ghost animation is selected from within the Hierarchy pane. And in the inspector either drag the GhostlyBehaviour script onto the inspector or click Add Component, Scripts, GhostlyBehaviour.
Run the program and your ghost should be animated and move across the screen until it is no longer within view and continue that way forever. Congratulations, you have just created a simple animation and controlled it via scripting.
Segment 2: Player controlled Sprite with Animations
This segment will take what we have learned from Segment 1, expand upon it a little and make a scene where you can control the character with the left and right mouse buttons. Although it doesn’t sound very exciting, it will most certainly open doors for creating a full game with the techniques used in this article.
So where do we begin? Well, we always start from the beginning. Remember the new scene we created and then went back to Scene1? If you saved that new scene, go ahead and open that scene up, if not…
Open the Idle folder and reveal the sprites located within it. Ctrl + A or control click all of the images. Change the Pixels Per Unit to 1 in the Inspector tab. Everything else can stay the same and click apply.
Now, you may notice that the sprite is HUGE on the screen, no need to worry about it, we will address that in a moment. Simply click on the Camera on the Hierarchy tab and in the Inspector, change the Size to 1000. Boom, problem solved!
Now, Select the Left folder from within the Without SpriteSheet folder and again, we want to select all of the images and drag them on the scene. (I tend to drag them to the same position as the Idle animation on the scene).
You will see two new files on the screen. One is the Animation Clip and the other is the Animator Controller. We will need these later.
Click on the transition from Any State to Gold Idle. Open the Settings and lets make a couple changes to it. Transition Duration should be set to 0 and Can Transition to Self check mark should be unchecked.
Next to layers, you should see Parameters, click on that. Then Click on the plus icon just underneath that. We want this to be set as an Integer (Int) and we can leave it set to 0 for now.
Once that is set, click on the transition from Any State to Gold Idle and look in the Inspector pane for Conditions. Add the Condition we created called transitionInt and set it to equals 0.
Let’s take a moment and discuss the code above. Whenever we call a component, we always want to make sure we get a reference to it. The most effective way to do so is by using a public property. We could have very easily just put this code inside of the update method, although by convention, you want to avoid this.
Instead of doing a generic left and right arrow or specific buttons on the keyboard, I felt that controlling the sprite by mouse movement would be a bit more fun to code. Input is a utility built directly into MonoDevelop and does not use the built in .NET Framework’s capabilities on it.(For those curious about this, they extend upon what was built into the .NET Framework and used their own).
Input.GetKey is a boolean by nature, which is why we can use it inside of an if statement without issue. And we specify which direct boolean we want to compare to, in this case it is KeyCode.Mouse0 (left mouse button) and KeyCode.Mouse1(right mouse button). If neither of these two buttons have been pressed, play the idle animation and do not move. Otherwise, if the right mouse button is pressed, play the right movement animation and move to the right by 1 on the x axis.(Same goes for moving to the left).
Now you can save your scene. Click run and reap the rewards of a job well done! Congratulations, you have now animated a sprite and allowed it to move. You are well on your way to becoming a game developer using Unity3D. Give yourself a pat on the back for a job well done!
As always, if you have any questions or comments about this tutorial please comment below. Alternatively, if you are having any issues learning about a specific portion of Unity3D, comment below and we can make a tutorial on it as soon as possible.