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

A base container, the Dialog behavior itself.
Three operational buttons: close, minimize and maximize.
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.

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.

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.

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.

Modal dialogs are capable of locking interactions of other SmartUI components 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 SmartUI 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.

Download

https://store.pixelperfectstudio.mx/product/smart-ui-ncbeta/

📺 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

Auto-focus Child

Upon receiving focus, it transfers the focus to the immediately available child component. If no valid component is found, it will navigate through the available inner containers to locate the next valid element.

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

`Close`

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

`Maximize`

Maximize the dialog.

`Minimize`

Minimizes the dialog.

`Restore`

Restores the dialog.

`Set Auto-focus Child`

Indicates if the focus should be passed to the first available child, upon receiving focus.

Parameter

Description

Enabled

Enabled/Disabled

`Set Enabled`

Disable/Enable the Button

Parameter

`Has Control`

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

`Compare Name`

Returns true if the radio button components name equals the parameter

Parameter

Description

Name

Name to compare with the component picked.

`Is Enabled`

Returns true if the dialog is enabled

`Is Focused`

Returns true if the Button has the focus

`Is Invisible Component`

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

`Is Maximized`

Returns true if the dialog is Maximized

`Is Minimized`

Returns true if the dialog is Minimized

`Is Open`

Returns true if the dialog is Open

`On Close`

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

`On Focus`

Triggered when the dialog gets the focus

`On Focus Lost`

Triggered when the dialog loses focus

`On Maximize`

Triggered when the dialog maximizes

`On Minimize`

Triggered when the dialog minimizes

`On Open`

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

`On Restore`

Triggered when the dialog restores back to its original state.

Expressions

`Name`

Component name

(c) Pixel Perfect Studio 2025

PreviousScroll Bar NextScroll View

Last updated 3 months ago

Was this helpful?

Composition

Modal Dialogs

📺 Video Demo

📺 Basic Setup - Tutorial Video

Properties

Smart UI Dialog Behavior ACEs

Actions

Close

Focus First Element

Focus Last Element

Maximize

Minimize

Restore

Set Auto-focus Child

Set Enabled

Set Focus

Set Focusable

Set Invisible Component

Set Name

Set Sequence

Conditions

Has Control

Compare Name

Is Enabled

Is Focused

Is Invisible Component

Is Maximized

Is Minimized

Is Open

On Close

On Focus

On Focus Lost

On Maximize

On Minimize

On Open

On Restore

Expressions

Name

`Close`

`Focus First Element`

`Focus Last Element`

`Maximize`

`Minimize`

`Restore`

`Set Auto-focus Child`

`Set Enabled`

`Set Focus`

`Set Focusable`

`Set Invisible Component`

`Set Name`

`Set Sequence`

`Has Control`

`Compare Name`

`Is Enabled`

`Is Focused`

`Is Invisible Component`

`Is Maximized`

`Is Minimized`

`Is Open`

`On Close`

`On Focus`

`On Focus Lost`

`On Maximize`

`On Minimize`

`On Open`

`On Restore`

`Name`