how to dynamically mask a group display object

Audio and Graphics
#1

I am creating a horizontal alpha value slider.
The shape is a horizontal rounded rectangle.
I want to fill the rounded rect with a checker pattern image - then use the ‘paintAlpha’ (below) fill to create the alpha value. Here’s my simple code for the rounded rect so far:

local paintAlpha = {
type = “gradient”,
color1 = { 0,0,0,0 },
color2 = { 0,0,0,1},
direction = “right”
}
_rectAlpha = display.newRoundedRect( 0, 0, width, height, height/2 );
_rectAlpha.fill = paintAlpha;
_rectAlpha.strokeWidth = 3;
_rectAlpha:setStrokeColor( 0, 0, 0, 1 );
_groupAlpha:insert(_rectAlpha);

This works fine for the alpha.

I know how to add a checker image:
_checkImg = display.newImage(“checker.png”)
_groupAlpha:insert(_checkImg);

But, how do I mask my checker image so it is only visible inside my rounded rect?
I don’t want checker pattern outside the rounded corners of my slider.

#2

The easiest way to make them the same height. No masks no problem. :slightly_smiling_face:

you can read about masks here:
https://docs.coronalabs.com/guide/media/imageMask/index.html