Animating `setStencilPattern` not working

I'm attempting to fade in an image file by using playdate.graphics.animator and setStencilPattern, but I can't get it to work; the image will use whatever level value that the latter function first receives. Am I missing something? My code is below, and I can confirm that draw is in fact being called on every frame:

local pd <const> = playdate
local gfx <const> = pd.graphics

class("Credits").extends(gfx.sprite)

function Credits:init()
  Credits.super.init(self)
  self:setCenter(0, 0)
  self:setBounds(0, 0, 400, 240)
  self:setZIndex(Z_INDEXES.UI)

  self.animator = gfx.animator.new(3000, 0, 1.0)
  self.image = gfx.image.new('images/end-credits-black-title')
end

function Credits:draw()
  gfx.setStencilPattern(self.animator:currentValue(), gfx.image.kDitherTypeBayer8x8)
  self.image:draw(0, 0)
  gfx.clearStencil()
end

In this case, the image stays transparent and never appears. If I reverse the values in animator so it starts at 1.0, then the image starts opaque and never fades out.

I think the problem is that you're not marking the sprite as dirty and it gets ignored by the playdate.graphics.sprite.update() after the first draw call.

Try this:

function Credits:update()
  self::markDirty()
end
1 Like

Thank you! I had previously tried calling that in the draw function but I guess it doesn't work from there.

2 Likes