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

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":12939,"date":"2019-08-25T20:50:07","date_gmt":"2019-08-25T13:50:07","guid":{"rendered":"https:\/\/phasergames.com\/?p=12939"},"modified":"2019-10-02T10:08:27","modified_gmt":"2019-10-02T03:08:27","slug":"setting-up-phaser-3-platform-games","status":"publish","type":"post","link":"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/","title":{"rendered":"Platform Games in Phaser 3 – Setting Up"},"content":{"rendered":"\n

Platform games have been a staple in video games since Mario Brothers came along in the early 80’s. Because the framework gives us a lot of code to work with, setting Up Phaser 3 platform games isn’t too difficult. There are a lot of 3rd party tools to help you do this, but I’m going to show you how you can set it up just through code.<\/p>\n\n\n\n<\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Loading the images<\/h2>\n\n\n\n<p>The first thing we need to do is preload the images we will be using. I’ve picked two bricks to use to make our platforms.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> this.load.image(\"brown\", \"images\/tiles\/brickBrown.png\");\n this.load.image(\"grey\", \"images\/tiles\/brickGrey.png\");<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up the Grid<\/h2>\n\n\n\n<p>I’m going to use an AlignGrid class to position things by a percentage of the screen’s width. You can read more about <a href=\"https:\/\/phasergames.com\/scaling-games-in-phaser-3\/\">AlignGrid here<\/a>. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.aGrid = new AlignGrid({\n scene: this,\n rows: 11,\n cols: 11\n });\nthis.aGrid.showNumbers();<\/code><\/pre>\n\n\n\n<p>When we use the showNumbers() function of the grid, we get a layout grid to see where to place our game objects.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"373\" src=\"https:\/\/media.publit.io\/file\/w_480,h_373,c_fit,q_80\/websiteImages\/phasergames\/alignmentgrid.jpg\" alt=\"\" class=\"wp-image-12944\" srcset=\"https:\/\/media.publit.io\/file\/w_480,c_fit,q_80\/websiteImages\/phasergames\/alignmentgrid.jpg 480w, https:\/\/media.publit.io\/file\/w_300,h_233,c_fit,q_80\/websiteImages\/phasergames\/alignmentgrid.jpg 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">placing a block<\/h2>\n\n\n\n<p>Let’s start of with placing a single block. Let’s make a function that will do 3 things.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Add the image to the scene<\/li><li>Position the block<\/li><li>Scale the block to a percentage of the game’s width<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>placeBlock(pos, key) {\n \/\/add the block to the scene. Position is not important yet\n let block = this.physics.add.sprite(0, 0, key);\n \n \/\/place the block\n this.aGrid.placeAtIndex(pos, block);\n \n \/\/scale the block\n Align.scaleToGameW(block, .1);\n \n }<\/code><\/pre>\n\n\n\n<p>You can test out the function by adding this line at the end of the create function<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.placeBlock(89,\"brown\");<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Making a floor<\/h2>\n\n\n\n<p>If we had to a single line of code for each block it would take up a lot up a lot of room. Fortunately, we can simply loop through a start and an end value and call the placeBlock() function from that loop.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>makeFloor(fromPos, toPos, key) {\n for (var i = fromPos; i < toPos + 1; i++) {\n this.placeBlock(i, key);\n }\n }<\/code><\/pre>\n\n\n\n<p>Now we can make our bottom floor by calling the makeFloor() function from the end of the create function.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> this.makeFloor(88, 98, \"brown\");<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Gravity<\/h2>\n\n\n\n<p>Now that we have our floor we can make the ninja fall towards it. First, let’s scale the ninja.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Align.scaleToGameW(this.ninja, .2);<\/code><\/pre>\n\n\n\n<p>The Align class comes as part of the Utility Template. Basically what this function does is:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.ninja.displayWidth = this.sys.game.config.width *.2;\nthis.ninja.scaleY = this.ninja.scaleX;<\/code><\/pre>\n\n\n\n<p>Before we can use physics in the game, we must add physics to the game’s configuration object.<\/p>\n\n\n\n<p>This is the physics object.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>physics: {\n default: 'arcade',\n arcade: {\n debug: true\n }\n }<\/code><\/pre>\n\n\n\n<p>Here is what it looks like as part of the entire configuration object.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> var config = {\n type: Phaser.AUTO,\n width: w,\n height: h,\n parent: 'phaser-game',\n scene: [SceneMain],\n physics: {\n default: 'arcade',\n arcade: {\n debug: true\n }\n }\n };<\/code><\/pre>\n\n\n\n<p>Now we can set the gravity on the ninja. You can find out more about <a href=\"https:\/\/phasergames.com\/using-gravity-in-phaser-3\/\">gravity in Phaser 3 here.<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> this.ninja.setGravityY(200);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add Colliders<\/h2>\n\n\n\n<p>We can set up colliders in physics to check for collisions in three different ways<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Sprite against Sprite<\/li><li>Sprite against a Group<\/li><li>One group against another.<\/li><\/ul>\n\n\n\n<p>For this example instead of checking the ninja against every block placed we can place every block in a single block. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">adding a group<\/h3>\n\n\n\n<p>We can add a group a scene in Phaser to keep a collection of game objects. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let group=this.add.group();<\/code><\/pre>\n\n\n\n<p>But when using physics we need to add the group to the physics object of the scene rather than the group itself. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.brickGroup=this.physics.add.group();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">adding the block to the group<\/h3>\n\n\n\n<p>In the placeBlock function let’s add the block to the group just after creating it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>placeBlock(pos, key) {\n \/\/add the block to the scene. Position is not important yet\n let block = this.physics.add.sprite(0, 0, key);\n this.brickGroup.add(block);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Adding the collider<\/h2>\n\n\n\n<p>Now that we have the blocks in the group, we can set up a collider between the ninja and the brickGroup.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.physics.add.collider(this.ninja,this.brickGroup);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Making the floor stable<\/h2>\n\n\n\n<p>If you run the code now or watch the video above you’ll see that the ninja falling will push the blocks down. We can fix this by setting the blocks to immovable.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>block.setImmovable();<\/code><\/pre>\n\n\n\n<p>It is important that any physics that you want to apply to a sprite take place after adding that sprite to a group. If you add a sprite to a group, all physics properties are reset to default. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> placeBlock(pos, key) {\n \/\/add the block to the scene. Position is not important yet\n let block = this.physics.add.sprite(0, 0, key);\n this.brickGroup.add(block);\n \/\/place the group\n this.aGrid.placeAtIndex(pos, block);\n block.setImmovable();\n Align.scaleToGameW(block, .1); \n }<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"477\" height=\"644\" src=\"https:\/\/media.publit.io\/file\/w_477,h_644,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_game_phaser_3.jpg\" alt=\"Platform Games Phaser 3\" class=\"wp-image-13022\" srcset=\"https:\/\/media.publit.io\/file\/w_477,h_400,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_game_phaser_3.jpg 477w, https:\/\/media.publit.io\/file\/w_222,h_300,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_game_phaser_3.jpg 222w\" sizes=\"(max-width: 477px) 100vw, 477px\" \/><\/figure><\/div>\n\n\n\n<p>Complete Code<\/p>\n\n\n\n<p>Here is the complete SceneMain code for reference. Later we will go more into building platform games with Phaser 3<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class SceneMain extends Phaser.Scene {\n constructor() {\n super('SceneMain');\n }\n preload() {\n \/\/\n \/\/preload all imagaes\n \/\/\n this.load.atlas(\"ninja\", \"images\/ninja.png\", \"images\/ninja.json\");\n this.load.image(\"brown\", \"images\/tiles\/brickBrown.png\");\n this.load.image(\"grey\", \"images\/tiles\/brickGrey.png\");\n }\n create() {\n \/\/\n \/\/add a physics group\n \/\/\n this.brickGroup=this.physics.add.group();\n \/\/\n \/\/add the ninja\n \/\/ \n this.ninja = this.physics.add.sprite(200, -100, \"ninja\");\n \/\/\n \/\/scale the ninja\n Align.scaleToGameW(this.ninja, .2);\n \/\/\n \/\/get the frame names \n \/\/\n var frameNames = this.textures.get('ninja').getFrameNames();\n \/\/ console.log(frameNames);\n \/\/ \n \/\/ make the animations\n \/\/ \n this.makeAnims();\n \/\/play idle animation\n this.ninja.play(\"idle\");\n window.ninja = this.ninja;\n \/\/\n \/\/\n \/\/make an align grid\n this.aGrid = new AlignGrid({\n scene: this,\n rows: 11,\n cols: 11\n }); \n \/\/\n \/\/show the numbers\n \/\/\n this.aGrid.showNumbers(); \n \/\/\n \/\/make the floor\n \/\/\n this.makeFloor(88, 98, \"brown\"); \n \/\/\n \/\/add gravity to the ninja to make it fall\n \/\/\n this.ninja.setGravityY(200);\n \/\/\n \/\/set a collider between the ninja and the floor\n \/\/\n this.physics.add.collider(this.ninja,this.brickGroup);\n }\n \n placeBlock(pos, key) {\n \/\/\n \/\/add the block to the scene. Position is not important yet\n \/\/\n let block = this.physics.add.sprite(0, 0, key);\n this.brickGroup.add(block);\n \/\/\n \/\/place the group\n \/\/\n this.aGrid.placeAtIndex(pos, block);\n \/\/\n \/\/make the block immovable\n \/\/\n block.setImmovable();\n \/\/\n \/\/add the block to the group\n \/\/\n Align.scaleToGameW(block, .1);\n \n }\n makeFloor(fromPos, toPos, key) {\n for (var i = fromPos; i < toPos + 1; i++) {\n this.placeBlock(i, key);\n }\n }\n makeAnims() {\n this.anims.create({\n key: 'attack',\n frames: this.makeAnim('ninja', 'Attack__00'),\n frameRate: 8,\n repeat: -1\n });\n this.anims.create({\n key: 'jump',\n frames: this.makeAnim('ninja', 'Jump__00'),\n frameRate: 8,\n repeat: -1\n });\n this.anims.create({\n key: 'slide',\n frames: this.makeAnim('ninja', 'Slide__00'),\n frameRate: 8,\n repeat: -1\n });\n this.anims.create({\n key: 'jumpAttack',\n frames: this.makeAnim('ninja', \"Jump_Attack__00\"),\n frameRate: 8,\n repeat: -1\n });\n this.anims.create({\n key: 'jumpThrow',\n frames: this.makeAnim('ninja', \"Jump_Throw__00\"),\n frameRate: 8,\n repeat: -1\n });\n this.anims.create({\n key: 'idle',\n frames: this.makeAnim('ninja', \"Idle__00\"),\n frameRate: 8,\n repeat: -1\n });\n this.anims.create({\n key: 'dead',\n frames: this.makeAnim('ninja', \"Dead__00\"),\n frameRate: 8,\n repeat: -1\n });\n this.anims.create({\n key: 'run',\n frames: this.makeAnim('ninja', \"Run__00\"),\n frameRate: 8,\n repeat: -1\n });\n }\n makeAnim(key, frameName) {\n let myArray = [];\n for (var i = 0; i < 8; i++) {\n let fn = frameName + i + \".png\";\n myArray.push({\n key: key,\n frame: fn\n })\n }\n return myArray;\n }\n update() {}\n}<\/code><\/pre>\n\n\n\t<form id=\"edd_purchase_13033\" class=\"edd_download_purchase_form edd_purchase_13033\" method=\"post\">\n\n\t\t\n\t\t<div class=\"edd_purchase_submit_wrapper\">\n\t\t\t<button class=\"edd-add-to-cart button red edd-submit\" data-nonce=\"e5883152d0\" data-timestamp=\"1734845997\" data-token=\"35b151da0b8326ced6a3e757de61839d0fdae3ad23e6f3e7040c7cd6d1d1f85a\" data-action=\"edd_add_to_cart\" data-download-id=\"13033\" data-variable-price=\"no\" data-price-mode=single data-price=\"0.00\" ><span class=\"edd-add-to-cart-label\">Free – Purchase<\/span> <span class=\"edd-loading\" aria-label=\"Loading\"><\/span><\/button><input type=\"submit\" class=\"edd-add-to-cart edd-no-js button red edd-submit\" name=\"edd_purchase_download\" value=\"Free – Purchase\" data-action=\"edd_add_to_cart\" data-download-id=\"13033\" data-variable-price=\"no\" data-price-mode=single \/><a href=\"https:\/\/phasergames.com\/checkout\/\" class=\"edd_go_to_checkout button red edd-submit\" style=\"display:none;\">Checkout<\/a>\n\t\t\t\t\t\t\t<span class=\"edd-cart-ajax-alert\" aria-live=\"assertive\">\n\t\t\t\t\t<span class=\"edd-cart-added-alert\" style=\"display: none;\">\n\t\t\t\t\t\t<svg class=\"edd-icon edd-icon-check\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"M26.11 8.844c0 .39-.157.78-.44 1.062L12.234 23.344c-.28.28-.672.438-1.062.438s-.78-.156-1.06-.438l-7.782-7.78c-.28-.282-.438-.673-.438-1.063s.156-.78.438-1.06l2.125-2.126c.28-.28.672-.438 1.062-.438s.78.156 1.062.438l4.594 4.61L21.42 5.656c.282-.28.673-.438 1.063-.438s.78.155 1.062.437l2.125 2.125c.28.28.438.672.438 1.062z\"\/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\tAdded to cart\t\t\t\t\t<\/span>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\n\t\t<input type=\"hidden\" name=\"download_id\" value=\"13033\">\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"edd_action\" class=\"edd_action_input\" value=\"add_to_cart\">\n\t\t\n\t\t\t\t\t<input type=\"hidden\" name=\"edd_redirect_to_checkout\" value=\"1\">\n\t\t\n\t\t\n\t<\/form>\n\n\n\n\n<figure class=\"wp-block-image pin\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"1024\" src=\"https:\/\/media.publit.io\/file\/w_683,h_1024,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_pin.png\" alt=\"\" class=\"wp-image-13021\" srcset=\"https:\/\/media.publit.io\/file\/w_683,h_1024,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_pin.png 683w, https:\/\/media.publit.io\/file\/w_200,h_300,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_pin.png 200w, https:\/\/media.publit.io\/file\/w_768,h_1152,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_pin.png 768w, https:\/\/media.publit.io\/file\/w_800,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_pin.png 800w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Platform games have been a staple in video games since Mario Brothers came along in the early 80’s. Because the framework gives us a lot of code to work with, setting Up Phaser 3 platform games isn’t too difficult. There are a lot of 3rd party tools to help you do this, but I’m going […]<\/p>\n","protected":false},"author":1,"featured_media":13014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[55],"tags":[],"class_list":["post-12939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-phaser-3"],"yoast_head":"\n<title>Platform Games in Phaser 3 - Setting Up - Phaser Games<\/title>\n<meta name=\"description\" content=\"Setting Up platform games is fairly easy thanks to all the code that Phaser 3 gives us to work with. Let's start with the ninja from the last post\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Platform Games in Phaser 3 - Setting Up - Phaser Games\" \/>\n<meta property=\"og:description\" content=\"Setting Up platform games is fairly easy thanks to all the code that Phaser 3 gives us to work with. Let's start with the ninja from the last post\" \/>\n<meta property=\"og:url\" content=\"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/\" \/>\n<meta property=\"og:site_name\" content=\"Phaser Games\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-25T13:50:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-10-02T03:08:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/media.publit.io\/file\/w_1200,h_1200,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_1200x1200.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"William\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"William\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/\",\"url\":\"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/\",\"name\":\"Platform Games in Phaser 3 - Setting Up - Phaser Games\",\"isPartOf\":{\"@id\":\"https:\/\/phasergames.com\/#website\"},\"datePublished\":\"2019-08-25T13:50:07+00:00\",\"dateModified\":\"2019-10-02T03:08:27+00:00\",\"author\":{\"@id\":\"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951\"},\"description\":\"Setting Up platform games is fairly easy thanks to all the code that Phaser 3 gives us to work with. Let's start with the ninja from the last post\",\"breadcrumb\":{\"@id\":\"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/phasergames.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Platform Games in Phaser 3 – Setting Up\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/phasergames.com\/#website\",\"url\":\"https:\/\/phasergames.com\/\",\"name\":\"Phaser Games\",\"description\":\"Tutorials Code and Resources\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/phasergames.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951\",\"name\":\"William\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/phasergames.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6dc3c530c4e0428b7d6f496d147d5b29?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6dc3c530c4e0428b7d6f496d147d5b29?s=96&d=mm&r=g\",\"caption\":\"William\"},\"url\":\"https:\/\/phasergames.com\/author\/admin\/\"}]}<\/script>\n","yoast_head_json":{"title":"Platform Games in Phaser 3 - Setting Up - Phaser Games","description":"Setting Up platform games is fairly easy thanks to all the code that Phaser 3 gives us to work with. Let's start with the ninja from the last post","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/","og_locale":"en_US","og_type":"article","og_title":"Platform Games in Phaser 3 - Setting Up - Phaser Games","og_description":"Setting Up platform games is fairly easy thanks to all the code that Phaser 3 gives us to work with. Let's start with the ninja from the last post","og_url":"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/","og_site_name":"Phaser Games","article_published_time":"2019-08-25T13:50:07+00:00","article_modified_time":"2019-10-02T03:08:27+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/media.publit.io\/file\/w_1200,h_1200,c_fit,q_80\/websiteImages\/phasergames\/set_up_platform_1200x1200.png","type":"image\/png"}],"author":"William","twitter_card":"summary_large_image","twitter_misc":{"Written by":"William","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/","url":"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/","name":"Platform Games in Phaser 3 - Setting Up - Phaser Games","isPartOf":{"@id":"https:\/\/phasergames.com\/#website"},"datePublished":"2019-08-25T13:50:07+00:00","dateModified":"2019-10-02T03:08:27+00:00","author":{"@id":"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951"},"description":"Setting Up platform games is fairly easy thanks to all the code that Phaser 3 gives us to work with. Let's start with the ninja from the last post","breadcrumb":{"@id":"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/phasergames.com\/setting-up-phaser-3-platform-games\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/phasergames.com\/"},{"@type":"ListItem","position":2,"name":"Platform Games in Phaser 3 – Setting Up"}]},{"@type":"WebSite","@id":"https:\/\/phasergames.com\/#website","url":"https:\/\/phasergames.com\/","name":"Phaser Games","description":"Tutorials Code and Resources","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/phasergames.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en"},{"@type":"Person","@id":"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951","name":"William","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/phasergames.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6dc3c530c4e0428b7d6f496d147d5b29?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6dc3c530c4e0428b7d6f496d147d5b29?s=96&d=mm&r=g","caption":"William"},"url":"https:\/\/phasergames.com\/author\/admin\/"}]}},"featured_image_src":"https:\/\/media.publit.io\/file\/w_600,h_400,c_fill,q_80\/websiteImages\/phasergames\/set_up_platform_1200x1200.png","featured_image_src_square":"https:\/\/media.publit.io\/file\/w_600,h_600,c_fill,q_80\/websiteImages\/phasergames\/set_up_platform_1200x1200.png","author_info":{"display_name":"William","author_link":"https:\/\/phasergames.com\/author\/admin\/"},"_links":{"self":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/12939"}],"collection":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/comments?post=12939"}],"version-history":[{"count":16,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/12939\/revisions"}],"predecessor-version":[{"id":13176,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/12939\/revisions\/13176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media\/13014"}],"wp:attachment":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media?parent=12939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/categories?post=12939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/tags?post=12939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}