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 (eg, 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.
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;
}
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 ...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.