Space between lines is too short after UI update

[Dreikblack]

For example in game it was:

Became:

In code it just single text block.

TextArea seems to look fine. But usual Panel also have same effect(+horizontal offset):

#include "UltraEngine.h"

using namespace UltraEngine;

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

shared_ptr<Widget> panel;
shared_ptr<Widget> btn;


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(1.0f, 1.0f, 1.0f, 1.0f);
    panel = CreatePanel(10, 10, 1000, 120, ui->root);
    panel->SetText("Enemy in full armored biosuit which can be penetrate only with nails.\nBalloon at the back can be destroyed and it will cause an explosion.\nHis laser rifle shoots at long range and charged shot can hit few units in the shot line.");
    btn = CreateButton("TEST", 10, 200, 100, 20, ui->root);
}


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

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

    //Create a world
    menuWold = CreateWorld();

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

    initGui();

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

 

[Dreikblack]

Text with mid align now have vertical offset 

[Josh]

I fixed the first issue.

[Josh]

Current build is producing different results. Looks like it is a few pixels low (100% scaling)

[Josh]

Clearly something else is not right with the treeview at 200% scaling...

The windowed version of the UI works correctly.

[Josh]

Listbox looks okay, so that problem must just be limited to the treeview...

[Josh]

I think I have everything worked out now...

[Josh]

New update will come tomorrow morning with the edits.

[Josh]

I believe this is fixed, in the build that will go up later today...

#include "UltraEngine.h"

using namespace UltraEngine;

#define GUIMODE 1

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

    //Create a window
    auto window = CreateWindow("Ultra Engine", 0, 0, 800, 600, displays[0], WINDOW_TITLEBAR);

#if GUIMODE == 1
    auto framebuffer = CreateFramebuffer(window);
    auto world = CreateWorld();
    auto font = LoadFont("Fonts/segoeui.ttf");
    auto camera = CreateCamera(world);
    auto ui = CreateInterface(camera, font, framebuffer->size);
#else
    auto ui = CreateInterface(window);
#endif

    //Create widget
    auto sz = ui->root->ClientSize();
    
    auto widget = CreateTextArea(10, 10, sz.x - 20, sz.y - 20, ui->root, TEXTAREA_WORDWRAP);
    for (int n = 0; n < 3; ++n)
    {
        if (not widget->text.empty()) widget->AddText("\n\n");
        widget->AddText("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
    }
    widget->SetFontScale(4);
    
    while (not window->KeyHit(KEY_ESCAPE))
    {
#if GUIMODE == 1
        while (PeekEvent())
        {
            const auto event = WaitEvent();
            if (event.id == EVENT_WINDOWCLOSE) return 0;
            ui->ProcessEvent(event);
        }
        world->Update();
        world->Render(framebuffer);
#else
        const auto event = WaitEvent();
        if (event.id == EVENT_WINDOWCLOSE) return 0;
#endif
    }
    return 0;
}

 

[Dreikblack]

@Joshline space seems to be fixed, but vertical offset presents for text with without Middle align

#include "UltraEngine.h"

using namespace UltraEngine;


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

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

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

    //Create widget
    auto sz = ui->root->ClientSize();

    auto widget = CreateLabel("Random Text ppp",0, 0, sz.x - 20, 50, ui->root, LABEL_LEFT);
   
    widget->SetFontScale(4);

    while (not window->KeyHit(KEY_ESCAPE)) {
        while (PeekEvent()) {
            const auto event = WaitEvent();
            if (event.id == EVENT_WINDOWCLOSE) return 0;
            ui->ProcessEvent(event);
        }
        world->Update();
        world->Render(framebuffer);
        const auto event = WaitEvent();
        if (event.id == EVENT_WINDOWCLOSE) return 0;
    }
    return 0;
}

 

[Alienhead]

I'm also seeing text chopped off in all areas- 

 

[Josh]

Fixed!

[Dreikblack]

