如何将Phaser集成到Reaction中 [英] How to integrate Phaser into React

问题描述

我已经创建了一个使用Create-Reaction-app创建的Reaction应用程序，我还在尝试集成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" />;
  }
}

示例场景：

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的加载方式有关，而与Reaction更新的方式存在冲突。我正在阻止组件更新，因为我只需要游戏通过监听商店来接收指令

我已经查看了SO answer和accompanying wrapper，但它已过时。

如何在Create-Reaction-App中让Phaser加载图像？

代码沙盒：https://codesandbox.io/s/github/nodes777/react-punnett/tree/phaser-game 回购：https://github.com/nodes777/react-punnett/tree/phaser-game

推荐答案

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

您似乎可以从Create-Reaction-App中弹出，然后从那里添加Phaser 3，但不要弹出的警告使我对该解决方案敬而远之。

这篇关于如何将Phaser集成到Reaction中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！