Jump to content

Trouble rendering images in Phaser 3 as a React component


Direk
 Share

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 => {
  return 
   <div>
      <h1>StartPage</h1>
      <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() {
    this.load.image(['title'Title]);
  }
 
  create(/* data */) {
      this.add.image(xy - 80'title');
  }
}
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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