> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kinemation.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# 🔌Components

> In this section we will learn about the core components.

## Overview

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

<Frame caption={"Components."}>
  <img src="https://mintcdn.com/kinemation/IMbHDDWE_rjJU7jO/images/scriptable-animation-system/7da7e73737fdb2ecba6a.png?fit=max&auto=format&n=IMbHDDWE_rjJU7jO&q=85&s=429290b5e7a39bedfbe2c8beddaeab48" alt="" width={400} data-path="images/scriptable-animation-system/7da7e73737fdb2ecba6a.png" />
</Frame>

## 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:

<Frame caption={"This asset contains your custom properties."}>
  <img src="https://mintcdn.com/kinemation/IMbHDDWE_rjJU7jO/images/scriptable-animation-system/3ba66ededf76b58e1937.png?fit=max&auto=format&n=IMbHDDWE_rjJU7jO&q=85&s=7776de5913bc5c0c80e2a560d0f29321" alt="" width={401} data-path="images/scriptable-animation-system/3ba66ededf76b58e1937.png" />
</Frame>

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

<Tip>
  **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.
</Tip>

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

<Frame caption={"Specify the input asset."}>
  <img src="https://mintcdn.com/kinemation/IMbHDDWE_rjJU7jO/images/scriptable-animation-system/b52aa9521470e9c430e8.png?fit=max&auto=format&n=IMbHDDWE_rjJU7jO&q=85&s=c03f087297a6efd6c3e17655060bd9bc" alt="" width={425} data-path="images/scriptable-animation-system/b52aa9521470e9c430e8.png" />
</Frame>

<Tip>
  **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.
</Tip>

## 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:

<Frame caption={"Playables Controller inspector."}>
  <img src="https://mintcdn.com/kinemation/IMbHDDWE_rjJU7jO/images/scriptable-animation-system/5802a4aca1e26bc8aa4e.png?fit=max&auto=format&n=IMbHDDWE_rjJU7jO&q=85&s=059e419f8c398943d084b85536698b0a" alt="" width={425} data-path="images/scriptable-animation-system/5802a4aca1e26bc8aa4e.png" />
</Frame>

Your upper body mask needs to be adjusted to play custom animations. To do this, go to **Window/FPS ANIMATOR/Tools/Avatar Mask Modifier.** Now we need to add the WeaponBone object to the avatar mask. Specify the *Root* and the *Upper Body Mask*:

<Frame caption={"Press the Add Bone button."}>
  <img src="https://mintcdn.com/kinemation/IMbHDDWE_rjJU7jO/images/scriptable-animation-system/755f9adb370dc10f0914.png?fit=max&auto=format&n=IMbHDDWE_rjJU7jO&q=85&s=c63d8e9880f8991d760ecccfc474fe5d" alt="" width={410} data-path="images/scriptable-animation-system/755f9adb370dc10f0914.png" />
</Frame>

<Tip>
  **Tip:** the WeaponBone will be used later in the animation workflow, essentially it contains the weapon movement.
</Tip>

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 **Edit/Project Settings/Script Execution Order** and make sure to put the **FPS Animator** after your controller class:

<Frame caption={"FPSController can be your controller class, where you use the FPS Animator component."}>
  <img src="https://mintcdn.com/kinemation/IMbHDDWE_rjJU7jO/images/scriptable-animation-system/c9332e1f0a120425972a.png?fit=max&auto=format&n=IMbHDDWE_rjJU7jO&q=85&s=3c587c2e56aaef58cef45abc9d0244ec" alt="" width={479} data-path="images/scriptable-animation-system/c9332e1f0a120425972a.png" />
</Frame>

<Tip>
  **Tip:** this step is required for the proper input update process, so the **FPS Animator** can use the latest user data to avoid lagging.
</Tip>

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

***

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