It's better now. But default line space is still a bit lower than used to be before UI rework, look at 1st pick of 1st post. Current result:

[Josh]

That's quite close together...

[Josh]

21 minutes ago, Dreikblack said:

It's better now. But default line space is still a bit lower than used to be before UI rework, look at 1st pick of 1st post. Current result:

I will need an example and your font to test with, because my sample here appears correctly:

#include "UltraEngine.h"

using namespace UltraEngine;

#define GUIMODE 1

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

    //Create a window
    auto window = CreateWindow("Ultra Engine", 0, 0, 800, 600, displays[0], WINDOW_TITLEBAR);

#if GUIMODE == 1
    auto framebuffer = CreateFramebuffer(window);
    auto world = CreateWorld();
    auto font = LoadFont("Fonts/segoeui.ttf");
    auto camera = CreateCamera(world);
    auto ui = CreateInterface(camera, font, framebuffer->size);
#else
    auto ui = CreateInterface(window);
#endif

    //Create widget
    auto sz = ui->root->ClientSize();

    auto widget = CreateTextArea(10, 10, sz.x - 20, sz.y - 20, ui->root, TEXTAREA_WORDWRAP);
    for (int n = 0; n < 3; ++n)
    {
        if (not widget->text.empty()) widget->AddText("\n\n");
        widget->AddText("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
    }
    //widget->SetFontScale(4);

    while (not window->KeyHit(KEY_ESCAPE))
    {
#if GUIMODE == 1
        while (PeekEvent())
        {
            const auto event = WaitEvent();
            if (event.id == EVENT_WINDOWCLOSE) return 0;
            ui->ProcessEvent(event);
        }
        world->Update();
        world->Render(framebuffer);
#else
        const auto event = WaitEvent();
        if (event.id == EVENT_WINDOWCLOSE) return 0;
#endif
    }
    return 0;
}

 

[Dreikblack]

#include "UltraEngine.h"

using namespace UltraEngine;

class CustomWidget : public Panel {

    CustomWidget::CustomWidget() {
        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].hidden = false;
        blocks[0].position = iVec2(0, 0);
        blocks[0].size = iVec2(width , height);
        blocks[0].SetText(text);
        blocks[0].textalignment = TEXT_LEFT;
    }

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);
        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() {
    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);
    auto default_font = LoadFont("Fonts\\arial.ttf");
    ui = CreateInterface(uiCamera, default_font, framebuffer->GetSize());
    ui->SetRenderLayers(2);
  
    customWidget = CustomWidget::create(10, 10, 800, 250, ui->root);
    customWidget->SetText("Enemy in full armored biosuit which can be penetrate only with nails.\nBalloon at the back can be destroyed and it will cause an explosion.\nHis laser rifle shoots at long range and charged shot can hit few units in the shot line.");
    customWidget->SetFontScale(2.0f);
}


int main(int argc, const char* argv[]) {
    auto displays = GetDisplays();
    window = CreateWindow("Ultra Engine", 0, 0, 800, 250, displays[0], WINDOW_DEFAULT);
    menuWold = CreateWorld();
    framebuffer = CreateFramebuffer(window);

    initGui();

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

 

[Josh]

Ah, I did not realize this is not a text area...that's a bit different. Okay, I can figure it out now...

Some small changes were needed to compile it...

#include "UltraEngine.h"

using namespace UltraEngine;

class CustomWidget : public Panel {

protected:

    virtual bool Initialize(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent) {
        blocks.resize(1);
        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].hidden = false;
        blocks[0].position = iVec2(0, 0);
        blocks[0].size = iVec2(width, height);
        blocks[0].SetText(text);
        blocks[0].textalignment = TEXT_LEFT;
    }

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);
        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() {
    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);
    auto default_font = LoadFont("Fonts\\arial.ttf");
    ui = CreateInterface(uiCamera, default_font, framebuffer->GetSize());
    ui->SetRenderLayers(2);

    customWidget = CustomWidget::create(10, 10, 800, 250, ui->root);
    customWidget->SetText("Enemy in full armored biosuit which can be penetrate only with nails.\nBalloon at the back can be destroyed and it will cause an explosion.\nHis laser rifle shoots at long range and charged shot can hit few units in the shot line.");
    customWidget->SetFontScale(2.0f);
}


