How do i draw a nineSlice behind a sprite?

SDK Get Help
#1

I have been trying but it doesn't work. The nineSlice seems to just disappear. Even with rects they disappear the moment i create a sprite.

When I do

frame:drawInRect(...)
gfx.sprite.update()

the frame is not shown, and when i do

gfx.sprite.update()
frame:drawInRect(...)

the frame is on top..

Here is some more code:

function setup()
	local logoImage = gfx.image.new("images/cropped")
	assert(logoImage)
	logoSprite = gfx.sprite.new(logoImage)
	logoSprite:moveTo(300, 60)
	logoSprite:add()
end
setup()

function playdate.update()
	x, y, w, h = 4, 4, 100, 100
	gfx.setColor(gfx.kColorBlack)
	gfx.fillRect(x - 1, y - 1, w + 2, h + 2)
	gfx.sprite.update()
end

if i comment out the setup part, the rect is drawn. If i comment it in, no rect.

Help?

1 Like
#2

There are a couple of other threads about this gotcha.

Docs: Drawing images alongside sprites

#3

I was actually juuuuuust reading exactly that. Search is hard haha. I'll try the backgorund drawing callback.

1 Like
#4

Ok I see that I am able to draw over things. Let's see now if I can make the frame follow the sprite.

#5

here is what i have

	gfx.sprite.setBackgroundDrawingCallback(function(x, y, width, height)
		Frames.poke:drawInRect(artworkSprite.x - artworkSprite.width / 2 - 6, artworkSprite.y - artworkSprite.height / 2 - 6,
						artworkSprite.width + 12, artworkSprite.height + 12)
	end)

and weirdly, when i change the sprite position or the sprite image, weird stuff happens!

See video here:

1 Like
#6

My goal here is to have the image (which is made into a sprite), and have a frame around it that stays with the image.

#7

Probably the simplest approach would be to draw both the image and the frame in your sprite's draw() function. Background drawing is best used for things that don't move (or at least whose positions aren't determined by sprites).

Alternatively, you can draw the image and frame into a bitmap (see Offscreen Drawing) and then assign that image to your sprite.

2 Likes