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":10270,"date":"2019-03-21T12:36:17","date_gmt":"2019-03-21T05:36:17","guid":{"rendered":"https:\/\/phasergames.com\/?page_id=10270"},"modified":"2020-03-30T07:19:17","modified_gmt":"2020-03-30T00:19:17","slug":"set-up-phaser-3-npm","status":"publish","type":"page","link":"https:\/\/phasergames.com\/set-up-phaser-3-npm\/","title":{"rendered":"Set Up Phaser 3 Project Template"},"content":{"rendered":"\n

Over my years on my path from a kid playing around with code(1982) to the present of being a senior developer, every year the number of paths of learning that I can take is growing exponentially. Sometimes these paths lead to dead ends and I spend my time learning something that is the flavour<\/g> of the year. About half the technologies I’ve picked up are abandoned or rarely used. Basic <\/g>,<\/g>Flash<\/g>, Flex,Visual<\/g> Basic, Lau to name a few. Some that I started to use but decided against after a day or two were<\/g> a bullet dodged. These would include such languages as CoffeScript or Delphi.<\/p>\n\n\n\n

Don’t get me wrong, I learned valuable lessons from those languages but I’ve had to unlearn <\/strong>about half of what I put 1000s of hours to learn. <\/p>\n\n\n\n

So every year or so when a new way of doing things pops its head up, I’m always a bit resistant, but when a technology looks like it will stay around I (eventually) embrace it. <\/p>\n\n\n\n

So for all those people have requested that I show them how to set up Phaser with NPM (Node package manager), here it is.<\/p>\n\n\n\n

Step 1. Install the node package manager<\/h2>\n\n\n\n

What is the node package manager(NPM)?<\/p>\n\n\n\n

According to the official website:<\/p>\n\n\n\n

npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you\u2019re sharing, so you can build amazing things. <\/p>npmjs.com
<\/cite><\/blockquote>\n\n\n\n

For if it makes things easier or not, is debatable, however it is now being widely adopted as standard.<\/p>\n\n\n\n

Install here<\/a><\/p>\n\n\n\n

Step 2. Install Git<\/h2>\n\n\n\n

What is git?<\/p>\n\n\n\n


Git<\/em> is a free and open source distributed version control system  <\/p><\/blockquote>\n\n\n\n

Basically git copies files from one place to another and keeps track of what was copied and when, so it is easy to roll back to a previous time.<\/p>\n\n\n\n

We need git here to copy files from github.com<\/p>\n\n\n\n

Install here<\/a><\/p>\n\n\n\n

Step 3. Open A command prompt<\/h2>\n\n\n\n

Open a command prompt on Windows, or a terminal on Macs. You may need to search for it. Once you find it, make a shortcut where you can get to it quickly in future.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 4. Make a directory <\/h2>\n\n\n\n

At the command prompt, make and navigate to an empty directory. I like to make directories for each of my project types live. Phaser, React, Vue, ect<\/g>.
Use md<\/g> for make directory and cd for change directory.<\/p>\n\n\n\n

md<\/g> phaser
cd phaser<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 5. Clone The Project<\/h2>\n\n\n\n

Richard Davey has put together a nice time-saving package up on GitHub. Now we clone the files from the phaser 3 project template git hub. Copy and paste the text below into your command prompt, replacing game<\/g>1 with the name of your game or project.<\/p>\n\n\n\n

git clone https:\/\/github.com\/photonstorm\/phaser3-project-template.git game1<\/p>\n\n\n\n

Then change the directory to your game directory<\/p>\n\n\n\n

cd game1<\/p>\n\n\n\n

Step 6. Open your directory in your editor<\/h2>\n\n\n\n

Open the folder with the code editor of your choice. You’ll see something like this.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 7. Customize the package file<\/h2>\n\n\n\n

Open the package.json that was included with the template and replace infomation<\/g> such as author name, homepage etc with your own data. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

About WebPack<\/h2>\n\n\n\n

It was difficult for me to find anything on WebPack on the web that made me understand what it was.<\/p>\n\n\n\n


webpack<\/g><\/em> is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging<\/p>
https:\/\/webpack.js.org\/<\/a> <\/cite><\/blockquote>\n\n\n\n

