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":12718,"date":"2019-08-11T13:06:46","date_gmt":"2019-08-11T06:06:46","guid":{"rendered":"https:\/\/phasergames.com\/?p=12718"},"modified":"2019-08-18T12:27:15","modified_gmt":"2019-08-18T05:27:15","slug":"json-animations-in-phaser-3","status":"publish","type":"post","link":"https:\/\/phasergames.com\/json-animations-in-phaser-3\/","title":{"rendered":"JSON Animations in Phaser 3"},"content":{"rendered":"\n

When animations contain a lot of images and have a lot of animations it is easier to use JSON Animations.<\/p>\n\n\n\n

This is an update from my old Phaser 2 post<\/a>.<\/p>\n\n\n\n<\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Software<\/h2>\n\n\n\n<p>The software I use to create animations is called <a href=\"https:\/\/www.codeandweb.com\/texturepacker\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Texture Packer (opens in a new tab)\">Texture Packer<\/a>. They have both paid and free versions. You’ll only need the free version to follow along with these examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Images<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/media.publit.io\/file\/w_1024,h_576,c_fit,q_80\/websiteImages\/phasergames\/drag_image_animation_json.png\" alt=\"\" class=\"wp-image-12722\" srcset=\"https:\/\/media.publit.io\/file\/w_1024,h_576,c_fit,q_80\/websiteImages\/phasergames\/drag_image_animation_json.png 1024w, https:\/\/media.publit.io\/file\/w_300,h_169,c_fit,q_80\/websiteImages\/phasergames\/drag_image_animation_json.png 300w, https:\/\/media.publit.io\/file\/w_768,h_432,c_fit,q_80\/websiteImages\/phasergames\/drag_image_animation_json.png 768w, https:\/\/media.publit.io\/file\/w_1120,h_630,c_fit,q_80\/websiteImages\/phasergames\/drag_image_animation_json.png 1120w, https:\/\/media.publit.io\/file\/w_1280,c_fit,q_80\/websiteImages\/phasergames\/drag_image_animation_json.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>To add images for your animation, all you need to do is drag the images in the space marked “EMPTY”. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/media.publit.io\/file\/w_1024,h_576,c_fit,q_80\/websiteImages\/phasergames\/spritesheet_edit.png\" alt=\"\" class=\"wp-image-12723\" srcset=\"https:\/\/media.publit.io\/file\/w_1024,h_576,c_fit,q_80\/websiteImages\/phasergames\/spritesheet_edit.png 1024w, https:\/\/media.publit.io\/file\/w_300,h_169,c_fit,q_80\/websiteImages\/phasergames\/spritesheet_edit.png 300w, https:\/\/media.publit.io\/file\/w_768,h_432,c_fit,q_80\/websiteImages\/phasergames\/spritesheet_edit.png 768w, https:\/\/media.publit.io\/file\/w_1120,h_630,c_fit,q_80\/websiteImages\/phasergames\/spritesheet_edit.png 1120w, https:\/\/media.publit.io\/file\/w_1280,c_fit,q_80\/websiteImages\/phasergames\/spritesheet_edit.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once you drag in your images, you can see what the sprite sheet will look like.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/media.publit.io\/file\/w_1024,h_576,c_fit,q_80\/websiteImages\/phasergames\/preview_animation.png\" alt=\"\" class=\"wp-image-12724\" srcset=\"https:\/\/media.publit.io\/file\/w_1024,h_576,c_fit,q_80\/websiteImages\/phasergames\/preview_animation.png 1024w, https:\/\/media.publit.io\/file\/w_300,h_169,c_fit,q_80\/websiteImages\/phasergames\/preview_animation.png 300w, https:\/\/media.publit.io\/file\/w_768,h_432,c_fit,q_80\/websiteImages\/phasergames\/preview_animation.png 768w, https:\/\/media.publit.io\/file\/w_1120,h_630,c_fit,q_80\/websiteImages\/phasergames\/preview_animation.png 1120w, https:\/\/media.publit.io\/file\/w_1280,c_fit,q_80\/websiteImages\/phasergames\/preview_animation.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Use shift-click you can select multiple images and then preview that animation. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Settings<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"337\" height=\"368\" src=\"https:\/\/media.publit.io\/file\/w_337,h_368,c_fit,q_80\/websiteImages\/phasergames\/settings_2.jpg\" alt=\"\" class=\"wp-image-12725\" srcset=\"https:\/\/media.publit.io\/file\/w_337,c_fit,q_80\/websiteImages\/phasergames\/settings_2.jpg 337w, https:\/\/media.publit.io\/file\/w_275,h_300,c_fit,q_80\/websiteImages\/phasergames\/settings_2.jpg 275w\" sizes=\"(max-width: 337px) 100vw, 337px\" \/><\/figure><\/div>\n\n\n\n<p>These are the settings I typically use for my JSON Animations.  They are set up so I can see the Sprite sheet with all the sprites in order.  However, it may not be the most efficient way for your game. Whatever settings you choose should not affect the code that we are going to use to bring in the animations below.  <br><\/p>\n\n\n\n<p>You might want to consider using one sprite sheet for development just to get your code organized and then going ahead and creating a more efficient sprite sheet later. As long as the frame names (see below) remain the same you shouldn’t have any problems.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exporting The Image And JSON<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"349\" height=\"285\" src=\"https:\/\/media.publit.io\/file\/w_349,h_285,c_fit,q_80\/websiteImages\/phasergames\/publish.jpg\" alt=\"\" class=\"wp-image-12728\" srcset=\"https:\/\/media.publit.io\/file\/w_349,c_fit,q_80\/websiteImages\/phasergames\/publish.jpg 349w, https:\/\/media.publit.io\/file\/w_300,h_245,c_fit,q_80\/websiteImages\/phasergames\/publish.jpg 300w\" sizes=\"(max-width: 349px) 100vw, 349px\" \/><\/figure>\n\n\n\n<p>Press the publish button at the top of the program to be able to export your sprite sheet. This will produce two files ninja.png(the sprite sheet) and ninja.json (the information).<\/p>\n\n\n\n<p>The JSON file contains information where each sprite sheet individual image starts and ends.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Loading The JSON Animation Spritesheet<\/h2>\n\n\n\n<p>Normally to load a sprite sheet we use something like the code below. This works well when all the images are the same size or can be spaced evenly.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.load.spritesheet('ninja', 'images\/ninja.png', { frameWidth: 128, frameHeight: 128 });<\/code><\/pre>\n\n\n\n<p>Using JSON Animations takes away the need for that. Images can be of different shapes and sizes.<\/p>\n\n\n\n<p>To load a sprite sheet with JSON we can use the atlas statement and pass in a key, the path to the sprite sheet and the path to the JSON file<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.load.atlas(\"ninja\", \"images\/ninja.png\", \"images\/ninja.json\");<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up the Animations<\/h2>\n\n\n\n<p>text<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Finding the Frame Names<\/h3>\n\n\n\n<p>You may be used to targeting a frame in a sprite sheet with a number.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.char.setFrame(1);<\/code><\/pre>\n\n\n\n<p>With a sprite sheet loaded with JSON, however, the frame is decided by the image name. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.char.setFrame(\"Run__006.png\");<\/code><\/pre>\n\n\n\n<p>These names are not very elegant and I often go into the JSON file to clean up or change the names.<\/p>\n\n\n\n<p>To target the frames for animation, we have to know what they are. There is a getFrames() function that you can run on the textures object to get these names. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> var frameNames = this.textures.get('ninja').getFrameNames();\n console.log(frameNames);<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"733\" height=\"720\" src=\"https:\/\/media.publit.io\/file\/w_733,h_720,c_fit,q_80\/websiteImages\/phasergames\/keys-2.jpg\" alt=\"\" class=\"wp-image-12730\" srcset=\"https:\/\/media.publit.io\/file\/w_733,c_fit,q_80\/websiteImages\/phasergames\/keys-2.jpg 733w, https:\/\/media.publit.io\/file\/w_300,h_295,c_fit,q_80\/websiteImages\/phasergames\/keys-2.jpg 300w\" sizes=\"(max-width: 733px) 100vw, 733px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Defining the Animation<\/h3>\n\n\n\n<p>Now that we know the names we can make the animations. Here is an example of how you can create an animation. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.anims.create({\n key: 'walk',\n frames: [\n { key: 'char',frame:1 },\n { key: 'char',frame:2 },\n ],\n frameRate: 8,\n repeat: -1\n });<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li> key-the name of the animation such as walk, run, jump or idle. <\/li><li>frames-an array of objects that consists of a key and a frame property. <ul><li>frames key – the key of the image loaded with atlas<\/li><li>frames frame – the frame name that we pulled from getFrames()<\/li><\/ul><\/li><li>frame rate – the speed of the animation. Higher is faster.<\/li><li>repeat – The number of times the animation should play. -1 means it will play continuously <\/li><\/ul>\n\n\n\n<p>Below is an example that sets up an attack animation<\/p>\n\n\n\n<p>this.anims.create({<br>\n key: ‘attack’,<br>\n frames: [<br>\n { key: ‘ninja’,frame:”Attack__000.png”},<br>\n { key: ‘ninja’,frame:”Attack__001.png”},<br>\n { key: ‘ninja’,frame:”Attack__002.png”},<br>\n { key: ‘ninja’,frame:”Attack__003.png”},<br>\n { key: ‘ninja’,frame:”Attack__004.png”},<br>\n { key: ‘ninja’,frame:”Attack__005.png”},<br>\n { key: ‘ninja’,frame:”Attack__006.png”},<br>\n { key: ‘ninja’,frame:”Attack__007.png”},<br>\n { key: ‘ninja’,frame:”Attack__008.png”},<br>\n { key: ‘ninja’,frame:”Attack__009.png”},<br>\n ],<br>\n frameRate: 8,<br>\n repeat: -1<br>\n });<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using A Shortcut<\/h3>\n\n\n\n<p>While the above works very well, it does tend to take up a lot of room in the code. There is a built in way in Phaser to generate the animations.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.anims.generateFrameNames('key', {\n start: 0,\n end: 5,\n zeroPad: 3,\n prefix: 'string prefix',\n suffix: '.png'\n })<\/code><\/pre>\n\n\n\n<p>In this example the parameters would be:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>key – ninja<\/li><li>start – 0<\/li><li>end – 5<\/li><li>zeroPad -3 This is a little confusing, it is simply the number of digits<\/li><li>prefix – Attack__<\/li><li>suffix – png<\/li><\/ul>\n\n\n\n<p>This is how we can use this code to generate the attack animation<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.anims.create({\n key: 'attack',\n frames: this.anims.generateFrameNames('ninja', {\n start: 0,\n end: 9,\n zeroPad: 3,\n prefix: 'Attack__',\n suffix: '.png'\n }),\n frameRate: 8,\n repeat: -1\n });<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Playing the animation<\/h3>\n\n\n\n<p>After the animation is set up, all we need to do is make a sprite and play the animation<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.ninja=this.add.sprite(100,300,'ninja');\nthis.ninja.play('attack');<\/code><\/pre>\n\n\n\n<p>I’ll be using this animation to start a series on a platform game, so check back for that!<\/p>\n\n\n\t<form id=\"edd_purchase_12901\" class=\"edd_download_purchase_form edd_purchase_12901\" 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=\"5fe0c18d79\" data-timestamp=\"1735267124\" data-token=\"7b33fab5d1952245b8cc89aa8b9f2981319044d2b5cd789a4ec295c80c3e1a1b\" data-action=\"edd_add_to_cart\" data-download-id=\"12901\" 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=\"12901\" 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=\"12901\">\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>When animations contain a lot of images and have a lot of animations it is easier to use JSON Animations. This is an update from my old Phaser 2 post. Software The software I use to create animations is called Texture Packer. They have both paid and free versions. You’ll only need the free version […]<\/p>\n","protected":false},"author":1,"featured_media":12899,"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":[67,66,68],"class_list":["post-12718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-phaser-3","tag-animations-json","tag-phaser-3-animations","tag-phaser-3-animations-json"],"yoast_head":"\n<title>JSON Animations in Phaser 3 - Phaser Games<\/title>\n<meta name=\"description\" content=\"When your Phaser 3 animations contain a lot of images or have a lot of animations to set up it is much easier to use JSON animations. Let me show you how.\" \/>\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\/json-animations-in-phaser-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JSON Animations in Phaser 3 - Phaser Games\" \/>\n<meta property=\"og:description\" content=\"When your Phaser 3 animations contain a lot of images or have a lot of animations to set up it is much easier to use JSON animations. Let me show you how.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/phasergames.com\/json-animations-in-phaser-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Phaser Games\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-11T06:06:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-18T05:27:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/media.publit.io\/file\/w_1200,h_1200,c_fit,q_80\/websiteImages\/phasergames\/phaser_json_animation-1200x1200-layout1817-1ekvair.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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/phasergames.com\/json-animations-in-phaser-3\/\",\"url\":\"https:\/\/phasergames.com\/json-animations-in-phaser-3\/\",\"name\":\"JSON Animations in Phaser 3 - Phaser Games\",\"isPartOf\":{\"@id\":\"https:\/\/phasergames.com\/#website\"},\"datePublished\":\"2019-08-11T06:06:46+00:00\",\"dateModified\":\"2019-08-18T05:27:15+00:00\",\"author\":{\"@id\":\"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951\"},\"description\":\"When your Phaser 3 animations contain a lot of images or have a lot of animations to set up it is much easier to use JSON animations. Let me show you how.\",\"breadcrumb\":{\"@id\":\"https:\/\/phasergames.com\/json-animations-in-phaser-3\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/phasergames.com\/json-animations-in-phaser-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/phasergames.com\/json-animations-in-phaser-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/phasergames.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JSON Animations 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":"JSON Animations in Phaser 3 - Phaser Games","description":"When your Phaser 3 animations contain a lot of images or have a lot of animations to set up it is much easier to use JSON animations. Let me show you how.","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\/json-animations-in-phaser-3\/","og_locale":"en_US","og_type":"article","og_title":"JSON Animations in Phaser 3 - Phaser Games","og_description":"When your Phaser 3 animations contain a lot of images or have a lot of animations to set up it is much easier to use JSON animations. Let me show you how.","og_url":"https:\/\/phasergames.com\/json-animations-in-phaser-3\/","og_site_name":"Phaser Games","article_published_time":"2019-08-11T06:06:46+00:00","article_modified_time":"2019-08-18T05:27:15+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/media.publit.io\/file\/w_1200,h_1200,c_fit,q_80\/websiteImages\/phasergames\/phaser_json_animation-1200x1200-layout1817-1ekvair.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\/json-animations-in-phaser-3\/","url":"https:\/\/phasergames.com\/json-animations-in-phaser-3\/","name":"JSON Animations in Phaser 3 - Phaser Games","isPartOf":{"@id":"https:\/\/phasergames.com\/#website"},"datePublished":"2019-08-11T06:06:46+00:00","dateModified":"2019-08-18T05:27:15+00:00","author":{"@id":"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951"},"description":"When your Phaser 3 animations contain a lot of images or have a lot of animations to set up it is much easier to use JSON animations. Let me show you how.","breadcrumb":{"@id":"https:\/\/phasergames.com\/json-animations-in-phaser-3\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/phasergames.com\/json-animations-in-phaser-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/phasergames.com\/json-animations-in-phaser-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/phasergames.com\/"},{"@type":"ListItem","position":2,"name":"JSON Animations 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_json_animation-1200x1200-layout1817-1ekvair.png","featured_image_src_square":"https:\/\/media.publit.io\/file\/w_600,h_600,c_fill,q_80\/websiteImages\/phasergames\/phaser_json_animation-1200x1200-layout1817-1ekvair.png","author_info":{"display_name":"William","author_link":"https:\/\/phasergames.com\/author\/admin\/"},"_links":{"self":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/12718"}],"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=12718"}],"version-history":[{"count":16,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/12718\/revisions"}],"predecessor-version":[{"id":13088,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/12718\/revisions\/13088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media\/12899"}],"wp:attachment":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media?parent=12718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/categories?post=12718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/tags?post=12718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}