Batch layers

[ghost]

fn draw() !void {
    // lets say this text box needs to be rendered at the top off all of the others
    {
        var tr_button = m.Transform2D{
            .position = m.Vec2f{ .x = 200, .y = 200 },
            .size = m.Vec2f{ .x = 150, .y = 30 },
        };
        tr_button.origin = tr_button.size.divValues(2, 2);

        const button_colour = alka.Colour.rgba(40, 100, 200, 255);

        try alka.drawRectangle(tr_button.getRectangle(), button_colour);

        try alka.drawText(0, "Hello World!", tr_button.getOriginated(), 24, alka.Colour.rgba(0, 0, 0, 255));
    }

    // but there is a rect on top of the text, what should can you do?
    // this rect has to be below of the text box
    {
        var tr_rect = m.Transform2D{
            .position = m.Vec2f{ .x = 200, .y = 200 },
            .size = m.Vec2f{ .x = 150, .y = 30 },
        };
        tr_rect.origin = tr_rect.size.divValues(2, 2);

        const rect_colour = alka.Colour.rgba(200, 70, 120, 255);

        try alka.drawRectangleAdv(tr_rect.getRectangleNoOrigin(), tr_rect.origin, m.deg2radf(45), rect_colour);
    }

    // currently the best option to do it, render the all of the stuff needs to be below
    // then draw the text box
    // but how do you do that? Well you gotta sort the rectangle draw calls and the other draw calls accordingly
    // so the batch system put the textbox on top of everything.
    // so you sort them right? oh look there is a texture that is above the textbox
    // it seems you missed it or you just added the texture and it needs to be sorted.
    // as you can imagine, thats a lot of things to do and its complicated.
    // so why not the engine itself provides that?
    // the easiest way to do it is, creating layers between batchs
    // the problem with this approach is, if you make a lot of layers
    // it's just going to render a huge load of batchs and will be slow
    // so, one needs to be careful when using it but, it should not create too much of a
    // problem if one is careful
    //
    // something like this should be relatively easy to implement too

    // this should set the internal batch system go up to the layer: 1
    alka.setBatchLayer(1);
    {
        var tr_button = m.Transform2D{
            .position = m.Vec2f{ .x = 200, .y = 200 },
            .size = m.Vec2f{ .x = 150, .y = 30 },
        };
        tr_button.origin = tr_button.size.divValues(2, 2);

        const button_colour = alka.Colour.rgba(40, 100, 200, 255);

        try alka.drawRectangle(tr_button.getRectangle(), button_colour);

        try alka.drawText(0, "Hello World!", tr_button.getOriginated(), 24, alka.Colour.rgba(0, 0, 0, 255));
    }

    alka.setBatchLayer(0);
    {
        var tr_rect = m.Transform2D{
            .position = m.Vec2f{ .x = 200, .y = 200 },
            .size = m.Vec2f{ .x = 150, .y = 30 },
        };
        tr_rect.origin = tr_rect.size.divValues(2, 2);

        const rect_colour = alka.Colour.rgba(200, 70, 120, 255);

        try alka.drawRectangleAdv(tr_rect.getRectangleNoOrigin(), tr_rect.origin, m.deg2radf(45), rect_colour);
    }

    // and done! this way textbox will be above all of the stuff that is in layer: 0
    // well obviously this is just overkill for this, but thinking about thousands of rectangles, lines,
    // textures and you trying to sort them on your own? Oh it's going to be hard task
    // but this way, as you can imagine, it's way easier
}