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":11971,"date":"2019-06-18T10:12:33","date_gmt":"2019-06-18T03:12:33","guid":{"rendered":"https:\/\/phasergames.com\/?p=11971"},"modified":"2019-08-14T13:00:57","modified_gmt":"2019-08-14T06:00:57","slug":"make-a-jump-meter-in-phaser-3","status":"publish","type":"post","link":"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/","title":{"rendered":"Make a Jump Meter in Phaser 3"},"content":{"rendered":"\n

In the last post, I showed how you can use gravity and velocity together to make a sprite jump<\/a>. In this post, we will add a jump meter to the project to show the user just how much power they will use.<\/p>\n\n\n\n

This project uses the Utility Template<\/a>.<\/p>\n\n\n\n<\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Making the meter image<\/h2>\n\n\n\n<p>The first thing we will need is an image to make the meter line from. You can use a graphic object, but I find this does not work so well on older iPads. <\/p>\n\n\n\n<p>I’m just going to use a simple green 25 x 25 square. Let’s start by loading the image in the preload function <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"25\" src=\"https:\/\/media.publit.io\/file\/w_25,h_25,c_fill,q_80\/websiteImages\/phasergames\/green.png\" alt=\"\" class=\"wp-image-11974\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>this.load.image(\"green\",\"images\/green.png\");<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Making the meter<\/h2>\n\n\n\n<p>For the meter, we just need to make an image game object. We will then grow and shrink that image based on how much power will be added to the jump.<\/p>\n\n\n\n<p>Place this code at the end of the create function<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.meter=this.add.image(0,0,\"green\");<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Make an align Grid<\/h2>\n\n\n\n<p>I’m going to take advantage of the Utility Template’s alignGrid feature to place the meter near the ball. First, let’s build the alignGrid. Place this code just above where you added the meter code.<\/p>\n\n\n\n<p>this.aGrid = new AlignGrid({<br> scene: this,<br> rows: 11,<br> cols: 11<br> });<br> this.aGrid.showNumbers();<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"643\" src=\"https:\/\/media.publit.io\/file\/w_480,h_643,c_fit,q_80\/websiteImages\/phasergames\/meter.jpg\" alt=\"\" class=\"wp-image-11976\" srcset=\"https:\/\/media.publit.io\/file\/w_480,h_400,c_fit,q_80\/websiteImages\/phasergames\/meter.jpg 480w, https:\/\/media.publit.io\/file\/w_224,h_300,c_fit,q_80\/websiteImages\/phasergames\/meter.jpg 224w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Placing the meter<\/h2>\n\n\n\n<p>Let’s place the meter in grid cell #100. You can change this to suit your own game later. Put this code just under where you create the meter<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.aGrid.placeAtIndex(100, this.meter);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Showing Power<\/h2>\n\n\n\n<p>To grow the bar based on power we can change the scaleY property. Setting this to 2 will make the bar twice the height. Setting to 3, three times the height and so forth.<\/p>\n\n\n\n<p>In the tick function add a line of code to set the scaleY property to equal the power<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> tick() {\n if (this.power < 5) {\n this.power += .5;\n this.meter.scaleY = this.power; \n }\n }<\/code><\/pre>\n\n\n\n<p>Setting the origin<\/p>\n\n\n\n<p>If you run the code now, you’ll see that the bar grows from the center. To get the right effect we need it to grow from the bottom upwards. We can fix this by setting the origins of the bar to 1.<\/p>\n\n\n\n<p>Just a note about origin settings. 0 means x,y, and scaling will start with the top, 0.5 refers to the center, and a 1 means the bottom. We can set an origin for both x and y. <\/p>\n\n\n\n<p>Place this code just below the where you make the meter.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.meter.setOrigin(1, 1);<\/code><\/pre>\n\n\n\n<p>The meter should now grow from the bottom upwards.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Reset the meter<\/h2>\n\n\n\n<p>After the power is applied to the ball, we need to reset the meter. In the end jump function let’s reset the scaleY of the image. This will make the meter invisible until power is applied again. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>endJump() {\n this.timer.remove();\n this.ball.setVelocityY(-this.power * 100);\n this.power = 0;\n this.meter.scaleY = 0;\n }<\/code><\/pre>\n\n\n\n<p>We should also set the image’s scaleY when we create it as well. Add the line just after the origin code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> this.meter = this.add.image(0, 0, \"green\");\n this.aGrid.placeAtIndex(100, this.meter);\n this.meter.setOrigin(1, 1);\n this.meter.scaleY = 0;<\/code><\/pre>\n\n\n\n<p>The last thing to do is to delete or comment out the showNumbers() code. Here is the final result<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"640\" src=\"https:\/\/media.publit.io\/file\/w_480,h_640,c_fit,q_80\/websiteImages\/phasergames\/meter2.jpg\" alt=\"\" class=\"wp-image-11978\" srcset=\"https:\/\/media.publit.io\/file\/w_480,h_400,c_fit,q_80\/websiteImages\/phasergames\/meter2.jpg 480w, https:\/\/media.publit.io\/file\/w_225,h_300,c_fit,q_80\/websiteImages\/phasergames\/meter2.jpg 225w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/figure><\/div>\n\n\n\n<p>Here is the complete code below:<\/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 \/\/load our images or sounds \n this.load.image(\"ball\", \"images\/ball.png\");\n this.load.image(\"block\", \"images\/block.png\");\n this.load.image(\"green\", \"images\/green.png\");\n }\n create() {\n this.power = 0;\n \/\/define our objects\n \/\/\n \/\/\n \/\/ball\n this.ball = this.physics.add.sprite(this.sys.game.config.width \/ 2, 0, \"ball\");\n this.ball.setGravityY(200);\n \/\/\n \/\/\n \/\/\n \/\/ground\n \/\/\n \/\/\n let ground = this.physics.add.sprite(this.sys.game.config.width \/ 2, this.sys.game.config.height * .95, \"block\");\n ground.displayWidth = this.sys.game.config.width * 1.1;\n ground.setImmovable();\n \/\/\n \/\/\n \/\/\n \/\/set collider\n \/\/\n \/\/\n this.physics.add.collider(this.ball, ground);\n this.input.on('pointerdown', this.startJump, this);\n this.input.on('pointerup', this.endJump, this);\n this.aGrid = new AlignGrid({\n scene: this,\n rows: 11,\n cols: 11\n });\n \/\/ this.aGrid.showNumbers();\n this.meter = this.add.image(0, 0, \"green\");\n this.aGrid.placeAtIndex(100, this.meter);\n this.meter.setOrigin(1, 1);\n this.meter.scaleY = 0;\n }\n endJump() {\n this.timer.remove();\n this.ball.setVelocityY(-this.power * 100);\n this.power = 0;\n this.meter.scaleY = 0;\n }\n startJump() {\n this.timer = this.time.addEvent({\n delay: 100,\n callback: this.tick,\n callbackScope: this,\n loop: true\n });\n }\n tick() {\n if (this.power < 5) {\n this.power += .5;\n this.meter.scaleY = this.power;\n console.log(this.power);\n }\n }\n update() {\n \/\/constant running loop\n }\n}<\/code><\/pre>\n\n\n\t<form id=\"edd_purchase_11996\" class=\"edd_download_purchase_form edd_purchase_11996\" 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=\"72e3d8a03f\" data-timestamp=\"1735211296\" data-token=\"67bc5cb1f176216a9197c02dbe7269331d45e8d2ca374cba42c6306014e45ccd\" data-action=\"edd_add_to_cart\" data-download-id=\"11996\" 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=\"11996\" 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=\"11996\">\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","protected":false},"excerpt":{"rendered":"<p>In the last post, I showed how you can use gravity and velocity together to make a sprite jump. In this post, we will add a jump meter to the project to show the user just how much power they will use. This project uses the Utility Template. Making the meter image The first thing […]<\/p>\n","protected":false},"author":1,"featured_media":12001,"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-11971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-phaser-3"],"yoast_head":"\n<title>Make a Jump Meter in Phaser 3 - Phaser Games<\/title>\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\/make-a-jump-meter-in-phaser-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make a Jump Meter in Phaser 3 - Phaser Games\" \/>\n<meta property=\"og:description\" content=\"In the last post, I showed how you can use gravity and velocity together to make a sprite jump. In this post, we will add a jump meter to the project to show the user just how much power they will use. This project uses the Utility Template. Making the meter image The first thing […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Phaser Games\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-18T03:12:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-14T06:00:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/media.publit.io\/file\/w_1200,h_800,c_fit,q_80\/websiteImages\/phasergames\/phaser-full-screen-1200x800-layout1860-1egepp7-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/\",\"url\":\"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/\",\"name\":\"Make a Jump Meter in Phaser 3 - Phaser Games\",\"isPartOf\":{\"@id\":\"https:\/\/phasergames.com\/#website\"},\"datePublished\":\"2019-06-18T03:12:33+00:00\",\"dateModified\":\"2019-08-14T06:00:57+00:00\",\"author\":{\"@id\":\"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951\"},\"breadcrumb\":{\"@id\":\"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/phasergames.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make a Jump Meter in Phaser 3\"}]},{\"@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":"Make a Jump Meter in Phaser 3 - Phaser Games","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\/make-a-jump-meter-in-phaser-3\/","og_locale":"en_US","og_type":"article","og_title":"Make a Jump Meter in Phaser 3 - Phaser Games","og_description":"In the last post, I showed how you can use gravity and velocity together to make a sprite jump. In this post, we will add a jump meter to the project to show the user just how much power they will use. This project uses the Utility Template. Making the meter image The first thing […]","og_url":"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/","og_site_name":"Phaser Games","article_published_time":"2019-06-18T03:12:33+00:00","article_modified_time":"2019-08-14T06:00:57+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/media.publit.io\/file\/w_1200,h_800,c_fit,q_80\/websiteImages\/phasergames\/phaser-full-screen-1200x800-layout1860-1egepp7-2.png","type":"image\/png"}],"author":"William","twitter_card":"summary_large_image","twitter_misc":{"Written by":"William","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/","url":"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/","name":"Make a Jump Meter in Phaser 3 - Phaser Games","isPartOf":{"@id":"https:\/\/phasergames.com\/#website"},"datePublished":"2019-06-18T03:12:33+00:00","dateModified":"2019-08-14T06:00:57+00:00","author":{"@id":"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951"},"breadcrumb":{"@id":"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/phasergames.com\/make-a-jump-meter-in-phaser-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/phasergames.com\/"},{"@type":"ListItem","position":2,"name":"Make a Jump Meter in Phaser 3"}]},{"@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\/phaser-full-screen-1200x800-layout1860-1egepp7-2.png","featured_image_src_square":"https:\/\/media.publit.io\/file\/w_600,h_600,c_fill,q_80\/websiteImages\/phasergames\/phaser-full-screen-1200x800-layout1860-1egepp7-2.png","author_info":{"display_name":"William","author_link":"https:\/\/phasergames.com\/author\/admin\/"},"_links":{"self":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/11971"}],"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=11971"}],"version-history":[{"count":6,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/11971\/revisions"}],"predecessor-version":[{"id":12000,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/11971\/revisions\/12000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media\/12001"}],"wp:attachment":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media?parent=11971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/categories?post=11971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/tags?post=11971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}