Changing the variable value of a scope using Phaser and typescript within an Ionic 2 application

Question

Changing the variable value of a scope using Phaser and typescript within an Ionic 2 application

I have been working on developing a game application using a combination of Ionic 2 with TypeScript and Phaser.io. Everything has been going well and the game is functioning properly, however there is one issue that I have encountered...

While I am able to trigger Phaser actions from within a TypeScript function, I am unable to do the reverse.

For instance, I have a score displayed in my HTML as {{ score }}. In my TypeScript controller, I initialize this score with this.score = 0;. Although I can update the score within a TypeScript function, it does not seem to work within any Phaser functions such as preload, create, update, or render. An example showcasing this problem is depicted in the image below (a simplified version of my code).

view image example

Appreciate any assistance you can provide.

typescript ionic-framework angularjs-scope ionic2 phaser-framework

Answer 1

Answer №1

As a newcomer to the world of Ionic and Phaser, I've discovered an interesting relationship between the two. When initializing a new game instance in Phaser using:

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

The state parameter actually creates a separate scope for Phaser. This means that you cannot access the same 'this' object within Ionic's 'ionViewDidEnter()' function as you can in Phaser's 'create()' function.

To circumvent this issue (though it may not be the optimal solution), I decided to include the following code:

this.game = new Phaser.Game(width, height, renderer, parent, state)
this.game.ionic = this; // linking Ionic Object with Phaser Object

This allows me to call Ionic methods from inside Phaser, like so:

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

Answer 2

As a newcomer to the world of Ionic and Phaser, I've discovered an interesting relationship between the two. When initializing a new game instance in Phaser using:

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

The state parameter actually creates a separate scope for Phaser. This means that you cannot access the same 'this' object within Ionic's 'ionViewDidEnter()' function as you can in Phaser's 'create()' function.

To circumvent this issue (though it may not be the optimal solution), I decided to include the following code:

this.game = new Phaser.Game(width, height, renderer, parent, state)
this.game.ionic = this; // linking Ionic Object with Phaser Object

This allows me to call Ionic methods from inside Phaser, like so:

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

Changing the variable value of a scope using Phaser and typescript within an Ionic 2 application

Answer №1

Similar questions

There was an issue encountered when creating the class: The parameters provided do not correspond to any valid call target signature

Replacing the '+' character with a space in HttpParams within Angular 6

Error: The global variable "Stripe" has not been defined

The type 'Readonly<Ref<Readonly<any>>>' does not have the property 'forEach' available

Obtaining file image input in TypeScript

When using TypeScript, how can I effectively utilize the Component property obtained from connect()?

Inheritance of Generic Types in TypeScript

Automated Import Feature in Visual Studio Code

Utilizing const as the iteration variable in a for loop

Create an array interface to begin

Is it advisable to specify data types for my JSON data in TypeScript?

Cross-origin request error persists despite configuring headers on the server. Unable to successfully relocate image to designated directory on the server

Using Generic Types in TypeScript Files for React Components

Why is it considered an error when an index signature is missing in a type?

Troubleshooting a problem with testing an AngularJS controller in TypeScript using angular.mock.inject with Karma and Jasmine

A guide on resolving TypeScript monorepo webpack loader problems

Develop an Angular 6 application that utilizes an observable to monitor changes in a variable

AngularJS secureHTML verify image click event

Similar to `util.inspect` in Node.js, Deno also has a function

Angular 6 introduces a new component with cascading comboboxes for easier data organization