Tutorial 3 - Simple Transitions

This Tutorial builds up on the graph created in Tutorial 2 - Basic Locomotion.

Smoking Character with Transition Animations

Step 1: New Input and Looping Animation

• Create a new View over the Graph Menu and call it "Smoking". This view will be used to keep the animations separate from the Locomotion and set up the transition animations.
• Add a new state to the graph, call it "Smoking Loop" and place it inside the view.

• Select a smoking animation from the Character Editor and assign it to the new state. This state will be the target state the transitions lead into and out-of.
• Since it is a loop select the "Looping" Preset from the DropDown List.

Step 2: Action Input

To trigger the new smoking state, a new input is needed. Since the default graph Setup already created an example Input, this can be reused.

• Select the ExampleInput from the Inputs Tab and rename it to "Action". This will allow you to set it via the console later. This Input is of the type "Key", which means it only accepts strings.

Each legal value must be made known to the Animation Graph.

• Click on the "Add" Button in the Key Properties to add a new value.

A new dialog window will open and ask for the new value this Input can have.

• Call the new value "smoke" and close the message box.

The new value has been added to the list of valid values in the Key Properties. It is now available for Selection in the Selection Criteria of States.

The last step to do is to set this new value in the Selection Criteria of the Smoking State.

• Select the state and find the "Action" Input in the tab of unused Inputs in the state's Selection Criteria.
• Open the Dropdown list an choose "Specific Value". As a value choose the newly created "smoke" string from the dropdown list

Since the "Action" Input was created by the Graph automatically as a default, it has been assigned to the Idle state's Selection Criteria upon creation and set to "Any Value". Since this would interfere with the new state being selected, go into the Idle State's Selection Criteria.

• Change the Test Type in the Dropdown box from "Any Value" to "Specific Value" and as a value key, select "none" in the field below it

Step 3: Creating a Hub State

When the graph switches animation states, it will try to find a path through the graph's links to the new state - and play any transition animation that is on the way.
The current graph only has states, it needs to have some links before it can pathfind and play transitions.

• Select the Locomotion View (created in Tutorial 2)
• Add a new State to the graph through the menu and call it "Locomotion Hub".
• In the Node Details select the preset "Transition".
• Place it in the View with the Idle, Walk and Run State.

Since the new state is a transition animation, it is non-selectable and will appear yellow in the view. The graph will not actively select this state because it matches the Inputs well, it is only used along a path from one green state to another

• Link all the green states to the Hub states. To do so, hold the Shift key and drag the mouse from each state to the Hub state.
• Then do the same in the reverse direction. Your view should look similar to the picture below.

All Locomotion States are now accessible through the "Locomotion Hub" state.

Step 4: Setting up in and out transitions

• Select the "Smoking" View and drag & drop the "Locomotion Hub" state into it

• To set up a transition into the smoking animation, create a new state through the graph menu.
• As a Preset choose "Transition" and give it the name "Light Cigarette". Clone the state and call the new one "Put out Cigarette".
• Assign Animations for cigarette lighting and putting out to the states from the Character Editor.
• Place the new states in the Smoking View with the other two states

• Link the states together so that a path leads from the Hub state through the "Light Cigarette" state to the smoking loop and from there back through the state "Put out Cigarette" to the Hub

Step 5: Triggering the Action ingame

• Save the graph and load a level. Use ag_reload_ag on the console to hot reload the graph (or simply restart the editor) to make the changes become active.
• After jumping ingame with the Character, type ag_debug 1 on the console to enter the debug mode for the hero's animation graph.

Debug information about the active state and the input values is printed on the screen.

With the ag_action smoke command, set the "Action" input value to the "smoke" value as set up in the graph.

This will also change the debug output on the screen.

You can see the character's current animation first lighting the cigarette and then entering the Smoke loop.
If you need to slow things down to follow the transition, use t_Scale to slow down time.
To see the out-of transition just use the ag_action none command to reset the Action Input again.