Question

我试图了解如何在React应用程序中使用React渲染所有UI元素和Phaser来渲染游戏（使用Canvas或WebGL）。

一种方法是使用React的componentDidMount，所以在我准备好HTML后，我可以使用div id来呈现Phaser内容。在这种情况下谁进行渲染？ Phaser的反应？

如果提到的方式不正确，你能建议另一个吗？

Answer 1

Github上有一个名为 react-phaser 的模块。这是CodePen，它不使用任何单独的模块。

var PhaserContainer = React.createClass({

    game: null,
    ...
    componentDidMount: function(){
        this.game = new Phaser.Game(800, 400, Phaser.AUTO, "phaser-container", 
        { 
            create: this.create,
            update: this.update
        });
    },
    ...
    render: function(){
        return (
            <div className="phaserContainer" id="phaser-container">
            </div>
        );
    }
    ...
}

这不是我的CodePen。积分转到Matthias.R

Answer 2

选中此新的WebComponent，将Phaser与任何其他框架集成?https://github.com/proyecto26/ion-phaser

示例：

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

class App extends Component {
  state = {
    initialize: false,
    game: {
      width: "100%",
      height: "100%",
      type: Phaser.AUTO,
      scene: {}
    }
  }
  render() {
    const { initialize, game } = this.state
    return (
      <IonPhaser game={game} initialize={initialize} />
    )
  }
}

将Phaser与React一起使用

2 个答案: