2D UI masking

[Rick]

I seem to recall someone had this working once and I never could but can't find the post. Think of how diablo has their bubbles for health or mana where it has this overlay container and under it is the red image. The overlay container has transparent areas but the underlying red image doesn't but the only thing that's drawn for the red background is whatever is visible in the top container. It's almost like the transparent parts of the overlay also take effect to the underlying red rectangle image. Does this make sense? Anyone know how to do this? Some sort of masking I would imagine.

[Ma-Shell]

Not really sure, what you are asking. Do you want to draw an image with an alpha-value above your rendered image?

In that case the following code should do the trick:

 

int blendModeOld = context->GetBlendMode();
context->SetBlendMode(Blend::Alpha);
context->DrawImage(...);
context->SetBlendMode(blendModeOld);

[Rick]

Imagine you have a hallow circle. Behind that is drawn a red rectangle, however all you see is a red circle. You are able to move that red rectangle down when drawing it and it'll look like the health is dropping. The reason is needs to be a red rectangle? Well because the circle could be any shape you want. It could be a very complex shape but you only want the red to show where the shape is and the rest of the red rectangle won't show.

 

http://www.html5rocks.com/en/tutorials/masking/adobe/

[macklebee]

Marley and I played around with this in LE2... there are probably several other and more efficient ways to do it, but the two methods we used were:

1) multiple images of the circle/segments and draw as needed based on health/mana level

2) sphere mesh drawn in ortho mode in other buffer with a shader than only applied the texture based on level (y-axis)

 

looking back now i suppose you could get the similar results by just drawing the circle on a quad and then just use a similar shader to control how much in the y-axis to draw

[YouGroove]

Masking is standard for GUI systems, it allows you to make many cool effects in a simple way without needing some work around.

[shadmar]

Yes this is very simple using a shader, let me know if you need help.

[Rick]

I need help lol

 

So you can do a 2D shader that allows masking? I guess I always thought shaders were for 3D stuff or post effects on the entire final image.

 

I think ideally it would be like a real 2D masking system. Draw the background image, draw the mask on top and it eliminates pixels from the last underlying 2D image drawn on the masked part. The mask would be black and white image where white is shown and black is the mask or something like that. That's how I vision using something like this in my head I guess.

 

I suppose you'd have to do all of this on a separate buffer and then draw that buffer (the final result) to the screen.

 

Or I suppose if this can be done in a shader you give the actual texture in 1 slot, the mask in another and when you are drawing the actual texture you do lookups pixel by pixel on the mask and only draw the actual texture pixel if it's white in the mask pixel. If it's black you discard the pixel.

[gamecreator]

And of course there's still this (masking it yourself):

http://www.leadwerks.com/werkspace/page/documentation/_/command-reference/texture/texturesetpixels-r338

[shadmar]

Here is a diablo style example using a shader.

 

The mana bubble has alphamask for it's shape, and blackmask for the mana.

 

in the lua pivot script, use

SetColor(1,1,1,amount) 

to control the mana fillrate

maskedsprite.zip

[Rick]

This is brilliant Shadmar! Thank you.