Basic Operation

CGI Studio 3.13 and later supports "Undo and Redo" operations in State Machine Editor. (However, adding/deleting/editing Inflection Point of a transition is not supported.)
"Undo and Redo" operations, see Undo and Redo Operations for details.

How to create a new State Machine

There are two ways to create a new State Machine

Create from Solution Explorer

After selecting any location on the Solution Explorer such as Solution folder, select [ Add > New Item... ] from the context menu. ] from the context menu.
- The [ Add New Item ] dialog box appears.
Select StateMachine from the menu on the left side of the dialog and configure the settings in the menu displayed on the right side.
Press the [ OK ] button at the bottom of the dialog.

Create from the menu bar

From the menu bar, select [ State Machine > New State Machine... ].
- The [ Add New State Machine ] dialog box appears.
Configure the settings in the dialog and press the [ OK ] button at the bottom of the dialog.

Multiple State Machines can be created in the Solution Explorer. Each State Machine is associated with a specific scope defined by its placement.For example, you can create a different State Machine for each scene to manage behavior according to scope.

Adding to any node in the scene tree (State Machine behavior)

When a State Machine is created for a node in the scene tree, it is automatically associated with that node. Once the association is complete, the State Machine can be configured using the State Machine Editor.

After selecting any node in the scene tree, select [ Add State Machine... ] from the context menu.
- The [ Add New State Machine ] dialog box appears.
Configure the settings in the dialog and press the [ OK ] button at the bottom of the dialog.
- The created State Machine is added in the Solution Explorer.

The added State Machine is automatically connected as a State Machine behavior in the extra scene tree of the target node. This connection allows the State Machine to receive all events generated by the target node and trigger the appropriate action based on the predefined logic. This mechanism allows for more intuitive and efficient control by linking visual elements (nodes) with behavioral logic (State Machines).

GlobalStateMachine Settings

Enabling the [ Is Global ] property in the StateMachine Properties section sets the State Machine as a GlobalStateMachine.It applies to all scenes in the solution and starts working automatically when the solution starts.

Multiple GlobalStateMachines can be set up as needed. This feature can be leveraged to manage complex behavior across the entire solution.

Global State Machine

The Global State Machine is a State Machine that affects the entire solution. It is applied to all scenes contained in the solution, and starts operating automatically when the solution starts.

If an event that occurs at any node in the Scene Tree is not handled by a Local State Machine, the Global State Machine receives and handles it.
It is possible to set multiple Global State Machines. All Global State Machines can receive events that were not handled by Local State Machines and handles it.

Local State Machine

A Local State Machine is a State Machine associated with a specific node (an element within an application).

Local State Machines receive all events from the connected node.
It is possible to set multiple Local State Machines. If an event is not handled by a Local State Machine, other Local State Machines and Global State Machines will receive the event.

A newly created State Machine is a Local State Machine by default. To change this to a Global State Machine, check the [ Is Global ] box as described above.

Priority of Transitions

When multiple transitions are connected to the same State, the priority of the transitions can be set in the following two ways. Based on this priority, condition matches are checked in order of priority, with the Transition that satisfies the condition first being executed.

This feature is especially useful when multiple transitions have the same occurrence condition, allowing for clear control of expected behavior.

Settings on the State/Transition view

Transitions are displayed in a treeview in the upper left corner of the State machine editor. In this tree view, Transitions are listed from top to bottom in order of priority.

The priority can be easily changed by dragging and dropping with the mouse. For example, in the case shown in the orange frame below, Transition_1 has the highest priority and Transition_2 has the lowest priority.

Settings on the Properties panel

All transitions that have already been set for the target State are displayed in the [ Transitions>Exit Transitions ] section of the target State's Properties panel. They are listed here in order of priority from top to bottom.

The priority order can be easily changed using the [ Move Item Down ] and [ Move Item Up ] icons (orange boxed area in the figure below). For example, in the figure below, Exit_Transitions 0 (= Transition) has the highest priority and Exit_Transitions 2 (= Transition_2) has the lowest priority.

Add Element

Each element placed in the State Machine Editor upper toolbar can be dragged and dropped onto the diagram. Please note the following restrictions when placing the elements.

One Initial State can be placed on each State Machine.
History State/Entry Point/Exit Point can only be placed in a Subchart.

Add a Transition

The procedure for interconnecting States using Transitions is a two-step process described below.

Drag and drop a Transition
From the upper toolbar onto the State to be connected with the Transition dragged. At this point, move the mouse to visually confirm that the arrow is being dragged.
Select the destination State
Drag the arrow to the destination State and click the mouse to connect to the destination State.

Transition Inflection Points

You can add a Inflection Point to the location you click by holding down the Ctrl key while clicking on a Transition that has already been placed on the diagram. By adding an inflection point, you can change the display form of the transition on the diagram.

