Avatars for my app?

JerryBels

I’m exploring the possibility to use Spine for my new app. I have a pretty ambitious use case and I think it could be a match, but I fear something might be missing so I decided to ask directly.

I want to let my users create custom avatars through my React Native app. This is the first question. Will users be able to swap body parts and see the result in real time in a runtime there? I see there is no official runtime for React Native.
Once the user is happy with their choice, I want to export a Json or a binary file of their customized avatar - this should be no problem if we got the runtime running, I guess.
What worries me is the next step. I want to then apply these avatars into animated scenes or still images that I would prepare in Spine beforehand, and export the result as image or video. All this automatically on my server.
Is that possible? I didn’t find any exhaustive documentation of a renderer running in my server to enable such automation.

Thanks ahead!

Spinebot

You can potentially use a WebView in React to render HTML and incorporate the Spine Web Player, though this approach may have limitations, especially with Expo's WebGL compatibility. For real-time swapping of body parts, you would need to implement a custom solution using the Spine runtimes, which allow for dynamic attachment swapping. Exporting a JSON or binary file of the customized avatar is feasible if you manage to get the runtime working. For rendering avatars into animated scenes or still images on a server, you can use the Spine runtimes to render frames and then encode them into images or videos. This process would require setting up a server capable of handling OpenGL rendering, as Spine uses OpenGL for rendering frames.

Davide

Hello 🙂

React Native does not have an official runtime yet.
The Spine player relies on WebGL, which has limited support in React Native as far as I know.

More well-known libraries like ThreeJS and PixiJS, which also use WebGL, have similar limitations. Setting them up requires several dependencies, significantly complicating your application.

In the past, a user took a completely different approach using spine-sfml and SKIA. You can find their work here. However, as stated in the README, this is just an experimental project.
The approach they used is promising and will likely be what we pursue in the future to develop an official React Native runtime. Unfortunately, we don’t currently have the time to work on it.

For server-side rendering, you could try spine-canvaskit.