Adding Scene Transitions via the State Machine
Using the Integrated State Machine
CGI Studio provides a powerful feature to realize application logic via an integrated state machine model. Combined with controls and behaviors, it supports building complex application logic without the need for programming. In this section, scene transitions will be implemented via the State Machine. The goal is to trigger scene transitions by clicking specific nodes in the scene.
How to display the State Machine Editor panel
The steps on how to display the State Machine Editor panel is explained below.
1. Click the triangular icon beside Solution > State Machines in Solution Explorer.
2. Double-click GlobalStateMachine that is shown after expanding State Machines.
- The State Machine Editor is shown.
- The State Machine Editor can also be opened by selecting View > State Machine > State Machine Editor in the menu bar.
- Make sure the checkbox of Is Global on Properties is checked.
The GlobalStateMachine already contains an Initial State (represented by the round icon), a State Transition (represented by the arrow), and a State (represented by the rectangle). An initial state is the entry point of the state machine. A state denotes a given logical status and can have a set of actions associated when the state is activated (On Entry) and when deactivated (On Exit). All actions defined for the state changes are executed when entering or leaving the state.
State setting
Configure each state for transitioning to the next scene. Follow the steps below after displaying the State Machine Editor as explanation in How to display the State Machine Editor panel.
1. Click State on State Machine Editor.
2. Change Name on Properties to Car_Cluster.
3. Create additional states for Car_Status and Incoming_Call. You can do this by dragging and dropping states from the State Machine Editor ToolBar into the State Machine Editor. Don't forget to adjust the name of the states to "Car_Status" and "Incoming_Call".
Whenever a certain state is is entered, the corresponding scene should be activated. Therefore, an OnEntry action is necessary for all 3 states.
Whenever a certain state is exited, the corresponding scene should be deactivated. Therefore, an OnExit action is necessary for all 3 states.
4. Add an OnEntry and an OnExit action to each of the 3 states. To do this, select a state and click on the "+" signs next to "OnEntry" and "OnExit.
5. Configure the OnEntry and OnExit actions according to the following table:
| Property |
Value for OnEntry | Value for OnExit |
| Action |
TransitionRequest |
TransitionRequest |
| RequestType |
Activate |
Deactivate |
| Identifier |
/Scene/Car_Cluster |
/Scene/Car_Cluster |
| Property |
Value for OnEntry | Value for OnExit |
| Action |
TransitionRequest |
TransitionRequest |
| RequestType |
Activate |
Deactivate |
| Identifier |
/Scene/Car_Status |
/Scene/Car_Status |
| Property |
Value for OnEntry | Value for OnExit |
| Action |
TransitionRequest |
TransitionRequest |
| RequestType |
Activate |
Deactivate |
| Identifier |
/Scene/Incoming_Call |
/Scene/Incoming_Call |
Transition setting
Set-up the transition settings in the State Machine Editor. Transition is represented by connecting each State with an arrow.
To create a transition, use the Transitions icon from the State Machine Editor's toolbar.
And this is how a transition is made in State Machine Editor: Drag a Transition (arrow icon) from the State Machine Editor toolbar and drop it on a state (the state of the transition's origin). Then drag the mouse to the target state and click onto the target state. An arrow will be drawn from the transition's origin state to the transition's target state.
1. Draw transitions between the states clock-wise
| Transition from |
Transition to State |
| Car_Cluster |
Car_Status |
| Car_Status |
Incoming_Call |
| Incoming_Call |
Car_Cluster |
2. Draw transitions between the states counter-clock-wise
| Transition from |
Transition to State |
| Car_Cluster |
Incoming_Call |
| Incoming_Call | Car_Status |
| Car_Status |
Car_Cluster |
3. The final State Machine diagram will look like this:
Each arrow represents a State Transition e.g. from the Car_Cluster state to the Car_Status state. A transition contains a sender object, a condition, and an event. If the newly added Transition is selected, by default it already contains a Check Click condition and a Clicked event.
In our example, we want to transition clock-wise when clicking on the IndicatorRight of the scenes' top status bar.
And we want to transition counter-clock-wise when clicking on the IndicatorLeft of the scenes' top status bar.
In order to achieve this, the left and right indicators of all three scenes have to be extended with a HandleControlState. The next part describes how this can be done.
Handle Control State
For the Check Click condition behavior, an event from the scene is expected to trigger and match this condition. Therefore, it is necessary to switch back to Scene Editor to setup the events/triggers.
1. Double click Car_Cluster in Solution Explorer.
- Car_Cluster Scene Tree is shown.
2. Click IndicatorRight after expanding Cluster > StatusTop > Telltales on Scene Tree.
- ExtraSceneTree of IndicatorRight is shown.
3. Select Handle Control State from Behavior of the ToolBox.
4. Add Handle Control State to IndicatorRight node by drag-and-drop operation.
5. Also add Handle Control State to IndicatorLeft.
6. Repeat the same steps 1 to 5 for Incoming_Call and Car_Status scene.
Following the steps above, State Events are sent to the state condition, particularly Check Click condition. To connect Handle Control State events to the condition, switch back to State Machine Editor.
7. Display the State Machine Editor panel.
- Please refer to How to display the State Machine Editor panel.
8. In the State Machine Diagram select a transition that connects two states (e.g. the transition between Car_Cluster and Car_Status).
9. Have a look at the transition's properties. In Properties panel, set the Sender to the IndicatorRight node of the scene where this transition originates.
- In this example, set the Sender to IndicatorRight of Car_Cluster scene, because Handle Control State was set to IndicatorRight node.
- Select the target node by clicking the browse button at the right end of Sender property and select the correct indicator in the Choose Item dialog.
10. Repeat steps 8 to 9 above on the other transitions that connect two states. Make sure to set to the correct Sender from the correct scene.
- Set IndicatorRight for clock-wise transitions, and set Indicatorleft for counter-clock-wise transitions.
The steps above set the parameters such that the state will transition based on triggers and events received from nodes in the scene.
Displaying Multiple Scenes Scenes
To visualize the scene transitions, the cameras of the other two scenes need to be added to the render target.
1. Referring to the operations described in Setting up the Display, add the cameras Car_Status\DocumentView and Incoming_Call\DocumentView to the RenderTarget.
2. Click the Play button in the menu bar to run CGI Player.
- Please refer to Run CGI Player on how to operate CGI Player.
3. Click the IndicatorRight (the green arrow pointing to the right) in the Car_Cluster scene. It should show the Incoming_Call scene as seen below.
- By clicking the IndicatorRight arrow, the scene is changed to Incoming_Call and/then Car_Status scene.
- By clicking the IndicatorLeft arrow after making scene transition using the right arrow, you can return to the original scene.
