Drawing Dialogue Box "tails"

[jdoolin]

I'm going to attempt to allow "tails" to be added to dialogue boxes, similar to the screenshot below. I have a pretty good idea of how to get this to work, except for one small aspect.

My current idea is to require a tail graphic that will be drawn to blend in with the sides of the panel if placed properly. However, as seen in the screenshot, this would ideally support transparency to allow for any background image to show through in the tail. The FFIX dialogue looks to have a tiled background that you can see extends into the tail.

I'm not entirely sure how to solve this problem. My current best guess is to use a Stencil and mask off everything outside the dialogue panel. However, even if I'm correct, despite reading the documentation on Stencils, I'm not sure how I'd do it here. I'm currently using Canvases for drawing the dialogue panels (makes scaling and other transitions easier).

I'd be appreciative of any thoughts or ideas.

[raidho36]

Couldn't you just create a graphics with transparency in it? Like, a normal PNG?

[jdoolin]

Couldn't you just create a graphics with transparency in it? Like, a normal PNG?

I don't think so in this case. The dialogue boxes aren't always the same size. The library I'm working on allows you to create them to be the size you need. The way I'm doing it now is to draw the background image either scaled or tiled to a canvas, then drawing the border, corners first, then sides. Using a canvas allows me to tile the background image and anything that's drawn off-canvas is just ignored. I could easily add the tail by drawing the border, then the tail, then more border. I could draw another row of background images so it would appear in the tail, but I need a way of masking off the rest.

[zorg]

Then i'd suggest going with your initial idea; use a tail image with transparency around it, and simply put it under the bottom of the textbox. No need to blend anything, since it should be the same color anyway.
(Also, just calculate in the extra height of the tail into the canvas' height when you create it, that way you don't have to mess around too much.)