UI Editor

Overview

The UI editor can be used to add UI components to the game, by containing them within screens. A screen is a user-defined UI container that is stored in a JSON file with all of the relevant widget information. The aim of this editor is for the developer to define a variety of UI screens for the current level, such that they can quickly switch between them in the game.

The below image shows an example of how the UI editor was used to create a variety of different widgets spread across two different UI screens.

Example Use Case

1. Add a blank screen to the editor by clicking the Add New Screen button.
2. (Optional) The developer can then choose to load a JSON file which will apply widgets to the blank screen for modification.
3. The developer can then select the Widgets header and from there select the node of the widget that they wish to modify.
4. For each widget, the developer can change the name, type, position, and scale.
5. The developer can also delete the current widget by selecting the Remove Widget button, or add them by clicking the Add New Widget button.

Advanced Features

The UI editor also implements an action system. Actions are commands that are currently to be defined by the developer in the associated JSON file. The developer can set the action to be whatever they want but must take note of the type of widget that the action is being applied to.

After defining a custom action in the appropriate JSON file, the developer can navigate to UIScreen.cpp and define their own logic for handling the action that they previously defined. Depending on the type of widget that the action is tied to, will depend on how the action is checked, and thus how it is handled by the system, according to how the developer has defined the behaviour.

The below example shows a check for the action Close on the button widgets, such that if a button defines this action, and it is clicked by the user in the game, the relevant logic is processed to close down the application, otherwise a standard static button is used.

if ( m_vButtons[i].GetAction() == "Close" )
{
    // Quit Game
    if ( m_vButtons[i].Resolve( "Quit Game", Colors::White, m_textures, m_mouseData ) )
        EventSystem::Instance()->AddEvent( EVENTID::QuitGameEvent );
    m_vButtons[i].Update( dt );
}
else
{
    // Default
    m_vButtons[i].Resolve( "-PlaceHolder-", Colors::White, m_textures, m_mouseData );
    m_vButtons[i].Update( dt );
}

New Features

• Z indexing was added, to allow developers to change widget draw order on a given UI screen.
• The option to hide widgets was added and can be saved to the JSON files.

---

Page Author: Kyle Robinson