# Components

## Overview

After the previous step, these components had been added to our character:

<figure><img src="https://784345943-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxcUmJ78NSw1bSUlSO9oP%2Fuploads%2FKgsqSOBkSuISuo9HpHr2%2Fimage.png?alt=media&#x26;token=e53d8894-1c58-4e99-a1fa-be9d583892ae" alt="" width="400"><figcaption><p>Components.</p></figcaption></figure>

## FPS Animator

It is a central hub component, which controls the flow of all entities in the framework, by initializing, updating, and disposing of other components.

## FPS Bone Controller

This component applies procedural animation features. It does not have any special properties, hence there is no special setup for this component.

## User Input Controller

The **FPS Animation Framework** introduces a standalone input property system. The idea is that you can define custom properties in the **Input Config** asset and use them in runtime:

<figure><img src="https://784345943-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxcUmJ78NSw1bSUlSO9oP%2Fuploads%2FLM1ZYRnO4WNzlGinr78s%2Fimage.png?alt=media&#x26;token=474dc36c-20b0-441e-b5de-ed679fb934d2" alt="" width="401"><figcaption><p>This asset contains your custom properties.</p></figcaption></figure>

This system is used to establish communication between the framework entities and your project codebase.

{% hint style="success" %}
**Example:** let's say you want to disable aiming when jumping. You can create a new float parameter, set it to 1 or 0 in code based on the jumping condition, and then specify that parameter as a control value in the Ads Layer.
{% endhint %}

**User Input Controller** allows you to work with the property system, by getting or setting the values:

<figure><img src="https://784345943-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxcUmJ78NSw1bSUlSO9oP%2Fuploads%2F4x0krusF2VbF5yxBDgcg%2Fimage.png?alt=media&#x26;token=ae2f93ff-a3ac-48a4-9020-5eafbdc874c7" alt="" width="425"><figcaption><p>Specify the input asset.</p></figcaption></figure>

{% hint style="success" %}
**Tip:** the User Input Component inspector has a really neat feature - it displays all the properties in play mode, and you can even modify them.
{% endhint %}

## Playables Controller

This component controls how Animation Clips are played in runtime. It uses [Unity Playables API](https://docs.unity3d.com/Manual/Playables.html) to add custom animation layers, that allow you to play animations right from code.

Create a new Avatar mask, select the upper body bones, and assign it to this component:

<figure><img src="https://784345943-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxcUmJ78NSw1bSUlSO9oP%2Fuploads%2Fvfvoq2Zl35huXV6jwfFJ%2Fimage.png?alt=media&#x26;token=d769b1f8-f386-4ae5-b472-00605589fa09" alt="" width="425"><figcaption><p>Playables Controller inspector.</p></figcaption></figure>

Your upper body mask needs to be adjusted to play custom animations. To do this, go to <mark style="background-color:purple;">**Window/FPS ANIMATOR/Tools/Avatar Mask Modifier.**</mark> Now we need to add the WeaponBone object to the avatar mask. Specify the *Root* and the *Upper Body Mask*:

<figure><img src="https://784345943-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxcUmJ78NSw1bSUlSO9oP%2Fuploads%2FZowmgxbyxBPMCSoRdWQP%2Fimage.png?alt=media&#x26;token=ccf93be4-8dc0-4331-940a-9bca656ac2d9" alt="" width="410"><figcaption><p>Press the Add Bone button.</p></figcaption></figure>

{% hint style="success" %}
**Tip:** the WeaponBone will be used later in the animation workflow, essentially it contains the weapon movement.
{% endhint %}

The **Playables Weight Property** is used to control the influence of the Playbles Controller. You can specify here any float value from the input system, but it is recommended to leave the PlayablesWeight as a default value.

You can also use this component to preview animations in the editor. Just select your animations and hit the preview button!

## Execution order

Lastly, we need to adjust the *Script Execution Order* in the *Project Settings*. Go to the <mark style="background-color:purple;">**Edit/Project Settings/Script Execution Order**</mark> and make sure to put the **FPS Animator** after your controller class:

<figure><img src="https://784345943-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxcUmJ78NSw1bSUlSO9oP%2Fuploads%2FuKODYHO6QBqe2Zo9pfmI%2Fimage.png?alt=media&#x26;token=b42ace0d-16d8-4d1b-8066-958d26eb96a4" alt="" width="479"><figcaption><p>FPSController can be your controller class, where you use the FPS Animator component.</p></figcaption></figure>

{% hint style="success" %}
**Tip:** this step is required for the proper input update process, so the **FPS Animator** can use the latest user data to avoid lagging.
{% endhint %}

It is also important to initialize the **FPS Animator** component in the controller. This can be done by calling the *Initialize()* method:

{% code title="ExampleController.cs" %}

```csharp
private void Start()
{
    _fpsAnimator = GetComponent<FPSAnimator>();
    _fpsAnimator.Initialize();
}
```

{% endcode %}

***

At this point, the character setup is complete. In the next section, we will learn about the procedural animation assets.