Changing Element Size

State/History State/Subchart/Note can be resized to any size on the diagram. After adding it on the diagram, you can resize it by dragging the resize handle with the mouse.

Deleting an element

Elements placed on the diagram of the State Machine Editor can be deleted by doing the following

After selecting the element to be deleted on the diagram, press the Delete key.
In the editor tree on the State/Transition view, select the element to be deleted, then press Delete (or select [ Delete ] from the context menu).

Subchart

In addition to dragging and dropping a Subchart from the top toolbar onto a diagram, you can also place it on a diagram by converting it from an existing State.

Converting to Subchart

A State can be converted to a subchart by selecting "Convert to Subchart" from the context menu after selecting the State to be converted. The original State name is still used after conversion, but can be changed to any name if necessary.

Entry Point/Exit Point's Placement and Display

Entry/Exit Points can be placed along the edges of the Subchart. This clearly defines the flow in and out of the Subchart. When viewing the Subchart on a diagram, these points are also visually indicated, making it easier to grasp the overall flow. Entry/Exit Points can be freely rearranged. Appropriate placement of Entry/Exit points further optimizes the structure of the State Machine and makes the design easier to understand.

Note

You can add Note to your diagrams in the State Machine Editor. To add a Note, drag the Note from the State Machine Editor toolbar onto the diagram.

Note can be resized in the same way as States, using the resize handles. Note titles can be edited in the Properties panel. Clicking on a Note puts it in text editing mode.

Design Options

When State/Transition is selected on a diagram in the State Machine Editor, the following context menu appears.

Copy	Copies each selected element. The copied elements can be pasted onto the diagram using the Paste operation.
Paste	Pastes a copied element onto a diagram. However, this does not work for some elements such as Transitions.
Convert to Subchart	Convert the selected State to Subchart. See here for details.
Align	When multiple items are selected while holding down the Ctrl key, the display position of the selected items can be aligned. The alignment can be selected from Left, Center (left/right), Right, Top, Center (up/down), Bottom, Distribute Horizontal, and Distribute Vertical.
Customize	Decorate the State with any image or fill it with any color. For details, please refer to Changing Styles.

Changing Styles

The following are the selections available for Customize menu.

Select Image

Set the background image for State. There are two ways to set it.

From Solution Explorer...	The [ Select Item ] dialog opens, allowing you to select any image. It is assumed that the images that can be selected have been imported into the solution beforehand.
From Local File...	Opens the Windows OS Select File dialog where you can select any image.

Restore to Defaults

Restores the default settings for elements for which design options are enabled. The range of default settings can be selected from the following menu.

All	Resets all design settings for the target element to default.
Image	Only the image set for the target element will be restored to default.
Fill Color	Only the fill color set for the target element will be restored to default.
Transition Text Color	Only the Transition text color will be restored to default.
Transition Details Visibility	Only the Transition detail display settings will be restored to default.
Connection Type	Only the Transition connection type (line type) will be restored to default.（The default settings for Transition connection types can be found in Preferences).

Refresh Image

This option is only available if an image is already selected for the target State. Reload the image from a file or create a new screenshot from the scene/camera.

Show Transition Details

When this option is enabled, the detailed information portion of the text content displayed in the Transition, such as actions, will be hidden.

Show Image Inside Subchart

This option is only available for State in Subchart. If this option is enabled, the image set for the State can be displayed as the Subchart background image.

Show Fill Color Inside Subchart

If the "Change Fill Color" option (described below) is set for the target State, enabling this option will cause the background color set for the State to be reflected in the Subchart background color.

Change Fill Color

You can change the background color of the State. Selecting this option opens the [ Color Palette ] dialog, set the desired color and click [ OK ].

Change Transition Text Color

You can change the name text color setting for Transition. Selecting this option opens the [ Color Palette ] dialog, set the desired color and click [ OK ].

Using Shortcut Keys

In the State Machine Editor, you can use shortcut keys to perform some operations more efficiently. This allows you to perform tasks such as adding items easily and quickly.

Operation Procedure with Shortcut Keys

Mouse over
Move the mouse cursor to any location or element on the diagram.
Check for shortcut keys
All available shortcut keys are displayed in the lower left corner of the Scene Composer.
Enter a shortcut key
Select one of the displayed shortcut keys you wish to use and enter it on the keyboard.
- In the example below, Transition, State, Subchart, Choice, Initial State, History State, and Note can be added with shortcut keys. You can add notes by using the shortcut keys.

Diagram Bird's Eye Function

The Diagram Bird's Eye panel can be displayed by selecting [ View > State Machine > Diagram Bird's Eye ] from the menu bar. This panel provides a bird's eye view of the entire State Machine Editor panel. For more information on how to view the panel and basic operations, see Diagram Bird's Eye.