Отправить событие из Pixi.js к компоненту Тлеющей

Question

У меня есть холст с примером Pixi игра работает внутри приложения Ember (я использую 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 содержит только логику рисования/рендеринга, а не логику игры. Это сохраняется во внешнем классе, и я хочу вызвать действие 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' для консоли). Каковы способы этого?

Я пытался смотреть на решение here и положить

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

в коде Pixi, но абонент, кажется, никогда ничего не получит.

Answer 1

Вы можете передать контекст компонента PixiCanvas в метод init, и вы можете просто позвонить с помощью sendAction.

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

Внутри метода инициализации вы можете хранить ссылку на компонент 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; 
} 

Answer 2

Вам нужно будет передать действие вашему компоненту pixi (https://guides.emberjs.com/v2.10.0/components/triggering-changes-with-actions/). По сути, это обратный вызов, который вы можете вызвать внутри своего компонента Pixi, который затем будет запускать дополнительную работу в другом месте.