Button Basics

[Choeeey]

I have never actually created or used a phaser button before. I want to to add in a button to my game, and when the user clicks on the button a function will be called.

 

I have been going through for the forums and cant find an answer.

 

Could someone explain to me how phaser buttons work, and how do you make them?

 

Thanks!

[mrdotb]

Hello

 create: function () {        // I assume you have an image loaded with the key 'button'        //So you add an image         button = game.add.image(game.world.centerX, game.world.centerY,'button');        //enable click on it        button.inputEnabled = true;        //this mean when you click you call the function         button.events.onInputDown.addOnce(this.somefunction, this);    },    somefunction: function () {        //What you want to do    }

[boulder]

mrdotb is right. Do you want a practical example? Then you look at this great Tutorial
 

The buttons i mean are placed in this example in the gametitle.js (for play), thegame.js (for higher and lower) and in the gameover.js (for play again) .

 

If you do not know states so far, let's not confuse you, you can also call functions (see thegame.js).

[mwatt]

I pieced together something that works for me, and I'll share it, but I suspect it is not the most effective methodology.

 

From what I gather, if you want both up and down images, you need to create and load a spritesheet.  I use TexturePacker for this, using the JSON (array) template.  I create one spritesheet for each button which results in a JSON file and  PNG file.  I give both files the same file name (extension different of course) because I'm not sure if the Phaser could otherwise figure out the connection between them.

 

I use this.load.spritesheet to load the resource (you might use game.load.spritesheet if you are doing a one module architecture game).  The last two args in the load.spritesheet call are width and height in pixels.  The JSON file specifies how big your images are but you can also check in the file properties for those values.  However, I have found that I need to add 2 pixels to both width and height to get it right when I make the call.  Probably TexturePacker is padding the images when it packs them into one, but I haven't bothered to figure out how to control this.

 

I use this.add.button to actually add a button to the game with this resource.  The last three arguments in this call should be 0, 0, 1 - assuming you packed your up image first and your down image second, within the spritesheet.

 

Like I said, this works for me, but if anybody has any suggestions about making this process better, I'd certainly appreciate it.  The thing that is bugging me most is the usage of one sprite sheet pet button.  I'm thinking that perhaps I could put them all in one spritesheet and change the 0,0,1 to be more appropriate for the image indexes in the spritesheet, but I am not sure and I've been too lazy to try, since what I am doing is working.  As I understand it, those three last args represent in order, the indexes of the up image, the hover image and the down image in your spritesheet.  So in my case, the first arg of zero represents my first image which is the up image.  I don't have a hover image (it's a touch based game) so I use the up index again for the second argument.  The last argument is the index for the down image within the spritesheet, which in my case is the second image, so, I use 1.  That is why I said the last args 0, 0, 1 the way I do it.