Request for a js game engine friendly API

Hi! First up Rive is awesome and everything I've seen so far is great! 🙏

I am looking at creating a Phaser (https://phaser.io/) plugin to support Rive and make for a better creative pipeline for development for us. Can definitely open source the plugin later once it is working.

My question is about writing code at the right level of abstraction since Rive has high and low level APIs.

I already did a proof of concept in Phaser using the low level render loop based on the various examples in Rive's repos and documentation.

I was realizing though that https://github.com/rive-app/rive-wasm/blob/master/js/src/rive.ts handles a lot of cases and provides a lot of functionality (events, looping, etc). The challenge in integrating it into Phaser is that the high level Rive API is designed to be loaded with a single riv file and a single instance of an artboard.

For a game it seems you would want to take more of an approach like in this example from Rive (https://codesandbox.io/s/rive-canvas-advanced-api-centaur-example-exh2os?file=/src/index.ts:4022-4036) where you load the rive file once then create instances of artboards from it. If you want this level of control you lose all the other functionality in rive.ts, or have to copy that file and manually apply updates which seems error prone.

Specifically what would be useful to do (at least for Phaser integration and I imagine other js engines) would be a factory approach. Each factory instance would be constructed with a single riv file and could produce instances of Rive objects that would have play, pause onLoop on them. That way there is only a single copy of the riv file in memory and it is only parsed once and could even be parsed at load time rather than at play time.

Then, at least in the Phaser case, there would be a GameObject wrapper around the object produced by the factory (i.e. the binding with Phaser), that would set the canvas to use on the instanced rive object, would call update with a time delta to advance the animation, and then render so that it could take the canvas passed in and then composite it within the game.

Start by reading js/src/rive.ts and the linked advanced API example in src/index.ts. Compare the current single-file, single-artboard lifecycle with the requested factory and per-instance controls. Done would mean a decided API shape that supports shared file loading and multiple controllable artboard instances for game-engine integration.