The interface its rendered behind objects

[jetspydragon]

I did a world with a tile that I can move with arrows, that worked. Then I create an interface but It shows behind the tile and I cannot figure it out how things are rendered or how to make the UI in front the tile. Thanks in advance. This is the code:

```

#include "Leadwerks.h"

using namespace Leadwerks;

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

    //Create a window
    auto window = CreateWindow("Leadwerks", 0, 0, 1280 * displays[0]->scale, 720 * displays[0]->scale, displays[0], WINDOW_TITLEBAR | WINDOW_CENTER);

    auto framebuffer = CreateFramebuffer(window);

    auto world = CreateWorld();

    auto camera = CreateCamera(world);
    camera->SetClearColor(Vec4(0.125f, 0.125f, 0.125f, 1));

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

    //Create user interface
    auto ui = CreateInterface(camera, font, framebuffer->size);

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

    auto tile = CreateTile(world, 100, 100);
    tile->SetColor(0, 1, 0);

    float x = framebuffer->size.x / 2 - tile->size.x / 2;
    float y = framebuffer->size.y / 2 - tile->size.y / 2;

    auto target = Vec2(x, y);
    while (!window->KeyDown(KEY_ESCAPE) && !window->Closed())
    {
        while (PeekEvent()) {
            const Event event = WaitEvent();
            switch (event.id)
            {
            case EVENT_KEYDOWN:
                if (event.data == KEY_RIGHT) {
                    target.x = x + tile->size.x;
                }
                else if (event.data == KEY_LEFT) {
                    target.x = x - tile->size.y;
                }
                else if (event.data == KEY_UP) {
                    target.y = y - tile->size.y;
                }
                else if (event.data == KEY_DOWN) {
                    target.y = y + tile->size.y;
                }
                break;
            default:
                ui->ProcessEvent(event);
                break;
            }
        }

        x = Mix(x, target.x, 0.05f);
        y = Mix(y, target.y, 0.05f);
        if (abs(x - target.x) < 0.1f) x = target.x;
        if (abs(y - target.y) < 0.1f) y = target.y;
        tile->SetPosition(x, y, 1.f);

        world->Update();

        world->Render(framebuffer, true);
    }
    return 0;
}

```

[Josh]

Try adjusting the tile order with this command:
https://www.leadwerks.com/learn/Tile_SetOrder

[jetspydragon]

I tried 1000 and -1000 and still the button is behind the tile. With that values, and even with the button behind the tile, I can click it. But the UI should be in front of the tile... I mean, I should can control that. What am I doing wrong here?

[Josh]

Just now, jetspydragon said:

I tried 1000 and -1000 and still the button is behind the tile. With that values, and even with the button behind the tile, I can click it. But the UI should be in front of the tile... I mean, I should can control that. What am I doing wrong here?

Thank you. This sounds like a possible bug I need to investigate in more detail.

[Josh]

Some more information:

• The GUI system uses tiles to draw, when used with a 3D framebuffer.
• The tile order starts at 10,000. Perhaps I accidentally reversed the sort order?

I will test further and solve this...

[Josh]

Okay, there's probably no bug but the documentation could use some extra explaination.

You can create a tile or an Interface from both a single camera or a world. If it is created on a camera it will be drawn at the end of the camera render routine. If it is created on the world, it will just get drawn last, after all cameras have drawn.

You had one object being created on a camera and one on the world, so it switched the drawing order around.

Additionally, when you position a tile you can just provide two coordinates (x and y) unless you are using Z to sort the order.

#include "Leadwerks.h"

using namespace Leadwerks;

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

    //Create a window
    auto window = CreateWindow("Leadwerks", 0, 0, 1280 * displays[0]->scale, 720 * displays[0]->scale, displays[0], WINDOW_TITLEBAR | WINDOW_CENTER);

    auto framebuffer = CreateFramebuffer(window);

    auto world = CreateWorld();

    auto camera = CreateCamera(world);
    camera->SetClearColor(Vec4(0.125f, 0.125f, 0.125f, 1));

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

    //Create user interface
    auto ui = CreateInterface(camera, font, framebuffer->size);
    ui->background->SetColor(0,0,0,0);// make background transparent

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

    auto tile = CreateTile(camera, 100, 100);
    tile->SetColor(0, 1, 0);
    
    float x = framebuffer->size.x / 2 - tile->size.x / 2;
    float y = framebuffer->size.y / 2 - tile->size.y / 2;

    auto target = Vec2(x, y);
    while (!window->KeyDown(KEY_ESCAPE) && !window->Closed())
    {
        while (PeekEvent()) {
            const Event event = WaitEvent();
            switch (event.id)
            {
            case EVENT_KEYDOWN:
                if (event.data == KEY_RIGHT) {
                    target.x = x + tile->size.x;
                }
                else if (event.data == KEY_LEFT) {
                    target.x = x - tile->size.y;
                }
                else if (event.data == KEY_UP) {
                    target.y = y - tile->size.y;
                }
                else if (event.data == KEY_DOWN) {
                    target.y = y + tile->size.y;
                }
                break;
            default:
                ui->ProcessEvent(event);
                break;
            }
        }

        x = Mix(x, target.x, 0.05f);
        y = Mix(y, target.y, 0.05f);
        if (abs(x - target.x) < 0.1f) x = target.x;
        if (abs(y - target.y) < 0.1f) y = target.y;
        tile->SetPosition(x, y);
        
        world->Update();

        world->Render(framebuffer, true);
    }
    return 0;
}

 

[Josh]

Docs updated:
https://github.com/Leadwerks/Documentation/blob/master/Lua/CreateInterface.md#remarks
https://github.com/Leadwerks/Documentation/blob/master/Lua/CreateTile.md#remarks