gedion101

Members
  • Content Count

    1
  • Joined

  • Last visited

  1. 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;