need help with functions and variables in conjunction with states

[Le Twitch]

how do functions and variables work in this layout?

Main.Game = function (game) {};Main.Game.prototype = {  preload: function() {  },    create: function() {  },    update: function() {  }};

example:

 

i want to have a function that happens every time i click on a certain sprite. where should i put the function? would variables in the create function cross over to the update function or do i have to make the variables global for me to use it more than one of the functions within 'Main.Game.prototype'? if so, where do i set those global variables?

[rajeev90km]

For Variable persistence, use phaser states. Variables inside a state can be used across functions inside the state. if you want variables across states, initialize it on the top of the javascript file in the main function. 

function mainGameFunction() {  var GLOBAL_VARIABLE_ACROSS_STATES = 1;  var mainMenuState = {            stateVariable : 10,      preload: function(){         //Usage of state variable         this.stateVariable++;         //Usage of global variable         GLOBAL_VARIABLE_ACROSS_STATES++;        }      create: function(){          console.log(this.stateVariable); // will output 11      }  }  var levelListState = {      preload: function(){         console.log(GLOBAL_VARIABLE_ACROSS_STATES); // will output 2        }  }} 

For a Function that happens every time you click on a sprite: Add the sprite as a phaser button and attach the function to its click handler. 

function mainGameFunction() {  var gameState = {    create: function(){       this.game.add.button(100,100,'spriteToBeUsedImg',this.calledFunction,this,0,0,1));    }    calledFunction:function(){       console.log("Function called");    }  }} 

[Le Twitch]

For a Function that happens every time you click on a sprite: Add the sprite as a phaser button and attach the function to its click handler. 

function mainGameFunction() {  var gameState = {    create: function(){       this.game.add.button(100,100,'spriteToBeUsedImg',this.calledFunction,this,0,0,1));    }    calledFunction:function(){       console.log("Function called");    }  }} 

 

would making the sprite into a button be more efficient or this method? http://examples.phaser.io/_site/view_full.html?d=basics&f=02+-+click+on+an+image.js&t=02%20-%20click%20on%20an%20image&jsbin=http://jsbin.com/zagob/6/edit?js,output

[lewster32]

I'd say the example method Le Twitch posted would be more efficient - buttons offer convenience methods to change the frame depending on its state but if you don't need that an image or a sprite with inputEnabled will do the same stuff with slightly less overhead.

[Le Twitch]

thanks for the replies. i appreciate it

[Le Twitch]

I'd say the example method Le Twitch posted would be more efficient - buttons offer convenience methods to change the frame depending on its state but if you don't need that an image or a sprite with inputEnabled will do the same stuff with slightly less overhead.

Main.Game = function (game) {};Main.Game.prototype = {create: function() {  var sprite = this.add.sprite(400, 400, 'spriteImg', 'spriteFrame');  sprite.inputEnabled = true;    sprite.events.onInputDown.add(myFunction, this);},update: function() {},myFunction: function() {  //function content}};

i tried this and it wasn't working. getting a black screen. what's wrong with the code?

[lewster32]

var sprite = this.add.sprite(400, 400, 'spriteImg', 'spriteFrame');

You'd missed the comma after the second parameter.

 

Also, I think you need to do this for the event bit:

sprite.events.onInputDown.add(this.myFunction, this);

[Le Twitch]

var sprite = this.add.sprite(400, 400, 'spriteImg', 'spriteFrame');

You'd missed the comma after the second parameter.

 

Also, I think you need to do this for the event bit:

sprite.events.onInputDown.add(this.myFunction, this);

 

ahh yeah. had to add 'this.' to the function. also, in the function that i'm using, what it does is change the frame of a sprite and bitmap text, is there a line of code that i have to add to update the changes every time the function is called?

[lewster32]

Not sure I follow you? Whenever you click/tap on the image, it will run whatever is in your function. Do you mean that you want something to run continuously each update while it's held? If so, you could set a property to true when you get an onInputDown event, and false when you get an onInputUp event, then in your update function you could check to see if that property is true, and if so, do something each frame.

[Le Twitch]

Not sure I follow you? Whenever you click/tap on the image, it will run whatever is in your function. Do you mean that you want something to run continuously each update while it's held? If so, you could set a property to true when you get an onInputDown event, and false when you get an onInputUp event, then in your update function you could check to see if that property is true, and if so, do something each frame.

 

don't worry about what i said. i think i was just a bit confused ha ha.

var colourA;var colourB;var textWord;var textColour;var colourArray = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];Main.Game.prototype = {  create: function() {    var squareA = this.add.sprite(55, 370, 'colourSquare', colourA);    var squareB = this.add.sprite(675, 370, 'colourSquare', colourB);    squareA.inputEnabled = true;    squareB.inputEnabled = true;    squareA.events.onInputDown.add(this.randomColour, this);    squareB.events.onInputDown.add(this.randomColour, this);    var gameText = this.add.bitmapText(null, null, textColour + 'Text', textWord, 127);    gameText.x = gameWidth - gameText.textWidth /2;    gameText.y = gameHeight - gameText.textHeight /2;    },  randomColour: function() {    var randomA = Math.floor(Math.random() * colourArray.length);    var randomB = Math.floor(Math.random() * colourArray.length);    while (randomA === randomB) {        randomB = Math.floor(Math.random() * colourArray.length);    }    colourA = colourArray[randomA];    colourB = colourArray[randomB];    var randomText = Math.floor(Math.random() * 2);      if (randomText === 0) {        textWord = colourA;        textColour = colourB;      } else if (randomText === 1) {        textWord = colourB;        textColour = colourA;      }  }};

"var textColour" is the bitmap font. "var textWord" is text that i want to display. "colourA" and "colourB" are the texture atlas frames.

 

the game doesn't work unless "textColour" is defined. in theory, i reckon if i run the function once the state loads, "textColour" will be defined and it should work. what's the best way to go about doing that?

 

also i tried grouping squareA and squareB so that i could easily add settings that needs to be added to both sprites except it didn't really work. this is how went about trying to do it

var square = this.add.group();square.add(squareA);square.add(squareB);square.inputEnabled = true;