Jump to content

Trouble rendering images in Phaser 3 as a React component


Recommended Posts

Hi there fellow coders!
I'm in the making of a new game and I've run into some issues while trying to implement Phaser 3 as a React component.

When I run the following code I get a trouble rendering images. Instead, I get black squares.

This is my first experience of using in Phaser 3 as a React component. What am I doing wrong?

This is how I create a React component:

import React from 'react';
import Boot from '../components/app/scripts/index'
const StartPageprops => {
      <Boot />
    </div> ;
export default StartPage;

run the Phaser 3

import React from 'react';
import Phaser from "phaser";.
import * as config from './config';
//  Boot the game.
const Boot = probs =>  {
  new Phaser.Game(config);
  return (<div id="phaser"></div>)
export default  Boot;

preload and create

import Phaser from "phaser";
import Title from '../../static/assets/title.png';
export default class Loader extends Phaser.Scene {
  constructor() {
    super({key: 'Loader'});
  preload() {
  create(/* data */) {
      this.add.image(xy - 80'title');
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...