UI Editor

Ui Editor Tool made with Bean Engine for Water Leaks Studio

Reasons for the tool

During the development of Spite: Bleeding Skies a programmer colleague and graphics spent a lot of time manually editing json files with no way to see a preview of the menues without running the game. This caused a lot of time wasted waiting for the game to run between every miniscule change done in the json file and it was very difficult for graphics to get a good look of how the menues were going to appear in the game without getting help from a programmer.
I wanted to save time for graphics and programming by creating a tool that would give graphics the freedom to play around with the menu layouts, get a visual preview of how the menues would look and gain more independency when creating menues. In order for the tool to be as useful as possible I requested testing and feedback from our graphic designers throughout the development process.

Features

All menues in the editor are made using ImGui and the functionality of the editor is made with our student made engine called Bean Engine.

Creating UI elements

You can create buttons, sliders and visuals in the editor with a drop down menu. I wanted to make sure every UI element has a name, therefore I created an unskippable pop up on the middle of the screen that prompts you to write a name.

Changing textures

After creating an item you can easily change the texture of the item by clicking on a sprite from the drop down menu. I use information from the asset manager to find the folder containing sprites and iterate through all relevant elements in this folder. This enables the user to choose freely between all the sprites in the folder as well as enforcing our standards for naming and where sprites are meant to be kept. The UI element will change size to the size of the new texture to prevent distorting the aspect ratio of the texture.

Moving and resizing

I wanted to make the moving and resizing of the UI elements as easy and user friendly as possible. I created my own resize symbols and added visual feedback with the symbols changing colors while held. I added functionality for moving the element by dragging it with the cursor and resizing by dragging the symbols. In cases where one would like more accurate numbers there's also the ImGui where you can input position, size and pivot of your choice. For background elements there's also a toggle box to set the element size to the size of the screen and move the position to the middle.

Locking element

One challenge when working with UI Layouts is that you might accidentally move or resize something you didn't mean to touch. Therefore I added a function that allows you to lock the values of an element and prevent you from making unintended changes. I also greyed out the properties to make it visually apparent that the reason you can't move your element is because it's been locked.

Toggle stacking elements and reorder layer

One problem that became apparent during testing was when the user had multiple UI elements and they were all on the same depth layer. I therefore implemented a way to toggle between UI elements using shift. To visually represent the toggle between items I made the properties and resize symbols change accordingly. Due to the resize symbols being drawn in front of everything it also signals to the user that the depth layer is what's causing the issue of the element not being visible. Below you can se a demonstration of the usefullness of depth layers as well as the toggle function.

Delete element

Deleting items is naturally part of the creative process and therefore had to be added. I used our engines input system to predefine a "delete item" button as backspace and delete.

Edit material properties

I wanted to give our graphic designers freedom to edit everything they potentionally could want to edit. Therefore I also added a menu to edit material properties. This could be useful if one wanted the material of an item to differ from default UI items.

Adding tooltips

In Spite: Bleeding Skies we used tooltips for our in game buttons and these had to be manually created and written by programmers. This caused a lot of back and forth between programmers and other disciplines. To prevent the need for this time consuming labor I created functionality for adding tooltips in the editor. I quickly discovered that the screen could be a bit cluttered if all the tooltips were activated during editing. Therefore I added a checkbox one could mark to temporarily hide all tooltips while working.

Tooltip placement is still a work in progress and should be updated for the next game where we need tooltips. I would like to implement functionality in the editor to be able to change the text widget size and placement offset in accordance with the cursor position.

Adding button functions

As of now I've only included the feature to add tint button functions that will display the tint in the editor while you're working. This was very useful considering that our engine calculates colors on a scale from 0 to 1 while graphics usually use HEX codes. With the tool graphics now have a way of previewing tint functionality in engine and adjust the tint of buttons more dynamically.

In addition to changing tint I've also added support to choose any button function that is currently in engine. For every button state there can be added a function that will be executed when the menu is active in the game. This fixes a huge issue we had where graphic designers would update their UiLayouts and the functions that programmers had added manually in the json files were overwritten or erased. With this system no one has to touch the json files at all and no function information will disappear between edits.

Import/export layout

The export button creates a new json with a name of your choice (the name standard prefix is automatically added by the editor) and writes all the relevant information of the UI Layout to this json. In this way graphic designers don't have to touch a json file to create a UI layout and I've made sure all the information is parsed properly and with the structure suitable for our asset manager to read and create a menu or HUD.

