Phaser 2 had\u00a0a very convenient way of adding buttons to a state. Phaser 3 has got rid of those buttons but if we want to keep\u00a0the habit\u00a0of adding buttons in Phaser 3 scenes like we used to in Phaser 2, following lines will help achieve it.<\/p>\n
Phaser.Scene.prototype.addButton = function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) {\r\n \/\/ add a button\r\n let btn = this.add.sprite(x, y, key, outFrame).setInteractive();\r\n btn.on('pointerover', function (ptr, x, y) { this.setFrame(overFrame); });\r\n btn.on('pointerout', function (ptr) { this.setFrame(outFrame); });\r\n btn.on('pointerdown', function (ptr) { this.setFrame(downFrame); });\r\n btn.on('pointerup', callback.bind(callbackContext, btn));\r\n\r\n return btn;\r\n};\r\n<\/pre>\nAbove piece of code can now be used<\/p>\n
var button = this.addButton(100, 100, 'buttons', this.clickButton, this, overFrame, outFrame, downFrame);\r\n<\/pre>\nclickButton event can be defined as following<\/p>\n
clickButton(button) {\r\n \/\/ use this to access scene\r\n \/\/ button is also available as the first param\r\n}<\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Phaser 2 had\u00a0a very convenient way of adding buttons to a state. Phaser 3 has got rid of those buttons but if we want to keep\u00a0the habit\u00a0of adding buttons in Phaser 3 scenes like we used to in Phaser 2, following lines will help achieve it. Phaser.Scene.prototype.addButton = function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) { \/\/ add a button let btn = this.add.sprite(x, y, key, outFrame).setInteractive(); btn.on(‘pointerover’, function (ptr, x, y) { this.setFrame(overFrame); }); btn.on(‘pointerout’, function (ptr) { this.setFrame(outFrame); }); btn.on(‘pointerdown’, function (ptr) { this.setFrame(downFrame); }); btn.on(‘pointerup’, callback.bind(callbackContext, btn)); return btn; }; Above piece of code can now be used var button = this.addButton(100, 100, ‘buttons’, this.clickButton, this, overFrame, outFrame, downFrame); clickButton event can be defined as following clickButton(button) { \/\/ use this to access scene \/\/ button is also available as the first param } <\/p>\n","protected":false},"author":5,"featured_media":1539,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,24,4,22],"tags":[],"class_list":["post-1130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-javascript","category-phaser","category-quick-tip"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=1130"}],"version-history":[{"count":2,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1130\/revisions"}],"predecessor-version":[{"id":1133,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1130\/revisions\/1133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/1539"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=1130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=1130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=1130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}