Basic Operation

State Machine in the Menu Bar

The State Machine menu in the menu bar, offers the following options.

New State Machine...	Select this option to create a new State Machine. For details, refer to How to Create a new State Machine.
Attach...	Connect to the currently running CGI Panel. After selecting this option, the Attach to application dialog will be displayed. Enter the IP address and port number of the target CGI Panel. This option is also used when utilizing the Debugger panel. For more details, please refer to State Machine Debugger.
Validate Active State Machine	Select this option to perform validation on the currently active State Machine.

How to Create a New State Machine

There are two ways to create a new State Machine:

1. Create State Machine in Solution Explorer

In the Solution Explorer, right click any folder (e.g. Solution).
- The context menu will open.
From this menu, select Add > New Item...
- The Add New Item dialog appears.
In the list on the left, select StateMachine, then configure the settings displayed on the right side of the dialog. Confirm your configuration by clicking OK.
- A new StateMachine item will be created in the selected location within the Solution Explorer.

2. Create State Machine via the Menu

From the menu bar, select State Machine > New State Machine... .
- The Add New State Machine dialog appears.
Configure the available settings (e.g. location, name) in the dialog and click OK.
- A new State Machine item will be created in the selected location within the Solution Explorer.

Multiple State Machines can be created using the Multiple Clones approach 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 a State Machine to a Node (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.

In the Scene Tree panel, right click any node of the scene tree.
- The context menu will open.
From this menu, select Add State Machine...
- The Add New State Machine dialog appears.
Configure the settings in the dialog and click OK.
- A new State Machine item will be created in the selected location within the Solution Explorer.
- Additionally, this State Machine appears in the extra scene tree of the associated node (see figure below), as it functions as a State Machine behavior.

A State Machine created like this 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).

StateMachine Properties

Each State Machine can operate either as a global or a local State Machine. When you create a new, empty Scene Composer solution, a global State Machine is included by default. Any newly created State Machine is a local State Machine unless you explicitly enable the IsGlobal property (see figure below).

Multiple GlobalStateMachines can be set up as needed. This capability allows you to manage complex, solution-wide behavior by coordinating logic that applies across all scenes.

Global State Machine

A Global State Machine is a State Machine that applies to the entire solution. It is active across all scenes and begins operating automatically when the solution starts.

If an event occurs on any node in the Scene Tree and is not handled by a Local State Machine, the event is forwarded to the Global State Machine, which can then process it according to its defined logic.
You can configure multiple Global State Machines. Each of them can receive and handle events that were not processed by any Local State Machines, enabling flexible, solution-wide control and coordination of behavior.

Local State Machine

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

Local State Machines receive all events generated by the node they are connected to.
You can configure multiple Local State Machines for the same node. If an event is not handled by any of these Local State Machines, it is passed on to other Local State Machines and ultimately to any Global State Machines.

A newly created State Machine is a Local State Machine by default. To convert it into a Global State Machine, enable the Is Global option as described above.

Priority of Transitions

When multiple Transitions originate from the same State, their priority can be configured in two ways. The State Machine evaluates Transition conditions in order of priority, and the first Transition whose condition evaluates to true is executed.

This mechanism is particularly useful when multiple Transitions share the same triggering condition, as it allows you to clearly define which Transition should take precedence and ensures predictable, well-controlled behavior.

Settings on the State/Transition view

Transitions are displayed in a tree view in the upper-left corner of the State Machine Editor. In this tree view, Transitions are ordered from top to bottom according to their priority - the Transition at the top has the highest priority, and the one at the bottom has the lowest.

You can easily change the priority by dragging and dropping Transitions within the tree view. For example, in the configuration highlighted in orange in the figure below, Transition_1 has the highest priority and Transition_3 has the lowest priority.

Settings on the Properties panel

Transitions pointing away from a certain State are called exit transitions. All exit transitions for a certain State are displayed in the properties panel in the Transitions > Exit Transitions section. In this list, Transitions are displayed from the top to bottom in order of priority, with the highest-priority Transition at the top.

You can easily adjust the priority using the Move Item Up and Move Item Down icons (orange-highlighted area in the figure).

Add an Element

Each element available in the State Machine Editor top toolbar can be added to the diagram using drag-and-drop. When placing elements, observe the following restrictions:

Only one Initial State can be placed in each State Machine.
History States, Entry Points, and Exit Points can be placed only inside a Subchart.

These constraints ensure correct State Machine structure and prevent invalid configurations.

Add a Transition

Interconnecting States with Transitions is a two-step process:

Drag and Drop a Transition
Drag a Transition from the top toolbar and drop it onto the source State, releasing the mouse button.
Select the destination State
Move the mouse towards the destination State. As you do so, a Transition arrow will stretch from the source State to the mouse cursor. Drag the arrow onto to the destination State and complete the connection with a mouse click.

This procedure establishes a Transition linking the selected source State to the chosen 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.

Starting with CGI Studio 3.13 , the State Machine Editor supports "Undo and Redo" operations, enabling safer and more flexible editing of State Machine diagrams.
Limitation: Adding, deleting or editing of a Transition's Inflection Point is not supported by the Undo/Redo feature.
For more information, see Undo and Redo Operations.