option for webm exportFrames to use exportFps/playFps while recording

[Yannickgregoire]

@cdaein, hi! first of all, thanks so much for the work on this repo.

currently when exporting a sketch to webm the loop gets requested on requestAnimationFrame. this is great for super fast exports, but will desync with animations that are for example initiated by a setTimeout. is there a way i can change the behaviour for webm to wait for globalState.frameRequested so the export syncs up with the loop? i think this is already the case for mp4 by default, but i can't seem to figure out where/when to set this for webm. any help is the right direction is appreciated.

[cdaein]

Hi, Yannick. You're welcome.

I think it will be difficult to sync the timing of ssam's animation loop (requestAnimationFrame) and your custom animation with setTimeout, especially when rendering a video because it won't be in real time.

I usually rely on ssam's own props, time or playhead for any animation timing so I can use the same timing for both playback and recording. Is there any way you can convert the setTimeout animation to use these instead?

The global state frameRequested is currently only used for ffmpeg CLI process for mp4 and png encoding.

[cdaein]

For keyframing, I like to use keyframes. I created a typescript port - @daeinc/keyframes and @daeinc/timeline. These can also be installed with create-ssam when you first create a new sketch.

I recently found playdate-timeline to be very fun to use as well. I also ported it to TypeScript but haven't shared online yet.

[cdaein]

Reading your question again, I think you want to play the animation at playFps while it is being recorded. If that's the case, I think you will want to create your own recording logic.

For me, I want the rendering to a file happen as fast as it can. Also, if there's a lot of computation required within a frame rendering, it may be impossible to play at a desired frame rate while it is being recorded.

Ssam uses webm-muxer - you might want to take a look at it to implement your own logic.

[Yannickgregoire]

yes! that's indeed what i wanted. i see i could've worded it better :) thanks so much for the suggestions. going for a custom implementation in this case 🤞