can i add a custom sprite in a panel ?

[gisxing]

i have try it , while after my_sprite:add() used ,
and try to to call gfx.sprite.update() in the renderFunction() ,
i found out that only the sprite draw , but the layers of this panel cannot be drawn , (even i use the layer.img:draw() loop )
i am not sure is that okey i used my own sprites in the panel . or maybe something i used not in the right way .

and thank you for your wrok , it is a quite fun tool , i had play with it for couple days . nice work !

[Cadin Batrack]

I didn't build this with the sprite system in mind, so it may not work. I'm not that familiar with Playdate sprites. Do you have an example project I can look at?

[gisxing]

here is the codes: ( it is base on the template from your repo , which the file named 4-custom-functions.lua)
i will make some comment for the code that i have tried:

4-custom-functions.lua

-- CUSTOM BEHAVIOR FOR PANEL 2
local gfx <const> = playdate.graphics

local maxPosition = 60
local minPosition = -100
local layerPosition = maxPosition

local img = gfx.image.new(32, 32, gfx.kColorBlack)         -- init an image for sprite usage
local my_sprite = gfx.sprite.new(img)                                 -- init a sprite with the image
my_sprite:moveTo(200, 120)                                                -- move the sprite to position
my_sprite:add()                                             -- add the sprite to the list , which will be used while  sprite.update() called

-- render is called every frame
-- render is responsible for drawing the entire panel
local function renderPanel2(panel, offset)

    --gfx.sprite.update()                            -- in the official SDk , this function should be call in  playdate.update(), so the sprites can be drawn "every frame"  ,  when i put this line here , the sprite can not be seen ,  but other layers of this panel show properly . 

	local crankChange = playdate.getCrankChange()
	layerPosition = layerPosition - (crankChange / 10)

	-- constrain layer position
	layerPosition = math.min(maxPosition, layerPosition)
	layerPosition = math.max(minPosition, layerPosition)


	-- draw all the layers in the panel
	for index, layer in ipairs(panel.layers) do
		if layer.name == "head" then
			layer.img:draw(layer.x, layer.y + layerPosition)
		else
			layer.img:draw(layer.x, layer.y)
		end
	end

    gfx.sprite.update()             --if i put in here , the sprite show up ,  and the text "crank it up!" also show up , but other layser did not . 
	-- draw the text
	gfx.drawText("*Crank it up!*", 280, 20)

   --gfx.sprite.update()   -- if i put in here , the sprite show up , but all other layers do not show . 
end

-- advance is called every frame
local function advancePanel2()
	if layerPosition <= minPosition then
		return true -- advance to next panel
	else
		return false -- stay on this panel
	end
end

-- reset is called when the panel leaves the screen
local function resetPanel2()
	-- reset the layer position
	-- in case the user navigates back to this panel
	layerPosition = maxPosition
end


-- COMIC DATA

example4 = {
	-- sequence 1
	title = "Ex 4: Custom Functions",
	scrollType = Panels.ScrollType.AUTO,

	panels = {
		{ -- panel 1 (normal panel)
			advanceControl = Panels.Input.A,
			layers = {
				{ text = "Example 4", x = 50, y = 70 },
				{ text = "Custom Functions", x = 50, y = 100 },
				{ text = "*Press A to Start...*", x = 50, y = 130,
					effect = { type = Panels.Effect.TYPE_ON, duration = 500, delay = 500 }
				}
			}
		},
		{ -- panel 2 (custom render)
			renderFunction = renderPanel2,
			advanceFunction = advancePanel2,
			resetFunction = resetPanel2,
			layers = {
				{ image = "examples/ex4/1-bg.png", },
				{ image = "examples/ex4/1-body.png", },
				{ image = "examples/ex4/1-head.png", name = "head"},
				{ image = "examples/ex4/1-collar.png"},
			},
		},
		{ -- panel 3 (normal panel)
			layers = {
				{ text = "Continue...", x = 50, y = 100,
					effect = { type = Panels.Effect.TYPE_ON, duration = 300, delay = 500  }
				}
			}
		}

	}
}

[Cadin Batrack]

I took a quick look at the Playdate docs and it seems like it's not possible to mix sprites and images like you are trying to do. Panels is all built on images (not sprites), so I'd recommend just using images. Is there a reason you need a sprite there?

I don't plan to support sprites at all if it means everything in Panels would need to be converted.

[gisxing]

thank you for your review . i just take some try to build a interactive comic or maybe game combine with . that's why lead me trying with sprites (since game always used sprites) , such as drawing "some rabits running randomly in the screen" . if Panels is build on images , is that mean i can call all image's function ? such as setMaskImage() , drawBlurred() , drawRotated() etc. , all i need to do is update the image property and place them in the renderFunction , which is call every frame . and can i use timers , place playdate.timer.updateTimers() call in the renderFunction too ?

[Cadin Batrack]

Yes, technically that should work. But if you want to do much more than some simple interactions, you might consider creating a full game and using Panels comics as cutscenes, instead of trying to embed the game inside the comic panels.

https://cadin.github.io/panels/docs/cutscenes.html