将 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({游戏:空，...componentDidMount: 函数(){this.game = new Phaser.Game(800, 400, Phaser.AUTO, "phaser-container",{创建:this.create，更新:this.update});},...渲染:函数(){返回 (<div className="phaserContainer" id="phaser-container">

);}...}

这不是我的 CodePen.归功于 Matthias.R

I am trying to understand how I could use React for rendering all the UI elements and Phaser for rendering a game (using Canvas or WebGL) within the React application.

One way would be to use React's componentDidMount, so after I have my HTML ready I can use a div id to render the Phaser content. In this case who does the rendering? React of Phaser?

If the mentioned way is not the right one, could you suggest another?

解决方案

There is a module for this on Github called react-phaser. Here is a CodePen that does not use any separate module.

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>
        );
    }
    ...
}

This is not my CodePen. Credit goes to Matthias.R

这篇关于将 Phaser 与 React 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！