将Phaser与React结合使用 [英] Using Phaser together with React

问题描述

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

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.

一种方法是使用React的componentDidMount，因此在准备好HTML之后，我可以使用div id渲染Phaser内容.在这种情况下，谁进行渲染?移相器的反应?

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?

推荐答案

Github 称为 react-phaser .这是一个 CodePen ，它不使用任何单独的模块.

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

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

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

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