I always loved writing application code involving UI. What can I say: I like UI framework! I can’t even claim to have worked with a lot of UI framework professionnally (MFC, Tuit2k, Qt, Motionbuilder KUI) but I like to read and to know about ui system.

Unity GUI

I used Unity GUI before knowing about the IMGUI (IMmediateGUI) concept. The UI code you write when using that kind of system is fascinating:

 using UnityEngine;
 using System.Collections;
 
 public class ExampleClass : MonoBehaviour {
     public Texture btnTexture;
     void OnGUI() {
         if (!btnTexture) {
             Debug.LogError("Please assign a texture on the inspector");
             return;
         }
         if (GUI.Button(new Rect(10, 10, 50, 50), btnTexture))
             Debug.Log("Clicked the button with an image");
         
         if (GUI.Button(new Rect(10, 70, 50, 30), "Click"))
             Debug.Log("Clicked the button with text");
         
     }
 }

Everything about your UI management is in a single function. No UI classes/instances/variables. This make the UI code really easy to understand: each frame, your OnGUI function is called and you can repaint your UI according to your model change.

What is IMGUI

I read more on IMGUI (which is a type of programming mostly use in Game programming and 3D interactive environment). I found this nice tutorial (though a bit outdated) that explains the key concept of no retained UI.

dear IMGUI

I then found the famous dead imgui which is the “de facto” C++/easy to integrate/fully featured/C Like IMGUI implementation. The screenshot thread is really impressive. Lots of custom widgets, some of them really complicated to pull off. The list of “bindings” to dear imgui is particularly impressive as well.

What is nice with that particular library is how easy it is both to integrate it inside any kind of game engine/3D/2D environment and how simple it is to create your custom widgets. Since you integrate the UI toolkit inside your engine, it is also easy to have access to the “inners” of your code and display and modify internal values. Creating a profiler become a breeze:

The Lumix Engine uses dear imgui as its UI library. The creator of the engine even posted a pros/cons list of what problems he encountered when porting his Editor UI from Qt to dear imgui.

Qt vs IMGUI or the battle of the Insomniac(s)

Recently Branimir Karadžić posted an article in response to Insomniac GDC 2017 Postmortem on why they dumped their Web UI stack in favor of Qt. Branimir argued that they should have gone the IMGUI route. The lead engine developer of Insomniac explained his choice and made a case on why the standard look as well as the maturity of Qt were some strong advantages.

Synchronicity: IMGUI and the Web

In all cases, these discussions brought IMGUI to the forefront of C++/C development. Strangely enough in the web world some of the most popular view frameworks are also really “IMGUI-Like”. Most of the “virtual dom” frameworks like React, Mithril and Angular2 have the same intrinsic qualities of IMGUI:

• You define a “view” function that will generate your UI
• This function is called each frame (or each refresh)
• You recompose your view according to any type of datamodel change
• You do not have to write code that will actively listen to datamodel change and to update bits and pieces of the UI

Just like that, C++ developers have more in common with web developers that they thought :)

A little bit of LOVE

The Love game engine can be interfaced using Lua (like Stingray!). Love comes with its own UI toolkit called SUIT. And SUIT is an IMGUI toolkit! The code is really easy to read (as all Lua code is) and gives some nice insights on how an IMGUI system needs to be written. The layout system is really nice to position your widgets without having compute pixel offsets yourself.