Smart UI Framework

Framework for Construct 3

Smart UI is a framework and set of addons designed to simplify UI design and development in the Construct 3 game engine. One of Construct 3's weakest features is UI design, as it relies entirely on HTML/CSS, which tends to perform poorly when exported to the Cordova wrapper. As a result, many developers have opted to create their own UI systems using sprites and custom ACEs within the engine to achieve the desired behavior. However, the main drawback of this approach is its low portability, as Construct lacks the prefab capabilities provided by other engines, limiting reuse. This challenge led to the development of Smart UI, a plug-and-play set of addons that can be included in any world instance to function as specific UI components.

All the addons were built with support for the following features/capabilities:

• UI composition and navigation based on the Object Hierarchy/Scene Graph.

• Long-term compatibility with native Construct 3 SDK features.

• Container-based interactions for managing component focus, document flow, and default actions, as well as grouping components to create operational contexts.

• Focus management, sibling interactions, and clipping based on containers and views.

• Modal and non-modal dialog windows.

• Load/Save game states.

• zIndex-based interactivity to respond to the top-most valid components.

• Flexibility for custom design.

• Simple implementation and easy-to-understand ACEs.

• Advanced minification using UglifyJS (Closure Compiler is not supported).

• Worker mode support for all addons.

Available Addons

SmartUI includes 12 addons to fulfill your UI needs. In combination, they can create powerful and complex UI's, and provide an instant polished feel to your games.

SmartUI addon integration fully depends on Construct 3 object hierarchy. For composite addons like dialogs, scrollbars, scrolviews and gridlayouts, their sub-components and children must be children of the main component.

Smart UI Addons

Below, youll find a briefing about each of the avilable addons and their type.

All of the addons are empty vessels that comunicate with the framework, therefore you are required to always add the SmartUI Framework plugin to your projects. Initialization and component communication is done automatically.

By design, you can only add one SmartUI behavior to your instances.

Addon	Description	Type
Smart UI	Loads the framework and enables the SmartUI addons to communicate with Construct 3.	Single Global Plugin
Push Buttons	React to user mouse/touch interactions with custom animations and easings.	Behavior
Check Boxes	Lets you manage boolean values by toggling the check state. Also includes custom animations and easings.	Behavior
Radio Buttons	Under the same operational context, allows you to select only one object within the group.	Behavior
Discrete Progress	Under the same operational context, represent an integer value within a group of sprites, distributing the number within the available parts of a sprite.	Behavior
Progress Bars	Represent a discrete value in a bar. Provides custom animations and easings when setting the value.	Behavior
Scroll Bars	Behaves like a slider or a scrollbar, the last if the object is composed with additional buttons in the layout. Handles float and integer values in a range.	Behavior
Containers	Group objects and create operational context for their siblings. Manages navigation, focusing and event propagation to its children.	Behavior
Dialogs	A complex composite object that behaves like a dialog window, with modal capabilities. Can be maximized, minimzed, or closed like a regular dialog and has custom animations and easings.	Behavior
Grid Layout	Composite object that lays out your existing scene objects, or Renders objects in a grid layout from a datasource. When using a datasource, it triggers data-render requests.	Behavior
Scroll View	Composite object that renders all its children within a viewport.	Behavior
Data Listener	Reacts to data-render request from components, allowing you to decide what to do with the provided data. ℹ️ This behavior can co-exist in the same instance that has a SmartUI behavior.	Behavior

Basic Setup Tutorials

I've created a playlist with all the tutorials for basic setup of each component. Take some time to look at them, most are between 3-5 minutes long, and you will get valuable information to quickly start building your game.