About

Smart UI is a framework and a set of addons developed with the purpose to simplify the UI design and build in the game engine Construct 3. The framework is still in development but has already reach a stage where the addons and the design components are fully usable to create functional UI's.

The framework came from the need of upgrading the existing tools and addons from Construct's SDK v1 which has evolved into the SDK v2, introducing breaking changes and forbidding backwards compatibility for the tools developed by the community. Therefore, I decided to develop my own framework, highly integrated with the current SDK and aiming to live for long to keep my game projects running for several years. Compatibility with the SDK v2 is a major challenge, considering that the current state of the SDK is still in development, but with a stable version already rolled out.

As part of this project, I've been reporting multiple bugs that Scirra, who has been resolving them swiftly, allowing me to move on and complete the milestones I've set for these addons, while helping the Construct 3 community to have a more stable SDK in the process.

Products and Milestones

This is a big project, since it has to consider multiple use cases and testing scenarios to be properly integrated with the game engine. Therefore, all the addons must support the following minimum features:

• Advanced Minification.
• Load / Save game states.
• zIndex based interactivity.
• Automatic focusing and siblings interactions.
• Managing Multiple dialog windows in the same layout and layer.
• Object containers to manage the components focus, document flow and default actions, as well as grouping components.
• Flexibility for custom design
• Simple implementation and comprehensible ACE's
• Integration with C3 through native SDK features and UI composition through the Objects Hierarchy / Scene Graph.

With above points in mind, I've come a list of the components that need a short-term replacement since they were provided by existing products that will get deprecated by 2025. All of these UI components will be provided in the form of Behaviors, allowing the game developers to utilize them in different forms to suit their needs.

All of above are being designed and developed aiming to provide out-of-the-box animations and functionalities, but also flexibility for customizing its appearance and interactions through the set of ACEs available for each addon.

At the current stage of development, these are the components available and working.

Available Addons Features

Smart UI

Icon	Dev. Stage	Type
	Alfa	Plugin

Smart UI Plugin. Automatically loads the SmartUI framework to controll all the components. It will automatically communicate with all the Smart UI addons to provide a proper response to interactions and ACEs.

Creating objects that use the SmartUI behaviors will automatically register their instances in the framework, allowing you to dinamically create more complex and custom components on the fly, using hierarchies and object templates.

Main Features:

• Enable/Disable the framework preventing interactions.
• Container and Dialog pass-control logic, to provide automatic component navigation through default keyboard inputs or plugin actions.
• Dinamically create and trigger open animations for dialogs

Push Buttons

Icon	Dev. Stage	Type
	Alfa	Behavior

Smart UI Button behavior covers all the basic functionality of a Push Button, handles event animations, provides built-in animations and easings, and triggers user event interactions.

The behaviors allows you to set Enable/Disabled, Hover, Press, Focus and Restore animations for Sprite plugins, and provides a list of built-in easings to instantly give a highly polished finishing.

Main Features:

• Focusable Component with priorization index using document flow.
• zIndex priorization reaction
• Built-in easings for animations
• Multiple Sprite animations for each button state
• Automatic context detection based on objects hierarchy tree.

Radio Buttons

Icon	Dev. Stage	Type
	Alfa	Behavior

Smart UI Radio Button behavior. Controls the object like a radio button, with values: check, and unchecked. It handles ten diferent sprite animations to match all the states of the object, and can be animated with several built-in animations and easings. Reacts accordingly to the context where it is placed.

Main Features:

• Focusable Component with priorization index using document flow.
• Automatic detection of context. Radio-buttons will interact with other radio buttons grouped in the same container/dialog window.
• zIndex priorization reaction
• Built-in easings for animations
• Multiple Sprite animations for each button state
• Automatic context detection based on objects hierarchy tree.

Check Boxes

Icon	Dev. Stage	Type
	Alfa	Behavior

Smart UI Checkbox behavior. Controls the object like a checkbox, with values: check, and unchecked. It handles ten different sprite animations to match all the states of the object, and can be animated with several built-in animations and easings.

Main Features:

• Focusable Component with priorization index using document flow.
• zIndex priorization reaction
• Built-in easings for animations
• Multiple Sprite animations for each button state
• Automatic context detection based on objects hierarchy tree.

Progress Bar

