DX11 MARKUP UI EDITOR
Fast User interfaces, based on simple markup and cascading stylesheet concepts
About
DXMUI Is an interface for DirectX11 where User interfaces such as menus can be rapidly prototyped by parsing simple markup and stylesheets, inspired by HTML and CSS.
Table of Contents
Goal
The goal of DXMUI was to make UI prototyping easier and faster for developers & UX Designers who enjoy working in textbased environments. I also saw this as an opportunity to improve and explore my favorite areas of game development, engine, rendering and tools development.
The framework was planned to work in 3 Stages, the markup/style stage, the c++ interface stage and finally the DirectX11 Presentation stage.
The Interface was planned before starting the development, and the goal was to give the end user a simple interface, where they could instantiate one or multiple canvases, on which the UI elemnts were drawn. The main interface was planned and developed based on the following structure.
Development Process
Week 1 - Markup Parser & DirectX11 Implementation
During the first week of the project I focused on writing the markup parser, which handled my planned tags:
-
<t>, text.
-
<div>, empty, stylable content container.
-
<img>, dds image.
-
<button>, button with programmable callback function
Each tag could attach a identifier, which is planned to be used for styling elements later in the project and connecting callbacks for buttons.
I also began writing the DirectX11 interface, and implmented the rendering of images, squares and single colored divison areas. The result wasn't visually impressive, but being able to see visual results from week one was a good and motivating goal. During week 1 the markup below resulted in the following canvas.
Week 2 - Text drawing and Stylesheets
During the second week of the project I focused on getting text, buttons with callback functions, and proper hierarchical rendering into the framework. I also started developing the style parser.
The two main styles I implemented during this week was color and scale.
I aimed to make the stylesheets easily written, inspired by CSS but with simpler syntax. The syntax, for DXStyle files looks like below, where style is the property and value represents what the property will be set to.
After week 2, the next Markup & Style resulted in the following Canvas.
To make the buttons generated by DXMUI interactable, I added the function to attach lambda callback functions to each button, letting the user define what each button does under the hood in their application. For my menu concept I used the functionality like this.
Week 3 - Interactive canvas
During the third week of the project I focused on making the minimum viable product and my goal was to be able to render and use an interactable canvases to create a conceptual main menu.
To make the canvases more pleasant to look at I implemented font loading, letting me set custom fonts with in the style sheets. I also made alignment and pivot styles, to place elements on different parts of the page.
To handle minor offsets in the different fonts, making them difficult to center, I used the draw rects and text measure functions from microsofts DirectXTK to figure out differences in the blankspaces and rendering bounds for different fonts.
With the features implemented up to now, I managed to implement this main menu concept, DXMUI and c++ lambda callbacks.
Week 4 - More Styles
During the fourth week of the project I focused on making the result look better, and more game ready. I also aimed to make the user interafaces made with DXMUI more responsive.
The first thing I developed was an implementation of the HTML and CSS Box model, with padding, borders and margins, enabling the designers to adjust spacing and placements of objects.
This made placing content more complex but the stylesheets remained fast to prototype and easy to use.
After adding the borders I made the roundness of an objects edges adjustable. This allows the designer to create boxes with rounded corners and images with different rounded shapes.
I also implemented the following styles:
-
Background, setting a image that fills the background.
-
Drop Shadows, drawing bounding rectangles behind elements
-
Hoover, rendering a different set of styles when hoovering an element.
Results
In the end DXMUI is usable to create simple quickly through text based development, which was the main goal of this project. The tool can be used to polish menus further with drop shadows, fonts and borders. A quick example of what can be made with DXMUI is shown here:
Further improvements
To build further on DXMUI I would implement three style elements, anti-aliasing, soft drop shadows and more easily usable alignment functionality, akin to the flex-box structure provided by CSS.
The anti aliasing could be implemented in multiple ways, but I would personally attempt to tackle the problem using HLSLs smoothstep function when drawing edges. The smoothstep function could also possibly be used to create smooth dropshadows.