Dialogs

SmartUI Dialog Behavior operation and ACEs.

Dialogs are the best way to organize your UI into comprehensible and interactive containers that can be created on the fly. Keep your scene clean until you need to receive input from the user; then call a Dialog to display the required UI elements and collect the expected input.

Dialogs inherit their properties directly from Containers. They provide the same navigation capabilities and can lock the operational context when they are modal dialogs, preventing lower z-index level components from reacting to unwanted interactions. The best thing about SmartUI Dialogs is that you can instantiate as many as you want in the same layer, allowing you to create visually well-organized, complex UI games. Dialogs are complex composite objects and are structured as listed below.

Composition

1. A base container, the Dialog behavior itself.

2. Three operational buttons: close, minimize and maximize.

3. A minimized button, that will act as an icon.

These buttons are completely optional; you can still control the dialog through the available ACEs. However, it is recommended to include at least a close button to provide users with a way to dismiss the dialog.

Dialog composition

All of its components must be children of the dialog container. Each component must have a unique component name within the hierarchy to properly interact with the dialog behavior. The Dialog Behavior must be the top-most object in the hierarchy.

Dialogs are not draggable natively. By design, this feature was omitted with the assumption that the Drag and Drop behavior could cover this functionality. It's up to the developer to decide if this feature should be present.

Dialogs can be used in 3D layers, and all of their children support coordinate translation to 3D planes. To ensure correct rendering, it is recommended to set the Draw Order to be z-Ordered. See layers documentation for more details.

3D Layer draw order set to z-Order

Another key feature of dialogs is that they don't need to be included in the same layout that you are designing. You can create a separate layout to store all your dialog designs, known as a , and create an instance of the dialog only when needed. This can help save memory and processing power in your game.

Two different dialog windows are designed in a separate layout, like a prefab.

To open a dialog, you must call the Open Dialog action from the Smart UI plugin. This action is analogous to the Create Object action from the system plugin. The main difference is that Open Dialog triggers the events to animate the dialog opening, using any of the custom easings. Dialogs support templates, so you can reuse the same components to compose a dialog with different functionality.

Being able to create dialogs with the Create Object action provides an additional level of control over how they are presented. You can customize the animations to suit your needs.

Please be aware that all the children of the component must have change propagation enabled for all attributes: visible, opacity, x, y, width, height, etc. Otherwise, you will need to manually control the children's attributes.

Properties transformation should be enabled to render children correctly.

Modal Dialogs

Modal dialogs are capable of locking interactions to only the components that belong to them. This is a convenient way to focus users' attention on a particular interaction. For instance, notification windows, opening a reward chest, or character dialogs are examples of such uses. The SmartUI Dialog behavior offers this capability, which is commonly available in all UI frameworks.

When this feature is enabled, the dialog will restrict interaction to only its children. Any component below the dialog will not be interactable until the dialog closes.

Modal dialogs are stackable in the Smart UI framework. The top-most visible dialog will be the one in control.

📺 Video Demo

📺 Basic Setup - Tutorial Video

Properties

Property	Description
Enabled	Enables or Disables the dialog and all its children.
Index	Index of the dialog within layout. Used for focusing the elements in the sequence order.
Invisible Component	Turns the component opacity to 0 while rendering it to allow invisible interactions.
Focusable	Marks if the component can have the focus.
Automatic-Color	Enables the component to darken a bit when its state is Disabled or when it's focused. Auto-Color is meant to provide a quick identification of the component state. For more specialized customizations, use the component events and disable this check.
Name	Unique name string for identifying the dialog
Modal	Sets the dialog to modal-dialog, locking the interactions with any of the UI components underneath.
Auto-close	Closes the dialog automatically whenever a touch is registered outside the collision polygon of the dialog.
Minimized Icon	Container object name that represents the minimized dialog.
Close Button Name	Button's name to reference from the dialog.
Maximize Button Name	Button's name to reference from the dialog.
Max.Mode	Scale mode when maximizing the Dialog
Minimize Button Name	Button's name to reference from the dialog.
Open Animation	Opening animation
Open Animation Easing	Easing function for the opening animation.
Open Animation time	Time in seconds to complete the animation.
Close Animation	Closing animation
Close Animation Easing	Easing function for the closing animation.
Close Animation time	Time in seconds to complete the animation.

Smart UI Dialog Behavior ACEs

Smart UI Dialog behavior groups UI components, provides focusing abilities and default interactions to navigate within the dialog and its children components that uses Smart UI behaviors, and handles cascading Enabling/Disabling events. It also responds to pointer interactions prioritizing by zIndex.

Actions

---

Set Enabled

Disable/Enable the Button

Parameter	Description
Enabled	Enabled/Disabled

Set Name

Sets the name of the component.

Parameter	Description
Name	Name of the component

Set Sequence

Sets the sequence index to influence the selection of components.

Parameter	Description
Index	Sequence index value. E.g. Indexes values of 0 are processed before indexes values of 1 and 2.

Set Focusable

Disable/Enable the Button

Parameter	Description
Focusable	Flag to allow the component to be focused.

Set Focus

Request the focus for this dialog

Focus First Element

Request the focus for the first interactable element of the dialog.

Focus Last Element

Request the focus for the last interactable element of the dialog.

Set Invisible Component

Turns the component opacity to 0 while rendering it to allow invisible interactions.

Parameter	Description
Invisible Component	Set if the component processed even if it's invisible: True/False

Close

Closes the dialog.

Restore

Restores the dialog.

Minimize

Minimizes the dialog.

Maximize

Maximize the dialog.

Conditions

---

Is Enabled

Returns true if the dialog is enabled

Is Invisible Component

Returns true if the Button is configured as an invisible component.

Compare Name

Returns true if the radio button components name equals the parameter

Parameter	Description
Name	Name to compare with the component picked.

Is Focused

Returns true if the Button has the focus

Has Control

True if the dialog has the control to navigate over components.

On Open

Triggered when the dialog opens. If it's animated, it triggers when the animation finishes.

On Close

Triggered when the dialog closes. If it's animated, it triggers when the animation finishes.

On Maximize

Triggered when the dialog maximizes

On Minimize

Triggered when the dialog minimizes

On Restore

Triggered when the dialog restores back to its original state.

On Focus

Triggered when the dialog gets the focus

On Focus Lost

Triggered when the dialog loses focus

Is Open

Returns true if the dialog is Open

Is Minimized

Returns true if the dialog is Minimized

Is Maximized

Returns true if the dialog is Maximized

Expressions

---

Name

Component name

(c) Pixel Perfect Studio 2024