Animgraph

<title>Animgraph</title> 
<cat>Model.Animation</cat>

# What is the Animgraph


The Animgraph works as a node based system.

you have your final pose node, and going left up to each next node in your node tree it will either change the pose, or direct the flow of the nodes to the next pose altering node, until it reaches the end and giving you your final pose for the given rendered frame.

<upload src="70317/8db7748b519423f.mp4" size="6417113" name="2023-06-27 20-56-09.mp4" />

The Animgraph has the advantage over code of 
easily combining animations to create new poses, without the need to make a whole new animations just for it,
or dealing with IK easily and so on, you can get easy amazing results using it.


like dabbing while walking!

No need for a whole new animation, just use the legs for the walk, and upper body for dabbing
just blend between the dabbing and walking to combine them into a new pose!

<upload src="70317/8db77499f0dfb8d.mp4" size="3413528" name="2023-06-27 21-02-26.mp4" />


Although the Animgraph is used instead of game code to control the animations, you can still set various [parameters](https://wiki.facepunch.com/sbox/Animgraph_breakdown#4parameters) every frame.
nodes can reference these parameters to see how they should blend animation, what animations to use and much more.



You can also choose to bypass this system altogether, either for performance or simplicity reasons. See this article: [Animations without animgraph](https://wiki.facepunch.com/sbox/Animations_without_Animgraph)

<note>The Citizen animgraph is largely self-documented. Just open it up, and look around at comment boxes, and comments on individual nodes!</note>


<warning>The rest of the page is quite rough, follow at your own risk</warning>


## 1 - Preview window

The preview window is Contains your model thats being animated within the animgraph.
It is most useful when you are testing your final pose within the graph itself via [playback control](https://wiki.facepunch.com/sbox/Animgraph_breakdown#9playbackcontrol)

<upload src="70317/8db774681caba92.gif" size="7109414" name="sbox-dev_jLOx4S9zxJ.gif" />

## 2 - Main Inputs

<note>This was a common set of base [Parameters](https://wiki.facepunch.com/sbox/Animgraph_breakdown#4parameters) that were common through most animgraphs, although i dont recommend using it, just make and use your own parameters</note>

## 3 - Motors

Motors are what deal with where the inputs for the graph come from.

For example player input motor - says the inputs for this graph is player driven. and will be receiving more direct inputs like forwards, back, left, right from the player.

Where the Path motors, says that this model will be moving along a set path instead of multiple directions, basically like an NPC.

Motors update twice:

- Before the nodes update, so that they can process any input from the game and make it available to the nodes
- After the nodes have finished updating, so that they can perform any necessary fix-up on the root motion calculated during the node update

## 4 - Parameters

Parameters are what you will use to communicate between your c# code and your Animgraph to tell it what is happening in game (jumping, running forwards, running speed, pose state) 

<upload src="70317/8db774324157e8a.png" size="18914" name="image.png" />

Parameters come in 6 different types, bool, enum, float, int, vector and quaternion.
Each one having their own ideal reasons you would use them.

For example 

- bool - on and off. 
- Enum - to choose between multiple animation states. 
- Float - precise vale input. 
- Int - less precise value input. 
- Quaternion - rotation input. 
- Vector - position input.

When you create these parameters you will have setting on them pop up in the [Properties window](https://wiki.facepunch.com/sbox/Animgraph_breakdown#6properties)

<upload src="70317/8db77433a82c78f.png" size="10363" name="image.png" />

Here you can set base settings, value limits, networking and so on of this specific Parameter.


## 5 - Tags

If Parameters are used for external code to communicate values INTO the animgraph, 
then Tags are mainly used for INTERNAL nodes to communicate OUT of the animgraph.

Tags can be changed by nodes, and then sent to other systems within the engine, its just a way to communicate an animation event thats happening to everyone else.

Tags can also affect nodes within the animgraph.

<upload src="70317/8d9955e8152c17d.png" size="28942" name="image.png" />

<note>There are also tags that trigger sound, particles, and change stuff set in a model and so on but as far as i know currently i dont think they are used in sbox, or even work? So the only tags i know of currently are the Internal ones</note>

## 6 - Properties

The properties window allows you to change specific properties, basically settings within something selected that has properties like...
- motors
- parameters
- nodes
- tags
- animations

Obviously there are lots and lots of different properties that do completely different things between every different thing you select. but dont worry, *most* properties can be hovered over and they will have a description of what they do!

Like so!

<upload src="70317/8db774478b5f5ab.png" size="13165" name="image.png" />

## 7 - Properties Description / Preview window

If you dont see this window when you have something selected.
you can view it like so.

<upload src="70317/8db77468b9e9be0.gif" size="70366" name="sbox-dev_xAm96BqLCQ.gif" />

This little window will give you a description of selected thing, which you can look at if you are ever confused what a node does, it will have a description of what it does!

Also with certain nodes this window can become another Preview window for animations and so on, or will display a basic example of what's going on inside Complex nodes (like the state machine node) without having to double click and enter it.

<upload src="70317/8d995464dfd65c0.png" size="216822" name="image.png" />

## 8 - Node Workspace

This is where all your nodes are and connect together, here you will be creating, connecting and messing with all your nodes. here is a basic example of how it works

<upload src="70317/8db7747ca9e1721.mp4" size="4463357" name="2023-06-27 20-49-47.mp4" />

Note the workspace will change on nodes with a little white arrow on them.
This little white arrow indicates you can go inside the node and do more!


## 9 - Playback Control

The playback control window allows you to preview what your animgraph will output without having to boot up a game and code inputs to the parameters.

it shows you a live path of your node final pose flow.

and allows you to easily set whatever values on your properties to see how they will change the final animation.

just click the little man and it will send you into playback mode.

<upload src="70317/8d99547262634bb.png" size="9017" name="image.png" />

as you can see its super powerful to quickly test your graph

<upload src="70317/8db7745d568e8d3.mp4" size="14103661" name="2023-06-27 20-35-38.mp4" />



As you can see, this is really useful to make sure everything is working right, and helps give an idea of what needs to be fixed.


## 10 - console

This is just like a normal console to spit errors out to you if anything goes wrong, but for the most part you dont need to have this open.

# this page is WIP and still has stuff that needs to be added, so feel free to make changes or correct any mistakes!

Animgraph

Account Management

Special Pages

Wiki List

S&box Wiki