How to create an UI

[Andy90]

Hello Guys  i try to create an ui but it wont show anything. I think i missed something. This is my main.cpp code

 

#include "UltraEngine.h"
#include "ComponentSystem.h"

using namespace UltraEngine;

int main(int argc, const char* argv[])
{
    RegisterComponents();

    auto cl = ParseCommandLine(argc, argv);
    
    //Load FreeImage plugin (optional)
    auto fiplugin = LoadPlugin("Plugins/FITextureLoader");

    //Get the displays
    auto displays = GetDisplays();

    //Create a window
    auto window = CreateWindow("Ultra Engine", 0, 0, 1280, 720, displays[0], WINDOW_CENTER | WINDOW_TITLEBAR);

    auto ui = CreateInterface(window);

    //Create widget
    auto label1 = CreateLabel("Label", 20, 20, 120, 30, ui->root);
    auto label2 = CreateLabel("Border Label", 20, 50, 120, 30, ui->root, LABEL_BORDER | LABEL_CENTER | LABEL_MIDDLE);


    //Create a world
    auto world = CreateWorld();

    //Create a framebuffer
    auto framebuffer = CreateFramebuffer(window);

    //Load the map
    WString mapname = "Maps/TestScene.ultra";
    if (cl["map"].is_string()) mapname = std::string(cl["map"]);
    auto scene = LoadMap(world, mapname);

    //Main loop
    while (window->Closed() == false and window->KeyDown(KEY_ESCAPE) == false)
    {
        world->Update();
        world->Render(framebuffer);
    }
    return 0;
}

 

[Josh]

https://www.ultraengine.com/learn/CreateInterface

The second example shows how to create an interface that appears in a 3D rendering viewport. 

[Andy90]

ok i changed my code to this

#include "UltraEngine.h"
#include "ComponentSystem.h"

using namespace UltraEngine;

int main(int argc, const char* argv[])
{
    RegisterComponents();

    auto cl = ParseCommandLine(argc, argv);
    
    //Load FreeImage plugin (optional)
    auto fiplugin = LoadPlugin("Plugins/FITextureLoader");

    //Get the displays
    auto displays = GetDisplays();

    //Create a window
    auto window = CreateWindow("Ultra Engine", 0, 0, 1280, 720, displays[0], WINDOW_CENTER | WINDOW_TITLEBAR);

    //Create a world
    auto world = CreateWorld();

    //Create a framebuffer
    auto framebuffer = CreateFramebuffer(window);

    auto font = LoadFont("Fonts/arial.ttf");
    auto ui = CreateInterface(world, font, framebuffer->size);

    iVec2 sz = ui->root->ClientSize();
    auto button = CreateButton("Button", sz.x / 2 - 75, sz.y / 2 - 15, 150, 30, ui->root);

    //Create widget
    //auto label1 = CreateLabel("Label", 20, 20, 120, 30, ui->root);
    //auto label2 = CreateLabel("Border Label", 20, 50, 120, 30, ui->root, LABEL_BORDER | LABEL_CENTER | LABEL_MIDDLE);

    //Load the map
    WString mapname = "Maps/TestScene.ultra";
    if (cl["map"].is_string()) mapname = std::string(cl["map"]);
    auto scene = LoadMap(world, mapname);

    //Main loop
    while (window->Closed() == false and window->KeyDown(KEY_ESCAPE) == false)
    {
        while (PeekEvent())
        {
            const Event ev = WaitEvent();
            switch (ev.id)
            {
            case EVENT_WINDOWCLOSE:
                if (ev.source == window)
                {
                    return 0;
                }
                break;
            default:
                ui->ProcessEvent(ev);
                break;
            }
        }
        world->Update();
        world->Render(framebuffer);
    }
    return 0;
}

and get this result

[Josh]

I don't see where your orthogonal camera is being created.

You want to create one camera that is just for the GUI. You can use Interface::SetRenderLayers and Camera::SetRenderLayers to make it so the GUI camera only draws the GUI and does not draw the scene twice.

Your GUI camera should be created after your 3D camera so that it renders last.

[Andy90]

ok now it was working. But i cant see the game anymore. 

my goal was to make a smal "window" or panel. 

[Josh]

You can set the background / root panel's background color to 0,0,0,0 to make is see-through. Then create a smaller panel on it for your visible GUI area.

[Andy90]

ah ok this makes sense

[Andy90]

I tested it with the color set to 0 but then i have the following result

here is my code

#include "UltraEngine.h"
#include "ComponentSystem.h"

using namespace UltraEngine;

