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 by dragging and dropping states from the State Machine Editor ToolBar into the State Machine Editor.

 

3. While the Car_Cluster state is selected, add an OnEntry and an OnExit action by pressing the "+" signs.

• Please refer to Using Behaviors on how to search Behaviors. 
  

4. Add Transition Request Action Behavior to On Entry Actions and On Exit Actions of Car_Cluster state by drag-and-drop operation. 

• For On Entry Actions and On Exit Actions of Car_Cluster state, a Transition Request action behavior has been added to both. 
  
  
  
  

5. Click On Entry Actions > Transition Request Behavior in Car_Cluster state. 

6. Set RequestType to Activate in Properties. 

• Doing the step above activates the appropriate Scene initially upon loading the asset file in a Candera-based application/CGI Player. 
  
  
  
  

7. Set the Identifier property to Car_Cluster scene. 

• Click the browse button beside Identifier to select the scene.
• After selecting the scene, the value set is “/Scenes/Car_Cluster”. 

8. Repeat steps 5 to 7 above on On Exit Actions > Transition Request action behavior of Car_Cluster but follow the settings below. 

• This deactivates Car_Cluster scene when state machine transitions away from this scene. 

Items	Setting value
RequestType	Deactivate
Identifier	/Scene/Car_Cluster

   

In the same way, create Incoming_Call and Car_Status states and set-up their Transition Request settings. 

9. Drag another State from the tool bar in the upper right corner of the State Machine Editor and drop it to the Editor screen. 

10. Repeat steps 2 to 8 following the settings below for the two states, Incoming_Call and Car_Status. 

Incoming_Call
Items		Setting value
Name		Incoming_Call
On Entry Action > Transition Request	RequestType	Active
	Identifier	Incoming_Call Scene
On Exit Action > Transition Request	RequestType	Deactivate
	Identifier	Incoming_Call Scene
Car_Status
Items		Setting value
Name		Car_Status
On Entry Action > Transition Request	RequestType	Active
	Identifier	Car_Status Scene
On Exit Action > Transition Request	RequestType	Deactivate
	Identifier	Car_Status Scene

11. After finishing all steps, the result will look like the image below in the State Machine Editor. 

Transition setting

Set-up the transition settings in the State Machine Editor. Transition is represented by connecting each State with an arrow. 

1. Drag a Transition from the tool bar in the upper right corner of the State Machine Editor and drop it to the Editor screen. 

2. Attach the end of the Transition arrow to the State which represents where the transition will start. 

• In this example, attach the end of the Transition arrow to the Car_Cluster State. 
  

3. Then, point the Transition arrow to the State which represents where the transition will end. 

• In this example, point the Transition arrow to Incoming_Call.
• As a result of this operation, two States are connected by the arrow as seen below. 
  
  
  
  

The arrow represents a State Transition from the Car_Cluster state to the Incoming_Call state. A transition contains a sender object, a condition, and an action. If the condition is evaluated to true, the action is executed. If the newly added Transition is selected, by default it already contains a Check Click condition and a placeholder for Actions to be executed. 

4. Select Transition Request Action Behavior from Behaviors in the Toolbox.

5. Add a Transition Request Action Behavior to Actions of the Transition by drag-and-drop operation. 

6. Click Transition Request Action Behavior to show its Properties. 

7. Set the values as seen below to both RequestType and Identifier in Properties. 

Items	Setting value
RequestType	Active
Identifier	/Scene/Incoming_Call

• The Identifier represents the scene that will be transitioned to. 

8. Repeat steps 1 to 7 above to set Transition between all States in both directions. 

• The resulting State Machine will look like the image below, after completing all settings. 
  
  
  
  

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. Select Transition that connects between Car_Cluster and Incoming_Call state. 

9. Select Check Click and show its Properties. 

10. Select the Check Click condition. In Properties, set Sender to IndicatorRight node of the scene. 

• In this example, set 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. 
  
  
  
  

11. Repeat steps 8 to 10 above on Transitions that are in between other states. Make sure to set to the correct Sender.

• Set IndicatorRight for Clockwise Transition, and set Indicatorleft for Counter-Clockwise Transition. 

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 

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 green arrow pointing to the right in the Car_Cluster scene. It should show the Incoming_Call scene as seen below. 

• By clicking the right direction arrow, the scene is changed to Incoming_Call and/then Car_Status scene. 
• By clicking the left arrow after making scene transition using the right arrow, you can return to the original scene.