将事件从 Pixi.js 发送到 Ember 组件

Question

我有一个 canvas，在 Ember 应用程序中有一个 Pixi 游戏示例运行（我为此使用 https://github.com/Ferdev/ember-cli-pixijs）：

import PixiCanvas from 'ember-cli-pixijs/components/pixi-canvas';
import PairsGame from './pairsgame';

export default PixiCanvas.extend({

  draw() {
    const renderer = this.get('pixiRenderer');
    var game = new PairsGame()
      .init(renderer)
      .preload()
      .animate();
  },

  actions: {
    log(arg) {
      console.log(arg);
    }
  }

});

我复制的示例游戏：http://ipotaje.es/en/complete-html5-concentration-game-made-with-pixi-js-3/

如您所见，我的 Pixi 组件仅包含 drawing/rendering 逻辑，不包含游戏逻辑。它存储在外部 class 中，我想从中调用 log 操作。游戏文件看起来像这样：

import PIXI from 'pixi';

var PairsGame = function () {};
PairsGame.prototype.init = function (renderer)
{
  this.renderer = renderer;
  // create an empty container
  this.gameContainer = new PIXI.Container();
  const graphics = new PIXI.Graphics();
  this.gameContainer.addChild(graphics);
  // allow chain calling
  return this;
};
PairsGame.prototype.preload = function ()
{ // importing a texture atlas created with texturepacker
  var tileAtlas = ["assets/images/images.json"];
  // create a new loader
  PIXI.loader.add(tileAtlas)
            // use callback
            .once('complete', this.onLoaded.bind(this))
            //begin load
            .load();
  //allow chain calling
  return this;
};
PairsGame.prototype.animate = function ()
{
  this.renderer.render(this.gameContainer);
  requestAnimationFrame(this.animate.bind(this));
  //allow chain calling
  return this;
};

...
ET CETERA
I WOULD LIKE TO CALL THE log ACTION FROM THESE METHODS
...

现在我想在每个回合向我的 Ember 组件发送一条 'success' 或 'failure' 消息，以便我可以采取特定的行动（例如，只需记录 'success'/'failure' 控制台）。有什么方法可以做到这一点？

我试着查看解决方案 here 并把

Ember.Instrumentation.instrument("pixi.gameEvent", 'success');

在 Pixi 代码中，但订阅者似乎从未收到任何东西。

Answer 1

您需要将一个动作传递给您的 pixi 组件 (https://guides.emberjs.com/v2.10.0/components/triggering-changes-with-actions/)。从本质上讲，这是一个回调，您可以在 Pixi 组件内部调用它，然后在其他地方触发额外的工作...

Answer 2

您可以将 PixiCanvas 组件上下文传递给 PairsGame init 方法，您可以使用 sendAction.

调用

var game = new PairsGame()
      .init(renderer,this)
      .preload()
      .animate();
  }

在 init 方法中你可以存储对 PixiCanvas 组件的引用，

PairsGame.prototype.init = function (renderer, pixiCanvasComp)
{
  //store component reference
  this.pixiCanvasComp = pixiCanvasComp ;
  this.renderer = renderer;
  // create an empty container
  this.gameContainer = new PIXI.Container();
  const graphics = new PIXI.Graphics();
  this.gameContainer.addChild(graphics);
  // allow chain calling
  return this;
}

使用sendAction调用log方法，

PairsGame.prototype.animate = function ()
{
  this.renderer.render(this.gameContainer);
  requestAnimationFrame(this.animate.bind(this));
  //allow chain calling
  //To call log method of PixiCanvas component,
  this.pixiCanvasComp.sendAction('log');
  return this;
}

将事件从 Pixi.js 发送到 Ember 组件

Send event from Pixi.js to Ember component

javascript

ember.js

pixi.js