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. 

DXMUIW4.gif

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.

ProjectFlowchart.drawio.png

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.

DXMUI_UML.drawio.png
 

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.

DXMParser.png
DXMUI Canvas after week 1
W1_markup.png

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.

DXMUI_Style.png

After week 2, the next Markup & Style resulted in the following Canvas.

W2_Markup.png
W2_Style.png
Canvas_Week2.png
DrawRect.png

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.

CallbacksFinal.png

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.

DXMUI_Style.png

With the features implemented up to now, I managed to implement this main menu concept, DXMUI and c++ lambda callbacks.

ezgif-2-19c2d565a9.gif

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.

Box Model.png

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: 

DXMUIW4.gif
 
 

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.