How to intergrate Phaser 3 with react-native framework, for mobile game development ?

[gedion101]

Hello everyone, my name is gedion101, I'm new in this forum and new using Phaser.js and quite a little long time in react-native framework, which is javascript framework for mobile development, you can see in this website (https://facebook.github.io/react-native/), or you can see the documentation if you curious (https://facebook.github.io/react-native/docs/getting-started.html).

Back to the topic, I have a wonder how to integrate the phaser.js module, for a react-native environment. So basically using npm way, and using <script> tag in HTML5 document, if I'm development target to the web, but different  in react-native and you can't use <script> tag, because of a different rule.

I found the alternative module, that call react-native-game-engine, is good, with matter.js as physics system in that game, but I have a problem, the game so lag, and to much render, for each asset to display on the phone. And another one, which is an ion-phaser, but I tried it and have a problem with that module, and the other is expo-phaser, is good, but in my workspace advice to me, don't use expo, find another way.

so I give up, maybe in this forum, it will help me, to figure out this problem or some advices, to give which framework or tools for using phaser for mobile game development.

for the code : app.js

// import react module
import React from 'react';
// import component from react-native module
import { View } from 'react-native';
// import phaser module
import Phaser from 'phaser';
// import scene for game
import Scene1 from './src/exampleScene1';

// eslint-disable-next-line react/prefer-stateless-function
class App extends React.Component {
  state = {
    config: {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      physics: {
        default: 'arcade',
        arcade: {
          gravity: { y: 200 },
        },
      },
      scene: [Scene1],
    },
  }

  callTheGame = () => {
    const { config } = this.state;
    const game = new Phaser.Game(config);
    return game;
  }

  render() {
    return (
      <View>{this.callTheGame()}</View>
    );
  }
}

export default App;

exampleScene1.js :

// import phaser module
import Phaser from 'phaser';
// import asset image
import Gimo from './assets/gimo.png';

// create class for scene 1
class exampleScene1 extends Phaser.Scene {
  // build constructor
  constructor() {
    // create identifier for class scene
    super({ key: 'exampleScene1' });
  }

  preload() {
    this.load.image('GimoAsset', Gimo);
  }

  create() {
    this.add.image(400, 300, 'GimoAsset');
  }
}


export default exampleScene1;

 

[jdnichollsc]

I fixed the issues from IonPhaser, let me know if you have any other problem with that WebComponent, more details about React here 

[Pavel Mishin]

About 1.5 years ago I worked in a company and we developed a mobile 2d game using React Native (Expo) as a core and for interface elements and Three.js for WebGL and game logic. It was not a good case since Three.js is overkill for small 2d game and doesn't provide any game-specific methods like game engines does, so I tried to replace Three.js with Phaser CE, and for that time I haven't found a simple way to make Phaser works with RN, also.  So I make a conclusion that React Native is not suitable for game development, and it's much easier to use something like Cordova with Phaser, or some other game engine that has an export feature to mobile platforms.