草庐IT

javascript - 在 React 组件中渲染 Phaser.io Canvas

coder 2025-01-10 原文 

import React, { Component } from 'react';
import Phaser from 'phaser';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.game = null;
    this.create = () => {
      this.game.stage.backgroundColor = '#124184';
    }
  }

  componentDidMount() {
    this.game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-target',
      {
        create: this.create
      }
    );

    console.log(this.create);
  }

  render() {
    return (
      <section id="phaser-target">
        hello there old friend
      </section>
    )
  }
}

所以我创建了 Phaser 游戏对象，在组件中做了 mount 方法，注意我的 html 看起来像这样:

<body style="overflow: hidden;">
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"><section><section id="phaser-target">hello there old friend</section></section></div>

  <script type="text/javascript" src="/static/js/bundle.js"></script>

<canvas width="1024" height="768"></canvas></body>

Canvas 正在目标元素之外呈现。

还有，我的 this.create 函数，我从来没有真正进入过那里。我 console.log 但它永远不会进入。

我正在重新阅读代码，对我来说这一切都有意义并且应该可以工作，但我不明白为什么不行。

谁能给我一些指导？

最佳答案

您没有提及您使用的是哪个版本的 Phaser，这一点非常重要，因为这些年来 API 已更改多次。

此答案假定您使用的是当前最新版本的 Phaser (3.1.4)

```

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-parent',
    pixelArt: true,
    width: 800,
    height: 600,
    scene: {
        preload: this.preload.bind(this),
        create: this.create.bind(this)
    }
};

var game = new Phaser.Game(config);

```

将父级配置设置为您的移相器父级的 ID。它应该附加到正确的元素。

我猜问题是 Phaser 没有检测到这一点并自动附加到文档正文元素。

要正确调用创建方法，您应该创建一个普通的 ES6 类方法:

create() {
//do stuff
}

现在你应该用 bind(this) 调用它:

this.create.bind(this)

你应该阅读 ES6 类中的 React 文档范围。这里有一节是关于为什么绑定(bind) this 对于事件是必要的，这与你需要在这里做的原因相同

https://reactjs.org/docs/handling-events.html

关于javascript - 在 React 组件中渲染 Phaser.io Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51455924/

javascriptPhasersectioncodethisreactjsphaser-framework

有关javascript - 在 React 组件中渲染 Phaser.io Canvas的更多相关文章

  1. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - Rails 渲染带有驼峰命名法的 json 对象 - 2

    我在一个简单的RailsAPI中有以下Controller代码:classApi::V1::AccountsControllerehead:not_foundendendend问题在于，生成的json具有以下格式:{id:2,name:'Simpleaccount',cash_flows:[{id:1,amount:34.3,description:'simpledescription'},{id:2,amount:1.12,description:'otherdescription'}]}我需要我生成的json是camelCase('cashFlows'而不是'cash_flows'

  6. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby-on-rails - 使用 header 渲染 JSON - 2

    我想在我的Controller中使用以下corsheader呈现JSON:'Access-Control-Allow-Origin'='*'.我试过这个:defmy_actionrender(json:some_params)response.headers['Access-Control-Allow-Origin']='*'end但是我得到了一个AbstractController::DoubleRenderError。有没有办法使用header呈现JSON？ 最佳答案 您不能在渲染后设置header，因为已发送响应。所以在没有意

  9. ruby-on-rails - Ruby 数组到 JSON 和 Rails JSON 渲染 - 2

    我有一个Ruby数组，如何在Rails3.0中将其呈现为JSONView？我的Controller方法是defautocomplete@question=Question.allend 最佳答案 如果自动完成操作仅呈现JSON，您可以将re5et的解决方案简化为:defautocompletequestions=Question.allrender:json=>questionsend(请注意，我将“问题”复数化以反射(reflect)它是一个数组并删除了@符号-一个局部变量就足够了，因为您可能只使用它来呈现内联JSON)作为一种附

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