State Machine Solution Overview This tutorial aims to help users master the state transition and behavior control mechanisms between multiple scenes using the state machine functionality in CGI Studio. Specifically, the tutorial covers a step-by-step approach to developing practical HMI (Human-Machine Interface) applications, including UI construction, scene management, switching behaviors based on user interactions, managing history, conditional branching, and displaying the number of incoming calls. Through this tutorial, users will learn the following: Page Theme Main work content Part 1 Basics of Scene Composition and UI Design Understanding how to create and manage multi-scene UIs in CGI Studio. Building 9 scenes including Main Menu, Navigation, Media, Phone, etc. Manipulating text nodes, overlay layouts, and node positioning. Adding Clear/Swap scenes to manage buffers and control sequences. Part 2 Basics of State Machine and Transition Control Learning how to control scene transitions using a state machine. Recreating a global state machine and linking it to scenes. Controlling scene visibility using OnEntry/OnExit actions. Configuring transitions using key inputs (left/right arrow keys). Verifying transitions and behaviors in the Player. Part 3 Transition Optimization with Subcharts and History State Using Subcharts and History State for advanced scene management. Converting the Media State into a Subchart to manage sub-scenes for Radio, Bluetooth, and USB. Implementing History State to retain information about the previously active scene. Configuring bidirectional transitions and state restoration between scenes. Verifying scene selection and behavior using the up/down arrow keys. Part 4 Adding Incoming Call Scene and Popup Control Implementing popup control and state transitions for incoming calls. Creating an IncomingCall scene based on the existing Phone scene. Controlling the display with the Enter key for call display and the ESC key for hiding. Constructing CallActive/CallInactive state machines. Customizing the visuals using SolidColorNode. Part 5 Counting Incoming Calls and Updating UI Understanding how to send events through the state machine and update the UI. Adding a text node with “Received Calls: %d” to the Main Menu scene. Counting the number of incoming calls when entering the CallActive State. Sending relative values as events using Send Value As Event. Displaying call count information in real time using Format String.       Part 1: Prepare Scenes This page explains the procedure for creating and configuring a multi-scene user interface (UI) using CGI Studio. It covers the creation, duplication, and editing of nine scenes, including Main Menu, Navigation, Media Menu, and Phone, where text nodes and overlay layouts are placed to build the UI. The process also includes deleting unnecessary scenes, configuring rendering settings, optimizing buffer management (introducing Clear/Swap scenes), and setting camera sequence numbers. Ultimately, the necessary preparations for state transitions (state machine configuration) between scenes will be completed. The scenes you create will be used when you actually construct the State Machine in Part 2 and beyond. Creating the Main Menu Scene The Main Menu scene is used to display the current context (Navigation, Media, Phone). Renaming the Scene and Placing Nodes Start Scene Composer and select [Empty] from [Samples and Templates] on the startup screen. A new solution will open as an Empty solution. In the Solution Explorer , select [Scene2D] under the [Scenes] folder, then choose [Rename] from the context menu. Scene2D will enter rename mode. Rename it to [Main Menu] . Drag and drop [Overlay Layout] from [Nodes 2D]  in the [Toolbox] panel onto the [Main Menu] scene tree. [OverlayLayout] will be added to the scene tree. The [Position] under [Transform] in the [Properties] panel will be automatically set to X=0, Y=0. Similarly, drag and drop [Text Node] from [Nodes 2D] onto [Overlay Layout] . [TextNode] will be added as a child node of [OverlayLayout] . Select [TextNode] , then choose [Clone] from the context menu. The [Clone Item] dialog will appear. In the [Clone Item] dialog, select the [Multiple Clone] tab, set [ Number of Copies ] to 2 , and click [OK] . [TextNode_1] and [TextNode_2] will be added as child nodes of [OverlayLayout] . Renaming Text Nodes Rename the three added text nodes to Navi , Media , and Phone . To rename, select the node, choose [Rename] from the context menu, or press F2 . Select [Navi] in the scene tree. The [Properties] panel will display [Navi] properties. In the [2D Text Node] section of the [Properties] panel, change [Text] to "Navi Title" . "Navi Title" will be displayed in the Scene Editor (overlapping with other text nodes). Similarly, update [Text] for [Media] and [Phone] . The Scene Editor will display the text nodes overlapping. Select [Media] and [Phone] together in the scene tree, then uncheck [Enable Rendering] in the [Properties] panel under [Item] . Rendering for [Media] and [Phone] will be disabled, displaying only "Navi Title" in the Scene Editor. Deleting Unnecessary Scenes Delete unnecessary scenes from the Empty sample solution that are not needed for this tutorial. In [Solution Explorer] , select [Scene3D] under the [Scenes] folder, then press Delete . The [Delete Item] dialog will appear. Click [OK] in the dialog to proceed with deletion. [Scene3D] will be removed from the [Scenes] folder in [Solution Explorer] . The Main Menu scene setup is now complete. Adding the Navigation Scene Add two new scenes, setting them as Navigation and Phone , with text displaying "Navigation" and "Phone" respectively. Click [Add a new 2D Scene] in the toolbar. The [Add New Scene 2D] dialog will appear. In the [Add New Scene 2D]  dialog, rename [Name] to "Navigation" , then click [OK] . The [Navigation] scene will be added under [Scenes] in [Solution Explorer] . The Navigation scene will appear in the scene tree. Drag and drop [Text Node] from [2D Nodes] in the [Toolbox] onto the Navigation scene tree. "Text" will be displayed in the Scene Editor. In the [Properties] panel, change [Text] under [2D Text Node] to "Navigation" . The text displayed in the Scene Editor will change to "Navigation". Set the text node position using [Transform] in the [Properties] panel as the below table. Position X 25 Position Y 150 The Navigation scene setup is now complete. Adding the Phone Scene The Phone scene is created by duplicating the Navigation scene. In [Solution Explorer] , select [Scenes > Navigation] , then choose [Clone] from the context menu. The [Clone Item] dialog will appear. In the [Clone Item] dialog, select [Single Clone] , rename [Name] to "Phone" , then click [OK] . The Phone scene will be created. The scene tree will display the newly created Phone scene. Select the text node in the Phone scene tree, then update [Text] in the [Properties] panel under [2D Text Node] to "Phone" . The text displayed in the Scene Editor will change to "Phone". The Phone scene setup is now complete. Adding the Media Menu Scene This scene is similar to the Main Menu scene. It includes an overlay layout node with three child text nodes: Radio, Bluetooth, and USB. Therefore, the Main Menu scene will be duplicated and set up it as Media Menu scene. In Solution Explorer , select [Scenes > Main Menu] , then choose [Clone] from the context menu. The [Clone Item] dialog will appear. In the [Clone Item] dialog, select [Single Clone] , rename [Name] to "Media Menu" , and click [OK] . A new scene named Media Menu will be created. The scene tree panel will display the Media Menu scene. The scene tree will contain an overlay layout node with three text nodes. Select the Overlay Layout in the scene tree, then update the [Position] under [Transform] in the Properties panel: Position X 0 Position Y 50 Select each text node in the scene tree and update the Properties as follows: General > Name 2D Text Node > Text Radio Radio Title Bluetooth Bluetooth Title USB USB Title The Media Menu scene setup is now complete. Since this was duplicated from the Main Menu scene, the Enable Rendering setting for Bluetooth and USB text nodes is disabled, so only "Radio Title" will be displayed in the Scene Editor. Creating the Media Radio Scene The Media Radio scene is displayed when the Media Menu is selected. This scene is created by duplicating the previously created Navigation scene. In Solution Explorer , select [Scenes > Navigation] , then choose [Clone] from the context menu. The [Clone Item] dialog will appear. In the [Clone Item] dialog, select [Single Clone] , rename [Name] to "Media Radio" , and click [OK] . A new scene named Media Radio will be created. The scene tree panel will display the Media Radio scene. Select the Text Node in the scene tree and update the [Text] under [2D Text Node] in the Properties panel to "Radio" . The text displayed in the Scene Editor will change to "Radio". The Media Radio scene setup is now complete. Adding the Media Bluetooth and Media USB Scenes Two additional scenes, Media Bluetooth and Media USB , will be created similarly to the Media Radio scene by duplicating it. In Solution Explorer , select [Scenes > Media Radio] , then choose [Clone] from the context menu. The [Clone Item] dialog will appear. In the [Clone Item] dialog, select [Multiple Clone] , set [Number of Copies] to 2 , and click [OK] . Two new scenes named Media Radio_1 and Media Radio_2 will be created. The scene tree panel will display the newly created Media Radio_1 scene. In Solution Explorer , rename Media Radio_1 to Media Bluetooth and Media Radio_2 to Media USB . Select the text node in the Media Bluetooth scene tree and update the [Text] under [2D Text Node] in the Properties panel to "Bluetooth" . The text displayed in the Scene Editor will change to "Bluetooth".} Similarly, select the text node in the Media USB scene tree and update the [Text] to "USB" . The text displayed in the Scene Editor will change to "USB". The Media Bluetooth and Media USB scene setups are now complete. Adding the Clear Scene A Clear Scene containing only a camera is added to erase the contents of the old framebuffer. This scene is always rendered to ensure that previous frame contents do not appear. Click the [Add a new 2D Scene] button in the toolbar. The [Add New Scene 2D] dialog will appear. In the dialog, set [Name] to "Clear" , then click [OK] . The Clear scene will be added under the [Scenes] hierarchy in Solution Explorer . The Clear Scene setup is now complete. Adding the Swap Scene An additional Swap Scene is required to ensure proper rendering (switching of render target buffers) and correct display in Scene Composer . However, this scene is only necessary for Scene Composer display purposes and is not required for the Courier application, as buffer swapping is handled automatically in Courier. Click the [Add a new 2D Scene] button in the toolbar. The [Add New Scene 2D] dialog will appear. In the dialog, set [Name] to "Swap" , then click [OK] . The Swap scene will be added under the [Scenes] hierarchy in Solution Explorer . The scene tree panel will display the newly created Swap scene. The Swap Scene setup is now complete. Disabling Clear Color Buffer Since the Clear Scene erases the contents of the old framebuffer, the Clear Color Buffer setting should be disabled for all scene cameras except the Clear Scene camera . This is necessary as all scene cameras overlap. In the [Render Targets] panel, select all cameras except the Clear Camera . Hold down Shift key while selecting to choose multiple cameras. In the Properties panel, under the [Camera] category, uncheck [Clear Color Buffer] . This will disable the Clear Color Buffer setting for all selected cameras at once. Setting Enable Swapping The Swap Scene executes buffer swapping. Therefore, the Enable Swapping setting must be disabled for all scene cameras except the Swap Scene . In the [Render Targets] panel, select all cameras except the Swap Camera . Hold down Shift key while selecting to choose multiple cameras. In the Properties panel, under the [Camera] category, uncheck [Enable Swapping] . This will disable the Enable Swapping setting for all selected cameras at once. Setting Camera Sequence Number The rendering order of cameras is determined by the [Sequence Number] property. Cameras with smaller sequence numbers are rendered as backgrounds for those with larger numbers. In the Render Targets panel, each camera's [Sequence Number] is displayed next to its name in parentheses, indicating their rendering order. How to Set Sequence Number The Sequence Number can be set using the following steps: In the Render Targets panel, select the target camera(s) to be configured. The Properties panel will display the properties of the selected camera. To select multiple cameras, hold down Shift or Ctrl key while clicking. In the Properties panel, under the [Camera] category, change the [Sequence Number] value. Sequence Number Configuration For this tutorial, set the Sequence Number for each camera as follows: Sequence Number Camera Name 0 Clear 1 Main Menu 2 Media Menu, Navigation, Phone 3 Media Bluetooth, Media Radio, Media USB 4 Swap With this, all necessary scenes are now prepared for the State Machine Configuration in the next section. Part 2: Configuring State Machine This page explains the steps for building state transitions (state machines) between multiple scenes in CGI Studio. It begins by recreating the Global State Machine for the scenes created in Part 1 and configuring state transitions for Main Menu, Navigation, Phone, Media Menu, and other scenes. Each state uses OnEntry/OnExit actions to control scene activation and deactivation, as well as the rendering of related text nodes. It also covers setting screen transitions using left and right key inputs (Key_RightArrow/Key_LeftArrow), configuring transitions using Fusion nodes, and defining transition conditions for each scene. Finally, transition behavior is verified using the Player. 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 Select the GlobalStateMachine in the [ State Machines ] folder in the Solution Explorer, and then select [ Delete ] from the context menu. The [ Delete Items ] dialog will appear. Click the [ OK ] button in the dialog to delete the item. Creating a new State Machine Select [ State Machines > New State Machine ] from the menu bar. The [ New State Machine ] dialog will appear. Click [ Browse ] at the top of the dialog. The [ Select Location ] dialog will appear. Select StateMachines and click [ OK ]. The location “/State Machines” is selected as the save location for the new State Machine. Set [ Name ] in the dialog to "Main_StateMachine" and click the [ OK ] button. The Main_StateMachine is newly created in the [ State Machines ] folder in the Solution Explorer. Setting the Global State Machine Select the Main_StateMachine in the [ State Machines ] folder in the Solution Explorer. The Main_StateMachine properties will be displayed in the Properties panel. Enable the [ Is Global ] checkbox in the [ General ] category of the properties. The Main_StateMachine will be set as a Global State Machine. For details on the functions of the Global State Machine, please refer to this page .   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 Double-click on the Main_StateMachine in the [ State Machines ] folder in the Solution Explorer.  The State Machine Editor panel will be displayed. There is already an Initial State and one State. Select the State on the State Machine Editor. The properties of the selected State will be displayed in the Properties Panel. Change the [ Name ] in the [ General ] category of the Properties Panel to MainMenu. The State name on the State Machine Editor will change to MainMenu. Adding an OnEntry Action With the MainMenu State selected, click [ Fusion ] at the bottom left of the State Machine Editor panel. The Fusion panel for the MainMenu State will be displayed. Drag the [ On Entry Actions ] connector on the right of the MainMenu Fusion node and move the mouse. A link will appear as you move the mouse, so release the left mouse button at the any location. The [ Select Behavior ] dialog will be displayed. The selectable behaviors will be displayed by category. Select “Action > Transition > Transition Request” from the list and connect it to the top node. You can also narrow down the list of behaviors in the dialog by entering “Transition Request” in the search field at the top of the dialog. Transition Request is connected to MainMenu. The default Activate is selected for the [RequestType] of Transition Request. Press the select item button to the right of the [ Identifier ] of the Transition Request. The [ Choose Item ] dialog box will appear. Select [ Scenes > Main Menu ] from the left window. The Main Menu you selected will be registered in the [ Identifier ] of the Transition Request. Select the Transition Request Fusion node you set up, and execute [ Close ] from the context menu. On the [ Clone Item ] dialog, select the [ Multiple Clone ] tab, specify 2 for [ Number of Copies ] and click the [ OK ] button. The duplicated Fusion nodes overlap, so move them using the mouse. The Fusion nodes named Transition Request_1 and Transition Request_2 are connected to the MainMenu Fusion node. The [ RequestType ] of each Fusion node is set to the default Activate. 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 Double-click on Main_StateMachine in the [ State Machines ] folder in the Solution Explorer. The State Machine Editor will appear. After selecting the MainMenu State, drag the resizing handles displayed in the four corners of the state with the mouse to expand the size of the MainMenu State. Place one Initial State and three States in the MainMenu State from the toolbar at the top right of the State Machine Editor. Change the names of the three added States to Navigation, Phone and Media respectively. For instructions on how to change State names, please refer to here . 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. The Fusion panel for the Navigation State will be displayed. Drag the [ On Entry Actions ] connector on the right of the Navigation Fusion node and move the mouse. A link will appear as you move the mouse, so release the left mouse button at the any location. The [ Select Behavior ] dialog will be displayed. The selectable behaviors will be displayed by category. Select “Action > Transition > Transition Request” from the list and connect it to the top node. You can also narrow down the list of behaviors in the dialog by entering “Transition Request” in the search field at the top of the dialog. The Transition Request is connected to [Navigation > On Exit Actions]. 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. On Entry Actions RequestType Activate Identifier Navigation On Exit Actions RequestType Deactivate Identifier Navigation Repeat the same procedure to make similar settings for Phone and Media State. Phone State On Entry Actions RequestType Activate Identifier Phone On Exit Actions RequestType Deactivate Identifier Phone Media State On Entry Actions RequestType Activate Identifier Media Menu On Exit Actions RequestType Deactivate Identifier Media Menu Text Display Settings With the Navigation State selected, click [ Fusion ] at the bottom left of the State Machine Editor panel. The Fusion panel for the Navigation State will be displayed. Drag the [ On Entry Actions ] connector on the right of the Navigation Fusion node and move the mouse. A link will appear as you move the mouse, so release the left mouse button at the any location. The 'Select Behavior' dialog will appear. The available behaviors will be displayed in categories. Select "Action > Property > Enable Rendering" from the list and connect it to the top node. You can also narrow down the list of behaviors in the dialog by entering "Enable Rendering" in the search field at the top of the dialog. 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. On Entry Actions TargetNode Scenes>Main Menu>OverlayLayout>Navi Title Visible Enable (check box selected) On Exit Actions TargetNode Scenes>Main Menu>OverlayLayout>Navi Title Visible Disable (uncheck) Follow the same procedure to make similar settings for Phone State and Media State. Phone State On Entry Actions TargetNode Scenes>Main Menu>OverlayLayout>Phone Title Visible Enable On Exit Actions TargetNode Scenes>Main Menu>OverlayLayout>Phone Title Visible Disable Media State On Entry Actions TargetNode Scenes>Main Menu>OverlayLayout>Media Title Visible Enable On Exit Actions TargetNode Scenes>Main Menu>OverlayLayout>Media Title Visible Disable 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. Double-click on Main_StateMachine in the [ State Machines ] folder in the Solution Explorer. The State Machine Editor will appear. Drag and drop [ Transition ] from the toolbar at the top of the panel to the Initial State in the MaiMenu State. The Transition will be connected to the Initial State, and it will be ready to be placed. While the Transition is ready to be placed, click on the Navigation State. The Initial State and Navigation State will be connected by the Transition. The direction of the Transition connection is from the Initial State to 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). From the toolbar at the top right of the State Machine Editor, drag the Transition and drop it onto the Navigation State (the starting side of the transition). The Transition (arrow) will appear on the State Machine Editor and be ready to be dragged. Extend the Transition (arrow) to the Media State (end of transition) and click. The two states, Navigation and Media, will be connected by an arrow. With the added Transition selected, click [ Fusion... ] at the bottom left of the State Machine Editor panel. The Fusion panel will open, and the Fusion diagram for the Transition will be displayed. 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. The Check Click Fusion node will be deleted. 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. The [Select Behavior] dialog will open. Enter “Check Key Input” in the search field at the top of the dialog.  The list of behaviors in the dialog will be narrowed down, and Condition > Input > Check Key Input will be displayed. Double-click Check Key Input. The Check Key Input Fusion node will be linked to the Condition connector of the Transition Fusion node. 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. The [Select Behavior] dialog will open. Enter “Transition Request” in the search field at the top of the dialog. The list of behaviors in the dialog will be narrowed down, and Action > Transition > Transition Request will be displayed. Double-click Transition Request. The Transition Request Fusion node will be linked to the Actions connector of the Transition Fusion node. Make the following settings for the Transition Request Fusion node. Clicking the upward-pointing arrow icon in the upper right of the Fusion panel will switch the display to the State. Check Key Input KeyCode Key_RightArrow Transition Request RequestType Activate Identifier Scenes＞Media Menu Repeat the above steps 1 to 11 to set the following five transitions. The RequestType for all of these is Activate (default). Transition Check Key Input＞KeyCode Transition Request>Identifier Media to Phone Key_RightArrow Scenes＞Phone Phone to Navigation Scenes＞Navigation Navigation to Phone Key_LeftArrow Scenes＞Phone Phone to Media Scenes＞Media Menu Media to Navigation Scenes＞Navigation When 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. Click the [ Play selected scenario ] icon on the toolbar to start the Player. Three windows will open, and you can see that the simulation display, one of the windows, displays the “Navi Title” and “Navigation” text, and that the initial transition has occurred to the Main Menu and Navigation scenes. By pressing the 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. All three windows that were open will close. Part 3: Subchart and History State This page explains the procedure for setting up complex scene transitions using Subchart and History State in CGI Studio. Media State is converted into a Subchart, and bidirectional transitions between the three sub-scenes—Radio, Bluetooth, and USB—are configured. Up and down key inputs (Key_UpArrow/Key_DownArrow) are used to switch scenes, and OnEntry/OnExit actions control the visibility of each scene. Additionally, to retain the previous selection state when returning to the Media scene after transitioning to another scene, the Initial State is replaced with a History State to track the media device state. Finally, scene transition operations are verified and simulated using the Player. Configure SubChart The Media States that exist in Main_StateMachine are configured as SubCharts. Within the Media States configured as SubCharts, the States for Radio, Bluetooth, and USB are placed. Converting a Media State to a Subchart Double-click on Main_StateMachineSolution in the [ State Machines ] folder in the Solution Explorer. The State Machine Editor will open and display the Main_StateMachine diagram. After selecting the Media State, select [ Convert to Subchart ] from the context menu. The Media State will be converted to a Subchart (the “S” indicating that it is a Subchart will be displayed in the lower right of the State). The operation to convert Media State to SubChart is now complete. To move to the SubChart, select Media State and double-click. To return to the original State Diagram from the SubChart, use the [Hierarchy Navigation Button] in the State/Transition view screen in the upper right of the State Machine Editor panel. Adding an Initial State and States Double-click on the Main_StateMachine in the [ State Machines ] folder in the Solution Explorer.  The State Machine Editor panel will be displayed. After selecting the Media State, double-click to move it into the SubChart. As this is immediately after the SubChart conversion, only the Subchart frame will be displayed. Expand the size of the Subchart by dragging the Subchart frame handle with the mouse. Expand it to a sufficient size to add the Initial State and States. In the Subchart, place one Initial State and three States from the toolbar at the top right of the State Machine Editor. Change the names of the three States you added to Radio, Bluetooth, and USB, respectively. The placement of the basic components is now complete. Continue to configure the OnEntry action and Transition settings. Structure of each State When transitioning to each State in the Subchart (entering and exiting States), the corresponding scene must be made active or inactive. In addition, when each scene is made active or inactive, the Media Menu scene text must be set to be displayed or hidden accordingly. Scene display settings With the Radio State selected, click [ Fusion ] in the lower left of the State Machine Editor panel. The Fusion panel for the Radio State will be displayed. Drag the [ On Entry Actions ] connector on the right of the Radio Fusion node and move the mouse. A link will appear as you move the mouse, so release the left mouse button at the any location. The [ Select Behavior ] dialog will be displayed. The selectable behaviors will be displayed by category. Select “Action > Transition > Transition Request” from the list and connect it to the top node. You can also narrow down the list of behaviors in the dialog by entering “Transition Request” in the search field at the top of the dialog. The Transition Request is connected to [Radio > On Exit Actions]. Repeat the same process for the [On Exit Actions] of the Radio Fusion node to connect the Transition Request Fusion node. Make the following settings for the two Transition Requests that you have connected. On Entry Actions RequestType Activate Identifier Media Radio scene On Exit Actions RequestType Deactivate Identifier Media Radio scene Repeat the same procedure to make similar settings for Bluetooth and USB State. Phone State On Entry Actions RequestType Activate Identifier Media Bluetooth scene On Exit Actions RequestType Deactivate Identifier Media Bluetooth scene Media State On Entry Actions RequestType Activate Identifier Media USB scene On Exit Actions RequestType Deactivate Identifier Media USB scene Text Display Settings With the Radio State selected, click [ Fusion ] at the bottom left of the State Machine Editor panel. The Fusion panel for the Radio State will be displayed. Drag the [ On Entry Actions ] connector on the right of the Radio Fusion node and move the mouse. A link will appear as you move the mouse, so release the left mouse button at the any location. The 'Select Behavior' dialog will appear. The available behaviors will be displayed in categories. Select "Action > Property > Enable Rendering" from the list and connect it to the top node. You can also narrow down the list of behaviors in the dialog by entering "Enable Rendering" in the search field at the top of the dialog. Enable Rendering is connected to [Radio > On Exit Actions]. Repeat the same process for the [On Exit Actions] of the Radio Fusion node to connect the Enable Rendering Fusion node. Make the following settings for the two Enable Renderings that have been connected. On Entry Actions TargetNode Scenes>Main Menu>OverlayLayout>Radio Visible Enable (check box selected) On Exit Actions TargetNode Scenes>Main Menu>OverlayLayout>Radio Visible Disable (uncheck) Follow the same procedure to make similar settings for Bluetooth and USB State.  Phone State On Entry Actions TargetNode Scenes>Main Menu>OverlayLayout>Bluetooth Visible Enable On Exit Actions TargetNode Scenes>Main Menu>OverlayLayout>Bluetooth Visible Disable Media State On Entry Actions TargetNode Scenes>Main Menu>OverlayLayout>USB Visible Enable On Exit Actions TargetNode Scenes>Main Menu>OverlayLayout>USB Visible Disable 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 Radio State, which is the initial state. Double-click on Main_StateMachine in the [ State Machines ] folder in the Solution Explorer. The State Machine Editor will appear. After selecting Media State, double-click on it and move it into the SubChart. Drag and drop [ Transition ] from the toolbar at the top of the panel to the Initial State in the Subchart. The Transition will be connected to the Initial State, and it will be ready to be placed. While the Transition is ready to be placed, click on the Radio State. The Initial State and Radio State will be connected by the Transition. The direction of the Transition connection is from the Initial State to the Radio State. With this setting, the transition to the Radio State has been configured as the initial state of the Media State (Subchart). Transition settings between each State Next, we will set up the transitions between each State (Radio, Bluetooth, USB). From the toolbar at the top right of the State Machine Editor, drag the Transition and drop it onto the Radio State (the starting side of the transition). The Transition (arrow) will appear on the State Machine Editor and be ready to be dragged. Extend the Transition (arrow) to the Bluetooth State (end of transition) and click. The two states, Radio and Bluetooth, will be connected by an arrow. With the added Transition selected, click [ Fusion... ] at the bottom left of the State Machine Editor panel. The Fusion panel will open, and the Fusion diagram for the Transition will be displayed. 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. The Check Click Fusion node will be deleted. 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. The [Select Behavior] dialog will open. Enter “Check Key Input” in the search field at the top of the dialog.  The list of behaviors in the dialog will be narrowed down, and Condition > Input > Check Key Input will be displayed. Double-click Check Key Input. The Check Key Input Fusion node will be linked to the Condition connector of the Transition Fusion node. 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. The [Select Behavior] dialog will open. Enter “Transition Request” in the search field at the top of the dialog. The list of behaviors in the dialog will be narrowed down, and Action > Transition > Transition Request will be displayed. Double-click Transition Request. The Transition Request Fusion node will be linked to the Actions connector of the Transition Fusion node. Make the following settings for the Transition Request Fusion node. Clicking the upward-pointing arrow icon in the upper right of the Fusion panel will switch the display to the State. Check Key Input KeyCode Key_DownArrow Transition Request RequestType Activate Identifier Scenes＞Media Bluetooth Repeat the above steps 1 to 11 to set the following five transitions. The RequestType for all of these is Activate (default). Transition Check Key Input＞KeyCode Transition Request>Identifier Bluetooth to USB Key_DownArrow Scenes＞Media USB USB to Radio Scenes＞Media Radio Radio to USB Key_UpArrow Scenes＞Media USB USB to Bluetooth Scenes＞Media Bluetooth Bluetooth to Radio Scenes＞Media Radio When 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 in the subchart has been set. Checking the screen transition Use the Player to check the screen transition. Click the [ Play selected scenario ] icon on the toolbar to start the Player. Three windows will open, and you can see that the simulation display, one of the windows, displays the “Navi Title” and “Navigation” text, and that the initial transition has occurred to the Main Menu and Navigation scenes. Pressing the right arrow key on the keyboard switches the text on the screen, and “Media Title”, “Radio Title”, and “Radio” are displayed in the simulation display, and the transition to the Media Menu scene (Subchart) is performed. Pressing the up and down arrow keys on the keyboard switches the text on the screen, and the transition to the “Radio”, “Bluetooth”, and “USB” scenes in the Subchart is performed sequentially. Close the CGI Panel and exit the Player. All three windows that were open will close. In addition to the switching between the Navigation, Phone and Media scenes set in Part 2, we were able to confirm that it is also possible to switch between the Radio, Bluetooth and USB scenes, which are subcharts. However, at present, even if you switch to a scene placed in a subchart in the Media scene, when you transition back to the Navigation or Phone scene (using the left and right directional keys) and then return to the Media scene, the Radio scene, which is always set as the initial scene of the Media scene, will be displayed. If you want to display the scene that was displayed immediately before, you can do this by placing a History State in the Subchart. Configure History State Placing the History State Double-click on Main_StateMachine in the [ State Machines ] folder in the Solution Explorer. The State Machine Editor will appear. After selecting the Media State, double-click to move it into the SubChart. Select the Initial State in the Subchart and press the Delete key. The Initial State in the Subchart will be deleted. Drag and drop [ History State ] from the toolbar at the top of the panel into the Subchart. The History State will be placed in the Subchart. Drag and drop [Transition] from the toolbar at the top of the panel into the Subchart. The Transition will be connected to the Initial State, and it will be ready to be placed. While the Transition is ready to be placed, click on the Radio State. The History State and Radio State will be connected by the Transition. Checking the screen transition Use the Player to check the screen transition. Press the [Play selected scenario...] icon on the toolbar to start the Player. Three windows will open, and you can see that the simulation display shows “Navi Title” and “Navigation” text, and that the initial transition has occurred to the Main Menu and Navigation scenes. Press the right arrow key on the keyboard once. The text “Media Title”, “Radio Title” and “Radio” will appear, and you will be taken to the Media Menu scene (Subchart). Press the down arrow key on the keyboard once. The text on the screen will change, and “Bluetooth Title” and “Bluetooth” will appear. Press the right arrow key on the keyboard once, and then press the left arrow key once. On the simulation display, “Phone Title” will be displayed, and then “Media Title” will be displayed again. In this case, “Bluetooth” will be displayed. Close the CGI Panel and exit the Player. All three windows that were open will close. By replacing the Initial State in the Subchart with the History State, you can see that the scene transition in the Subchart has become a state that remembers the state of the previous transition. Part 4: Add an Incoming Call This page explains the procedure for adding an Incoming Call scene and configuring the state machine to display the scene with the Enter key and hide it with the ESC key in CGI Studio. The existing Phone scene is duplicated to create the IncomingCall scene, and the background is customized by placing a SolidColorNode. A new Global State Machine (IncomingCall_StateMachine) is created, and transitions between the CallInactive and CallActive states are configured. Conditions are set for transitioning to CallActive (displaying the call) with the Enter key and to CallInactive (hiding the call) with the ESC key. OnEntry/OnExit actions are used to control the activation and deactivation of the IncomingCall scene. Finally, screen transition operations are verified using the Player. Creatig the IncomingCall scene Configure the IncomingCall Scene The IncomingCall scene is created by duplicating the Phone scene. In [Solution Explorer] , select [Scenes > Phone] , then choose [Clone] from the context menu. The [Clone Item] dialog will appear. In the [Clone Item] dialog, select [Single Clone] , rename [Name] to "IncomingCall " , then click [OK] . The IncomingCall scene will be created. The scene tree will display the newly created IncomingCall  scene.   Select the text node in the IncomingCall  scene tree, then update [Text] in the [Properties] panel under [2D Text Node] to "Incoming Call" . The text displayed in the Scene Editor will change to "Incoming Call". To change the position of the text node on the Scene Editor, change the [Transform] setting in the text node's properties panel to the following. Position X 28 Position Y 220 Drag and drop a [Solid Color Node] from [Node 2D] in the [Toolbox] panel onto the TextNode in the [IncomingCall] scene tree. The SolidColorNode will be placed on the scene tree. By placing it above the TextNode on the scene tree, the added SolidColorNode can be used as the background for the TextNode. If you are unable to place it below the TextNode, you can adjust its position by dragging and dropping it after placing it on the scene tree. The node added to the scene tree by this operation will have its [Position] set to X=0, Y=0 automatically in the [Transform] section of the Properties panel.   To change the position of the SolidColorNode on the scene editor, change the [Transform] setting in the SolidColorNode's property panel to the following. Position X 5 Position Y 200 After selecting the SolidColorNode on the scene tree, select the SolidColorBrushBlend that appears in the extra scene tree. The properties of the SolidColorBrushBlend effect will be displayed in the Properties panel. To change the color and size of the SolidColorNode, set the following items in the Properties panel as shown in the table below. Effect FillColor Red 1.0 Green 0.0 Blue 0.0 Alpha 1.0 Size X 380 Y 90 The settings for the Incoming Call scene are now complete. Sequence Number Configuration Set the rendering order for the new scene created in the previous section. In this case, we will set it to 4, so we will also change the rendering order of the Swap Scene Camera, which was originally set to 4. In the Render Target panel, select IncomingCall/Camera. The properties of the IncomingCall camera will be displayed in the Properties panel. In the Properties panel, change the value of [Sequence Number] in the [Camera] category to 4. Next, select Swap\Camera in the Render Target panel.  The properties of the Swap camera will be displayed in the Properties panel. In the Properties panel, change the value of [Sequence Number] in the [Camera] category to 5. Creating an IncomingCall State Machine We will create and configure a new State Machine for the IncomingCall scene. Creating a new State Machine Select [ State Machines > New State Machine ] from the menu bar. The [ New State Machine ] dialog will appear. Click [ Browse ] at the top of the dialog. The [ Select Location ] dialog will appear. Select StateMachines and click [ OK ]. The location “/State Machines” is selected as the save location for the new State Machine. Set [ Name ] in the dialog to "IncomingCall_StateMachine" and click the [ OK ] button. The IncomingCall_StateMachine is newly created in the [ State Machines ] folder in the Solution Explorer. Setting the Global State Machine Select the IncomingCall_StateMachine in the [ State Machines ] folder in the Solution Explorer. The IncomingCall_StateMachine properties will be displayed in the Properties panel. Enable the [ Is Global ] checkbox in the [ General ] category of the properties. The IncomingCall_StateMachine will be set as a Global State Machine. Adding a State Double-click on IncomingCall_StateMachine in the [ State Machines ] folder in the Solution Explorer. The State Machine Editor will appear. There is already one Initial State and one State. Select a State on the State Machine Editor.  The properties of the selected State will be displayed in the Properties Panel.   Change the [Name] in the [General] category of the Properties Panel to CallInactive.  The State name on the State Machine Editor will change to CallInactive. Next, place a State from the toolbar at the top right of the State Machine Editor.   Change the names of the added States to CallInActive. Drag and drop [Transition] from the toolbar at the top of the panel to the Initial State in IncomingCall_State. Transition will be connected to the Initial State and become ready to be placed. While Transition is ready to be placed, click on CallInactive State. OnEntry/OnExit settings When transitioning to each State (entering and exiting States), it is necessary to activate and deactivate the corresponding scenes.  Scene display settings With the CallActive State selected, click [ Fusion ] in the lower left of the State Machine Editor panel. The Fusion panel for the Navigation State will be displayed. Drag the [ On Entry Actions ] connector on the right of the CallActive Fusion node and move the mouse. A link will appear as you move the mouse, so release the left mouse button at the any location. The [ Select Behavior ] dialog will be displayed. The selectable behaviors will be displayed by category. Select “Action > Transition > Transition Request” from the list and connect it to the top node. You can also narrow down the list of behaviors in the dialog by entering “Transition Request” in the search field at the top of the dialog. The Transition Request is connected to [CallActive > On Exit Actions]. Repeat the same process for the [On Exit Actions] of the CallActive Fusion node to connect the Transition Request Fusion node. Make the following settings for the two Transition Requests that you have connected. On Entry Actions RequestType Activate Identifier IncomingCall scene On Exit Actions RequestType Deactivate Identifier IncomingCall scene Transition settings between each State Next, we will set up the transitions between each State (CallInactive and CallActive). From the toolbar at the top right of the State Machine Editor, drag the Transition and drop it onto the CallInactive State (the starting side of the transition). The Transition (arrow) will appear on the State Machine Editor and be ready to be dragged. Extend the Transition (arrow) to the CallActive State (end of transition) and click. The two states, CallInactive and CallActive, will be connected by an arrow. With the added Transition selected, click [ Fusion... ] at the bottom left of the State Machine Editor panel. The Fusion panel will open, and the Fusion diagram for the Transition will be displayed. 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. The Check Click Fusion node will be deleted. 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. The [Select Behavior] dialog will open. Enter “Check Key Input” in the search field at the top of the dialog.  The list of behaviors in the dialog will be narrowed down, and Condition > Input > Check Key Input will be displayed. Double-click Check Key Input. The Check Key Input Fusion node will be linked to the Condition connector of the Transition Fusion node. Make the following settings for the Check Key Input Fusion node. Clicking the upward-pointing arrow icon in the upper right of the Fusion panel will switch the display to the State. Check Key Input KeyCode Key_Enter Repeat the above operations 1 to 8, this time connecting the Transition from CallActive State to CallInactive State, and set the Check Key Input Fusion as shown in the table below.  Check Key Input KeyCode Key_ESC When all settings are complete, the screen will look like the one below.  Checking the transition state Use the Player to check the transition between the states set in the previous section. Checking the screen transition Use the Player to check the screen transition. Click the [ Play selected scenario ] icon on the toolbar to start the Player. Three windows will open, and you can see that the simulation display, one of the windows, displays the “Navi Title” and “Navigation” text, and that the initial transition has occurred to the Main Menu and Navigation scenes. By pressing the Enter key on the keyboard, the text “Incoming Call” will appear on the screen. Using the left and right directional keys in this state will move the scene, but the “Incoming Call” text will remain displayed. Pressing the ESC key on the keyboard hides the “Incoming Call” text displayed on the screen. Close the CGI Panel and exit the Player. All three windows that were open will close. Part 5: Count Received Calls This page explains the procedure for adding an incoming call count function and displaying the count on a text node in the Main Menu scene in CGI Studio. A "Received Calls: %d" text node is added to the Main Menu scene, and the call count is updated as a relative value each time the IncomingCall_StateMachine enters the CallActive state using the Send Value As Event behavior. Furthermore, the Value and Format String behaviors are connected to the Fusion node of the TextNode to format and dynamically display the counted incoming calls on the screen. Finally, the operation of displaying calls with the Enter key, hiding them with the ESC key, and verifying that the incoming call count is correctly updated is performed using the Player.   Incoming Call Count Configuration Adding a TextNode After selecting the [ Scenes > Main Menu ] scene in the Solution Explorer, double-click it. The Main Menu scene will be displayed in the Scene Tree panel. Drag and drop the Text Node from the [Node 2D] in the Toolbox panel onto the Main Menu scene in the Scene Tree.  The Text Node will be displayed in the Scene Editor as "Text". Set the following properties for the added Text Node in the Properties panel. Transformations>Position X 325 Y 0 2D Text Node>Text Received Calls: %d OnEntry Settings Double-click IncomingCall_StateMachine in the [ State Machines ] folder in the Solution Explorer.  The State Machine Editor will be displayed. With the CallActive State selected, click [ Fusion ] at the bottom left of the State Machine Editor panel.  The Fusion panel for the CallActive State will be displayed.   Drag the [ On Entry Actions ] connector on the right of the CallActive Fusion node and move the mouse.   A link will appear as you move the mouse, so release the left mouse button at the any location. The [ Select Behavior ] dialog will be displayed. The selectable behaviors will be displayed by category. Select “Action > Property > Send Value As Event” from the list and connect it to the top node.  You can also narrow down the list of behaviors in the dialog by entering “Send Value As Event” in the search field at the top of the dialog. Send Value As Event is connected to [ CallActive > On Exit Actions ].   The settings in the table below are made for the connected Send Value As Event.  When the CallActive State is entered, a relative value (Relative) 1 is sent to the TextNode that was just added. TargetNode Scenes>Main Menu>TextNode Value Ulnt32, 1 ChangeValue Relative Adding a TextNode Double-click IncomingCall_StateMachine in the [ State Machines ] folder in the Solution Explorer.  The State Machine Editor will be displayed. After selecting a TextNode on the scene tree, click [Fusion] displayed in the Extra Scene Tree on the left side of the scene tree. The Fusion panel will open, and the Fusion diagram for TextNode Fusion will open. Drag the [ Behaviors ] connector on the right of the TextNode Fusion node and move the mouse.   A link will appear as you move the mouse, so release the left mouse button at the any location. The [ Select Behavior ] dialog will be displayed. The selectable behaviors will be displayed by category. Select “Value Processing > Value” from the list and connect it to the top node.  You can also narrow down the list of behaviors in the dialog by entering “Value” in the search field at the top of the dialog. Send Value As Event is connected to [ TextNode > Behaviors ].   Drag the [ Receivers ] connector on the right of the Value Behavior Fusion node and move the mouse.   A link will appear as you move the mouse, so release the left mouse button at the any location. Select “Value Processing > Format String” from the list and connect it to the top node.  You can also narrow down the list of behaviors in the dialog by entering “Format String” in the search field at the top of the dialog. Send Value As Event is connected to [ Value > Receivers ].   Enter “Received Calls: %d” in the [ Text ] of the Format String Behavior Fusion node. Verifying Action Use the Player to check the operation of the configuration you have set in the previous section. Checking the incoming call count operation Click the [ Play selected scenario ] icon on the toolbar to start the Player. Three windows will open, and in one of them, the simulation display, in addition to “Navi Title” and “Navigation”, “Received Call: 0” will be displayed to the right of “Navi Title”. By pressing the Enter key on the keyboard, the text “Incoming Call” will appear on the screen. As a result, “Received Call: 0” changes to “Received Call: 1”. Pressing the ESC key on the keyboard hides the “Incoming Call” text displayed on the screen. Press the Enter key on the keyboard again to make “Incoming Call” reappear, and it will change to “Received Call: 2”. As a result, you can confirm that the number of incoming calls is being counted correctly. Close the CGI Panel and exit the Player. All three windows that were open will close.