Best-perorming fade between 2 images (Lua)?

I'm back to work on my next title (Outside Parties, a horror game) and I'm wondering... what's the highest-framerate way to fade (nearly) the entire screen from one image to another? (Not one image to/from black—two images.)

My early experiments using image:blendWithImage have been super slow and choppy on-device, regardless of dither choice. Maybe it can't be done? (At least not in Lua?)

Luckily, there's NOTHING else going on on the screen, so I have lots of flexibility to use any approach!

15 fps would be good... 20+ would be awesome! I'm getting more like 6 to 8.

TIA!

I was going to suggest looking at the "fast_fade" example in Single File Examples, but it looks like that could use an update. So, I would suggest using stencils, something like this:

import "CoreLibs/graphics"
import "CoreLibs/animator"

local gfx <const> = playdate.graphics
playdate.display.setRefreshRate(50)

local image1 = gfx.image.new("one")
local image2 = gfx.image.new("two")
local alpha = 0
local duration = 1000
local animator = playdate.graphics.animator.new(duration, 0, 1)

function playdate.AButtonDown()
	if alpha == 1 then
		animator = playdate.graphics.animator.new(duration, alpha, 0)
	end
end

function playdate.BButtonDown()
	if alpha == 0 then
		animator = playdate.graphics.animator.new(duration, alpha, 1)
	end
end

function playdate.update()
	
	image1:draw(0, 0)
	
	alpha = animator:currentValue()
	gfx.setStencilPattern(alpha, gfx.image.kDitherTypeBayer8x8)
	image2:draw(0, 0)
	
	gfx.clearStencil()
	playdate.drawFPS(1, 1)
	
end

ImageFade.zip (6.3 KB)

3 Likes

That's great—thanks! I will be playing with that.

The stencil approach also lends itself well to other things I want to do!

Very cool! I really need to get a grip on stencils so this is a good start.