[U] User Interface

In this wiki entry, we will teach you how to make graphical user interfaces for your application

Quick introduction to dear ImGui

Dear ImGui is an immediate mode GUI library. It being an immediate mode library means that, any UI built with it will be destroyed and rebuilt every frame.

This makes the library very easy to use, since you don't have to struggle with controlling complex states like you do in a retained mode GUI.

It is also more productive. Since all calls to ImGui are compiled into the source code, you can develop the backend and frontend side by side without having to switch between a config file for your scaffold, and the source code for editing the backend.

Since we don't have a native GUI solution, you are going to need to learn the library by yourself to advance forward.

Creating a widget

Adding an event

You can use the UI::addEvent function with a function pointer/lambda as an argument to add a UI event. In the example below we are using the beginPlay event of a ScriptableObject class to add the UI event, however, it should be noted that any gameplay class can be used for the same purpose.

UI::addEvent([=](){
    ImGui::Text("Hello, World %d!", 10);
});

Now that you know how to add events, it's up to you to learn Dear ImGui and use it in your project and create great UIs using it! Don't worry, imgui is well documented, and you can find answers to many of your questions with just a simple google search! Documentation linked below:

1. The dear imgui wiki
2. The dear imgui demo UI

Tip: Local static

Local static variables are variables, local to a function, that have a persistent state across function calls. A great example is this code snippet:

for (auto i = 0; i < 10; i++)
{
    static bool bFirst = false;
    if (!bFirst)
    {
        std::cout << "This is the first iteration" << std::endl;
        bFirst = true;
    }
}

Here the message will be printed only once, since the boolean's state is persistent across function calls

This feature of the language is going to be used a lot for the UI since it gets rebuilt every frame

Useful information: Creating standalone GUI applications

Ever wanted to create your own GUI applications using dear imgui or think that our API design is great and want to make graphical applications using the same type of framework?

Well we have a solution for you, MadLadSquad is not only developing this game engine but is actively developing and maintaining a DE(desktop environment) for Linux. We decided to build our own GUI framework on top of dear imgui specifically made for building cross-platform and cross-desktop compatible graphical applications. The scripting API and general layout of the framework is generally the same, and your engine knowledge will also directly apply there. If you're interested to check the project out, go to the UntitledImGuiFramework GitHub repository. The framework runs and is frequently tested on Windows and Linux and has many applications in production right now, so check it out!