У меня есть приложение React, созданное с помощью create-Reaction-app, и я также пытаюсь интегрировать Phaser 3.Я следовал этому руководству , чтобы начать.У меня есть холст, отрисовывающий текст, но загрузка изображений в предварительной загрузке, похоже, не работает.Я получаю по умолчанию не удалось загрузить отображаемое изображение текстуры.
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 ответ и сопровождающую оболочку , но он устарел.
Как заставить Phaser загружать изображения в приложении Create-React-App?
CodeSandbox: https://codesandbox.io/s/github/nodes777/react-punnett/tree/phaser-game Репо: https://github.com/nodes777/react-punnett/tree/phaser-game