Skip to main content

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.

  1. In [Solution Explorer], select [Scenes > Phone], then choose [Clone] from the context menu.

    • The [Clone Item] dialog will appear.

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

     

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

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





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

       

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




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

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

  1. In the Render Target panel, select IncomingCall/Camera.
    • The properties of the IncomingCall camera will be displayed in the Properties panel.

  2. In the Properties panel, change the value of [Sequence Number] in the [Camera] category to 4.

  3. Next, select Swap\Camera in the Render Target panel. 

    • The properties of the Swap camera will be displayed in the Properties panel.

  4. In the Properties panel, change the value of [Sequence Number] in the [Camera] category to 5.

    drawing-4-1742280096.png


Creating an IncomingCall State Machine

We will create and configure a new State Machine for the IncomingCall scene.

Creating a new State Machine

  1. Select [ State Machines > New State Machine ] from the menu bar.
    • The [ New State Machine ] dialog will appear.
  2. Click [ Browse ] at the top of the dialog.
    • The [ Select Location ] dialog will appear.
  3. Select StateMachines and click [ OK ].
    • The location “/State Machines” is selected as the save location for the new State Machine.
  4. 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.
      drawing-4-1742280069.png

Setting the Global State Machine

  1. Select the IncomingCall_StateMachine in the [ State Machines ] folder in the Solution Explorer.
    • The IncomingCall_StateMachine properties will be displayed in the Properties panel.
  2. 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

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

  2. Select a State on the State Machine Editor. 

    • The properties of the selected State will be displayed in the Properties Panel.

       

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

  4. Next, place a State from the toolbar at the top right of the State Machine Editor.

     

  5. Change the names of the added States to CallInActive.

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

  7. While Transition is ready to be placed, click on CallInactive State.
    drawing-4-1742280026.png

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
  1. 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.
  2. Drag the [ On Entry Actions ] connector on the right of the CallActive Fusion node and move the mouse.

  3. 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.
  4. 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].
  5. Repeat the same process for the [On Exit Actions] of the CallActive Fusion node to connect the Transition Request Fusion node.

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

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

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

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

  4. Select the Check Click Fusion node that is connected by default, and press the Delete key.
    • The Check Click Fusion node will be deleted.

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

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

  7. Double-click Check Key Input.
    • The Check Key Input Fusion node will be linked to the Condition connector of the Transition Fusion node.

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


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





  10. When all settings are complete, the screen will look like the one below. 
    drawing-4-1742279942.png

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.

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

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

  3. Pressing the ESC key on the keyboard hides the “Incoming Call” text displayed on the screen.

  4. Close the CGI Panel and exit the Player.
    • All three windows that were open will close.

Back to top