Animation Transitions

Switching between Idle and Walking Animations

Now that we have our animation controller, we need to set the parameters to trigger a switch between the two different states.

Making the State Transitions

In the Animator window we can link our different animation states together by right clicking and selecting “Make Transition” this will make your mouse connect with a white line and we can attach it to any of the states. What we are going to be focusing on first is the Idle > Walk and also Walk > Idle.

After linking those two states together, we will need to create the parameters. Parameters are the defining trigger that must be met before the transition between states can occur. If the Parameter window isn’t showing, click the “Eye” icon just underneath the Animator tab.

Our first parameter which we will set will be a Bool type. We basically want the transition to occur when the walk parameter is “true” and the animation would return back to idle while the walk parameter is “false”

Select the white line going from Idle to Walk state and in the Inspector we are going to check off “Has Exit Time” and set the conditions. Select walk as the parameter and true as the condition. This way, when the parameter “walk” has been triggered as true, the animation transition can occur from idle > walk. We can also select the line going back from Walk to Idle, but we have to reverse the condition setting from true to false.

The Player Script

Now it is time to trigger the parameters using the player script. First we need to create an handle for the animator that is attached as a child object. Due to the fact that the animator is within a child object the basic get component script can not be applied, therefore we need to use a new script called “GetComponentInChildren<>” This will allow you to access any component within the child object.

Setting the Animator handle and gaining access to the animator within a child object

In the Get Mouse Button Down selection, we are basically going to trigger the animation when the left mouse button is pressed. We call upon the animation handler and use the “Set Bool” function.

Now every time we click a new destination, the animation will be triggered, but you will noticed that the player continues to walk even after reaching the destination. We need to revert back to Idle state after the destinations is reached.

We first need to give a float variable a handle since the distance will be a precise number. To calculate a set distance between two objects we need to use the scripting API called “Vector3.Distance” and pass on two different positions. In our case, the first distance would be the player, in which we can use “transform.position”. But for the second variable is going to be our mouse position and where to left clicked, also know as “hitInfo” (which we have named previously)

Since hitInfo is considered a hidden variable within the previous If statement, we need to create a global statement to share the data. Therefore back in the get mouse button down section within the raycast section, we are going to give a new handle to hitInfo.point. Then we are going to create a new private handle to represent the hitInfo.

Giving a global handle for the hitInfo.point so other methods can access the data

Set the Vector3 distance to current position (transform.position) and our newly created variable “target”.

Then create a new If statement where if the Distance is less than 1 the animator triggers the Walk condition back to false, therefore stopping the walking animation.

Player Walking then stopping

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Programmatically Set Data Attribute in React with TypeScript

Web Workers, Service Workers & Worklets

Have you ever been in a problem such that you have a lot of image links and you want to download…

Webpack 5.0 for a working website

Loggers, it’s audit time!

Getting started with express.js

Angular Rxjs essential operators

JavaScript: the For Loop

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Simon Truong

Simon Truong

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.

More from Medium

2D Player Animation (part 3)

Level Design in Unity Part 1: The Floor

Galaxy Shooter 2D — New Enemy Behavior (Follow)

Cleaning up the Homing Missile code