Sprites making graphics disappear

SDK Get Help
,
1

Hello!

I've always been very confsued with the graphics library on playdate and my latest confusion is why I can't seem to have both a graphics rect and a sprite at teh same time:

local img = gfx.image.new("imgs/ferret.png")
local ferretSprite = gfx.sprite.new( img )
gfx.fillRect(10, 10, 100, 100)

with this I get the sprite but no rect, and commenting out the sprite specifically I can now get teh rect... what am i misunderstanding here?

2

Is this code within playdate.update()? If so, you don't need to create a sprite and image every frame; you can do something like:

local gfx <const> = playdate.graphics

local img = gfx.image.new("imgs/ferret.png")
local ferretSprite = gfx.sprite.new(img)
ferretSprite:add()

function playdate.update()
  gfx.setColor(gfx.kColorBlack)
  gfx.fillRect(10, 10, 100, 100)
  gfx.sprite.update()
end

If this code is not within playdate.update() (or a function called by an event handler), it will only be executed once, at the start of the game.

The screen is not cleared between frames to save on CPU time, so if you want to clear the screen you have to do that manually.

Note that it's recommended to use draw callbacks if you want to do raw graphics API calls in a project that also uses the sprite system.

3

OK so I played around some more after your comment, thanky you. It appears to work fine if gfx.sprite.update() is first in teh update function and not last where I had it, now the graphics and sprites are both appearing. I was super cofused before as I wasn't using gfx.clear() at all so was expecting the graphics to simply stay there.

so two other questions: I am loading and setting sprites when needed in the update func (not every frame :stuck_out_tongue: ), and do you have an example of draw calls? or do you mean teh context system?

Thanks!!!

4

You can override the sprite draw method to do raw graphics API calls in the sprite system. For example, if you wanted to use that fillRect call as a sprite you'd write:

local gfx <const> = playdate.graphics

local rectSprite = gfx.sprite.new()
rectSprite:setBounds(10, 10, 100, 100)

function rectSprite:draw(x, y, w, h)
  gfx.setColor(gfx.kColorBlack)
  gfx.fillRect(0, 0, 100, 100)
end

rectSprite:add()

function playdate.update()
  gfx.sprite.update()
end

For more information, you can check the docs on sprite draw and update functions.

5

I just wanted to note that playdate.graphics.sprite.update() does indeed clear the screen (or at least the dirty portions) to the background color (set via playdate.graphics.setBackgroundColor(color)), so unless that color is set to playdate.graphics.kColorClear anything drawn before the call will be erased. However, a clear background will have other side-effects, like trails left behind by moving sprites.

Drawing you do after the playdate.graphics.sprite.update() call, like gfx.fillRect() will show up on screen on top of your sprites.

So basically if you do this:

gfx.sprite.update()
gfx.setColor(gfx.kColorBlack)
gfx.fillRect(10, 10, 100, 100)

instead of

gfx.setColor(gfx.kColorBlack)
gfx.fillRect(10, 10, 100, 100)
gfx.sprite.update()

You should see both your sprites and your rect.

6

Thanks both.

Just tried and seems to be the case that gfx.sprite.update() also seems to clear the screen like you mentioned (again something that might not have been clear in teh docs for me). Which makes the behavior make more sense than previously setting the sprite.update at the of the update loop (which then cleared the screen unknown to me :man_facepalming:)

7

Ok, correction. sprites update wont clear graphics unless its dirty, so you still need to manually clear it if needed, but keeping both at teh start of the main update...