Iは、例えばピクシー​​ゲームはエンバーアプリケーション内で実行しているキャンバスを有する

Question

エンバー成分（Iこのためhttps://github.com/Ferdev/ember-cli-pixijs使用）にPixi.jsからイベントを送信http://ipotaje.es/en/complete-html5-concentration-game-made-with-pixi-js-3/

私のPixiコンポーネントには、ゲームロジックではなく描画/レンダリングロジックのみが含まれています。それは外部クラスに保存されています。私は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 
... 

は、今私は、私は特定のアクションを取ることができるように私のエンバー・コンポーネントに、各ターンに「成功」​​か「失敗」というメッセージを送信したいと思います（例：ゲームのファイルは次のようになります単純に 'success'/'failure'をコンソールに記録してください）。それを達成する方法は何ですか？

私は解決策hereを見てみましたとピクシーコードで

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

を置くが、加入者は何も受信しないように思われます。

Answer 1

あなたはPairsGame initメソッドにPixiCanvasコンポーネントのコンテキストを渡すことができますし、sendActionを使用してだけで呼び出すことができます。 initメソッド内

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

あなたはPixiCanvasコンポーネントへの参照を格納することができ、logメソッドを呼び出すための

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、

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

あなたの行動をあなたのpixiコンポーネント（https://guides.emberjs.com/v2.10.0/components/triggering-changes-with-actions/）に渡したいと思うでしょう。本質的には、これはあなたがして、その後他の場所で追加作業をトリガーするあなたのピクシーコンポーネントの内部で呼び出すことができるコールバックです...