UI Editor

Motivation / Goal

My motivation for this project was that it takes a lot of time and polish to move the UI to the desired place etc. Therefore the editor purpose was to make the design of the UI layouts easier and faster.

I created the editor as well as the components and the system.

UI Editor

Breakdown
UI Editor - made with Dear ImGui
UI Layout - canvas, json file to store the layout
UI Handler - saves/loads the layout, updates/renders the elements
Element - base object that has a id, name and transform
Component - transform and other attributes that fits the components usage

Features
Save/Load Layout
Add/Remove Element/Component
Scale/Size/Rotation/Position
Render order
Drag and drop textures
Change pixel shader
Button functions

Components
Sprite
Button
SpriteSheet
SpriteMorph
Text
TextField

Each element can have multiple components of different types, this works well because the element has a base transform, therefore you can offset the components transform for more flexibility. For example creating a main menu background but also have a text with the game title and be able to move the title anywhere, instead of creating a new element for only one purpose.

Functionality to move an element to front / back / forward / backwards.

We used Direct3D 11 SpriteBatch, so to change pixel and vertexshader for specific sprites such as SpriteMorph or Glitch effect was done as shown below.

Change pixel shader and delete component

The SpriteMorph uses a different vertex shader than the other sprites, the morph speed and radius for each vertex can be edited using the UI Editor.

SpriteSheet, in editor the amount of colums/rows and total playtime can be changed to fit the amount of animation frames and its speed.

Textfield, when its selected you can type.

Improvements

- Copy / paste elements / components
- Parent / Child hierarchy like Unity for a cleaner hierarchy
- Add more components such as slider and animation (for the transform)