Как интегрировать Phaser в React
У меня есть приложение React, созданное с помощью create-react-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" />;
}
}
ПримерСцена:
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.info("Hello!");
//store.dispatch({ type: ACTION_TYPE });
});
}
}
Идея состоит в том, чтобы создать визуализацию с растущими цветами на основе простого генного движка. Таким образом, Фазер получал инструкции из Магазина о текущем состоянии.
Я предполагаю, что это как-то связано с тем, как загружается Phaser, и есть конфликт с тем, как обновляется React. Я запрещаю обновление компонента, так как мне нужно, чтобы игра получала инструкции, прослушивая магазин
Я уже смотрел на этот ТАК ответ и сопроводительная обертка, но он устарел.
Как я могу заставить Phaser загружать изображения в приложении Create-React?
Песочница кода: https://codesandbox.io/s/github/nodes777/react-punnett/tree/phaser-game Репо: https://github.com/nodes777/реакт-паннет/дерево/фазер-игра
Ответы 3
Я начал с нуля и создал мой собственный шаблон из фазер 3 шаблон. Я написал о конкретных шагах по добавлению React в шаблон Phaser 3 здесь.
Кажется, что вы можете извлечь из Create-React-App и добавить оттуда Phaser 3, но предупреждения не извлекать меня отвратили от этого решения.
Я прочитал ваше сообщение в блоге meduim, к сожалению, это не сработало, у меня появились ошибки, говорящие о том, что невозможно найти «реагировать», невозможно найти «index.html».
Хм, вы должны быть в состоянии бежать git clone https://github.com/nodes777/phaser3-react-template, затем npm install, затем npm start. Вы пробовали это или следовали учебнику с нуля? Дайте мне знать, если вы получите ошибки при выполнении этих инструкций.
Другой вариант — использовать Веб-компоненты, чтобы иметь возможность интегрировать Фазер с любым другим фреймворком (React, Angular, VueJS и т. д.), проверьте этот пакет npm: https://www.npmjs.com/package/@ion-phaser/ядро
Кроме того, вы можете использовать оболочку React этой библиотеки, чтобы легко использовать Фазер с компонентами React, поэтому вам не нужно напрямую манипулировать веб-компонентами, например:
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://github.com/proyecto26/ion-phaser/tree/master/реагировать
Вам нужно положить изображения в папку публичный!
Вместо этого попробуйте использовать хук с функциональными компонентами :) stackblitz.com/edit/react-phaser?file=hooks%2FuseGame.ts