Part 2: Configuring State Machine
Creating a new State Machine
The solution created in Part 1 (created based on the Empty solution) includes a GlobalStateMachine by default. In this part, we will delete this existing Global State Machine and create a new State Machine to deepen our understanding of custom settings.
Deleting the existing Global State Machine
Click the [ OK ] button in the dialog to delete the item.
Creating a new State Machine
Select StateMachines and click [ OK ].
Setting the Global State Machine
Basic Structure
Using the Main_StateMachine we created earlier, we will add a State to configure the initial state of the Main Menu scene, and then set the appropriate rendering settings. In addition, when the Main Menu State is entered, the Main Menu scene will be activated, and the Clear and Swap scenes will also be activated so that they are rendered correctly.
Initial State and State Addition for Main Menu
Adding an OnEntry Action
With the MainMenu State selected, click [ Fusion ] at the bottom left of the State Machine Editor panel.
A link will appear as you move the mouse, so release the left mouse button at the any location.
Select “Action > Transition > Transition Request” from the list and connect it to the top node.
Press the select item button to the right of the [ Identifier ] of the Transition Request.
On the [ Clone Item ] dialog, select the [ Multiple Clone ] tab, specify 2 for [ Number of Copies ] and click the [ OK ] button.
For the [ Identifier ] of the added Transition Request Fusion nodes, select the Swap and Clear scenes respectively.
This completes the settings for the OnEntry action for the MainMenu State. When you transition to the MainMenu State, the Clear and Swap scenes will be activated in addition to the Main Menu scene, so things like clearing the render will be executed at the same time.
Main Menu State Structure
Adding a State
Place one Initial State and three States in the MainMenu State from the toolbar at the top right of the State Machine Editor.
OnEntry/OnExit settings
When transitioning to each State (entering and exiting States), it is necessary to activate and deactivate the corresponding scenes. In addition, when each scene is activated or deactivated, it is necessary to set the Main Menu scene text to be displayed or hidden in conjunction with this.
Scene display settings
With the Navigation State selected, click [ Fusion ] in the lower left of the State Machine Editor panel.
A link will appear as you move the mouse, so release the left mouse button at the any location.
Select “Action > Transition > Transition Request” from the list and connect it to the top node.
Repeat the same process for the [On Exit Actions] of the Navigation Fusion node to connect the Transition Request Fusion node.
Make the following settings for the two Transition Requests that you have connected.
Repeat the same procedure to make similar settings for Phone and Media State.
Text Display Settings
With the Navigation StateSelect "Action > Property > Enable Rendering" from the list and connect it to the top node.
Enable Rendering is connected to [Navigation > On Exit Actions].
Repeat the same process for the [On Exit Actions] of the Navigation Fusion node to connect the Enable Rendering Fusion node.
Make the following settings for the two Enable Renderings that have been connected.
Follow the same procedure to make similar settings for Phone State
Adding a Transition
We will now create a transition between the states we have created so far.
Setting the Initial State
We will set the transition from the Initial State to the Navigation State, which is the initial state.
While the Transition is ready to be placed, click on the Navigation State.
With this setting, the transition to the Navigation State has been configured as the initial state of the MainMenu State.
Transition settings between each State
Next, we will set up the transitions between each State (Navigation, Phone, Media).
Extend the Transition (arrow) to the Media State (end of transition) and click.
With the added Transition selected, click [ Fusion... ] at the bottom left of the State Machine Editor panel.
The Check Click Fusion node is connected to the connector (Condition) at the top right of the Transition Fusion node.
Select the Check Click Fusion node that is connected by default, and press the Delete key.
Drag the connector (Condition) at the upper right of the Transition Fusion node, move the mouse, and release the left mouse button at the any location.
Enter “Check Key Input” in the search field at the top of the dialog.
Double-click Check Key Input.
Drag the connector (Actions) at the bottom right of the Transition Fusion node, move the mouse, and release the left mouse button at the any location.
Enter “Transition Request” in the search field at the top of the dialog.
Double-click Transition Request.
Make the following settings for the Transition Request Fusion node.
Repeat the above steps 1 to 11 to set the following five transitions.
Transition
Check Key Input＞KeyCode Transition Request>Identifier Media to PhoneKey_RightArrow Scenes＞Phone Phone to Navigation Scenes＞Navigation Navigation to Phone
Scenes＞Phone
Phone to Media Scenes＞Media Menu Media to Navigation Scenes＞NavigationWhen all settings are complete, the screen will look like the one below.
With the above settings, the scene that is displayed when a transition occurs from each scene has been set.
Checking the transition state
Use the Player to check the transition between the states set in the previous section.
Starting the Player
To start the Player, click the [ Play selected scenario ] icon in the toolbar.
If you have not saved the solution before performing this operation, a dialog box will appear prompting you to save the solution. In this case, click the [ OK ] button in the dialog box. The asset file will be automatically generated and opened in the CGI Player.
Checking the screen transition
Use the Player to check the screen transition.
left and right arrow keys on the keyboard, you can switch the text on the screen and see that you have transitioned to the specified scene.
Close the CGI Panel and exit the Player.
Create a Global State Machine
When creating a new solution in SceneComposer, it already contains a Global StateMachine called "GlobalStateMachine". For training purposes I suggest to delete this existing StateMachine and create a new one.
A new StateMachine is created through the menu "State Machine" – "New State Machine…". This will open a dialog to configure the StateMachine's location to "/State Machines" and its name to "Main_StateMachine".
Select the Main_StateMachine in the Solution Explorer and make it a global StateMachine by checking the checkbox in the properties panel.
-
CGI Studio SceneComposer 3.10 only supports one global State Machine. For certain usecases multiple global State Machines are necessary.
Multiple global State Machines would be necessary to e.g. add an incoming call to the State Machine sample described here.
Add an Initial State and State for the Main Menu
Double-click the Main_StateMachine to open it in the State Machine Editor.
Drag and drop an Initial State and a single State for the MainMenu into the State Machine (if this hasn't been created automatically). Change the State's name to "MainMenu".
Connect the Initial State and the MainMenu State with a Transition. To do this, drag and drop the Transition Arrow onto the Initial State. Then you can draw an arrow to the MainMenu State. To create this transition, click onto the MainMenu State.
On the left side in State Machine Editor you can see the single Transition beneath the Initial State as well as beneath the MainMenu State.
When entering the MainMenu State, the MainMenu Scene has to be activated. To ensure that everything is rendered correctly, the Clear and Swap Scenes have to be activated too.
To configure activation of these scenes, select the MainMenu State. In the Properties panel click the "+" button next to "OnEntry" to create another OnEntry action. Select the action TransitionRequest. Click the magnifying glass icon to configure the Identifier.
Clicking the magnifying glass icon will open the Choose Item dialog, where you can choose the MainMenu Scene as Identifier.
Activate the Swap and Clear Scene by adding two additional OnEntry actions.
The final configuration will look like this.
Resize MainMenu State
Add States for Navigation, Phone and Media
Drag and drop an initial State and 3 States (for Navigation, Phone and Media) onto the MainMenu State in the StateMachine Editor window. Name the States accordingly: Navigation, Phone, Media.
Configure the States - OnEntry and OnExit Actions
Similar steps are necessary for the OnExit action: Add an OnExit action by pressing the "+" on "OnExit", choose a Transition Request Action and select the Navigation Scene. However unlike the OnEntry action, the OnExit action shall Deactivate the Scene, which has to be configured too. To select the Identifier you can also copy the text from the OnEntry Identifier input field and paste it into the OnExit Identifier input field.
Additionally, when entering the Navigation State, the TextNode for Navigation has to be set to visible in the MainMenu Scene. We need to make it invisible again when exiting the Navigation State.
The screenshot below will help you locate the TextNode for the OnEntry1 and OnExit1 actions.
It is necessary to configure these OnEntry and OnExit actions for all three States in a similar way: The Media State has to configure TransitionRequests for the Media Scene, the Phone State has to configure TransitionRequests for the Phone Scene. The same applies for the EnableRendering actions.
Insert Transitions
Now, we need to establish the transitions between these states: One Transition goes from the initial state to the Navigation state, which will be the default entry point.
Between the 3 states Navigation, Media and Phone we need transitions in both directions:
It does make sense to start create the transitions into one direction (e.g. clockwise) and give them readable names (e.g. Navi_next). In a second step, create the transition into the other direction (counter-clockwise) and assign readable names (e.g. Navi_prev).
The diagram may get confusing with more transitions. To keep things in perspective, please be careful to choose meaningful names. You can also enlarge the states and move transitions around.
Configure State Transitions
The user should be able to navigate from one scene to the other using the left and right arrow key. This will be configured in the transitions.
All clockwise transitions (named *_next) will be configured for Key_RightArrow and all counter-clockwise transitions (named *_prev) will be configured for Key_LeftArrow.
-
You can select the Transition from within the State Machine Editor or from the list in the panel on the left.
Test the Configuration - Start the Player
The first part of our IVI configuration is done, it's time to save your solution and start the player.
Once the Player window is opened, the State Machine transitions to the Navigation State. Press Key_RightArrow to transition to the Media State. Press Key_RightArrow again to transition to the Phone State. You can also transition through the States in the other direction by pressing Key_LeftArrow.
