![\"how](\"https:\/\/media.publit.io\/file\/w_300,h_32,c_fit,q_80\/websiteImages\/phasergames\/buttons-3.png\")
<\/p>\nWe all need a way to easily add buttons to our game. While Phaser CE had this built in, Phaser 3 does not. I understand why resources were put elsewhere since we can always just use a sprite anyway. It is nice to have a way, however, to quickly make buttons in Phaser 3 with rollover and press states.<\/p>\n
Sure mobile devices don’t have rollovers, but it still can show the downstate. The user needs to know that the button was pressed. It is good practice to give feedback on every action the user takes.<\/p>\n
To make buttons in Phaser 3, there are several ways to go about it. In Phaser CE, I might have used a group. Phaser 3 groups do not have the ability to set an x or a y position. Phaser Containers have this ability and they would be the best choice if I needed to have more than one element. Since I am going to keep this as close to the classic Phaser CE method, I will use a sprite sheet and create a class that extends a sprite.<\/p>\n
<\/p>\n
Normally I would set everything up in the class before I would show how to use it in your own code, but in this case, I think that it is helpful to see the properties we are going to pass down into the class to show how we make the buttons in Phaser 3. I’ll be using the basic phaser 3 template to build this project.<\/p>\n
The first thing we will do is to preload the sprite sheet which each cell is 236 px wide and 65 px high<\/p>\n
this.load.spritesheet(\"buttons\", \"images\/buttons.png\",{ frameWidth: 236, frameHeight: 65 });<\/pre>\nThis is how we create the button. As you can see from the example below we are using an object rather than parameters. This is in keeping with the syntax of Phaser 3 and we can also put the properties in any order.<\/p>\n
var button = new BasicButton({\n 'scene': this,\n 'key':'buttons',\n 'up': 0,\n 'over':1,\n 'down':2,\n 'x': 240,\n 'y': 480\n })<\/pre>\nThe Basic Button Class<\/h2>\n
Next, make a new file called BasicButton.js and put this code into it.<\/p>\n
class BasicButton extends Phaser.GameObjects.Sprite {\n\n\n}<\/pre>\nNow we have an empty class that extends a sprite, which means it has all the properties and methods of a sprite, plus the custom ones we will add. Before we go any further, we need to add the constructor which is called when a new instance of the basic button class is created.<\/p>\n
class BasicButton extends Phaser.GameObjects.Sprite {\n constructor(config) {\n \n \n }\n}<\/pre>\nThe constructor is passed the single parameter of the config object which contains all of our buttons properties which are<\/p>\n
<\/p>\n
If when setting up the button a scene or a key is omitted, we want to stop the execution of the code before it causes an error. We just log a warning and get out. If the optional properties are not set, then we define them here<\/p>\n
class BasicButton extends Phaser.GameObjects.Sprite {\n constructor(config) {\n \n \/\/check if config contains a scene\n if (!config.scene) {\n console.log('missing scene');\n return;\n }\n \/\/check if config contains a key\n if (!config.key) {\n console.log(\"missing key!\");\n return;\n }\n \/\/if there is no up property assume 0\n if (!config.up) {\n config.up = 0;\n }\n \/\/if there is no down in config use up\n if (!config.down) {\n config.down = config.up;\n }\n \/\/if there is no over in config use up\n if (!config.over) {\n config.over = config.up;\n }\n }\n \n }<\/pre>\nMaking the sprite!<\/h3>\n
At this point, all we have is the data. What we need is the visual button! This is the stuff that is built into the sprite’s code already. To make the sprite does what it normally does we need to call the sprites constructor from our custom class’ constructor using the Super method. Here we pass the scene, the x and y position, which we will set to 0 for now. Also we will Pass the key and the frame number into the super method.<\/p>\n
\/\/call the constructor of the parent\n\/\/set at 0,0 in case there is no x and y\n\/\/in the config\nsuper(config.scene, 0, 0, config.key, config.up);<\/pre>\nWhy didn’t we pass in the x and the y?<\/p>\n
Looking back I could have written code so that if there was no x or y properties in the config, we could have done something similar as we had done with the up property.<\/p>\n
if (!config.x) {\n config.x= 0;\n}<\/pre>\nBut this is how I wrote it instead:<\/p>\n
\/\/if there is an x assign it\n if (config.x) {\n this.x = config.x;\n }\n\/\/if there is an x assign it\n if (config.y) {\n this.y = config.y;\n }<\/pre>\nI simply checked for the position variables in the object and set the object’s properties if it had them. The reason I did this after calling the super method, and this is IMPORTANT: <\/strong>You can not use the THIS<\/em> keyword until you call super. This is vital to remember when you want to extend any class in Phaser 3.<\/p>\nIf you don’t do this first you will get this error:<\/p>\n
uncaught ReferenceError: Must call super constructor in derived class before accessing ‘this’ or returning from derived constructor<\/p><\/blockquote>\n
Adding the button to the canvas<\/h3>\n
Now we have created the sprite, but we can’t see it yet. It exists, but only in memory. For this, we need to use one line of code after all the properties have been set.<\/p>\n
\/\/add this to the scene\nconfig.scene.add.existing(this);<\/pre>\nNow your button shows up on stage but making buttons in Phaser 3 requires more than just setting the image and putting it in place. We need to add internal event listeners. We can start by making the sprite interactive and then setting a listener for over, up, out and down.<\/p>\n
\/\/make interactive and set listeners\n this.setInteractive();\n this.on('pointerdown',this.onDown,this);\n this.on('pointerup',this.onUp,this);\n this.on('pointerover',this.onOver,this);\n this.on('pointerout',this.onUp,this);<\/pre>\nNotice for pointerout event, I just use the onUp function again<\/p>\n
Now the last part is simply to add in the functions called, and set the frame of the appropriate config object property.<\/p>\n
onDown()\n {\n \tthis.setFrame(this.config.down);\n }\n onOver()\n {\n \tthis.setFrame(this.config.over);\n }\n onUp()\n {\n \tthis.setFrame(this.config.up);\n }<\/pre>\nNow I realize that you may find to make buttons in Phaser 3 is a bit more complicated than in Phaser CE, but one of the wonderful things about code is what you build it you can use it over and again. You can even just download this code and use it without worrying about programming it yourself.<\/p>\n
What you may have noticed though is that we don’t know in the scene when the button has been clicked. My personal preference is to use events, but for now, you can just treat the button as any other sprite.<\/p>\n
<\/p>\n
class SceneMain extends Phaser.Scene {\n constructor() {\n super('SceneMain');\n }\n preload() {\n this.load.spritesheet(\"buttons\", \"images\/buttons.png\",{ frameWidth: 236, frameHeight: 65 });\n \n }\n create() {\n var button = new BasicButton({\n 'scene': this,\n 'key':'buttons',\n 'up': 0,\n 'over':1,\n 'down':2,\n 'x': 240,\n 'y': 480\n });\n button.on('pointerdown',this.onPressed,this);\n }\n onPressed()\n {\n console.log(\"I am pressed!\");\n }\n update() {}\n}<\/pre>\nI hope that you found this tuturiol on how to make buttons in phaser 3 helpful. I intend to expand on it with some custom events later, so stay tuned!<\/p>\n\t