Ensure scene is loaded

Phaser 3
1

Hello,

I am using react my code is below

import Phaser from 'phaser';

class MatchIT extends Phaser.Scene {
  constructor() {
    super({ key: 'MatchIT' });
  }

  preload() {
    // Load the ball image
    this.load.image('ball', '../assets/ball.jpeg');
  }

  create() {
    // Create the ball sprite and place it in the center of the scene
     // Create the ball sprite and place it in the center of the scene
     this.ball = this.physics.add.sprite(this.cameras.main.width / 2, this.cameras.main.height / 2, 'ball');
     this.ball.setOrigin(0.5, 0.5); // Set the origin to the center of the ball
     this.ball.setCollideWorldBounds(true); // Make the ball collide with the world bounds
     this.ball.setBounce(1); // Set the bounce factor
  }

  update() {
    // Game logic here
  }

  // Expose a method to be called from React
  customMethod() {
    console.log('Custom method called from React!');
    // Add your custom logic here
    const originalY = this.ball.y;
    this.tweens.add({
      targets: this.ball,
      y: originalY - 50,
      duration: 250,
      ease: 'Power1',
      yoyo: true,
      onComplete: () => {
        this.ball.y = originalY; // Ensure the ball returns to its original position
      }
    });
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MatchIT,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
      debug: false
    }
  },

};

const game = new Phaser.Game(config);

export const callCustomMethod = () => {
  const scene =game.scene.keys['MatchIT'];
  console.log(scene)
  if (scene) {
    scene.customMethod();
  } else {
    console.error('Scene not found or not initialized');
  }
};

export default game;

There are no errors but when I run it i get a black screen and than nothing, I believe the scene is not loading correctly, how can I rectify the situation.

Thx

2 
import Phaser from "phaser";

class MatchIT extends Phaser.Scene {
  constructor() {
    super({ key: "MatchIT" });
  }

  preload() {
    this.load.image("ball", "/assets/ball.png");
  }

  create() {
    this.ball = this.physics.add.sprite(this.cameras.main.width / 2, this.cameras.main.height / 2, "ball");
    this.ball.setOrigin(0.5, 0.5);
    this.ball.setCollideWorldBounds(true);
    this.ball.setBounce(1);
    this.customMethod();
  }

  customMethod() {
    this.tweens.add({
      targets: this.ball,
      y: "-=50",

      // or 

      // y: (target) =>{
      //   return target.y - 50
      // }

      duration: 250,
      ease: 'Power1',
      yoyo: true,
    });
  }
}

window.onload = () => {
  const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: MatchIT,
    physics: {
      default: 'arcade',
      arcade: {
        gravity: { y: 0 },
        debug: true
      }
    },

  };

  const game = new Phaser.Game(config);
}

I just checked it out, everything works for me.

3

Please take a look at following demo, I have explained the issue being faced.

4

Maybe the canvas on which everything is drawn disappears somewhere? Specify in the configuration which container to use.

5

By chance, are you able to share the React code as well? From the video, it looks like there is some type of sync issue between when the code first loads, and the hook that should trigger the game creation.

For your project, did you happen to use one of the Phaser templates for getting started? There is a newer React template that the Phaser team has released: GitHub - phaserjs/template-react: A Phaser 3 project template that demonstrates React communication and uses Vite for bundling.

6

This is the link to the code muniryasir/phaser-react-game (github.com), I wanted to learn from scratch that is why I did not choose the option of template. There is a big margin at the top as I was trying few things!