What's up Game Developers?
CouchFerret here, and today we'll continue
our archery game with Shooting Animation in
Unity.
We'll create an Archer who can move and aim
in different directions at the same time.
Because this topic is a bit bigger, I've broken
it down into two parts,
so come back next time for part 2!
If it sounds fun, then stay with me, and consider
subscribing so you won't miss any future videos
of this game.
Cool, let's begin!
Our plan is to make our character move in
one direction
while aiming in a different direction.
This is harder than it sounds.
The problem is that if we make each aiming
direction together with 6 running animations,
6 walking animations and 1 idle animation,
then every single aiming direction will have
13 animations, so all 8 aiming directions
will end up with a total of 104 animations.
Surely, there must be an easier way.
After a bit of searching and thinking, I ended
up with a possible solution.
We need to cut the archer in half and control
the legs separately from the body.
If we control it with a separate animator
controller, then we don't need all the combinations
of the legs and body.
This way, we will have 6 running, 6 walking
and 1 idle animation for the legs, and 6 running,
6 walking, 1 idle and 8 aiming animations
for the body.
This should be much easier to handle.
Let's export out last episode's sprite sheet
again but this time we have to separate the
body from the legs.
We need to make visible only the Bottom and
the BottomShadow layers and hide the rest.
Let's export the sprite sheet as BottomPart.
Next, let's export the body while the legs
are hidden.
Because we saved the pngs directly to our
project's directories, they are already imported,
but we need to set a few parameters to make
them usable.
Let's change Filter Mode to Point (no filter)
and Compression to None, and hit Apply.
Then, we need to scroll up and change Sprite
Mode to Multiple and open up the Sprite Editor.
Let's slice it by Grid by Cell Size of 30x30
pixels, and do the same to TopPart as well.
Now we have all the necessary slices.
To have a clearer structure, let's create
a Whole and a Split folder, and move the previous
archer graphics to the Whole directory and
the new ones to the Split.
Let's do the same with the animations.
Now, let's create the BottomPart's animations.
We need to select the first 6 slices and drag
it into the scene to create a new Gameobject.
Save the Animation as BottomRunLeft.
Next, remove the _0 from our Gameobject's
name.
And also do the same to the new animator controller
that Unity created for our Bottom Animations.
Okay, we need to go to the Animator window,
and also open the Animation window as well,
so we can create all the Bottom animations
we need.
Let's navigate to the Graphics folder where
the slices are, and create a new Clip in the
Animation window.
Name it BottomRunRight and drag the slices
from 6 to 11 into the Timeline.
Change the sample rate to 12, and repeat the
process for all the Running and Walking animations.
Okay, I've jumped ahead a bit in time, and
now we have all the necessary animations.
Let's create a new Archer Gameobject and drag
the BottomPart Gameobject into it.
We need to set the BottomPart's coordinates
to 0.
Let's duplicate our existing PlayerController
script so we can start modifying it to work
with the two parts of our character.
You can duplicate it with Ctrl+D or Cmd+D,
depending on your operating system.
Let's open up the new script and rename the
class so it won't throw errors.
We have to change the animator variable to
have one for the top and one for the bottom.
And also, we have to fix the existing references
to the animator variable
by changing it to bottomAnimator.
Using the selector, we can assign BottomPart's
animator component to the variable.
Let's copy the crosshair from the previous
Archer, rename it, and fill the Cross Hair
variable with it, so it won't cause errors
when we test the game.
And also don't forget to drag the Arrow Prefab
into the last variable.
Let's test it to make sure everything works
as previously.
The movement, aiming and shooting works, so
we can focus on the BottomPart's animator.
But, before that, let's disable the old Archer
so we won't control 2 archers at the same
time, and also we've forgotten to reset the
new Crosshair's position.
Okay, it's time to work on the BottomPart's
Animator Controller.
Let's create the same Animation Parameters
we had in our previous controller.
All of them are float parameters.
To save some time, let's copy the whole Blend
Tree state from the previous controller.
Let's double click it to access the Blend
Tree because we need to change the animations.
This Blend Tree is a 2D Freeform Directional
one with all the Run and Walk animations
in perfect hexagons.
If you want to know how it works and how to
create one then click the Card in the top
right corner of this video to see a previous
episode which explains all of it.
Let's replace all the Motion Field's animations
with the Bottom one.
Now, we can go back to the base layer to make
the transitions.
First, let's remove all the simple animation
states.
Oops, we've forgotten to create an Idle animation.
Let's create one fast by using the third slice
in the BottomPart sprite sheet.
We need to set the BottomIdle state as Layer
Default,
and also rename it simply to just Idle.
Let's have a transition from Idle to Run,
and uncheck Has Exit Time and Fixed Duration.
Then, let's set Transition Duration to 0.
We have to create a condition with Magnitude
Greater than 0 to transition to the Run state
when we move the joystick.
To stop running at some point we need to create
a transition from Run to Idle, uncheck Has
Exit Time and Fixed Duration and set Transition
Duration to 0.
The condition should be Magnitude Less than
.001.
And we are done with the BottomPart.
Let's test it!
It works!
Cool!
That's it for today folks!
In part 2, we will finish the TopPart to have
Aiming and Shooting animations.
We will be able to aim and run in different
directions at the same time and play the arrow
releasing animation when we fire.
So be sure to subscribe and leave a thumbs
up!
If you have any questions about what you have
just seen, feel free to ask and I'll try to
answer all of them.
See you next time!
