• Runtimes
  • Spine player - React Native - Expo

I'm back! Sadly not with the news I initially wanted.

Before I say anything, just let me say that I'm new to rendering anything and before this project I never really used react-native expo. It's quite possible that someone with more experience would have no problem making it work.

So, I gave up on the GIF. Even if it could have worked, I didn't really like this solution. I tried few runtimes, like spine-canvas, spine-webgl, spine-player, spine-three and was about to test pixi-spine. I feel like spine-webgl and spine-three were really close to work. When I gave up debugging, if I recall correctly, the problem was that it was trying to fetch the image using a localhost url. Expo uses Metro to create a server that exposes the app on a "exp" url which allow us to run the app on our cellphone without having to install the app. So trying to fetch an image using localhost just couldn't work. If I recall correctly it was always in the AssetManager. I probably should have been able to create my own AssetManager and require('myFile') instead of using a url.

I ended up using ThreeJS by itself and I could read the file as a string and load the file using a base64 string, so no url involved.

The part where it render something in GLView, I feel like with spine it wouldn't be a problem like mentionned previously since I could use both requestAnimationFrame(render) and gl.endFrameEXP(). This structure was identical for both spine and three.

const onContextCreate = async (gl: ExpoWebGLRenderingContext) => {
  [...]
  // Method to call to start everything
  const animate = () => {
    requestAnimationFrame(animate);
    render();
    gl.endFrameEXP();
  };
}

return (
  <View>
    <GLView
      onContextCreate={onContextCreate}
      style={{ width: windowWidth, height: windowHeight }}
    />
  </View>
)

Sorry I couldn't make it work! I hope it does one day!

Related Discussions
...

FWIW, you can use base64 with AssetManager:

assetManager.setRawDataURI("your.json", "data:application/json;base64,eyJza2VsZXRvbiI6ey<snip>");

You can use this for all the assets: JSON, binary, atlas, PNG images.

Oh that's interesting I didn't see that! Well, with the onContextCreate example and this way of loading asset, it probably would have worked. That's good to know thank you!

8달 후

@anthomaxcool Were you able to make spine working with expo-gl/react-native?

I'm trying to run spine-threejs on react-native + expo-three + expo-gl setup.
I have already rewrited AssetManager, AssetDownlaoder and ThreeJsTexture.
At my current point React-Native is loading correctly atlas file and json file.
However, I have still problem with texture. Looks that any way of loading texture is working, I'm always getting "WebGLRenderer: Texture marked for update but no image data found" error.

Is there anybody who managed how to run Spine on expo-three?

3달 후

adamgerthel
Yes, it is what I did, just instead of turbo modules I have choose fabric component (with additional support for old arch).
Initially I have tried approach with rendering via Android's Canvas through JNI, however this approach was problematic and slow.
So, because of that I have ended with implementation based on Skia which works very well.

    HauHau Wait - so you have Spine working in React Native through Skia?

    Yup I have.
    Integration spine2d with Skia is relatively simple.
    In my case I have used SFML implementation of Spine2D as a base for further code changes. Glueing together SFML impl. with Skia is easy, hardest part is just to find equivalent operations in Skia to properly render vertexes.
    And as I don't wanted to waste time on figuring out how to compile Skia, I have used precompiled binaries of Skia which comes with @shopify/react-native-skia package.

    On Android/Java side I have view with Bitmap. This Bitmap object is passed down to C++ through JNI. Then Skia can draw directly on Bitmap's pixels.
    Android's choreographer is controlling frames rate and animation loop.

    At the moment I'm bit busy, but when I'll find more time I can open source my solution on GitHub. I just need finish JS<->Java bindings and do some cleanup.

    --
    Forgot to add, my solution supports only Android as I don't have any Apple device. However integration with iOS should be straightforward.

      HauHau Interesting!

      Off topic, but what's your use case for RN + Spine? Game development?

      Initially game development - I believe that RN can be suitable platform for specific types of games.
      Also I'm very interested in experimenting with Spine2D for interface elements and as Lottie/Rive replacement.

        Thanks for sharing your work, gonna play your game. It is always great to see code which is more than just prototype!
        Unfortunately, I have nothing to show yet as game on which we are working is still in development.
        Keep eye on this thread, I will post a message when Spine+RN integration will be available on my GitHub!

        A Spine Reactive Native integration example would be amazing!

        한 달 후

        I've published the code on my GitHub page.
        Just please be aware that this repository is more of an experiment rather than a fully supported library. Due to lack of time I cannot commit to any support regards usage inquiries or other potential problems.

        However, feel free to hack around! You can find the repository here: Hau-Hau/react-native-spine-player