Help with image masks

I still can't get my head around image masks.

It took me ages but I got this working as a test:
playdate-20220923-131401

A static screenshot of my previous game with this mask applied to it:
mask

Which is drawn on top of my current project. Cool.

So I decided to the inverse and draw the static image in a small circle on top of game. I invert the mask:
mask

And it doesn't draw the static image at all... Any help? Does the mask need a border or something to work?

Code:

function loadGame ()
	maskedImage = playdate.graphics.image.new('sprites/maskTest.png')
    	mask = playdate.graphics.image.new('sprites/mask.png')
	shadeMask = mask:getMaskImage()
	maskedImage:setMaskImage(shadeMask)
end

function playdate.update()
	maskedImage:draw (0, 0)
end

I'm not sure what those last two dark-on-dark images show... is there any white?

Anyway, it looks like you're extracting the "mask" OF something that itself already IS ready for use a mask:

I'm assuming sprites/mask.png is a pure black and white image with no transparency. Ready to act AS a mask, but it does not itself CONTAIN another mask (no alpha transparency). That's what you want, anyway.

If you then getMaskImage on it you will get a solid rectangle--showing nothing through from behind.

If that's what's happening, you can skip the shademask steps. Just use maskedImage:setMaskImage(mask).

(A reason to use the shadeMask steps would be to extract a mask would be if mask.png is an image WITH alpha transparency, and you only care about the alpha, discarding the actual imagery. But you don't need mask images to work that way.)

Okay that works. Thank you for your help.
The images I posted were the masks but I was using black/transparent rather than black/white.

Is it possible to move the mask independently of the image it is masking? Or rather keep the mask static while the masked image moves behind it?

My understanding is that an image's "mask" is simply the alpha bit, the extra bit present in any PNG that has transparency (or any new image created without a pure black or white background). It's not a separate entity.

You may find stencils useful: the current stencil, if any, IS a separate entity affecting all drawing. It can be an image, or a tiled image, or an 8x8 pattern, or a dither. You can also use a "clipping rectangle" which seems to be like a simple rectangular stencil if that's all you need.

Stencils are for playdate.graphics drawing, but you can also set a stencil just for an individual sprite. Then I believe you CAN move the sprite while the stencil stays static.

2 Likes

This is great!

I've decided to use the clipping rectangle in the end and it's working exactly as intended. I didn't know such a thing existed! I may need those other methods at a later date though.

Thank you again for taking the time to help me. I really appreciate it.

1 Like

Glad to help! Looking forward to whatever you cook up next!