Jump to content

How to create an UI


Andy90
 Share

Go to solution Solved by Josh,

Recommended Posts

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;
}

 

Link to comment
Share on other sites

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
image.thumb.png.4ab659b474d6c37ae1c4b116c3d3d847.png

Link to comment
Share on other sites

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.

My job is to make tools you love, with the features you want, and performance you can't live without.

Link to comment
Share on other sites

  • Solution

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.

  • Like 1

My job is to make tools you love, with the features you want, and performance you can't live without.

Link to comment
Share on other sites

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


image.thumb.png.a96696eb30f115b18821ef76e50f436b.png


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;
}

 

Link to comment
Share on other sites

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;
}

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...