The Widget Editor allows you to create custom UI components (i.e. widgets) for your game.
Custom widgets can be displayed in-game using the Show Widget scripting function. You can also add them to the management screen by going to the “Screens” tab of the UI Editor and adding their IDs to the comma-separated list of custom widgets.
To create a new widget, click the “Add” button () on the main toolbar and then provide a unique ID that will be assigned to it. Once created, the width and height of the widget can be adjusted from the “Widget Properties” panel on the left-hand side of the editor. Elements (item slots, text fields, buttons, etc.) can be dragged and dropped from the “Widget Tools” panel onto the grid layout of the widget.
Elements that have been placed can be resized by selecting the element and then dragging the handles of the selection box. To delete an element, select it and press the Delete key or drag and drop it outside of the widget.
See the “Elements” section below for a description of each element type that can be added to a widget.
Icon | Function | Description |
---|---|---|
Save Widget | Saves changes to the widget. | |
Add Widget | Opens a popup dialog for adding a new widget. | |
Duplicate Widget | Duplicates the currently selected widget. A popup dialog will prompt for a unique ID that will be assigned to the new widget. | |
Remove Widget | Deletes the currently selected widget from your game project. This action cannot be undone. | |
Preview Background | Changes the background color of the Widget Editor's viewport (for previewing purposes). | |
Display Grid | Enables/disables display of the grid lines to aid in the placement of elements within the widget. | |
Display Element Type Icons | Enables/disables display of type icons for certain elements, for example a “chest” icon for item storage slots. This can help in quickly identifying different types of slots from each other. | |
Open Folder Location | Opens the “widgets” resource folder within your game project folder using the system's file explorer. |
The “Widget Properties” panel contains various settings that can be adjusted for the active widget. It is displayed on the left-hand side of the editor when no elements are currently selected.
Icon | Property | Description |
---|---|---|
Widget ID | Unique ID assigned to the widget. This ID is used to reference the widget in scripts and other places. | |
Display Name | Name shown in the “Widgets” dropdown on the main toolbar. This is only used by the editor for display purposes. | |
Grid Width (Columns) | Width of the widget, or number of columns in the grid. Elements placed into the widget are aligned to this grid. | |
Grid Height (Rows) | Height of the widget, or number of rows in the grid. Elements placed into the widget are aligned to this grid. | |
Initial Position | Determines where the widget will be initially positioned on the screen. This is particularly useful for widgets that are fixed (i.e. not draggable). | |
Show Frame | Determines whether or not the frame graphic (i.e. the borders and background) is visible for this widget. Currently this graphic is inherited from the item container window style in your game's default theme. | |
Draggable | Determines whether or not the player can move the widget around by clicking and dragging the titlebar or empty area of the window. The “Show Frame” property must be enabled for this option to be available. | |
Show Titlebar | Determines whether or not the titlebar area is visible for this widget. The “Show Frame” property must be enabled for this option to be available. | |
Titlebar Text | Text that will be displayed in the titlebar of the widget. The “Show Titlebar” property must be enabled for this field to be available. |
Various elements can be added to a widget using the “Widget Tools” panel on the left-hand side of the editor. A brief description of each type is provided below. You can click on the name of a particular element for more information about that element and any properties that can edited once added to a widget.
Icon | Type | Description |
---|---|---|
Item Storage Slot | Slot for storing an item or stack of items. This is useful for inventory windows, item container windows, or other widgets that are meant for storing items into for later retrieval and usage. | |
Item Quick Slot | Slot for assigning an item to that the player currently possesses (for example, a health potion). This type of slot acts as a shortcut and allows the player to easily access the item during gameplay instead of being required to open their inventory. | |
Equipment Slot | Slot for equipping an item to (for example, a sword or shield). The player can equip an item to the slot if the item has been configured as equippable in the Item Editor and it includes a tag matching the slot ID assigned to the equipment slot. | |
Skill Slot | Slot for assigning a skill to (for example, a healing spell or physical ability). | |
Shop Item Slot | Slot for allowing an item to be purchased by the player. The cost of the item is configured in the Item Editor. | |
Crafting Input Slot | Slot that an item can be placed into for crafting purposes. Adding multiple crafting input slots to a widget, along with a button configured as a “Crafting” button, will allow the player to combine items together to create something new. The ingredients/materials required to craft a particular item is configured in the Item Editor. | |
Text Label | Element for displaying plain text (for example, a header or label to accompany an adjacent element or group of elements). | |
Text Field | Element for displaying text within a scrollable box. This is useful for descriptions and other instances of multi-line text that could vary in length. It can also be used as a text entry field, allowing the player to input text. | |
Button | Clickable element that can be configured to run a script, close the parent widget, craft a new item into a storage slot using any populated input slots, or craft a specific item using the player's inventory. | |
Image | Element for displaying a static image. | |
Progress Bar | Element for visualizing the progression of a value relative to a maximum value (for example, a traditional HP bar to show the player's current health compared to their maximum health). The tracked value and its maximum value are currently set using variable expressions. | |
3D Model | Element for displaying a 3D model that the player can rotate by clicking and dragging. This is currently limited to displaying the player character's model, with future updates allowing it to display others. | |
Minimap | Element for displaying a top-down view of the current map. |