Avatar Component

The Avatar component is a virtual person interface. It is similar to the Animation component but it has the ability to move the mouth of the animation in sync with a voice file.
It has a Speech Component inside it to handle making the Avatar speak.

Setting up Avatar

First you need to set up the Speech Component inside the avatar by giving it a flitevox file to be the voice of the Avatar. This is exactly like a normal Speech Component and the Avatar will simply make use of it.
You need to acquire an appropriate flitevox file. Umajin doesn’t handle the creation of these files. If you create a new project using Umajin’s Avatar Project Template, it has an example flitevox file you can use and contains a working example of the Avatar Component.

Also you can look at these sites for more files:


Next you need to set up the Avatar itself in the same way you would an Animation Component. You need to select a .atlas file in a folder that has all the resources for the animation. This folder needs to be inside the animation folder of your project.

For an Avatar you also need to input the name of the bone that represents the mouth of the animation for the “Mouth Slotname” property in the Editor Properties Inspector.

In order to have your Avatar’s mouth move when the audio plays you must provide a phoneme.json file in the same folder as the rest of the avatar’s assets. This file matches phoneme sounds as parts of speech to image names under the mouth slot in the animation.
The mouth slot will swap through these images in order to match the audio playing.

The spine animation’s head bone should have a mouth slot which in turn needs to have multiple images under it to swap between. An example phoneme.json file can be found in the Avatar Project Template which you can copy and modify.
The phoneme sounds are on the left which should stay the same. On the right are the names of the images in the spine animation (under the mouth slot) and these need to be changed to match the names in your spine animation file.


Properties for Avatar Component


Avatar file:This is the .atlas file that needs to be in the same folder as the rest of the animation’s assets. This whole set of assets must be somewhere inside the ‘speech’ folder or a subfolder of it in your project.
Mouth slotname:This is the name of the bone in the animation that represents the mouth of the animation. It is used to animate the mouth while the avatar speaks.
Scale:This changes the overall size of the animation.
Start animation state:This is used to select an animation to play when the Avatar first shows. This is often an idle state designed to loop.
Start loop:When checked, this option will loop the start animation.
Delay before start:This is the number of milliseconds that it will wait after showing before it will play its start animation.
Press animation:This is the animation to play when you touch the Avatar or click with a mouse.
Origin X:This is an X axis (left to right) offset for the origin point of the Avatar and will move it relative to the component box.
Origin Y:This is a Y axis (up and down) offset for the origin point of the Avatar and will move it relative to the component box.


Events that can Trigger an Action on the Avatar Component


On Press: Action occurs when you touch or click on the Avatar.
On Completion: Action occurs when the animation finishes playing.