int main(int argc, const char* argv[])
{
    RegisterComponents();

    auto cl = ParseCommandLine(argc, argv);
    
    //Load FreeImage plugin (optional)
    auto fiplugin = LoadPlugin("Plugins/FITextureLoader");

    //Get the displays
    auto displays = GetDisplays();

    //Create a window
    auto window = CreateWindow("Ultra Engine", 0, 0, 1280, 720, displays[0], WINDOW_CENTER | WINDOW_TITLEBAR);

    //Create a world
    auto world = CreateWorld();

    //Create a framebuffer
    auto framebuffer = CreateFramebuffer(window);

    //Create widget
    //auto label1 = CreateLabel("Label", 20, 20, 120, 30, ui->root);
    //auto label2 = CreateLabel("Border Label", 20, 50, 120, 30, ui->root, LABEL_BORDER | LABEL_CENTER | LABEL_MIDDLE);

    //Load the map
    WString mapname = "Maps/TestScene.ultra";
    if (cl["map"].is_string()) mapname = std::string(cl["map"]);
    auto scene = LoadMap(world, mapname);

    auto font = LoadFont("Fonts/arial.ttf");
    auto ui = CreateInterface(world, font, framebuffer->size);
    ui->root->SetColor(0, 0, 0, 0);
    ui->SetRenderLayers(2);

    iVec2 sz = ui->root->ClientSize();
    auto button = CreateButton("Button", sz.x / 2 - 75, sz.y / 2 - 15, 150, 30, ui->root);

    auto camera = CreateCamera(world, PROJECTION_ORTHOGRAPHIC);
    camera->SetPosition(float(framebuffer->size.x) * 0.5f, float(framebuffer->size.y) * 0.5f, 0);
    camera->SetRenderLayers(2);

    //Main loop
    while (window->Closed() == false and window->KeyDown(KEY_ESCAPE) == false)
    {
        while (PeekEvent())
        {
            const Event ev = WaitEvent();
            switch (ev.id)
            {
            case EVENT_WINDOWCLOSE:
                if (ev.source == window)
                {
                    return 0;
                }
                break;
            default:
                ui->ProcessEvent(ev);
                break;
            }
        }
        world->Update();
        world->Render(framebuffer);
    }
    return 0;
}

 

[Josh]

You will also need to call camera->SetClearMode(CLEAR_DEPTH) so the camera does not wipe the screen.

[Andy90]

ok thats is it. I post the code in case some else in the future has a need of it.

 

#include "UltraEngine.h"
#include "ComponentSystem.h"

using namespace UltraEngine;

int main(int argc, const char* argv[])
{
    RegisterComponents();

    auto cl = ParseCommandLine(argc, argv);
    
    //Load FreeImage plugin (optional)
    auto fiplugin = LoadPlugin("Plugins/FITextureLoader");

    //Get the displays
    auto displays = GetDisplays();

    //Create a window
    auto window = CreateWindow("Ultra Engine", 0, 0, 1280, 720, displays[0], WINDOW_CENTER | WINDOW_TITLEBAR);

    //Create a world
    auto world = CreateWorld();

    //Create a framebuffer
    auto framebuffer = CreateFramebuffer(window);

    //Create widget
    //auto label1 = CreateLabel("Label", 20, 20, 120, 30, ui->root);
    //auto label2 = CreateLabel("Border Label", 20, 50, 120, 30, ui->root, LABEL_BORDER | LABEL_CENTER | LABEL_MIDDLE);

    //Load the map
    WString mapname = "Maps/TestScene.ultra";
    if (cl["map"].is_string()) mapname = std::string(cl["map"]);
    auto scene = LoadMap(world, mapname);

    // UI
    auto font = LoadFont("Fonts/arial.ttf");
    auto ui = CreateInterface(world, font, framebuffer->size);
    ui->root->SetColor(0, 0, 0, 0);
    ui->SetRenderLayers(2);

    iVec2 sz = ui->root->ClientSize();
    auto button = CreateButton("Button", sz.x / 2 - 75, sz.y / 2 - 15, 150, 30, ui->root);

    auto camera = CreateCamera(world, PROJECTION_ORTHOGRAPHIC);
    camera->SetPosition(float(framebuffer->size.x) * 0.5f, float(framebuffer->size.y) * 0.5f, 0);
    camera->SetRenderLayers(2);
    camera->SetClearMode(CLEAR_DEPTH);

    //Main loop
    while (window->Closed() == false and window->KeyDown(KEY_ESCAPE) == false)
    {
        while (PeekEvent())
        {
            const Event ev = WaitEvent();
            switch (ev.id)
            {
            case EVENT_WINDOWCLOSE:
                if (ev.source == window)
                {
                    return 0;
                }
                break;
            default:
                ui->ProcessEvent(ev);
                break;
            }
        }
        world->Update();
        world->Render(framebuffer);
    }
    return 0;
}