Skip to content

Phaser Js only Shows a black screen in mobile #5827

@axk2

Description

@axk2

Hello Mr. Photonstorm

i was wishing to use Phaser 3 with React Native for a very long time, so i made my research and based on expo-phaser and made my try.

-browser-polyfill is used to use the dom in react native
-GLView is from expo-gl and gives a context , that cotext goes to a functions where is the coniguration of the game
and i give it to the config, the context parameter and it works great.... in the browser.. i know... but in the phone it looks like it want to work

the code looks like this:
(i will skip some styling code)

App.tsx

import React from 'react'
import { GLView } from 'expo-gl'
// Game is where i init phaser js
import Game from './game/init'
import '@expo/browser-polyfill'

export default function App() {
  return (
    <View>
      <GLView
        style={{ height: "100%", width: "100%" }}
        onContextCreate={context => Game(context)}
      />
      <StatusBar style="auto" />
    </View>
  );
}

and init.tsx where i have Game looks like this

import '@expo/browser-polyfill'

export default function Game(gl: any) {
    const Phaser = require("phaser")

    const config = {
        width: 400,
        height: 600,
        backgroundColor: '#2d2d2d',
        context: gl,
        // just and scene from you examples, is working on my browser
        // i just skkiped that part of the code here
        scene: [Example]
    }

    const game = new Phaser.Game(config)
}

i made a build with expo on my android and it only shows a black screen, what step i am skipping? i hve dom elements and a context of gl.

i saw many people who wanted phaser v3 in react native, that includes myself, i would love to use it instead of unity, because of websockets, etc.

i would love any kind of orientation

thanks

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions