Gif as background rendered different than file

SDK Get Help
1

Hi everyone, I'm currently developping a little pong as my first game. I want to have an animation for the background of the game.
I've exported an animation with a P5js sketch https://editor.p5js.org/Erjaeger42/sketches/Est8hm1x2

Just a black and white animation. I've add it to my game with this code :

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

function GameScene:init()
	GameScene.super.init(self)

	local backgroundTable = gfx.imagetable.new("assets/background_anim.gif")
	local animationLoop = gfx.animation.loop.new(10, backgroundTable, true)
	local animatedSprite = gfx.sprite.new(animationLoop:image())
	animatedSprite:setZIndex(0)
	animatedSprite:setBounds(0, 0, 400, 240)
	animatedSprite:add()
	animatedSprite.update = function()
		gfx.setImageDrawMode(gfx.kDrawModeCopy)
		animatedSprite:setImage(animationLoop:image())
	end

	self:launchGame()
end

But the result looks like this :
background

I've tried to set different ImageDrawMode but it's not changing anything.

Am I missing something ? Is it better to generate multiple image and then create the animation with an ImageTable instead of using a GIF?

Thanks for your help!

2

Is the screen clear set to white? Maybe that would work

3

Hi Matt,

I tried it but no difference. I've tried exporting only one image from the p5 sketch. And it's correctly working. Also for my introduction I've created an animation with Procreate on the ipad and the animation is correctly displayed.

My guess is the gif generated has a problem or a different encoding (not sure this is a thing for images).

4

The P5 sketch is 404

but if you share the anim gif I can take a look

you could also explode the animation to a series of PNGs.

5

My bad, the link is updated and here's the animation.
myAnim (5)

6

What I think is the gif is encoded as delta frames, so just the difference than the previous frame. That's one of many types of gif encoding.

If you explode it into pngs (piskel can do this, or image magick, there's a web tool) and confirm it works that way before trying to debug gif encoding.

To load a sequential image table defined with the files frames-table-1.png , frames-table-2.png , etc., you call playdate.graphics.imagetable.new("frames") .

7

I tried splitting the GIF in frames, loading it with an ImageTable and it's working!

working_anim

I also tried to create a gif with the website you linked, and it's also working.

I have an other problem but that's not link to the gif itself, I put the line gfx.setImageDrawMode(gfx.kDrawModeXOR) before drawing my image from the animation, but I don't have any XOR effect with the sprites already on screen. I have misunderstanding something I think.

Thanks for your help!

2 Likes
8

Each Sprite has its own draw mode

https://sdk.play.date/inside-playdate/#m-graphics.sprite.setImageDrawMode

9

Indeed. Thank you for your help, it's working great!

1 Like