phaser and react

Surprisingly phaser and react can work perfectly, for future reference I record the following:

We start off creating a Game component which is almost the place we position our canvas:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

export function Game() {   useEffect(() => {     const config = {       type: Phaser.AUTO,       parent: "phaser-game",       backgroundColor: 0xedf8f9,       width: 800,       height: 600,       physics: {         default: "arcade",         arcade: {           gravity: {             y: 0           }         }       },       scene: [Example1, Example2, Example3, CVScene, TryAgain]     };     game = new Phaser.Game(config);       function resize() {       let canvas = document.querySelector("canvas");         let windowWidth = window.innerWidth;       let windowHeight = window.innerHeight;       let windowRatio = windowWidth / windowHeight;       let gameRatio = game.config.width / game.config.height;       let container = document.getElementById("TopBar");       container.style.width = 800 + "px";         if (windowWidth <= 800) {         if (windowRatio < gameRatio) {           canvas.style.width = windowWidth + "px";           canvas.style.height = windowWidth / gameRatio + "px";           container.style.width = windowWidth + "px";         } else {           canvas.style.width = windowHeight * gameRatio + "px";           canvas.style.height = windowHeight + "px";           container.style.width = windowHeight * gameRatio + "px";         }       }     }     resize();     window.addEventListener("resize", resize, false);   });     return <div></div>; }

We need to enclose our Game component by a div element with id "phaser-game", by doing so our canvas will be built inside there. The resize function make our canvas responsive to the screen width. Also, Example1, Example2, Example3 are different scenes of the form:

?

1 2 3 4 5 6 7 8 9 10

import Phaser from "phaser"; export default class Example2 extends Phaser.Scene {   constructor() {     super({ key: "Example2" });   }     create() {}     update() {} }

Next the following are routine way of creating images, text, sprite, animations, etc:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

this.load.spritesheet("door", door, {   frameWidth: 270,   frameHeight: 306 });   this.add.text(x, y, "text_to_show", { color: "0x00000" });   this.anims.create({   key: "char2",   frames: [{ key: "characters", frame: 13 }],   frameRate: 10 });   this.door2Graphic = this.add   .graphics()   .fillStyle(0x00ff00, 0)   .fillRect(435, 100, 145, 250);   this.tweens.add({   targets: this.CV_container,   duration: 500,   x: { from: 220, to: -1000 },   ease: "Linear" });   game.scene.resume("Example1");