Implementing a dynamic image to use for a menu image

SDK Get Help
1

SDK 2.4.2 - Linux & Windows

This one is a bit of a head scratcher for me and need some assistance.

For my latest project, I would like to have the left area besides the System Menu be filled in with a dynamic created image every time the player pauses their game via the Playdate's menu button. For example, I would like to show some current stats of the current game run.

Now this in theory already exists via the playdate.setMenuImage(image, [xOffset]) function, but it only accepts an image, meaning that (from my understanding) it can only accept pre-rendered images. Now that kind of seems impractical especially if I wanted to, for example, show the current score and time played. There are way to many variables to take into account to pre-render all possible image variations.

I scrapped the idea until I played Loopsy which has this exact feature I was talking about. At the time of writing, the catalog page contains a screenshot of what I want to do.

image

How does one go about implementing something like this?

I have tried a couple of things (I will spare you the details unless you really want to know), but my latest theory comes from the documentation for playdate.gameWillPause() which does mention that implementing the function "allows your game to take special action when it is paused, e.g., updating the menu image."

This is making me think that there is some way of creating an image purely in-code and/or dynamically update an existing text of an image before setting it as the menu image.

Maybe some sort of a image draw function? or a Sprite to Image converter?

Can anyone assist or give me some general pointers?

Any help would be appreciated.

Thanks in advance.

2

You can do this! The key is to create a new image in gameWillPause and then pass it into pushContext. When you do that, all drawing calls you make render into your new image instead of the screen:

function playdate.gameWillPause()
    local img = playdate.graphics.image.new(400,240)
    playdate.graphics.pushContext(img)
    -- draw image content based on game state
    playdate.graphics.popContext()
    playdate.setMenuImage(img)
end

(Untested, but should give you the idea)

3 Likes
3

Apologies for the later reply, but yes it worked the way I expected. I was not aware of the context functionality, but I'm glad you pointed me in the right direction. Thank you so much :playdate:

1 Like