Clipping rectangle and text in allegro5

no-reply@allegro.cc (Bungow) — Mon, 23 Oct 2017 04:40:19 +0000

Hello,

I'm writing a GUI using allegro 5. When composed, I iterate for all widgets from child to parents and call drawing routines for each, so this way I ensure the foreground widget is draw the last.

To avoid drawing outside their parent, each child widget, and before drawing it, sets a clipping rectangle with the dimensions of their parent with al_set_clipping_rectangle. This is working fine except for the text widget, as I can see all the text when a fraction of widget is presented (I suppose text don't support half drawing and is just a draw or not draw solution).

Can you give a hint to resolve this issue? (I was thinking in drawing text to a bitmap and clip this bitmap, but I think this would be expensive, maybe I'm wrong).

Also, I don't want to do checks in each child to test his position if possible, and I like the method of simple clipping away the widgets outside his parent.

Thank you in advance

no-reply@allegro.cc (beoran) — Mon, 23 Oct 2017 10:10:34 +0000

I am surprised that it doesn't work, I also thought clipping works with the text output functions.Do you use a bitmap font or a TTF font? Do you have some code demonstrating the issue? Otherwise I will investigate myself later.

no-reply@allegro.cc (Bungow) — Mon, 23 Oct 2017 13:58:32 +0000

Hello,

I'm using TTF fonts, the code I have is a bit huge, but here I left the relevant parts:

The drawing routine calls this code recursively over each widget, from the background widget to the top.

#SelectExpand
  1al_set_clipping_rectangle(widget->parent->x - mk_dpi(2),
            widget->parent->y - mk_dpi(2),
            widget->parent->width + mk_dpi(2),
            widget->parent->height + mk_dpi(2));
    // Clipping rectangle. All draws outside this rectangle are
    // ignored
}
widget->f.draw(widget, NULL);
al_reset_clipping_rectangle();

The draw code for text is simply:

#SelectExpand
 1if (widget->p.text.text) {
 2  al_draw_multiline_text(widget->root->p.root.ctx->asset.gui_font,
 3             widget->style->foreground, widget->x, widget->y,
 4             widget->width, 0, 0, widget->p.text.text);
 5    }

The widget text is always nested to another widgets like buttons or text labels but I think it's not relevant.

Result:
This is a huge grid of tilemaps (stolen from another game for testing purpose only), when all the widget is clipped the text don't appear.

{"name":"611086","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/c\/3\/c3ee16d6932cfbd96cf1149f9c613f5b.png","w":1333,"h":862,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/c\/3\/c3ee16d6932cfbd96cf1149f9c613f5b"}

But when the right widgets start to draw the text appear without clipping in the window (the rectangle in the middle of screen)

{"name":"611087","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/6\/1\/61c5f563509e7117cd4056dce81613ad.png","w":1366,"h":858,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/6\/1\/61c5f563509e7117cd4056dce81613ad"}

no-reply@allegro.cc (Elias) — Mon, 23 Oct 2017 18:45:58 +0000

TTF fonts are drawn using al_draw_bitmap, so there is no reason clipping would work any differently.

I can try myself later - but if you create a minimal example, can you reproduce this behavior? E.g. just add a clipping rectangle to the ex_ttf example.

no-reply@allegro.cc (Bungow) — Mon, 23 Oct 2017 19:48:59 +0000

Humm you are right, the clipping is working fine in a simple example, sorry for no test this first, but it's seems I made some mistake calculating the clipping rectangle :/

I will investigate on this, and come here if I need more help.

Thanks you all for your help.

no-reply@allegro.cc (beoran) — Mon, 23 Oct 2017 22:21:16 +0000

It looks the mk_dpi function is not correct, and so the clipping rectangle is miscalculated bigger than expected. You can debug this visually by drawing the clipping rectangle with al_draw_rectangle before setting it.

And don't worry about asking, we all get stuck at times and we all can use some help, at times. 😎

no-reply@allegro.cc (DanielH) — Tue, 24 Oct 2017 00:26:19 +0000

What is mk_dpi? I see you are adjusting the position by mk_dpi, but why are you also adjusting the width and height?

no-reply@allegro.cc (Bungow) — Tue, 24 Oct 2017 19:37:01 +0000

Hello, I finally manage to solve the issue, I was miscalculating the clipping rectangle only in some cases, and I almost go crazy finding the issue, but now is working (Maybe I need to open another tread with performance issues).

mk_dpi is a function returning a DPI scale, so for example mk_dpi(1) return 1 when no scale, but return 4 id DPI is set to 4. I need this to scale all GUI drawing to high DPI screens.

{"name":"611103","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/0\/9\/0950dbafe3f743b7896f0923ffb28ad1.png","w":1399,"h":800,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/0\/9\/0950dbafe3f743b7896f0923ffb28ad1"}

Thank you for your help.