Movable image masks

SDK Get Help
1

I have an overlaying sprite that "darkens" the game (it's a gif with a dithered black/transparent pattern) and I want to be able to shine a light in this darkness, making a "hole" in the overlay. I thought image masks would be the solution, but I can't seem to get that to work properly. I try adding a mask image, but it completely removes the dithered pattern and just shows the "hole" as completely transparent and everything else is all black. I've tried having the mask image in black/transparent, white/transparent and black/white, but nothing comes out the way I want it to. Also, I need to be able to move this "hole" dynamically, which is hard if the mask image has to be the same size as the image I'm masking. I'd like to have my overlay at say 400x240 size, but my mask image at maybe 50x50 size and wherever I place it, it makes the hole. That might not be possible right now though, but what are my alternatives?

2

What you can do is to render directly into the mask of your image

You can do something like that:

local shadeImage = playdate.graphics.image.new(400, 240, playdate.graphics.kColorBlack)
shadeImage:addMask()
local shadeAsset = playdate.graphics.image.new( 'your_shade_gif' )
local lightAsset = playdate.graphics.image.new( 'your_light' )

function playdate.update()
	-- draw the game ...

	-- update the shade mask
	local shadeMask = shadeImage:getMaskImage()
	playdate.graphics.pushContext( shadeMask )
		-- reset the mask to the one in the gif
		shadeAsset:getMaskImage():draw( 0, 0)

		-- draw the light/hole
		lightAsset:draw( 200, 120)
	playdate.graphics.popContext()

	-- draw the shade
	shadeImage:draw(0, 0)
end
2 Likes
3

Thanks! That worked nicely. My only addition was to make "shadeImage" into a sprite so that I could control its z-index. Otherwise it wouldn't overlay the rest.

1 Like
4

Hi, I am interested in what you say you make "shadeImage" into a sprite to control z-index. How did you do that? How did you make a sprite to support the addMask? Can you share some sample code?
Thanks so much.