<title>Animgraph breakdown</title> <cat>Dev.Model</cat> # What is the Animgraph So models you make in source 2 have animations compiled inside of them. This is cool, we can access the animations and use them in game then! However, unless you want simple models with animations you want to play in your code, (see here to understand how) -> [animations without animgraph](https://wiki.facepunch.com/sbox/Animations_without_Animgraph) <note>animating via code has less of a performance hit, but not the best result, so if you got many models onscreen, you may want to keep them simple and use animation in code instead of an animgraph</note> Then you got to set up an Animgraph for the model, that way you have a lot more control over your model and getting the best looking result out of them and the animations! # How does the animgraph work? To put it straight, the animgraph allows you to change the outputted animation, mix animations, procedurally animate you model, using external inputs given via the code in your gamemode. This may sound really confusing, but trust me, its not, its just about understanding what everything is doing. Ok so for now, lets ignore the code part of this, and just focus on the animgraph itself and what is happening. When you open it up you will see this. <upload src="70317/8d993ef829eb84e.png" size="229681" name="sbox-dev_fxR9tFzjzb.png" /> Maybe you think this is alot of windows and alot to take in, dont worry, Lets break down each window and understand what is going on in them, here is how we will break them down so its easier for you to follow. <upload src="70317/8d993eff4d89efe.png" size="361468" name="image.png" /> Ok, so first things first ## 1 - Preview window The preview window is much like the preview window in the asset browser and other tools in s&box, it gives you a preview of a model, and gives you options to change how it is viewed, each icon along the top has options. <upload src="70317/8d993f1a675159f.png" size="117401" name="image.png" /> . Camera - this just changed how it should be viewed, for example if it should be viewed like a viewmodel. . ground - this just enables or disables the ground below the model . bones - this just allows you to see the bones and joints of the skeleton. . GearCog (edit preview model) This is where you set the model to be used in the animgraph, clicking it opens this window <upload src="70317/8d993f18d47e015.png" size="7449" name="image.png" /> here the + button adds a model input with a search for you to add your model. the magic wand will automatically add any model that is refencing this animgraph (that is set in modeldoc). once done and closing the window it will now show the top model in the viewport. GREAT!!!! now your model is added into the animgraph and we can access its animations! ## 2 - Main Inputs <note>I am pretty sure this has nothing useful to us, its just some options that you can mess around with in preview mode. please correct me if im wrong, but as far as i can tell, its slightly useful, but nothing more than what the parameters do in preview mode</note>⤶ <note>I am pretty sure this has nothing useful to us, its just some options that you can mess around with in preview mode. ⤶ you will see commonly with nodes that have **TARGET** in its properties a bunch of random stuff and then **Parameter**, all that other random stuff is the Main Inputs, but in sbox from what i can tell its never used, so just use parameters to control your nodes. please correct me if im wrong.</note>⤶ ## 3 - Motors <note>Motors are you input type i guess, it seems the only option you will ever use is player input, or path if you got a model you wanna animate along specified path, but pretty much otherwise it will be left blank</note> ## 4 - Parameters Parameters are what you will use to communicate between your gamemode c# code and your animgraph to say what is happening and what animations should be playing. It has your basic + option, to add your parameter type. and a delete option to delete a parameter. <upload src="70317/8d993f2cb638230.png" size="14104" name="image.png" /> Here i have set up all the parameter types you can use. lets see what input types they are and what they will do. | Parameter | What? | inputs | | ------------- |:-------------:| -----:| | Bool | Boolean, its a true or false input, use for on and off state something should be in (like noclip, jump) | True, false | | Enum | Depending on the number inputted a different state will be outputted, eg 0 - nothing, 1 - pistol, 2 - shotgun, and so on | 0, 1, 2, 3 etc (starts at 0) | | Float | Precise number input, number with decimal value, very precise!!! | 12.323 and so on, any number, with any decimal place | | Int | Integer, number value with NO decimal place not percise like float, but more ideal to use these when you can | 12 and so on (NO decimals like .323 only whole numbers!) | | Quaternion | Oh no, this is a value for rotation, very confusing though, you will input value from other stuff in here, like rotation of hand in vr | x, y, z, w. (imagine like vector with 4 inputs for rotation) | | Vector | Used for position, pretty much like X Y Z position in world space, basically just 3 Floats. | x, y, z (mainly used for position of something or a position to look at) | Within certain nodes they may ask for parameter input, know you will know what sort of parameter type you got to use. 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. ALSO another thing, when selecting your parameters you will see something pop up in the far right window, properties. here you can change the default value (if nothing is put in its value will be that deafult), value caps if they have that (highest or lowest input), if bool should reset to default 1 tick after being changed (acting like a button turning off after pressed rather than a switch on and off) other specific options. And all the normal inputs that you get with stuff in the animgraph. ## 5 - Tags If parameters are used for external code to change stuff, then tags are mainly used for INTERNAL nodes to change stuff. Tags act like the Bool Parameter but they can be triggered by nodes within the animgraph. For example State machines can turn a tag on while its in a certain state to say what is currently happening. These tags can still be seen by the code, but cant be changed via code. They can change the output of other nodes based on the tags state. For example a node can detect if a foot in on the ground, then change a RightFootGrounded tag, this can then make it so a state machine will switch the foot anim from walking type animation to a grounded on. see how that can be useful, since nodes can detect stuff for us rather than making our gamemode do it! <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 This window will give you options to change anything in the animgraph. This includes: nodes, parameters, tags, motors and so on. The properties tab allows you to change things such as the name, values, default values and so on, anything important to how it should run or work or display. you will use it a lot. ## 7 - Properties Description / Preview window This area does 2 things, it serves as the window where descriptions will show up, what this means is, if you are ever confused by anything, tag, motor, parameter, node, or even a property inside of anything, you can click it, and it will show a description up there of it (99% of the time, some things have no description it seems) This will help you alot to understand what things do and how to use them so make sure you use it!!! BUT also certain nodes, such as animation sequences will push the description window up and then show a small preview window (like the top left one) but for that specific animation. as can be seen below. <upload src="70317/8d995464dfd65c0.png" size="216822" name="image.png" /> ## 8 - Node Workspace Here is your workspace, most of your focus will be staring at this and the nodes you connect together, you can throw in nodes and change their properties within the properties tab when you click them, so you can say what inputs to go to depending on what the parameters inputted are. or some nodes you can double click if they got a white triangle in the top right to go inside for further editing. (the left, right and up arrows are used to go back into, out of nodes that you can enter) <upload src="70317/8d9954b97dc65a6.png" size="164256" name="image.png" /> it is basically setting up all the decisions and mixing of animations needed for the game to understand what animations to display depending on what parameters are inputted. ## 9 - Live preview window? This i dont think has an actual name, however it is used to be able to test your animgraph live within the animgraph, just click the little man, then suddenly the entire animgraph and windows change, they will then allow you to change inputs on the parameters as if you were the code editing them. also within the node window, it will show you the current path of decisions that are being made in order to get the right animations. <upload src="70317/8d99547262634bb.png" size="9017" name="image.png" /> <upload src="70317/8d99547a1ccebf3.mp4" size="23112013" name="2021-10-22 11-33-25.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. not it seems there is also the ability to record and save the inputs you place, this is good if you have a recorded sequence of inputs for lets say a path you want an NPC to follow, that way you can easily set it up and record it and use it later on. ## 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!