Any panel can assign a custom function to render the panel, determine when an auto-advance conditions is met, or reset custom properties when the panel leaves the screen.
Assign a custom render function to a panel’s
renderFunction property. This function will be called every frame while your panel is on screen.
A render function should accept two parameters. The first is a table that represents the panel being rendered. The second parameter is a table with the current x and y scroll offset. The function returns nothing.
local function renderPanel6B(panel, offset) -- render the panel end
Setting a render function for a panel ejects it from the framework’s normal rendering flow. This means your function becomes responsible for all the logic and drawing in your panel.
You can access your panel’s layers with the
panel.layers property. Loop through them to draw the contents of your panel. An image layer will have the
playdate.graphics.image stored in its
local function renderPanel6B(panel, offset) for i, layer in ipairs(panel.layers) do layer.img:draw(layer.x, layer.y) end end
Since your panel has been taken out of the render flow, you’ll need to calculate layer position yourself if you want parallax scrolling.
The example below shows how you might calculate x position for layers in a horizontally-scrolling sequence. A vertical sequence would be the same, substituting
local ScreenWidth <const> = playdate.display.getWidth() local function renderPanel6B(panel, offset) local frame = panel.frame -- calculate a percentage (0 - 1) that represents how far -- the panel has scrolled onto screen -- 0 == just entering, 1 == just leaving local scrollPct = 1 - (frame.x - frame.margin + frame.width + offset.x) / (ScreenWidth + frame.width) for i, layer in ipairs(panel.layers) do -- calculate the x position based on the panel's scroll percentage -- and the layer's parallax property local p = layer.parallax or 0 local xPos = math.floor(layer.x + (panel.parallaxDistance * scrollPct - panel.parallaxDistance/2) * p) layer.img:draw(xPos, layer.y) end end
FOR AUTO-SCROLLING SEQUENCES ONLY
Assign a custom advance function to a panel’s
advanceFunction property. This function will be called every frame until your panel advances.
In an auto-scrolling sequence, you can use this to determine whether the panel should advance or not. Simply return true or false to indicate whether the advance condition has been met.
local function advancePanel06B() -- this condition is often based on -- things happening in a custom render function if zoomLevel > 6.75 then return true -- ready to advance else return false -- stay on this panel end end
Assign a custom reset function to a panel’s
resetFunction property. This function will be called once when your panel leaves the screen.
If the user navigates back to a panel with an advance function, the advance condition will still be true, so they’ll immediately advance again. To avoid this, you can reset the panel state here. This is also a good place to kill any sound effects, timers or handle any other cleanup (like turning off the accelerometer) that may have been initiated in the render function.
local function resetPanel06B() zoomLevel = 0 -- reset the var that determines the advance condition playdate.stopAccelerometer() -- clean up end