Send event from Pixi.js to Ember component

Question

I have a canvas with an example Pixi game running inside an Ember application (I use https://github.com/Ferdev/ember-cli-pixijs for this):

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

});

The example game I copied from: http://ipotaje.es/en/complete-html5-concentration-game-made-with-pixi-js-3/

As you can see, my Pixi component only contains the drawing/rendering logic, not the game logic. That is stored in an external class, and I want to call the log action from that. The file with the game looks something like this:

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
...

Now I would like to send a 'success' or 'failure' message on each turn to my Ember component so that I can take a certain action (e.g., simply log 'success'/'failure' to console). What are ways to accomplish that?

I tried looking at the solution here and put

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

in the Pixi code, but the subscriber seems to never receive anything.

Answer 1

You can pass PixiCanvas component context to PairsGame init method and you can just call using sendAction.

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

Inside init method you can store reference to PixiCanvas component,

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

use sendAction to call log method,

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

Answer 2

You'll want to pass in an action to your pixi component (https://guides.emberjs.com/v2.10.0/components/triggering-changes-with-actions/). In essence, this is a callback that you can then call inside of your Pixi component that will then trigger additional work elsewhere ...