Update a scope variable value with Phaser and typescript in an ionic 2 app

Question

I am trying to create a game application with Ionic 2 (which uses TypeScript) and Phaser.io. So far everything was good and my game works but ...

I can launch Phaser action inside a TypeScript function but I can't do the contrary.

For example, I have a score defined in my html by {{ score }} inside my TypeScript controller I init this score with this.score = 0; Then I can update the score inside a TypeScript function. But inside any phaser function (preload,create,update,render) it doesn't work any more. An example in the image below (which is a similar simpler version of my code).

image example

Thanks.

Did you try to inject ChangeDetectionRef and then calling detectChanges()? — misha130
Sorry I don't have strong knowledge about that ... Do you have an example of how that works ? — Syl.H
Instead of adding an image with your code, it would be better to copy/paste your code into your question itself. I also tried to clean up your question but your third paragraph needs a bit more work if you could help clarify what you're asking there. — James Skemp

Cristi Milea Cristi Milea · Accepted Answer · 2017-06-25T22:49:42

i am fairly new to Ionic & Phaser combo. From what i understand, when we do

this.game = new Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

the state creates a new scope(for Phaser), so you won't have the same 'this' inside Ionic's 'ionViewDidEnter()' and in Phaser's 'create()'.

What i did(and i don't know if it's the best solution), was to add

this.game = new Phaser.Game(width, height, renderer, parent, state)
this.game.ionic = this; // reference ionic Object to Phaser Object

Now i can call ionic from inside Phaser

create() {
  this.game.ionic.alert.present();
}

Update a scope variable value with Phaser and typescript in an ionic 2 app

1 Answers