int main(int argc, const char* argv[]) {
    auto displays = GetDisplays();
    window = CreateWindow("Ultra Engine", 0, 0, 800, 250, displays[0], WINDOW_DEFAULT);
    menuWold = CreateWorld();
    framebuffer = CreateFramebuffer(window);

    initGui();

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

 

[Dreikblack]

Vertical offset is still feels off and i'm not sure if it's intended. It's okayish with big scale, but for digits or upper letters on low font scale looks off.

#include "UltraEngine.h"

using namespace UltraEngine;

class CustomWidget : public Panel {

protected:

    virtual bool Initialize(const int x, const int y, const int width, const int height, shared_ptr<Widget> parent) {
        blocks.resize(2);
        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 = Vec4(0.8, 0.8, 0.8);
        blocks[0].wireframe = false;
        blocks[0].position = iVec2(0);
        blocks[0].size = size;
        blocks[0].hidden = false;

        blocks[1].hidden = false;
        blocks[1].position = iVec2(0, 0);
        blocks[1].size = iVec2(width, height);
        blocks[1].SetText(text);
        blocks[1].textalignment = TEXT_MIDDLE;
    }

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);
        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() {
    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);
    auto default_font = LoadFont("Fonts\\arial.ttf");
    ui = CreateInterface(uiCamera, default_font, framebuffer->GetSize());
    ui->SetRenderLayers(2);
    float scale = 1.0f;
    customWidget = CustomWidget::create(10, 10, 800, 14 * scale, ui->root);
    customWidget->SetText("ESCpppp123");
    customWidget->SetFontScale(scale);
}


int main(int argc, const char* argv[]) {
    auto displays = GetDisplays();
    window = CreateWindow("Ultra Engine", 0, 0, 800, 250, displays[0], WINDOW_DEFAULT);
    menuWold = CreateWorld();
    framebuffer = CreateFramebuffer(window);

    initGui();

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

 

[Josh]

Simplified test case:

#include "UltraEngine.h"

using namespace UltraEngine;

int main(int argc, const char* argv[]) {
    auto displays = GetDisplays();
    auto window = CreateWindow("Ultra Engine", 0, 0, 800, 250, displays[0], WINDOW_DEFAULT);
    auto menuWold = CreateWorld();
    auto framebuffer = CreateFramebuffer(window);

    auto uiCamera = CreateCamera(menuWold, PROJECTION_ORTHOGRAPHIC);
    uiCamera->SetPosition((float)framebuffer->GetSize().x * 0.5f, (float)framebuffer->GetSize().y * 0.5f, 0);
    uiCamera->SetClearMode(CLEAR_DEPTH);
    auto default_font = LoadFont("Fonts\\arial.ttf");
    auto ui = CreateInterface(uiCamera, default_font, framebuffer->GetSize());

    auto customWidget = CreateLabel("", 10, 10, 800, 250, ui->root);
    customWidget->SetText("Enemy in full armored biosuit which can be penetrate only with nails.\nBalloon at the back can be destroyed and it will cause an explosion.\nHis laser rifle shoots at long range and charged shot can hit few units in the shot line.");
    customWidget->SetFontScale(2.0f);

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

 

[Josh]

The above example now looks like this:

[Josh]

12 hours ago, Dreikblack said:

Vertical offset is still feels off and i'm not sure if it's intended. It's okayish with big scale, but for digits or upper letters on low font scale looks off.

My current build looks like this:

I don't know if it will ever be perfect, because although FreeType provides the font ascent and descent, it does not provide the cap height.