Skip to main content

Part 2: Configuring the Global State Machine


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".

drawing-5-1694164806.png

Select the Main_StateMachine in the Solution Explorer and make it a global StateMachine by checking the checkbox in the properties panel.

drawing-5-1694165003.png

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".

drawing-5-1694166942.png

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.

drawing-5-1694167701.png

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.

drawing-5-1694170643.png

Clicking the magnifying glass icon will open the Choose Item dialog, where you can choose the MainMenu Scene as Identifier.

drawing-5-1694170743.png

Activate the Swap and Clear Scene by adding two additional OnEntry actions.
The final configuration will look like this.

drawing-5-1694170909.png

Resize MainMenu State

Inside the MainMenu State we will configure another Initial State and add 3 states for Navigation, Phone and Media. So, its size has to be enlarged. Select the MainMenu State and resize it using the handles in the state's corners.

drawing-5-1694170973.png


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.

drawing-5-1694175786.png


Configure the States - OnEntry and OnExit Actions

When the Navigation State is entered, the Navigation Scene should be activated. And it should be deactivated when the State is exited. Additionally, in MainMenu Scene we have an OverlayLayout, where we want to display a TextNode that indicates Navigation as the currently active scene. All this can be configured in the Navigation State.

Select the Navigation State, open the "State" tab and click the "+" sign at OnEntry to add a new OnEntry action. Select action TransitionRequest and click the magnifying glass next to "Identifier" to select the Navigation Scene.

drawing-5-1694176033.png
drawing-5-1694176094.png

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.

drawing-5-1694177918.png

The screenshot below will help you locate the TextNode for the OnEntry1 and OnExit1 actions.

drawing-5-1694180863.png

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.

drawing-5-1694178260.png


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:

  • from Navigation to Media
  • from Media to Phone
  • from Pone to Navigation
  • from Navigation to Phone
  • from Phone to Media
  • from Media to Navigation

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).

drawing-5-1694178516.png

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.

drawing-5-1694179568.png

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.

drawing-5-1694180181.png

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.

drawing-5-1694180251.png

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.

drawing-5-1694180616.png