The import button displays all the UI Layouts in the Layout folder and enables the user to load in a prexisting layout. In cases where the user wants to make changes to a layout they can import it, make their changes and export it again with the same name to overwrite the old file.

Documentation

Click here to see documentation

Finding the tool

You’ll find the tool under YourWorkspaceName/Game/Tools

Once started you should get a window looking like this:

Create a UI Object

Click the “Create Item” button and you will get a drop down menu where you can choose what kind of UI Object you would like to create. When you’ve clicked your selected item you will get a prompt to choose a name for this item. 
Please note: You can not change the name after you’ve created it. The name can not have empty spaces and you can not have multiple items with the same name.

Selecting an Item

You can select an item by clicking the item with the right mouse button. 

If you have multiple items on top of each other you can cycle through the items by pressing shift.
You have to have your mouse hovering over the item you want to select. Make sure you don’t have any ImGui windows selected when you use your keyboard.

Accessing item features

To access the features of an item you first have to select an item. This will spawn resize symbols on the item and ImGui windows with properties and functionality options.

Properties

Name: the name you chose for the Item

Lock: Will make you unable to resize, move or change values on the item. Ex: Use when you don’t want your background visual to move.

Position: position on the screen. An item should be between 0x0 and 1600x900 to be visible on the screen

Size: the size of the item.

Set fullscreen: Will automatically set your item as the screen size with the center position on the middle of the screen.

Pivot: Where the center position is. You can change the pivot to minimum 0x0 (top left corner) or maximum 1x1 (bottom right corner).

Texture: you can chose between all the texture assets in the asset folder and change the visual of the item.

Depth Layer: the higher the depth layer, the closer to the camera the item is. Ex. you would like your background to have depth layer 0 or 1 (as longs as it’s lower than the buttons etc). Note: If two items have the same depth layer you might have trouble selecting the correct item if they are placed on top of each other

Tint: allows you to tint the sprite in a colour of your choice. Note: the channels are from minimum 0.0 to maximum 1.0,

Resizing, moving and deleting

Resizing
You can resize your item by writing in the size in properties OR using the resize buttons using your left mouse button. The resize buttons will be green when hovered and red when selected. You can then drag them in the direction you want to resize the item

Moving
You can move the item by writing a new position in properties OR holding your right mouse button while hovering over the item and dragging the item accross the screen. 

Deleting
You can delete the item by making sure the item is selected (aka the resize buttons are visible) and clicking the backspace or delete button on your keyboard. 
Please note: Make sure you do not have an ImGui-window selected when you delete items. If you’re tapping backspace or delete and nothing happens, try clicking on the item with your left mouse button and tap backspace/delete again.

Importing UI Layout Jsons

You can import an already existing UI Layout by using the “Load” button on the main menu. This will give you a drop down menu of the files in the UILayout-folder under Assets.

Exporting UI Layout Jsons

When you’re done with your layout you can export it to the UILayout-folder by clicking “Export” in the main menu. This will prompt you to write a name for the json file. Please follow the name standard and start the name with “UI_name”. Now you can look in your folder and see the layout you’ve created as a json file. If you want to continue working on a already created UI Layout you can export it and load it when you want to work on it again. You don’t have to restart the program to load a file you just exported.

Adding Tooltips

You can add a tooltip with text and background. You can not have a tooltip background without a tooltip text. 

The tooltips you’ve added will show automatically when you hover over the item with your mouse. You can hide them while you work by checking the “Hide Tooltip” checkbox. 

You can also remove the tooltip by clicking the “Remove Tooltip” button. This will only remove the tooltip of your selected item.

Tint Functions

If you click “Add Tint Functions” you will spawn a menu like this: The menu will show you the current tint functions and enable you to change these to your liking. The changes you make will show up in real time when you hover/click etc with your left mouse button.

Further Improvements

There are many improvements I would like to work on to make the tool even better and more user friendly. Some of the these are adding functionality for drag and drop as well as undo and redo (and hotkeys for these). It would also be helpful if the error and/or warning messages were pop ups on the screen instead of being easily overlooked in the console window. 

Smaller improvements that I haven't had time for yet is for example to add a checkbox that enables you to resize an element while maintaining aspect ratio, and a preview functionality for full screen (and not just windowed screen).