Question

我已经用create-react-app创建了一个React应用程序，我也试图集成Phaser 3。我按照this guide开始。我已经用画布渲染了文本，但是在预加载中加载图像似乎不起作用。我得到默认的无法加载显示的纹理图像。

import ExampleScene from "./scenes/ExampleScene";

import * as React from "react";

export default class Game extends React.Component {
  componentDidMount() {
    const config = {
      type: Phaser.AUTO,
      parent: "phaser-example",
      width: 800,
      height: 600,
      scene: [ExampleScene]
    };

    new Phaser.Game(config);
  }

  shouldComponentUpdate() {
    return false;
  }

  render() {
    return <div id="phaser-game" />;
  }
}

ExampleScene：

import Phaser from "phaser";

export default class ExampleScene extends Phaser.Scene {
  preload() {
    this.load.image("logo", "assets/logo.png");
  }
  create() {
    const text = this.add.text(250, 250, "Phaser", {
      backgroundColor: "white",
      color: "blue",
      fontSize: 48
    });

    text.setInteractive({ useHandCursor: true });
    this.add.image(400, 300, "logo");

    text.on("pointerup", () => {
      console.log("Hello!");
      //store.dispatch({ type: ACTION_TYPE });
    });
  }
}

这个想法是基于一个简单的基因引擎创建一个带有花朵生长的可视化对象。因此，Phaser将从商店中获取有关当前状态的说明。

我想这与Phaser的加载方式有关，并且与React更新方式存在冲突。我阻止组件进行更新，因为我只需要游戏通过听商店来接收指令

我已经看过这个SO answer和accompanying wrapper，但是已经过时了。

在Create-React-App中，如何使Phaser加载图像？

CodeSandbox：https://codesandbox.io/s/github/nodes777/react-punnett/tree/phaser-game 回购：https://github.com/nodes777/react-punnett/tree/phaser-game

Answer 1

其他选项正在使用 WebComponents 来将 Phaser 与任何其他框架（React，Angular，VueJS等）集成，请检查以下npm软件包：{{3 }}

此外，您可以使用该库的React包装器将 Phaser 轻松用于React组件，因此您无需直接操作WebComponents，例如：

import React from 'react'
import Phaser from 'phaser'
import { IonPhaser } from '@ion-phaser/react'

const game = {
  width: "100%",
  height: "100%",
  type: Phaser.AUTO,
  scene: {
    init: function() {
      this.cameras.main.setBackgroundColor('#24252A')
    },
    create: function() {
      this.helloWorld = this.add.text(
        this.cameras.main.centerX, 
        this.cameras.main.centerY, 
        "Hello World", { 
          font: "40px Arial", 
          fill: "#ffffff" 
        }
      );
      this.helloWorld.setOrigin(0.5);
    },
    update: function() {
      this.helloWorld.angle += 1;
    }
  }
}

const App = () => {
  return (
    <IonPhaser game={game} />
  )
}

export default App;

有关更多详细信息，请查看存储库：https://www.npmjs.com/package/@ion-phaser/core

Answer 2

我从头开始，并从my own boilerplate创建了phaser 3 template。我写了一些有关将React添加到Phaser 3模板here的具体步骤。

您似乎可以从Create-React-App弹出并从此处添加Phaser 3，但是警告不要弹出，这使我远离了该解决方案。

如何将Phaser集成到React中

2 个答案: