Call a function in Phaser from external HTML or JS function

[Alex G]

Hi, I have a Phaser canvas and must connect it to HTML in which it is in.

Lets say I have a function

var game;window.onload = function() {        game = new Phaser.Game(550, 700, Phaser.AUTO, 'phaser_canvas', { preload: preload, create: create });       function phaserFunction(){              // do something       }}

and I have a function in the HTML container, like a selector

<select id="my-selector" onchange="game.phaserFunction()">        <option> anOption</option>        <option> anOption</option>  </select>

and this is not triggering the function inside Phaser code.

How can I call the function inside Phaser from outside? I tried using game.functionName() but it doesnt work with selector

 

Thanks!

 

 

 

 

[mattstyles]

`phaserFunction` is never attached to the `game` object in that example. Nor is it global.

 

`game.phaserFunction` will add the function to the game object (smashing over any pre-existing property of the same name in the process).

 

You could probably tack your functions onto Phaser.Game prototype if absolutely necessary, although I doubt that is best practise for Phaser.

[Cudabear]

To expand on what mattstyles said, you have the right idea in mind.  You can call any Phaser functions from typical HTML elements and listeners, just make sure you've actually got access to them.  In this case, your function phaserFunction() exists only in the scope of the onLoad listener, so you can't call it globally from a select onChange listener.  You'll need to define this function globably to ensure you can access it.

I usually do something like this:
 

Game = function() {     this._construct();}Game.prototype = {    _game,    _construct: function(){       this._game = new Phaser.Game(/*parameters*/);    },    phaserFunction: function(){       //do the thing    }}var game = new Game();//Now you can do this anywhere you want.game.phaserFunction();

Wrapping the phaser Game object in your own custom game object allows you to define utility methods to manipulate the game from outside the update/render loop without possibly overwriting any properties of Phaser.

[Alex G]

To expand on what mattstyles said, you have the right idea in mind.  You can call any Phaser functions from typical HTML elements and listeners, just make sure you've actually got access to them.  In this case, your function phaserFunction() exists only in the scope of the onLoad listener, so you can't call it globally from a select onChange listener.  You'll need to define this function globably to ensure you can access it.

I usually do something like this:

 

Game = function() {     this._construct();}Game.prototype = {    _game,    _construct: function(){       this._game = new Phaser.Game(/*parameters*/);    },    phaserFunction: function(){       //do the thing    }}var game = new Game();//Now you can do this anywhere you want.game.phaserFunction();

Wrapping the phaser Game object in your own custom game object allows you to define utility methods to manipulate the game from outside the update/render loop without possibly overwriting any properties of Phaser.

Thanks for answer!

I never made before prototyping with JS, though I made OOP with C# and other languages and I know how it works.

I want to ask if I can use exact example you wrote. I ask because as I know, this code

_construct: function(){this._game = new Phaser.Game(/*parameters*/);}

should have listed parameters. Or in JS I can just type  /*parameters*/ ?

[mattstyles]

No no, you'll have to give it the parameters that `Phaser.Game` expects, some may be optional but I'm pretty sure there are some mandatory ones. Check the Phaser docs, loads of goodness in there.

 

Also, just to be clear,

Game.prototype = {}

is valid JS but it smashes over the `Object` prototype, mostly you'll get away with this but in general it is not a good idea.

 

Appending properties one by one extends the prototype, meaning that the methods already on there persist:

Game.prototype.foo = function() {}Game.prototype.bar = 'bar'

You can get smart with this if you want and use a function that applies each member of an object on to the prototype, newer JS engines understand this code (it will not work everywhere out there in the wild without polyfill):

Object.assign( Game.prototype, {  foo: function() {}})

If you're after really new JS you can use the class syntax but, currently, support isnt very helpful so you'll have to do a little build step which actually gives you the code we've already discussed (sorry, this is a complex topic)

class Game {  constructor() {    this.bar = 'bar'  }  foo() {    // ...  }}

[nglenister]

Anyone know how to achieve the same thing with a typescript version of Phaser using webpack? I'm currently using this boilerplate (https://github.com/numbofathma/phaser-typescript-webpack), have tried a few options using the info from Matt and Alex but can't get anything to work.

Here's a direct link to the app.ts that has the main constructor: https://github.com/numbofathma/phaser-typescript-webpack/blob/master/src/app.ts

[nglenister]

On 7/19/2018 at 7:23 PM, nglenister said:

Anyone know how to achieve the same thing with a typescript version of Phaser using webpack? I'm currently using this boilerplate (https://github.com/numbofathma/phaser-typescript-webpack), have tried a few options using the info from Matt and Alex but can't get anything to work.

Here's a direct link to the app.ts that has the main constructor: https://github.com/numbofathma/phaser-typescript-webpack/blob/master/src/app.ts

Solved! For anyone else that needs this:

const _global = (window) as any
_global.YOURFUNCTIONNAME = this.YOURFUNCTIONNAME

private YOURFUNCTIONNAME() {
//DO SOMETHING
}