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":5323,"date":"2018-04-23T07:55:24","date_gmt":"2018-04-23T07:55:24","guid":{"rendered":"https:\/\/phasergames.com\/?p=5323"},"modified":"2018-04-23T07:56:39","modified_gmt":"2018-04-23T07:56:39","slug":"getting-started-with-phaser-3","status":"publish","type":"post","link":"https:\/\/phasergames.com\/getting-started-with-phaser-3\/","title":{"rendered":"Getting Started with Phaser 3"},"content":{"rendered":"

I became a flash developer in 2001. Three years later ActionScript 2 came out, and then in 2006 ActionScript 3 arrived. In 2009 I made my first trip to Silicon Valley, and I was still mostly relying on ActionScript 2. The day before I left, Adobe announced that our Flash programs would compile to the iPhone, and by the time the plane landed in San Jose, Apple had killed Adobe’s plans.<\/p>\n

I started switching over to As3 about that time and used it for the next 7 years until it was clear Flash was not going to be a viable option. I took a long time to switch over to As3, and I took a long time to look for alternatives to flash, because I had grown comfortable. However, for years I denied myself all those new features of as3, and cool new things like Phaser. I held myself back because I wanted to just sit and make games and not deal with the frustration of having to learn new stuff.<\/p>\n

Now Phaser 3 is about 3 months old. I don’t want to repeat the mistakes of the past and miss out! There are some really cool features in Phaser 3 and I want to make great games.<\/p>\n

Also, once you get past the first few steps, you’ll find Phaser 3 very familiar.<\/p>\n

Let’s dive in, and get set up.<\/p>\n

Quick Set Up<\/h3>\n

Declaring a game object<\/h4>\n

Head over to Phaser.io<\/a> and grab the new Phaser3.js file<\/p>\n

Make a new project folder with an HTML file and a js folder, with 2 empty js files called main.js and sceneMain.js<\/p>\n

Place the phaser.min.js file in the js folder.<\/p>\n

\"\"<\/p>\n

The Html File<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title><\/title>\r\n\t<script type=\"text\/javascript\" src=\"js\/phaser.min.js\"><\/script>\r\n\t<script type=\"text\/javascript\" src=\"js\/sceneMain.js\"><\/script>\r\n\t<script type=\"text\/javascript\" src=\"js\/main.js\"><\/script>\r\n\t\r\n<\/head>\r\n<body>\r\n<div id=\"phaser-game\"><\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
The main.js file<\/h3>\n
The main.js file sets up the Phaser game object<\/p>\n
What’s changed?<\/h5>\n
In Phaser CE, we passed the height, width, mode and div tag into the game’s constructor. Now we pass a single config object to the game’s construction instead<\/p>\n
var game = new Phaser.Game(config);\r\n<\/pre>\n
The Config File<\/h3>\n
Here is an example config file. It contains the parameters mentioned before, but also takes scenes in an array; We will build SceneMain mentioned in the config file later.<\/p>\n
var config = {\r\n        type: Phaser.AUTO,\r\n        width: 480,\r\n        height: 640,\r\n        parent: 'phaser-game',\r\n        scene: [SceneMain]\r\n    };<\/pre>\n
 <\/p>\n
One File Fits All<\/h3>\n
I like to make one file that sets up one config file for desktop and one for mobile.\u00a0 I use the navaigator.userAgent to detect if the script is running on a mobile device or not. I’m often asked why I don’t use the nice built-in features of Phaser to detect mobile. The answer is because I need to detect it before we declare the game object.<\/p>\n
Main.js<\/strong><\/h4>\n
var isMobile = navigator.userAgent.indexOf(\"Mobile\");\r\nif (isMobile == -1) {\r\n    isMobile = navigator.userAgent.indexOf(\"Tablet\");\r\n}\r\nif (isMobile == -1) {\r\n    var config = {\r\n        type: Phaser.AUTO,\r\n        width: 480,\r\n        height: 640,\r\n        parent: 'phaser-game',\r\n        scene: [SceneMain]\r\n    };\r\n} else {\r\n    var config = {\r\n        type: Phaser.AUTO,\r\n        width: window.innerWidth,\r\n        height: window.innerHeight,\r\n        parent: 'phaser-game',\r\n        scene: [SceneMain]\r\n    };\r\n}\r\nvar game = new Phaser.Game(config);<\/pre>\n
Declaring a Scene<\/h3>\n
If you are coming from Phaser CE, then a scene is what is replacing a state. If you are new to Phaser altogether, think of Scenes as screens. A title scene, game over scene and the main game scene. For this example, we will be using just single state.<\/p>\n
sceneMain.js<\/h3>\n
class SceneMain extends Phaser.Scene {\r\n    constructor() {\r\n        super('SceneMain');\r\n    }\r\n    preload()\r\n    {\r\n    \t\r\n    }\r\n    create() {\r\n        console.log(\"Ready!\");\r\n    }\r\n    update() {}\r\n}<\/pre>\n
In a scene, we extend the class with Phaser.Scene and then we pass a unique key to the parent’s constructor. We can use this key later to switch between scenes.<\/p>\n
Run the code, and you’ll see the “Ready” logged in the console. Copy the folder everytime you want to make a game as a template or you can download it from this site.<\/p>\n\t
\n\n\t\t\n\t\t
\n\t\t\t