Unity Tutorials Inspired By YouTube Comments | Text Input Triggering Animation

I recently received a comment from a viewer asking for a way to type a specific text phrase and, upon hitting enter, have their Ready Player Me avatar wave. To keep things as simple as possible, I explain that you must compare the string you enter to a pre-established list of words. You can trigger the animation if the typed word matches an item on the list.

The reply was a thank you and that it will wait for that tutorial👀.

So, instead of questioning if the user really wanted to learn or it was just trolling, let's dive in and see how to approach this idea😁

The following method is a way to accomplish this task, but there is room for improvement because of human errors that can come up when typing. So try to type the trigger string perfectly 😂

What We Need

Ready Player Me Unity’s SDK CORE

We need the SDK to download our Ready Player Me Avatar to play the animations. We go to the RPM GitHub repository, copy the URL of the repository, and paste it into the Unity package manager under Add package from git URL

Window > Package Manager > + Button > Add package from the Git URL

Get Our RPM Avatar

Please select one of your avatars on your Ready Player Me Hub, go to My Avatar, and choose Copy .glb URL on the selected avatar you want to use on the project. Then, paste that URL onto your Avatar Loader on Unity.

Get Animations

We will get our animations from Mixamo since we use a few specific ones on the project. On Mixamo, search for the waving animation and the idle one.

Once you select an animation, press Download on your right. On the next window, follow the following setup: Format->FBX for Unity, Skin->Without Skin, Frames per Second->30, and Keyframe Reduction->none.

You can save the animation in Unity in a folder of your choosing. I usually save my animations in a folder called Animations.

Prepare The Animation

Before explaining the project, we must prepare our animations for use. Find the animations we downloaded from Mixamo and locate the animation clip called mixamo.com. It has a blue triangle as an icon.

When you select the animation clip on your Inspector window, locate Rig, and the Animation Type must be Humanoid.

Then, you can duplicate the animation clip mixamo.com, and a copy will be placed outside the animation structure. Now, you can edit the animation and rename the clip; mine is called Idle.

The Unity Project

The Unity project is very straightforward. In the Hierarchy, we have our Ready Player Me avatar, which I named rehtse, a UI Canvas Game Object, and another Game Object called the Animation Database.

We have three scripts on the project: AnimationsDatabase, Player, and UIManager.

Animation Database

The Animation Database Game Object hold has a component, the script AnimationsDatabase.cs

The script’s responsibility is to have a list of specific strings to activate the animation. Inside the internal class Database, line 10, there is a method, GetAnimation(), that will check if the typed string corresponds to any of the strings/words of a list to activate the animation; there is a variable called _cleanString that we need to use to clean/Trim the string of any additional spaces when a word is type.

UI Canvas

The UI Canvas object has as children an InputField object and a Button. The UIManager.cs script is attached to the UI Canvas and asks for two references, one for the Player script from our avatar and one from the Input Field.

The UIManager script is very short but very easy to follow. A public method called SendInputTextToPlayer() will pass the writing text from the input field to a method that the player script has called PlayAniamtionBaseOnInput().

To send this text to our player script on our Button, we find our OnClick() field. We attached the UICanvas to have a reference to our UIManager, and we located the public method SendInputTextToPlayer.

Player [rehtse]

Our avatar object has the Player script and an Animator component.

The Player.cs has a reference for the Animator in your avatar and the Animation Database.

PlayAnimationBaseOnInput() Method

This method will receive the string/text from the input field. First, check if the avatar has an animation running; if it is false, we will proceed. A ForEach() loop will be used to check the string/text from the AnimationDatabase. Once we acquire the animation clip to correspond to the typed word, we store the animation clip in a current variable, play the animation, and turn the bool true to express that there is an animation playing.

Update() Method

We only have a guard to ensure the Update() runs if an Animation is being played. When an animation is true, a timer will be updated, and we will compare it to the length of the current animation clip. This is to make sure that once the animation clip has ended/timer reaches the same time length as the animation, we will turn our bool back to false, the timer will be put back to 0, and we will play our default animation from our database, which is the Idle animation.

On the Animator component, the Controller has a reference to our avatar controller, which holds our animation clips. Notice that our default state (orange) is the Idle animation clip.

On the Avatar field, you will use the Avatar that comes with your Ready Player Me when you use the Avatar Loader from the SDK. If your avatar is Female, you will get the FeminineAvatar and vice versa.

Press Play

Put everything together and press play 😊

There you have it😆.

Based on user-typed text input, we trigger animations in a Ready Player Me avatar. And, like always in a project, there’s room for improvement to account for human error during text input😅.

Thanks for reading this article; have a lovely day😊.