Re-making famous user-interfaces (UI) accross multiple technologies to test and compare them.
| Name | Screenshot | Made with |
|---|---|---|
| Papers, please |  |
      |
| Metroid Prime |  |
 |
| Dead Space |  |
 |
The HTML is the open markup language which powers the web. It comes right from 1993 and is used extensively since then. Built with the separation of concerns in mind, it has to be used with 2 other languages : CSS to style the page, and Javascript to handle the logic.
As the complexity of usages grows, frameworks like Angular, React or Vue became essential. Basically, they split the website into smaller reusable components, and they bring some of the logic into the HTML (event triggers and conditions).
The html folders contains project built vanilla Javascript (no framework), but it also contains projects made with Vue (
) or React (
). If it is the case, the icon used will not be HTML, but the logo of the framework.
While HTML has been designed to make websites, in recent years we have seen the adoption of frameworks like Electron to deploy it as a desktop app, or Coherent to embed it in games and major game engines (for exemple EA makes most of their UI through EAWebKit, which is similar to Coherent).
For more details, check the html folder.
The XAML language has been created by Microsoft in 2008 to support their .NET WPF Environment. Similar to HTML, it is much more verbose as the style and most of the logic is embedded inside the XAML file. More complex logic is handled in a C# file, the code-behind.
It is recommended to use Microsoft Blend, a WYSIWYG editor to create anything in XAML. While this technology has been made to create Desktop app for Windows, it is possible to embed XAML interfaces in games and all of the major game engines using the 3rd party proprietary library Noesis GUI.
A newer, less-powerfull version of the language has been made to support the UWP environment, but we are not using it through these projects has the restrictions are quite strong, and it has not been made to be embedded in real-time application.
For more details, check the xaml folder.
QT is a C++ UI library which has been made public in 1995. In 2009, QT Group released the QML language which allows to create user-interfaces in a declarative language similar to JSON, and less verbose than HTML.
QT Creator is the tool of choice to use the library, it provides a code editor and a WYSIWYG editor similar to Microsoft Blend but less powerfull. For more complex usage, you have to pay for QT Design studio, the proprietary alternative.
While QT is used widely to create desktop application, it is very rare to see it in games as it has not been built for real-time applications.
For more details, check the qml folder.
The stacks presented below are Game Engines, as the technology they use is specific to their software, the folders are nammed with the engine name instead of the langage. (ex: Unity for Unity3D engine instead of UXML)
Released in 2005, the Unity Engine became very popular amongst independent game developers. It has been downloadable for free since 2009, and offers built-in support for many features as Game UI. In 2019, they started a new API for UI called UIElements which is a mix between XAML and HTML stack, and provides better performance and scalability than the previous API.
The idea is to have a UXML file for layout similar to the HTML language. Then a USS file for styles, which is a subset of the CSS language, and finally, a C# file to handle logic, similar to the code-behind file of the XAML stack.
At the time of this writing, UIElements is restricted to extending the editor, but in-game support is announced for future releases of Unity.
For more details, check the unity folder.
Godot is an MIT-Licensed game engine released in 2014. It has gained more traction in 2018 with the release of Godot 3. Lightweight and easy to use, it offers built-in support for UI and animation, both in script and in a WYSIWYG editor.
Everything in this engine is built around the concept of Nodes, and the UI is no exception.
For more details, check the godot folder.
Unreal Engine has been around since 1995, and used by many AAA games since. In 2015, it has been made free to download for anyone, as a way to counter-attack Unity in the independent game market.
With the version 4 of their engine, Epic Games created the UMG UI Designer tools to create user-interface and animate them in the engine. This powerful tool offer a WYSIWYG editor to place the elements, and a node-based scripting system called Blueprint to handle the logic of the UI.
For more details, check the unreal folder.