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 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:

Car_Cluster

Property	Value for OnEntry	Value for OnExit
Action	TransitionRequest	TransitionRequest
RequestType	Activate	Deactivate
Identifier	/Scene/Car_Cluster	/Scene/Car_Cluster

Car_Status

Property	Value for OnEntry	Value for OnExit
Action	TransitionRequest	TransitionRequest
RequestType	Activate	Deactivate
Identifier	/Scene/Car_Status	/Scene/Car_Status

Incoming_Call

Property	Value for OnEntry	Value for OnExit
Action	TransitionRequest	TransitionRequest
RequestType	Activate	Deactivate
Identifier	/Scene/Incoming_Call	/Scene/Incoming_Call

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.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 tool bar in the upper right corner of the State Machine Editor toolbar and drop it on a state (the state of the transition's origin). Then drag the mouse to the Editortarget screen.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 State 
Transition to State
Car_Cluster
Car_Status
Car_Status
Incoming_Call
Incoming_Call
Car_Cluster

2. AttachDraw transitions between the endstates ofcounter-clock-wise

the Transition arrowfrom State 
Transition to theState
State whichrepresentsCar_Cluster
whereIncoming_Call
the transitionwillIncoming_Call start.Car_Status

• InCar_Status
  thisCar_Cluster example,

attach the end of the Transition arrow to the Car_Cluster State. 

3. Then,The point the Transition arrow to thefinal State whichMachine represents where the transitiondiagram will end.look
like this:

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. 

TheEach arrow represents a State Transition e.g. from the Car_Cluster state to the Incoming_CallCar_Status state. A transition contains a sender object, a condition, and an action. If the condition is evaluated to true, the action is executed.event. If the newly added Transition is selected, by default it already contains a Check Click condition and a placeholderClicked forevent.

Actions

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 executed.extended

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

5. Addwith a TransitionHandleControlState. 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 Identifiernext representspart thedescribes scenehow thatthis willcan be transitioned to. 

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

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. SelectIn Transitionthe State Machine Diagram select a transition that connects two states (e.g. the transition between Car_Cluster and Incoming_Call state. Car_Status).

9. SelectHave Checka Clicklook and show its Properties. 

10. Selectat the Checktransition's Click condition.properties. In Properties,Properties panel, set the Sender to the IndicatorRight node of the scene.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.property and select the correct indicator in the Choose Item dialog.
  
  
  
  

11.10. Repeat steps 8 to 109 above on Transitionsthe other transitions that areconnect in between othertwo states. Make sure to set to the correct Sender.Sender from the correct scene.

• Set IndicatorRight for Clockwiseclock-wise Transition,transitions, and set Indicatorleft for Counter-Clockwisecounter-clock-wise Transition.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 

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 rightright) in the Car_Cluster scene. It should show the Incoming_Call scene as seen below. 

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