Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php on line 101
Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks/edd-blocks.php on line 101
Warning: The magic method GAINWP_Manager::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/gainwp.php on line 78
Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 555
Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 585
Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 617
Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 651
Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 686
Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 745
Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 785
Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577
Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577
Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577
Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":5418,"date":"2018-04-26T09:56:42","date_gmt":"2018-04-26T09:56:42","guid":{"rendered":"https:\/\/phasergames.com\/?p=5418"},"modified":"2018-04-23T09:58:03","modified_gmt":"2018-04-23T09:58:03","slug":"phaser-3-basics-images-text-and-click","status":"publish","type":"post","link":"https:\/\/phasergames.com\/phaser-3-basics-images-text-and-click\/","title":{"rendered":"Phaser 3 Basics – Images, Text and Click"},"content":{"rendered":"
When learning any new framework or front-end language, especially for games the first three things I want to know are<\/p>\n
\n
How to add an image<\/li>\n
How to add text<\/li>\n
How to add click events<\/li>\n<\/ul>\n
If you are coming from Phaser CE, I’m going to mention what’s changed. If you are completely new to Phaser, just ignore those parts, and it will still help you get a jump start on building games in Phaser 3.<\/p>\n
The Game Object<\/h3>\n
There is a global game object, just as there was in Phaser CE but now it no longer handles creating things for the game. That is now a function of the scene. We can no longer use things like game.width or game.height, but the config file is a child of the game so we can use game.config.width<\/strong> and game.config.height<\/strong> to get the game’s size;<\/p>\n
Finding the center of the game<\/h3>\n
To find the horizontal center use:<\/p>\n
this.centerX=game.config.width\/2;<\/pre>\n
To find the vertical center use:<\/p>\n
this.centerY=game.config.height\/2;<\/pre>\n
Preloading an image<\/h3>\n
To preload an image we use this code in the preload function of a scene.<\/p>\n
To change the font, font size or color to the text, you can pass in an object like this<\/p>\n
var textConfig={fontSize:'20px',color:'#ff0000',fontFamily: 'Arial'};\r\nthis.add.text(game.config.width\/2,game.config.height\/2,textConfig,\"SomeText\",textConfig);<\/pre>\n
Understanding Point of Origin<\/h3>\n
All game objects such as images, sprites, and text have origin points. In Phaser CE this was known as anchors. These values determine where the image starts in relation the x and y.\u00a0 An origin has an x and y property (x,y). For example, if you place the x and y to the center of the screen a origin of (0.5,0.5) the image would sit perfectly centered in the middle of the game. If we set an origin of (0,0) then the top left corner of the image would be in the center.<\/p>\n
<\/p>\n
We can set the origin of an object by using this code:<\/p>\n
this.image.setOrigin(x,y);<\/pre>\n
X and Y values take a decimal value between 0 and 1.\u00a0 Images (and sprites) by default have a centered origin 0f (0.5,0.5) and text objects have a top left corner\u00a0 origin of (0,0) ;<\/p>\n
<\/p>\n
Clicking on an object<\/h3>\n
Set an object to be interactive<\/h4>\n
This code tells Phaser to listen for clicks on an object. This replaces image.inputEnabled=true from Phaser CE.<\/p>\n
this.image.setInteractive();<\/pre>\n
Phaser 3 is very new, and I’m still going through it. There seems to be several ways to click on an object, but this one appealed to me because I could use just one listener and then set up a switch and case statement for game actions based on what was clicked. (note that we no longer have to pass scope!)<\/p>\n
The pointer parameter refers to either the mouse or a touch object on mobile, the game object is the element clicked on.<\/p>\n
Here are all the examples put together in one file.<\/p>\n
<\/p>\n
class SceneMain extends Phaser.Scene {\r\n constructor() {\r\n super('SceneMain');\r\n }\r\n preload() {\r\n this.load.image(\"face\", \"images\/face.png\");\r\n }\r\n create() {\r\n\r\n this.face = this.add.image(game.config.width \/ 2, game.config.height \/ 2, \"face\");\r\n this.face.angle = 25;\r\n \r\n this.face.setInteractive();\r\n\r\n\r\n var textConfig={fontSize:'20px',color:'#ff0000',fontFamily: 'Arial'};\r\n\r\n this.title=this.add.text(game.config.width\/2,game.config.height*.75,\"HELLO PHASER!!!\",textConfig);\r\n \r\n \/\/setOrigin() replaces anchor.set()\r\n \/\/sprites now default to orign 0.5 for both x and y\r\n this.title.setOrigin(0.5,0.5);\r\n\r\n \/\/this will listen for a down event \r\n \/\/on every object that is set interactive\r\n this.input.on('gameobjectdown',this.onObjectClicked);\r\n \r\n }\r\n onObjectClicked(pointer,gameObject)\r\n {\r\n gameObject.angle+=10;\r\n }\r\n update() {}\r\n}<\/pre>\n\t
![\"\"](\"https:\/\/media.publit.io\/file\/w_300,h_257,c_fit,q_80\/websiteImages\/phasergames\/how_to_add_an_image_to_phaser_anchors.png\")
<\/p>\n![\"\"](\"https:\/\/media.publit.io\/file\/w_150,h_150,c_fill,q_80\/websiteImages\/phasergames\/anchors.jpg\")
<\/p>\n