GUI glitches

[SpiderPig]

I made this example in an effort to get things to crash but have noted a few other issues in the process.  Please excuses the size the example.

• No mouse events for tabber or button (disable the panel creating in the loop to see this)
• Press Space a few times - Red panel clipping exceeds parents size by 1 pixel in both x & y
• Sprite remains in renderlayer 0.  Solved!  Powers of 2 required.  Only downside to not use the enum
• Tab page and button left border clipped off
• Drawing widgets stops at the 2,000 mark?  Excessive I know but is this some sort of limit or bug?

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

using namespace UltraEngine;

bool EventCallback(const Event& event, shared_ptr<Object> extra) {
    switch (event.id) {
    case EVENT_MOUSEENTER:
        Print("MOUSE_ENTER");
        break;
    case EVENT_MOUSELEAVE:
        Print("MOUSE_LEAVE");
        break;
    case EVENT_MOUSEDOWN:
        Print("MOUSE_DOWN");
        break;
    case EVENT_MOUSEMOVE:
        //Print("MOUSE_MOVE");
        break;
    case EVENT_MOUSEUP:
        Print("MOUSE_UP");
        break;
    case EVENT_MOUSEWHEEL:
        Print("MOUSE_WHEEL");
        break;
    }

    return true;
}

int main(int argc, const char* argv[])
{
    auto displays = GetDisplays();
    auto window = CreateWindow("Ultra Engine", 0, 0, 1280, 720, displays[0], WINDOW_CENTER | WINDOW_TITLEBAR);
    auto world = CreateWorld();
    auto framebuffer = CreateFramebuffer(window);

    auto camera = CreateCamera(world);
    camera->SetClearColor(0.125);
    camera->SetFov(70);
    camera->SetPosition(0, 2, -3);

    auto default_font = LoadFont("Fonts\\arial.ttf");
    auto ui = CreateInterface(world, default_font, framebuffer->size);
    ui->SetRenderLayers(1);
    ui->root->SetColor(0.0f, 0.0f, 0.0f, 0.0f);

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

    auto w1 = CreatePanel(0, 0, 1, 1, ui->root);
    ListenEvent(EVENT_NONE, w1, EventCallback);

    auto w2 = CreatePanel(0, 0, 1, 1, w1);
    ListenEvent(EVENT_NONE, w2, EventCallback);
    w2->SetColor(1, 0, 0);

    auto w3 = CreateTabber(10, 10, 1, 1, ui->root);
    w3->SetShape(25, 25, 256, 256);
    w3->AddItem("Page1");
    w3->AddItem("Page2");

    auto w4 = CreateButton("Test", 0, 0, 32, 32, w3);
    w4->SetShape(5, 5, 100, 50);

    auto terrain = CreateTerrain(world, 512, 512);
    terrain->SetMaterial(LoadMaterial("Data\\bluegrid.mat"));

    auto c = CreateCylinder(world);
    c->SetPhysicsMode(PHYSICS_PLAYER);

    vector<shared_ptr<Entity>> entities;
    Vec3 offset = Vec3(10.0f, 1.0f, 5.0f);
    float scale = 2.0f;
    for (int z = 0; z < 10; z++) {
        for (int x = 0; x < 10; x++) {
            auto e = CreateSphere(world);
            e->SetColor(Random(), Random(), Random());
            e->SetPosition(Vec3((float)x * scale + Random() - 0.5f, 0.0f, (float)z * scale + Random() - 0.5f) + offset, true);
            e->SetMass(1.0f);
            entities.push_back(e);
        }
    }

    auto sprite = CreateSprite(world, default_font, "", 12);
    sprite->SetRenderLayers(1);//Still on layer 0?
    

    vector<shared_ptr<Widget>> widgets;
    widgets.push_back(ui->root);

    while (window->Closed() == false and window->KeyDown(KEY_ESCAPE) == false)
    {
        if (window->KeyHit(KEY_SPACE)) {
            w1->SetShape(Random(0, 512), Random(0, 512), Random(64, 128), Random(64, 128));
            w2->SetShape(Random(0, 10), Random(0, 10), Random(16, 128), Random(16, 32));
        }

        auto w = CreatePanel(Random(0, 512), Random(0, 512), Random(64, 128), Random(64, 128), ui->root);// widgets[(int)Random(0.0f, (float)widgets.size() - 0.1f)]);
        w->SetColor(Random(), Random(), Random());
        ListenEvent(EVENT_NONE, w, EventCallback);
        widgets.push_back(w);

        sprite->SetText(String(widgets.size()));

        while (PeekEvent()) {
            auto event = WaitEvent();
            ui->ProcessEvent(event);
        }

        world->Update();
        world->Render(framebuffer);
    }
    return 0;
}

 

