Horse to Muscle to Bone Animation

Objective: Create a User Interface (UI) that allows user to transition between Horse, Muscle and Bone Models.

First add the Horse prefab to the hierarchy, and adjust its position in scale to center it in the scene view. If not present add an Animator component and assign the Horse controller to the Animator Controller.

Horse game object.

Open the Horse controller and create state > empty, naming it Horse. Next add Fade_Horse_To_Muscle and Fade_Muscle_To_Bone animations to the Animator window. Within the animation window adjust these animations to play over 3 seconds. Duplicate these two Fade animations and rename to Fade_Muscle_To_Horse and Fade_Bone_to_Muscle, changing the speed to -1 to reverse the animation. Create transitions as shown below. Add two new trigger parameters, Next and Previous.

Horse animation controller

Transitions from Horse -> Fade_Horse_To_Muscle, Fade_Horse_To_Muscle -> Fade_Muscle_To_Bone, Fade_Bone_to_Muscle -> Fade_Muscle_To_Bone and Fade_Muscle_To_Horse -> Fade_Horse_To_Muscle all use the Next trigger parameter. Whereas Fade_Muscle_To_Bone -> Fade_Bone_to_Muscle and Fade_Bone_to_Muscle -> Fade_Muscle_To_Horse transitions use the Previous trigger parameter.

Examples for using Next and Previous triggers to control animation.

Create a UI > Canvas for the user interface then add a new script, UIManager. Setup as shown below.

Canvas with UIManager script.

The UIManager script uses a serializable field to assign the Horse Animator controller to _anim in the inspector as shown above. There are also two public methods, NextAnim and PreviousAnim, which switch between the current animation and either the next or previous animation. Each method resets the other trigger before setting the selected trigger for the current button to allow the user to override a previous response.

UIManager script on Canvas.

Add two UI > Buttons, the Next_Button and Previous_Button. Anchor and position them as shown below. Add an On Click() to each button and assign the UIManager then assign either NextAnim or PreviousAnim methods in the UIManager to their respective buttons.

Next and Previous Button setup.

Each has a child Text object whose text field needs to be changed to match the name of their respective button. Change the font to 64 as well.

Finally override the Horse to save the changes made to the prefab, and delete the Horse from the hierarchy, as it was used only to set up the animation.

This articles uses assets from GameDevHQ Filebase.