Icon	Dev. Stage	Type
	Alfa	Behavior

Smart UI Progress Bar behavior handles progress bar UI components. It provides built-in animations and triggers to handle value changes. The component relies on its width. If you use it as part of a hierarcy, you must add it to an object using a Smart UI Container behavior to be rendered correctly, since it will use its parent width as the base for rendering.

Main Features:

• Built-in easings for animations
• Rendering based on component's width or context width (containers and dialogs).
• ACEs to get animated values and actual values to render progress.
• Automatic context detection based on objects hierarchy tree.

Discrete Progress Part

Icon	Dev. Stage	Type
	Alfa	Behavior

Smart UI Discrete Progress Part behavior handles progress parts UI components to represent an integer value with multiple heterogeneous sprites and animations. If you use it as part of a hierarcy, you must add it to an object using a Smart UI Container behavior to be rendered correctly, since it will use its parent to determine the total Discrete Progress Part components available to alter.

Just like radio buttons, Discrete Progress Parts will automatically communicate with their siblings in the same context regardless of their object type, it can manage multiple animations and multiple different parts for all the sprites in the same context. For instance, you can use a hearth with 2 parts plus a 6-slices pie in the same group and render up to 8 different animations to represent a value.

Main Features:

• Rendering based on context (containers and dialogs).
• Multiple sprites and animations support to render a single value with several different parts.
• Automatic context detection based on objects hierarchy tree.

Scroll Bars

Icon	Dev. Stage	Type
	In Development	Behavior

Smart UI Scroll Bars provide a discrete and step value capabilities, allowing you to handle float or integer numbers. It's composed by a progress bar and a push button to work like a slider.

Main Features:

• Focusable Component with priorization index using document flow.
• zIndex priorization reaction
• Automatic context detection based on objects hierarchy tree.
• Composition by component's name

Containers

Icon	Dev. Stage	Type
	Alfa	Behavior

Smart UI Container behavior groups UI components setting a context, provides focusing abilities, and default interactions to navigate within the container and its children components that uses Smart UI behaviors.Handles cascading Enabling/Disabling events. It also responds to pointer interactions prioritizing by zIndex.

Main Features:

• Focusable Component with priorization index using document flow.
• Automatic context detection based on objects hierarchy tree.
• Component grouper.

Dialogs

Icon	Dev. Stage	Type
	Alfa	Behavior

Similarly to a container, Smart UI Duakigs behavior groups UI components setting a context, provides focusing abilities, and default interactions to navigate within the container and its children components that uses Smart UI behaviors. Handles cascading Enabling/Disabling events. It also responds to pointer interactions prioritizing by zIndex.

It provides also built-in animations and easings, maximize, minimize, restore and close capabilities. Can be instantiated dinamically through create object, or it can be opened using the SmartUI Plugin OpenDialog action to trigger animations. Multiple dialogs can be rendered in the same layer and in the same layout.

Dialogs are components that require other objects to be fully created. You can add their interaction buttons like close and minimize through component's name as long as a dialog is the top-most object in a hierarchy.

Main Features:

• Focusable Component with priorization index using document flow.
• Automatic context detection based on objects hierarchy tree.
• Component grouper.
• Modal dialog capabilities.
• Minimization, Maximization, Restore, and Close actions.
• Composition by component's name

Pricing and Licensing

I know the community is eager to have open-source and license-free addons, nevertheless it will be impossible to keep these projects running without funding. Therefore, SmartUI will be out for sale at a reasonable price for indie developers. The final prices is still to be calculated.

The framework won't be provided as an open-source tool, since their main purpose was to serve also for my game-dev projects, properly protected by copyright laws.

What's the difference between a large pizza and a game-developer? A. A pizza can feed a family of four!

Plugin Functionality Demonstrations

Since this project is still in development phase, the definitive demos and videos will be worked later as I reach stable version of the addons, closer to the launch date, which is still to be defined nevertheless I'm aiming for 2024.

If you'd like to know more about the project, follow my social media and feel free to provide feedback and suggestions to create a more robust set of addons.

Thank you for reading through!

View this post on Instagram

A post shared by Pixel Perfect Studio | Indie Gamedev (@ppstudiomonterrey)

View this post on Instagram

A post shared by Pixel Perfect Studio | Indie Gamedev (@ppstudiomonterrey)