In plain language basically<\/g> webpack<\/g> combines all your scripts into 1 script,<\/g> and working with Babel<\/a>, translates that down a low-level<\/g> JavaScript that all browsers understand. It also does the same for all css<\/g> fles<\/g> and images. <\/p>\n\n\n\n

Normally we would use npm<\/g> to install webpack<\/g>, but the project template that we cloned in step 5, already contains webpack<\/g> as a dependency so we will install that on the next step.<\/p>\n\n\n\n

Step 8. Install the dependencies <\/h2>\n\n\n\n

There are bits of code that the template needs to run aka the node packages. The template has a list of what is needed. To install them type:<\/p>\n\n\n\n

npm install <\/p>\n\n\n\n

Step 9. Optional – Copy Template Files<\/h3>\n\n\n\n

If you are using a template from this site, such as the Ulitmate Game Parts Template for Phaser 3 then simply copy and overwrite the files in the top project directory with files from the template.<\/p>\n\n\n\n

Step 10. Run the code<\/h2>\n\n\n\n

Now type out:<\/p>\n\n\n\n

npm<\/g> start<\/p>\n\n\n\n

You should see this result<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can make changes to the code in the src folder starting with index.js<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

That should get you ready and set up to create phaser games with the node package manager. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"

Over my years on my path from a kid playing around with code(1982) to the present of being a senior developer, every year the number of paths of learning that I can take is growing exponentially. Sometimes these paths lead to dead ends and I spend my time learning something that is the flavour of […]<\/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-10270","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nSet Up Phaser 3 Project Template - 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\/set-up-phaser-3-npm\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Set Up Phaser 3 Project Template - Phaser Games\" \/>\n<meta property=\"og:description\" content=\"Over my years on my path from a kid playing around with code(1982) to the present of being a senior developer, every year the number of paths of learning that I can take is growing exponentially. Sometimes these paths lead to dead ends and I spend my time learning something that is the flavour of […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/phasergames.com\/set-up-phaser-3-npm\/\" \/>\n<meta property=\"og:site_name\" content=\"Phaser Games\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-30T00:19:17+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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/phasergames.com\/set-up-phaser-3-npm\/\",\"url\":\"https:\/\/phasergames.com\/set-up-phaser-3-npm\/\",\"name\":\"Set Up Phaser 3 Project Template - Phaser Games\",\"isPartOf\":{\"@id\":\"https:\/\/phasergames.com\/#website\"},\"datePublished\":\"2019-03-21T05:36:17+00:00\",\"dateModified\":\"2020-03-30T00:19:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/phasergames.com\/set-up-phaser-3-npm\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/phasergames.com\/set-up-phaser-3-npm\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/phasergames.com\/set-up-phaser-3-npm\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/phasergames.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Set Up Phaser 3 Project Template\"}]},{\"@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":"Set Up Phaser 3 Project Template - 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\/set-up-phaser-3-npm\/","og_locale":"en_US","og_type":"article","og_title":"Set Up Phaser 3 Project Template - Phaser Games","og_description":"Over my years on my path from a kid playing around with code(1982) to the present of being a senior developer, every year the number of paths of learning that I can take is growing exponentially. Sometimes these paths lead to dead ends and I spend my time learning something that is the flavour of […]","og_url":"https:\/\/phasergames.com\/set-up-phaser-3-npm\/","og_site_name":"Phaser Games","article_modified_time":"2020-03-30T00:19:17+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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/phasergames.com\/set-up-phaser-3-npm\/","url":"https:\/\/phasergames.com\/set-up-phaser-3-npm\/","name":"Set Up Phaser 3 Project Template - Phaser Games","isPartOf":{"@id":"https:\/\/phasergames.com\/#website"},"datePublished":"2019-03-21T05:36:17+00:00","dateModified":"2020-03-30T00:19:17+00:00","breadcrumb":{"@id":"https:\/\/phasergames.com\/set-up-phaser-3-npm\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/phasergames.com\/set-up-phaser-3-npm\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/phasergames.com\/set-up-phaser-3-npm\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/phasergames.com\/"},{"@type":"ListItem","position":2,"name":"Set Up Phaser 3 Project Template"}]},{"@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\/10270"}],"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=10270"}],"version-history":[{"count":31,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages\/10270\/revisions"}],"predecessor-version":[{"id":16757,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages\/10270\/revisions\/16757"}],"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=10270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}