Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Unity Basics!
You have completed Unity Basics!
Preview
Let’s bring this game to life with some basic animations. We’ll learn how to create animations and how to transition between them.
Unity 6 Documentation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back!
0:01
Let's add a simple animation
to Mike the Frog here.
0:01
Now there are a few different ways
of animating objects in Unity,
0:04
but we're going to cover the simplest way,
0:08
which is just using our sprites
along a timeline.
0:10
A lot of times when getting assets for 2D
games, you'll have a few images
0:13
we do, or a sprite sheet,
which is a collection of images
0:17
placed into one file that you'll splice up
into individual sprites.
0:20
There is a lot
I could cover on animations,
0:24
but it would make this course longer
than it already is,
0:26
so there's links in the teacher's notes
if you'd to see more about animations.
0:29
Okay, we're going to need a new window
for this, so let's go to Window > Animation
0:33
and Animation again.
0:40
I'm going to dock this alongside
my console.
0:42
The animation window is where we create
0:47
individual animations for objects.
0:49
Let's click on our assets
folder and create a new folder
0:52
inside named Animations.
0:55
Next, let's select
1:02
our player object, and in the animation
window we'll see this create button.
1:03
Let's click it.
1:07
It's going to want to know
1:10
where we want to save the animation
and what it should be named.
1:10
Let's name it flap,
make sure it has the anim file
1:14
extension,
and save it to our new animations folder.
1:17
We'll now
1:22
see that this is essentially a timeline
where we can make changes to our object.
1:22
You can change
1:26
pretty much anything you want here,
but we're going to keep it simple.
1:27
Let's go back to our art folder and click
1:30
and drag this first Flying
Mike 1 image in.
1:33
Let's drop it at 0.
1:36
You'll see it created
some keyframe markers.
1:38
We're telling the animation
that we want this to be our sprite at 0.
1:40
Cool, let's drag in Flying
Mike 2 and drop it at the 10 mark.
1:44
We can preview
our animation with this play button here.
1:49
It looks a little glitchy, and that's
because it's only playing the second image
1:52
for a single frame
before going back and looping over.
1:56
So let's drag in the same image in again
2:00
and place it at the 20 mark.
2:02
If we preview now,
it's looking much smoother.
2:06
You can feel free to bring these keyframes
closer together to speed it up
2:10
or spread them out
to make the animation slower
2:13
but I rather it how it is. Now
because we clicked that Create button
2:16
in the animation window, it automatically
did some other work for us too.
2:20
If we inspect our Player object, you'll
see it has added an Animator component.
2:24
And the other thing to note
here is the Controller property.
2:28
An Animator controller in Unity manages
and controls animations for game objects.
2:32
It functions as a state machine
that determines which animations
2:37
should play based on specific conditions
and parameters.
2:40
If we look back at our animations folder,
you'll see it created an animator
2:44
controller object and given it
the name of our game object by default.
2:48
This is what's assigned over here.
2:52
Also, if we inspect the animation
2:55
we created by clicking on it, you'll see
by default it's set to loop over and over.
2:57
Perfect.
3:01
Let's look at this further
with another window.
3:02
Let's go to Window > Animation
3:05
and this time select Animator.
3:08
I'll leave mine up top here
3:10
next to the scene and game windows
so we can see it better.
3:11
I'll click the player again, and in here
we have a few little nodes.
3:14
There's this one that is named Entry,
and there's a line
3:18
going from it into the node
with our flap animation name.
3:21
This is essentially
what's called a state machine.
3:25
This is one way of controlling
what animation should be playing and when.
3:28
So when the scene starts,
or when the game object is enabled,
3:32
it starts at the Entry node.
3:36
This line represents a transition,
and it's going to immediately
3:38
play our flap animation.
3:41
Let's test this in Enter Play mode.
3:44
Yep, it automatically
plays our flap animation.
3:48
Fantastic!
3:52
Let's create another simple animation
for when the player loses.
3:53
Let's make sure we have the player object
selected still, and in this dropdown
3:57
that has the name of our current
animation, select Create New Clip.
4:01
Let's name this one
crashed.anim, and make sure
4:05
we're putting it in our Animations folder
to stay organized.
4:09
We'll simply drag in this third
image named Flying Mike Hurt
4:13
and it'll loop this image
repeatedly by default.
4:17
Let's open up
4:22
the Animator window again
and you'll see it's created a node for us.
4:22
How convenient!
4:26
Currently though,
Unity will never do anything with this.
4:27
We need to tell it
that this flap animation can transition
4:31
to this crashed animation. To do this
we right click
4:34
on the flap
node and select Make Transition.
4:37
This will attach a line to our cursor
and we want to now hover
4:41
over the crash node and click it.
4:44
Nice.
4:47
Now, we won't ever be going back
to a flapping state
4:48
from a crash state, but if you needed to,
it would be the same thing in reverse.
4:51
Right clicking on Crashed,
and transitioning to Flap.
4:55
Let's click this transition line
5:02
to adjust the settings of how
and when this transition will happen.
5:03
There's a lot of settings here
that, to be honest, I rarely use.
5:08
And since we're working in 2D,
we kinda want our animations
5:11
to be instantaneous,
not a gradual blend between animations.
5:14
It looks a lot cleaner most of the time
with 2D, especially with pixel art.
5:19
So the only things we're concerned
with at the moment is exit
5:23
time and fixed duration.
5:26
Exit time controls
when a transition starts
5:28
based on the progress
of the current animation by a percentage,
5:31
and fixed duration
does it by seconds instead.
5:35
We don't want any exit time or duration,
we just want to abruptly change
5:37
from flap to crashed.
5:41
So let's disable exit time and just bring
the transition duration down to zero.
5:43
You can see we get a warning now
at the bottom of the screen.
5:51
Let's take a closer look in the console.
5:54
It reads, Transition flap to
crashed has no exit time or any condition.
5:56
Transition will be ignored.
6:02
RUH ROH!
6:04
Well, a condition
sounds the way to go, doesn't it?
6:05
Kind of like an if statement conditional.
6:08
If the player crashes,
we want to transition.
6:10
But how do we do this in the animator
window?
6:13
We'll see just below this transition
visual here,
6:16
there's an empty conditions list.
6:19
So let's make a condition.
6:21
To do so, we go up to the top left of the
animator window to the parameters tab.
6:23
Clicking the plus icon gives us a drop
down of our options.
6:28
Float, int, bool, and trigger.
6:31
We could do a bool and do something like,
if the player is in a crashed state,
6:35
but in our game, we're never going to go
from a crashed state back to a flying state.
6:39
Restarting the scene will do that for us,
since it goes from the entry state
6:44
straight into the flap state.
6:48
What we want right now is a trigger.
6:49
It'll read like, if the player crashes trigger
this animation transition.
6:52
So let's select that and name it crashed.
6:56
This is another one of those case
sensitive deals
6:59
so remember how you typed it or copy it
7:01
now. Now let's click
this plus icon on the conditions list.
7:04
Since this is the only condition
it added it for us automatically.
7:08
Nice.
7:11
We're done with this
7:13
animation window so I'm going to dock it
with these others to clear up some space.
7:13
Okay time to trigger
this trigger in our code.
7:18
Let's open up the Player script.
7:21
As usual, we'll need
a reference to this component.
7:26
I'd like to give this to you
as another challenge.
7:29
We've done this a few times
7:31
now, so up top, create a variable
for this animator component.
7:32
Not animation, animator.
7:36
Then get that component in the start
method.
7:39
Go ahead and pause me and give it a go.
7:42
Did you get it?
7:46
No worries
if not. Here's how we can do it.
7:47
We'll say private Animator,
and I'll just call it animator
7:50
with a lowercase a.
7:54
Just our rigid
8:00
body, in Start we'll say animator equals
8:00
GetComponent,
8:06
and it's of type Animator,
and close it off.
8:07
Now, down in our OnCollisionEnter method,
we need to do this
8:15
right before we show the game over menu,
since that method pauses time.
8:18
If we did it afterwards, this code
won't run, because the game is frozen.
8:23
So we'll say animator.
8:28
and the method we want is SetTrigger.
8:30
We'll see it's expecting
a string value of the trigger name,
8:37
so let's type
our animator parameter name in there.
8:40
Mine was crashed, all lowercase,
but make sure you put yours in
8:43
as you typed it before.
8:47
Let's save this, go test it out.
8:48
Awesome!
8:58
It's working great!
8:59
We transition into the crashed animation
just before
9:01
opening the menu and pausing time.
9:04
In the next video,
we'll quickly add some background music
9:07
and I'll show you how to build
your game out to your machine
9:10
so that you and your friends
can play outside of this Unity editor.
9:12
See you there!
9:16
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up