{"id":14,"date":"2017-05-17T16:35:55","date_gmt":"2017-05-17T16:35:55","guid":{"rendered":"https:\/\/phasergames.com\/?page_id=14"},"modified":"2021-02-24T10:12:22","modified_gmt":"2021-02-24T03:12:22","slug":"phaser-games-tutorials-resources","status":"publish","type":"page","link":"https:\/\/phasergames.com\/","title":{"rendered":"Phaser Game Tutorials\u00a0"},"content":{"rendered":"\n
\"\"<\/a><\/figure>\n\n\n\n

Greeting fellow developer! My name is William. Welcome to my site on Phaser Game Tutorials.<\/p>\n\n\n\n

I’ve been a professional game coder for most of the last 20 years, and I love writing and talking about game code. I’ve been working with Phaser for over 6 years now.<\/p>\n\n\n\n

I am actively working to replace a lot of the flash work I previously made with Html5 content, and this is the library that is working well for me. In 2015, within just two weeks of starting Phaser, I created games just as fast as I had done after 15 years of flash!<\/p>\n\n\n\n

Here you will find a lot of Phaser Game Tutorials! There are also free and premium resources and code snippets for building\u00a0 Phaser Games. \u00a0What is Phaser? Phaser is an html5\/Javascript library that can work equally well on both mobile and computers. This library is growing strongly in popularity, and in many cases, it serves as a replacement for Abobe Flash. Like flash, it uses masks, sprites, tweens, animations, and groups. I have no official association with Phaser, but I work in it almost every day. \u00a0You can find the official\u00a0website here. It has a lot of wonderful resources.\u00a0<\/p>\n\n\n\n

Source code for Ebooks<\/h3>\n\n\n\n

Looking for the source code to “Create and Publish HTML5 Game in 24 hours”? Click Here<\/a><\/p>\n\n\n\n

The Ultimate Game Part Template For Phaser 3<\/h3>\n\n\n\n
\"The<\/a>
The Ultimate Game Part Template For Phaser 3<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

My latest Phaser Game Tutorials<\/h3>\n\n\n
\r\n
\r\n \r\n\t\tLoading TIleMaps in Phaser 3 and JSON\t<\/a>\r\n\t<\/div>\r\n
\r\n\t
\r\n\t\t\"\"<\/a>\n
In my last post, I went over how to load tileMaps in phaser 3 using arrays. It is a good method for loading small maps, but most game developers use tools like the Tiled Map editor to create large maps. When we use tools like this, we need to load the map from a JSON file. I won't go over how to use the software because it is fairly easy to use, but if you need help, there are tons of videos on it, including mine. Loading the JSON There are two steps in preloading for the tileMaps. The first ...
Read More<\/a><\/div><\/div>\t<\/div>\r\n<\/div><\/div>\n
\r\n
\r\n \r\n\t\tHow to use Phaser 3 TileMaps\t<\/a>\r\n\t<\/div>\r\n
\r\n\t
\r\n\t\t\"\"<\/a>\n
TileMaps in Phaser 3 are very popular with developers because they allow us to rapidly build worlds for our players to explore. Not just in Phaser! Most modern game frameworks support TileMaps. I'll admit I've had trouble with tileMaps in Phaser 3 before. I kept giving up and writing code to get around them. I finally sat down with some coffee and dove in. I'm not sure what my stumbling block was, but I finally got past it. They are quite easy when you come down to it. I found the best way was breaking down the parts. I've also ...
Read More<\/a><\/div><\/div>\t<\/div>\r\n<\/div><\/div>\n
\r\n
\r\n \r\n\t\tChange image when clicked\t<\/a>\r\n\t<\/div>\r\n
\r\n\t
\r\n\t\t\"Change<\/a>\n
I received a request for help from another developer who wanted to be able to click on different cards and have a big image of that card appear so I offered to give him my solution and here it is below. I've tried to keep everything very simple and I've made a corresponding video to go along with his blog post.\u00a0\u00a0I'm using the utility template to be able to size and layout the cards. I've also kept things simple by number the cards from 1 to 6. That way I'm able to Loop through them.\u00a0 I've made a couple of ...
Read More<\/a><\/div><\/div>\t<\/div>\r\n<\/div><\/div>\n
\r\n
\r\n \r\n\t\tUsing Ladders in Phaser 3\t<\/a>\r\n\t<\/div>\r\n
\r\n\t
\r\n\t\t\"climbing<\/a>\n
Using ladders in Phaser 3 is tricky. Not only do you need to detect when a player touches the ladder, but you also need to know when it stops touching as well. The technique that I've decided to use here, will allow us to call a function to check if any ladder is being touched by the character at any given time. This is part of the series on making platform games in Phaser 3. This tutorial also uses the Utility Template which helps scale and align objects in Phaser 3. Placing the ladder Preload the image First, let's preload ...
Read More<\/a><\/div><\/div>\t<\/div>\r\n<\/div><\/div>\n
\r\n
\r\n \r\n\t\tPhaser 3 Dispatching Custom Events\t<\/a>\r\n\t<\/div>\r\n
\r\n\t
\r\n\t\t\"dispatching<\/a>\n
One of the most useful features of Flash\/Actionscript was the ability to dispatch custom events. Phaser does have an event class built-in and with a little ES5 magic, we can easily create a global messaging system. This post is part of a series of building a platform game in Phaser 3. You can find the start of the posts here. It also uses the Utility template that helps in scaling and positioning in Phaser. Events vs Callbacks A callback is where you inject a function into a class to be called when the class has finished doing something. myClass.onDone=this.setUpTanks(); I'm ...
Read More<\/a><\/div><\/div>\t<\/div>\r\n<\/div><\/div>\n
\r\n
\r\n \r\n\t\tPhaser 3 Nintendo style controller\t<\/a>\r\n\t<\/div>\r\n
\r\n\t
\r\n\t\t\"NES<\/a>\n
I'm sure that some of you may be nostalgic for the days of youth when the Nintendo NES was the most popular game system on the planet. My first video game was pong, which was followed quickly by the Atari 2600. I saw the Nintendo controller a bit of a breakout. The way it was set up it allowed not only for player movement and two actions, but it also provided a way to navigate on-screen menus. When the Nintendo NES first came out in 1985, I was still using a computer without a mouse. (or internet, copy and paste, ...
Read More<\/a><\/div><\/div>\t<\/div>\r\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n

More…<\/a><\/h2>\n\n\n\n

Downloads<\/h2>\n\n\n\t
\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"Phaser\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

Code samples<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"Phaser\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

Templates<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"game\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

Game Kits<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"Phaser\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

Characters<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"User\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

User Interface<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"Phaser\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

Effects<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"Tutorial\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

Tutorial Assets<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"Phaser\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

Premium<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"Games\"\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

Games<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\"Phaser\t\t\t\t<\/a>\n\t\t\t<\/div>\t\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t

Books<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\n\n\n

About Me<\/h3>\n\n\n\n

What would you like to learn?<\/h3>\n\n\n\n

If you have questions, a suggestion for what you’d like to see in a post or need support there are links to groups, or just feel free to contact me<\/a>. I love talking about code especially when it comes to games.  If you are into making Phaser Games already then please check out our Phaser Game makers group<\/a>.<\/p>\n\n\n\n

Phaser 3<\/h2>\n\n\n\n

Recently Phaser 3 was released. I am scrambling to update the site with resources while balancing my day job. You’ll find plenty of Phaser CE items here, and the list for Phaser 3 will continue to grow as time goes on. If you’ve any specific requests about Phaser please contact me<\/a>, and I’ll do my best to accommodate.<\/p>\n","protected":false},"excerpt":{"rendered":"

Greeting fellow developer! My name is William. Welcome to my site on Phaser Game Tutorials. I’ve been a professional game coder for most of the last 20 years, and I love writing and talking about game code. I’ve been working with Phaser for over 6 years now. I am actively working to replace a lot […]<\/p>\n","protected":false},"author":1,"featured_media":10707,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","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":"default","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":""},"class_list":["post-14","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nPhaser 3 Game Tutorials Code Examples Downloads<\/title>\n<meta name=\"description\" content=\"Beginner and Advanced Phaser Game Tutorials! You will also find free and premium resources and code snippets for building Phaser Games.\" \/>\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\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Phaser 3 Game Tutorials Code Examples Downloads\" \/>\n<meta property=\"og:description\" content=\"Beginner and Advanced Phaser Game Tutorials! You will also find free and premium resources and code snippets for building Phaser Games.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/phasergames.com\/\" \/>\n<meta property=\"og:site_name\" content=\"Phaser Games\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-24T03:12:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/media.publit.io\/file\/w_560,h_315,c_fit,q_80\/websiteImages\/phasergames\/set-up-phaser-3-npm-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"560\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/phasergames.com\/\",\"url\":\"https:\/\/phasergames.com\/\",\"name\":\"Phaser 3 Game Tutorials Code Examples Downloads\",\"isPartOf\":{\"@id\":\"https:\/\/phasergames.com\/#website\"},\"datePublished\":\"2017-05-17T16:35:55+00:00\",\"dateModified\":\"2021-02-24T03:12:22+00:00\",\"description\":\"Beginner and Advanced Phaser Game Tutorials! You will also find free and premium resources and code snippets for building Phaser Games.\",\"breadcrumb\":{\"@id\":\"https:\/\/phasergames.com\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/phasergames.com\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/phasergames.com\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/phasergames.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Phaser Game Tutorials\u00a0\"}]},{\"@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\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Phaser 3 Game Tutorials Code Examples Downloads","description":"Beginner and Advanced Phaser Game Tutorials! You will also find free and premium resources and code snippets for building 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\/","og_locale":"en_US","og_type":"article","og_title":"Phaser 3 Game Tutorials Code Examples Downloads","og_description":"Beginner and Advanced Phaser Game Tutorials! You will also find free and premium resources and code snippets for building Phaser Games.","og_url":"https:\/\/phasergames.com\/","og_site_name":"Phaser Games","article_modified_time":"2021-02-24T03:12:22+00:00","og_image":[{"width":560,"height":315,"url":"https:\/\/media.publit.io\/file\/w_560,h_315,c_fit,q_80\/websiteImages\/phasergames\/set-up-phaser-3-npm-2.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/phasergames.com\/","url":"https:\/\/phasergames.com\/","name":"Phaser 3 Game Tutorials Code Examples Downloads","isPartOf":{"@id":"https:\/\/phasergames.com\/#website"},"datePublished":"2017-05-17T16:35:55+00:00","dateModified":"2021-02-24T03:12:22+00:00","description":"Beginner and Advanced Phaser Game Tutorials! You will also find free and premium resources and code snippets for building Phaser Games.","breadcrumb":{"@id":"https:\/\/phasergames.com\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/phasergames.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/phasergames.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/phasergames.com\/"},{"@type":"ListItem","position":2,"name":"Phaser Game Tutorials\u00a0"}]},{"@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"}]}},"featured_image_src":"https:\/\/media.publit.io\/file\/w_600,h_400,c_fill,q_80\/websiteImages\/phasergames\/set-up-phaser-3-npm-2.jpg","featured_image_src_square":"https:\/\/media.publit.io\/file\/w_600,h_600,c_fill,q_80\/websiteImages\/phasergames\/set-up-phaser-3-npm-2.jpg","_links":{"self":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages\/14"}],"collection":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/types\/page"}],"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=14"}],"version-history":[{"count":89,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":24328,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages\/14\/revisions\/24328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media\/10707"}],"wp:attachment":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}