将Phaser与React一起使用[英] Using Phaser together with React

问题描述

我想了解如何在 React 应用程序中使用 React 渲染所有 UI 元素和使用 Phaser 渲染游戏(使用 Canvas 或 WebGL).

一种方法是使用 React 的 componentDidMount,因此在我准备好 HTML 后,我可以使用 div id 来呈现 Phaser 内容.在这种情况下,谁来渲染?Phaser 的反应?

如果上述方式不正确,您能推荐另一种方式吗?

推荐答案

上有一个模块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

其他推荐答案

检查这个新的 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} />
    )
  }
}

本文地址:https://www.itbaoku.cn/post/1740214.html