Asset export mode for screenshot and record buttons (or save to disk for images/imagetables/sprites)

SDK Feature Requests
,
#1

Use Case

I've been working on a game that currently uses the drawing APIs to procedurally generate most elements, UI components, etc. I have two related use cases in mind:

  1. To improve performance, I'd like to transition some of those animated UI elements to imagetables which include a cell per frame.
  2. To add more atmosphere, I'd like to craft a background image to render behind my game elements by starting from a screenshot of the generated level, while also "baking in" some of the procedurally drawn elements which don't move.

The built-in screenshot and record buttons in the simulator already provide some pretty great utility for extracting the image data to help support those use cases. Here are a few requests for ways to make it even better:

  1. Pure color option. The as-seen-on-device grayscale images are great by default, but it would be convenient to have the option to output both images and videos with true black/white pixels for reuse as game assets. I realize the thresholding makes this not strictly necessary, but it would add some consistency when editing assets.
  2. Transparency. I'd love to be able to capture both screenshots and videos with transparency preserved. That is, the output image would be transparent anywhere I haven't explicitly drawn white or black pixels into the screen buffer. That would be especially handy for those animated UI elements, which otherwise need to be adjusted frame by frame.
  3. Cropping. The various animated UI elements aren't full screen, of course. It would be convenient to configure a crop for them in advance.

An image editor can reasonably do items 1 and 3, although native support would be slick. Item 2 requires a fair amount of frame-by frame pixel labor to accomplish. Are there already facilities I'm missing that afford these capabilities?

A few ideas

These ideas could make sense either at the screen level, or at the sprite level. These might be terrible ideas or totally impractical, but a few possible approaches I can think of include:

  1. A top-level preference in the simulator for the capture mode, which toggles between the default and a mode which preserves transparency and uses pure color.
  2. A facility similar in appearance to collision rect highlighting which allows dragging to select a crop region for any subsequent captures.
  3. New simulator-only APIs for playdate.graphics.sprite which enable capturing its drawn content, which could be called from update or draw, e.g.
    • sprite:captureImage(filename)
    • sprite:startCaptureRecording(filename)
    • sprite:stopCaptureRecording()
  4. New simulator-only APIs for playdate.graphics.image to save their content to disk, e.g.
    • image:save(filename) (akin to sound.sample:save(filename))
  5. Or perhaps even a way to dynamically pre-render into an imagetable? imagetable:setImage gets part of the way there already. Maybe all that's needed is a way to then export that, e.g.
    • imagetable:saveAsSequence(filenameSansTableSuffix)
    • imagetable:saveAsMatrix(filenameSansTableSuffix, [cellsWide])
1 Like
#2

Sounds like some neat tools to have.

Tip: for pure B&W exports, turn off "Simulate Device Appearance" in the Simulator.

3 Likes
#3

Aha, I wasn't aware of that. Thanks for the tip!

1 Like
#4

I was doing it manually myself until I caught on to that!

#5

You may be able to do everything you want with

playdate.simulator.writeToFile(image)
See the inside playdate documentation under simulator only functionality

I believe this function supports transparency.
Rather than drawing to the screen, draw to an image that supports transparency, and save that image

To save an animation, simply save an image on every frame, using the frame number in the filename.

1 Like
#6

Oh, I can’t believe I missed that. It sounds like it should do the trick, thanks!

1 Like
#7

I made a little utility to make this easy. I'm not sure how common my use case is, but it's available for anyone to use!

1 Like