Search code examples
react-native2d-gamesside-scroller

Is React Native suitable for building an OpenGL-accelerated 2D-game?


Say I wanted to build something like a 2D side-scroller game. Would React Native be suitable performance-wise? E.g., can I use OpenGL-acceleration for it? Or would it probably be slower than just using WebGL and HTML5?

Researched some more and came up with this information:

Apparently there is a GLView which holds a WebGL context: https://docs.expo.io/versions/latest/sdk/gl-view.html

On that page it says this:

Any WebGL-supporting library that expects a WebGLRenderingContext could be used. Some times such libraries assume a web JavaScript context (such as assuming document). Usually this is for resource loading or event handling, with the main rendering logic still only using pure WebGL. So these libraries can usually still be used with a couple workarounds. The Expo-specific integrations above include workarounds for some popular libraries.

Also a Twitter comment from Expo which mentions 'games' specifically:

Expo Graphics gives you the power of GL combined with Expo+React Native. It 
is the foundation for image filters, games, and special effects.

And there should be a demo here: https://github.com/gre/gl-react

Not much projects listed there which use React Native to build a game. Still, there being a WebGL context interface to a native OpenGL acceleration gives rise to hope.


Solution

  • I've used react-native-webgl to build a minesweeper game. This library has provided the performance gain I needed to render a 16x30 grid of cells with quick transitions from one state to another. In some circumstances the game needs to re-render dozens or even hundreds of cells at once. Default React Native renderer is not fast enough to do that without user noticing the delay.

    Note that while react-native-webgl solves the performance problem, it requires you to write low level code such as creating shaders, manage the vertices etc. And I haven't found libraries built on top of react-native-webgl that would work for my task.

    So if you really need or want to use React Native for your game, use react-native-webgl or GLView for Expo. Otherwise use a different technology like Unity.

    You can find the source code of my game here.