This is a post on using buttons in phaser 2, it would be a good idea to gain some background in phaser in general if you have not done so before hand, the best place for that might be the phaser 2 docs. I have a getting started post on phaser that you might want to try, it would also be a good idea to learn a bit about state machines, and making sprite sheets with canvas as well. I will be using these things in this post, on top of buttons of course.
In this post I am using phaser 2.11.1 of phaser
For a simple example that makes use of buttons I thought I would make a simple clicker game. These kinds of games often just involve clicking something to make some money to then spend to upgrade the rate at which money is made. So this makes it the best kind of game to experiment with buttons in phaser. This game will involve making a sprite sheet with canvas as well, and I will be breaking some things down in many state objects.
Like just about all of my phaser games these days I start off by making an instance of the main phaser constructor, rather than just passing it a single state object as the fifth argument. This allows me to make more than one state object with game.state.add, and then choose which state I want to start first, when I want it to start.
Anyway this boot state is where I will set a few things up that will be used else where in the project, for this project I am just setting up a global object that will hold game state data, and setting some values that have to do with scaling. If you would like to know more about that scaling in phaser you might want to check out my post on pseudo full screen.
Not much to write about with this state when it comes to buttons thought, so lets move on to the button-sheet state, that will be used to set up the sprite sheet that will be used for the games buttons.
This is the state where I will be creating a sprite sheet for the buttons. In this example I am making a sprite sheet by way of the 2d canvas drawing api, rather than an external sprite sheet that I load into the project during a load state. This kind of approach works just fine for simple projects like this but might not be the best choice for all projects. If you want to read more about making sprite sheets this way I wrote a post on making sprite sheets with canvas in phaser 2 a while back.
This state will create a sheet that will make four frames for each button state, for each button in the buttons array I have made. In this example I only have two buttons, and I am making a collection of four frame for each button. A more efficient way of doing this for a more complex project that will contain many buttons would be to have just four frames, and then render text over the frames.
Here is the actual game state that will house the logic for the actual game itself. In this state I define callbacks for each button that define what to do for the doTask, and upgrade actions.
This all results in a very basic clicker game. Not much to write home about, but there are actually many very successful games that are not that much more complex than this actually.