Skip to main content

Introduction

This is a short introduction of the Web User Interface (WUI) System.

WUI was/is developed as part of my masters-thesis for cross-platform, testable and accessible UI in games. In addition to WUI itself there is also a lot of infrastructure behind the scenes I setup. A full suit of documentation, testing and CI/CD is available for most core components.

Everything needed to use WUI can be found at gitlab.

Showcase Video​

A small video showing how you might change a word or title in your UI. This example also shows the auto live-reloading of the dev server.

What is WUI? / What problem is WUI trying to solve?​

WUI can de-couple your UI from your native code. Allowing you to write your UI in established web-based technologies (HTML/CSS etc.). This system allows you to use all performance and complexity-benefits of a native application (for example for complex 3D rendering) which would not be feasible in a purely web-based environment. While also retaining known and established UI standard without the pain of re-implementing UI for your application (in some native UI-library).

What does WUI do:

  • UI rendering and communication is implemented in a separate process freeing up resources and making use of modern multi-threaded setups.
  • The UI is provided in a pure RGBA buffer which can be easily implemented in any established rendering pipeline.
  • WUI can also handle Mouse/Keyboard events from your native-engine.
  • Communication between UI and native application is implemented asynchronously allowing for thread-safe on-demand UI-rerendering.

For more information on the core functionality see wui core.

Fully cross platform UI​

By using web-based technologies, WUI can be used on any platform that supports web-technologies as long as WUI is implemented for that platform. At the time of writing WUI is implemented for C++ and Godot. With C++ as the core, WUI can be made compatible with almost any language that can interface with C++.

This means you only need to write your UI once. It also means you can re-use any existing web UI that you might have (like login forms on external websites).

Since tag 0.1.14 WUI is also available for windows! Both C++ and the godot extension are compiled for windows and can be used in your projects.

Fully automated tests​

With the UI decoupled from your native code, you can test your UI in a web-browser. This allows for easy automated testing of your UI without the need to compile your native code. See wui testing for more information.

Accessibility​

WUI was born out of a need for accessible UI in games. The web has a lot of established standards for accessibility and through WUI you can make use of them without needing to re-implement them in your native code.

Why did I write WUI?​

The short version: I was sick of being "locked in" by game engines and native UI solutions and wanted to write a modular, portable UI system that does not need to re-invent the wheel and instead depends on modern, established web-based standards and solutions. I was also confused by the lack of accessibility options for most in-game UI solutions when the web already solved that problem.

The Current state of native UI development​

It has always been a pain-point to develop UI for native applications. While there exist platform independent GUI libraries, most of them require your application to describe the UI in their own format. For example:

  1. QT-GUI uses QML
  2. GTK uses its own library definitions to define UI (C Example).
  3. Java x/Swing describes its UI in java code (while java is technically cross-platform, this is only possible due to the Java-runtime environment / java virtual machine).
  4. Electron is a system wherein the entire application is written in javascript and a native environment (mostly a lightweight-browser) is used to render UI. With this you gain portability, but lose native compute and multithreading performance, you are relying on the web-interface standard for computability and speed.

WUI is conceptually most related to electron, but only uses its html rendering techniques. Nowadays most users are used to seeing UI in the html standard with some javascript support for added complexity. For browsers this is implemented by their browser engine.

Developing an UI is especially painful when using game-engines like Unity whose UI-toolkit produces a "baked in" solution which is not portable at all. The same can be said about Unreal Engine and their UI-Editor.

These systems force you to develop your UI in their own way; essentially creating a locked in scenario. This is what originally made me want to develop something to solve this issue.

You can find the original seminar paper here

Interested in contributing?

I am working on this by myself; if you are interested in helping out please email me at voelkel.dominik@gmail.com.