In custom widget cornerradius does not make cornes rounded

[Dreikblack]

I don't know if it was changed intentionally somehow but several months ago blocks[0].radius used to make corners rounded

#include "UltraEngine.h"

using namespace UltraEngine;

class CustomWidget : public Panel
{
    CustomWidget::CustomWidget()
    {
        cornerradius = 8;
        blocks.resize(1);
    }

protected:

    virtual bool Initialize(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent)
    {
        return Widget::Initialize(text, x, y, width, height, parent, style);
    }

    void Draw(const int x, const int y, const int width, const int height)
    {

        blocks[0].color = color[WIDGETCOLOR_BACKGROUND];
	    blocks[0].wireframe = false;
	    blocks[0].position = iVec2(0);
	    blocks[0].size = size;
	    blocks[0].hidden = false;
        blocks[0].radius = cornerradius;
    }

public:
   
    static shared_ptr<CustomWidget> create(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent)
    {
        struct Struct : public CustomWidget {
        };
        auto instance = std::make_shared<Struct>();
        instance->Initialize(x, y, width, height, parent);
        instance->SetColor(0.5, 0.5, 0.5, 1, WIDGETCOLOR_BACKGROUND);
        return instance;
    }

};

shared_ptr<Window> window;
shared_ptr<Framebuffer> framebuffer;
shared_ptr<World> menuWold;
shared_ptr<Interface> ui;
shared_ptr<Camera> uiCamera;

shared_ptr<CustomWidget> customWidget;

void initGui()
{
    auto default_font = LoadFont("Fonts\\arial.ttf");
    ui = CreateInterface(menuWold, default_font, framebuffer->GetSize());
    ui->SetRenderLayers(2);
    ui->root->SetColor(0.0f, 0.0f, 0.0f, 0.0f);
    uiCamera = CreateCamera(menuWold, PROJECTION_ORTHOGRAPHIC);
    uiCamera->SetPosition((float)framebuffer->GetSize().x * 0.5f, (float)framebuffer->GetSize().y * 0.5f, 0);
    uiCamera->SetRenderLayers(2);
    uiCamera->SetClearMode(CLEAR_DEPTH);
    customWidget = CustomWidget::create(10, 50, 200, 50, ui->root);
}


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

    //Create a window
    window = CreateWindow("Ultra Engine", 0, 0, 300, 300, displays[0], WINDOW_DEFAULT);

    //Create a world
    menuWold = CreateWorld();

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

    //Create camera
    auto camera = CreateCamera(menuWold);
    camera->SetClearColor(0.125);
    camera->SetPosition(0, 0, -3);
    camera->SetFov(70);

    initGui();

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

 

[Josh]

Yeah, I was using vertices for the rounding and I think that is not good, so I disabled it. I think I want to do some CPU rasterization to generate images for rounded blocks, and for blocks with a gradient.

[Dreikblack]

For now i resolved it by drawing a pixmap for a background. Had these widgets before but switched to block based widgets due bug that was fixed later.

[Dreikblack]

Updated example:

#include "Leadwerks.h"

using namespace Leadwerks;

class CustomWidget : public Panel {
    CustomWidget::CustomWidget() {
        cornerradius = 8;
        blocks.resize(1);
    }

protected:

    virtual bool Initialize(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent) {
        return Widget::Initialize(text, x, y, width, height, parent, style);
    }

    void Draw(const int x, const int y, const int width, const int height) {

        blocks[0].color = color[WIDGETCOLOR_BACKGROUND];
        blocks[0].wireframe = false;
        blocks[0].position = iVec2(0);
        blocks[0].size = size;
        blocks[0].hidden = false;
        blocks[0].radius = cornerradius;
    }

public:

    static shared_ptr<CustomWidget> create(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent) {
        struct Struct : public CustomWidget {
        };
        auto instance = std::make_shared<Struct>();
        instance->Initialize(x, y, width, height, parent);
        instance->SetColor(0.5, 0.5, 0.5, 1, WIDGETCOLOR_BACKGROUND);
        return instance;
    }

};

shared_ptr<Window> window;
shared_ptr<Framebuffer> framebuffer;
shared_ptr<World> menuWold;
shared_ptr<Interface> ui;
shared_ptr<Camera> uiCamera;

shared_ptr<CustomWidget> customWidget;

void initGui() {
    auto default_font = LoadFont("Fonts\\arial.ttf");
    uiCamera = CreateCamera(menuWold, PROJECTION_ORTHOGRAPHIC);
    uiCamera->SetPosition((float)framebuffer->GetSize().x * 0.5f, (float)framebuffer->GetSize().y * 0.5f, 0);
    uiCamera->SetRenderLayers(2);
    uiCamera->SetClearMode(CLEAR_DEPTH);
    ui = CreateInterface(uiCamera, default_font, framebuffer->GetSize());
    ui->SetRenderLayers(2);
    ui->root->SetColor(0.0f, 0.0f, 0.0f, 0.0f);
   
    customWidget = CustomWidget::create(10, 50, 200, 50, ui->root);
}


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

    //Create a window
    window = CreateWindow("Ultra Engine", 0, 0, 300, 300, displays[0], WINDOW_DEFAULT);

    //Create a world
    menuWold = CreateWorld();

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

    //Create camera
    auto camera = CreateCamera(menuWold);
    camera->SetClearColor(0.125);
    camera->SetPosition(0, 0, -3);
    camera->SetFov(70);

    initGui();

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

 

[Josh]

Yes, this is because it is very hard to get pixel-perfect 2D drawing with a 3D rendering API. My earlier attempts used a lot of vertices to make a rounded polygon, but it's not possible to make that pixel-perfect with both solid and line primitives. The only way to solve it is to basically make a hidden pixmap that gets generated and drawn automatically. In other words, drawn the widget with a software rasterizer first, and then copy that result into a texture and draw it onscreen. That's a pretty complicated system to set up, just to handle something that is a small cosmetic issue, so this is likely to be low-priority.