[klepto2]

Some minor issues regarding panelstyles and clipping:

#include "UltraEngine.h"

using namespace UltraEngine;

int main(int argc, const char* argv[])
{
    //Get the displays
    auto displays = GetDisplays();

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

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

    //Create world
    auto world = CreateWorld();

    //Load a font
    auto font = LoadFont("Fonts/arial.ttf");

    //Create user interface
    auto ui = CreateInterface(world, font, framebuffer->size);
    iVec2 sz = ui->root->ClientSize();
    auto mainPanel = CreatePanel(0, 0, sz.x, sz.y, ui->root);
    mainPanel->SetColor(Vec4(1.0, 0.0, 0.0, 1.0), WIDGETCOLOR_BACKGROUND);
    //Create widget
    sz = mainPanel->ClientSize();
    auto panel1 = CreatePanel(5, 5, 300, sz.y - 10, mainPanel);
    auto panel2 = CreatePanel(5 + 305, 5, 300, sz.y - 10, mainPanel, PANEL_BORDER);
    auto panel3 = CreatePanel(5 + 610, 5, 300, sz.y - 10, mainPanel, PANEL_GROUP);
    auto tabber = CreateTabber(5 + 915, 5, 300, sz.y - 10, mainPanel);
    tabber->AddItem("Tabber");
    panel3->SetText("Group");

    sz = panel1->ClientSize();
    auto scrollBar1V = CreateSlider(sz.x - 20, 0, 20, sz.y, panel1, SLIDER_SCROLLBAR | SLIDER_VERTICAL);
    auto scrollBar1H = CreateSlider(0, sz.y-20, sz.x-20, 20, panel1, SLIDER_SCROLLBAR | SLIDER_HORIZONTAL);

    sz = panel2->ClientSize();
    auto scrollBar2V = CreateSlider(sz.x - 20, 0, 20, sz.y, panel2, SLIDER_SCROLLBAR | SLIDER_VERTICAL);
    auto scrollBar2H = CreateSlider(0, sz.y - 20, sz.x - 20, 20, panel2, SLIDER_SCROLLBAR | SLIDER_HORIZONTAL);

    sz = panel3->ClientSize();
    auto scrollBar3V = CreateSlider(sz.x - 20, 0, 20, sz.y, panel3, SLIDER_SCROLLBAR | SLIDER_VERTICAL);
    auto scrollBar3H = CreateSlider(0, sz.y - 20, sz.x - 20, 20, panel3, SLIDER_SCROLLBAR | SLIDER_HORIZONTAL);

    sz = tabber->ClientSize();
    auto scrollBar4V = CreateSlider(sz.x - 20, 0, 20, sz.y, tabber, SLIDER_SCROLLBAR | SLIDER_VERTICAL);
    auto scrollBar4H = CreateSlider(0, sz.y - 20, sz.x - 20, 20, tabber, SLIDER_SCROLLBAR | SLIDER_HORIZONTAL);

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

    while (true)
    {
        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]

The widget blocks to sprite system needs fine tuning. Once I do that then all the widgets should just automatically work right. Stay tuned...

[Josh]

On 1/1/2023 at 1:23 PM, SpiderPig said:

Drawing widgets stops at the 2,000 mark?  Excessive I know but is this some sort of limit or bug?

There is a limited range between the camera far and near plane. The GUI system uses the depth buffer for ordering. This makes drawing very fast because it does not have to be done in order. I seem to remember trying a similar example and writing about this?

On 1/1/2023 at 1:23 PM, SpiderPig said:

No mouse events for tabber or button (disable the panel creating in the loop to see this)

Tabbers and buttons are not meant to emit mouse events.

On 1/1/2023 at 1:23 PM, SpiderPig said:

Tab page and button left border clipped off

Yes, the widget block system needs some fine tuning here.

On 1/1/2023 at 1:23 PM, SpiderPig said:

Press Space a few times - Red panel clipping exceeds parents size by 1 pixel in both x & y

Yes, the widget block system and clipping needs some fine tuning here.

Summary:

On 1/1/2023 at 1:23 PM, SpiderPig said:

• No mouse events for tabber or button (disable the panel creating in the loop to see this)
• Sprite remains in renderlayer 0.  Solved!  Powers of 2 required.  Only downside to not use the enum 
• Drawing widgets stops at the 2,000 mark?  Excessive I know but is this some sort of limit or bug?
• Tab page and button left border clipped off
• Press Space a few times - Red panel clipping exceeds parents size by 1 pixel in both x & y

 

[Josh]

Merging reports since they are describing the same issue.

[reepblue]

I recall the GUI in the vulkan renderer not looking as good. Glad to hear you plan to fix this soon.

[Josh]

An update is available now that addresses some of these problems, though it probably is not completely finished.

Sprite corner radius is no longer supported. It was done with geometry and was always going to display bad aliasing. I think it would be better to rasterize an image for all widget blocks that use curved corners, but I am not going to get into that yet.

Rectangular sprites should be pixel-perfect. The clipping should be working right also. Text looks slightly off-center to me, I will take a closer look tomorrow.

[Josh]

Here is what @klepto2's example looks like with the current build.

[Josh]

Oh yeah, also I am experiencing some flashing when some widgets change, because they are creating new sprites for the 3D rendering, just like what klepto is experiencing with IMGUI. I have an idea for something I can do to solve this all at once.

[Josh]

On 1/1/2023 at 1:23 PM, SpiderPig said:

Tab page and button left border clipped off

This appears to be fixed in current build.

[Josh]

Here is a simplified example that shows the clipping of the child panel is off by one pixel in both H and V directions:
 

#include "UltraEngine.h"

using namespace UltraEngine;

int main(int argc, const char* argv[])
{
    auto displays = GetDisplays();
    auto window = CreateWindow("Ultra Engine", 0, 0, 1280, 720, displays[0], WINDOW_CENTER | WINDOW_TITLEBAR);
    auto world = CreateWorld();
    auto framebuffer = CreateFramebuffer(window);

    auto default_font = LoadFont("Fonts\\arial.ttf");
    auto ui = CreateInterface(world, default_font, framebuffer->size);
    ui->root->SetColor(1,1,1,1);

    auto ui_camera = CreateCamera(world, PROJECTION_ORTHOGRAPHIC);
    ui_camera->SetPosition((float)framebuffer->size.x * 0.5f, (float)framebuffer->size.y * 0.5f, 0);
    
    auto w1 = CreatePanel(1, 1, 100, 100, ui->root);
    auto w2 = CreatePanel(-10, 20, 200, 160, w1);
    w2->SetColor(1, 0, 0);

    while (window->Closed() == false and window->KeyDown(KEY_ESCAPE) == false)
    {
        while (PeekEvent()) {
            auto event = WaitEvent();
            ui->ProcessEvent(event);
        }
        world->Update();
        world->Render(framebuffer);
    }
    return 0;
}

 

[Josh]

Okay, I think at this point these issues are completely fixed.

Rounded corners and gradients are not going to be displayed in Vulkan at this time. I think the best way to do this is to rasterize a cache of images stored by dimensions and settings, and just use these to display these types of backgrounds. Widgets typically don't do a lot of resizing when rendered in a 3D viewport, so I think this will work well. But I am okay deferring that until after the early access release.

There remains an issue of widgets momentarily disappearing when they change, but that is a more general culling problem I will try to solve.