Complete Phaser 3 Game Development Guide: Part 0 (Installation and Importing)
Tags: gamedev, javascript, beginners, html
Published: 2022-04-01 21:20:10

**DISCLAIMER**: These series of articles may seem long and with a lot of information. I try to condense as much as possible for beginners to understand, but also to not get bored reading them. If you have any recommendations, I would gladly accept them!

## What's this about? 
Phaser 3 is a simple, complete, and efficient Javascript library for developing video games in HTML or Browser. Phaser 3 is great for beginners because of its simplicity during development and it's lightweight environment (unlike Unity or Unreal which take up a lot of CPU and processing power). In this part of the guide we will complete the following tasks:

* [Installation](#installation)
* [Importing Library](#importing)

After that we will pass to [Part 1](https://dev.to/the_unfactoring_guru/complete-phaser-3-game-development-guide-part-1-hello-world-in-phaser-3-5103-temp-slug-8794418) where we dive into the details of the project we are creating and on how to run our first "Hello World" in Phaser (Trust me, it's a lot more exciting than it sounds).

The only requirements you need are:
* Basic HTML-CSS knowledge (just to create our game's window)
* Object Oriented Programming skills (not necessarilly Javascript)
* Node.js installed on your machine (we need to install some packages necessary for compilation and execution)
* Text/Code Editor (... duh)

If all of that is done, let's get started!

## <a name="installation"></a>Installation
There are many ways for installing Phaser 3 into your machine:

* [NPM](#npm-install)
* [Source code](#sourcecode-install)
* [JS File](#js-install)
* [CDN](#cdn-install)

Each one has its benefits and consequences, but that's for another section or article. For now just choose the one which is best for you.

**<a name="npm-install"></a> NPM**
Phaser 3 is available through the [NPM Registry](https://www.npmjs.com) so you just need to go to your project folder and execute:

`npm install phaser`

from the console!

And that's basically it! If you are done installing then you can skip the other methods and jump into [how to import the library.](#importing)

**<a name="sourcecode-install"></a> Source Code**
This library is Open Source which means it's source code is free to download and edit from a public repository (Github in this case). You can either download the zip/tar.gz file from the [Phaser 3 Repository](https://github.com/photonstorm/phaser) or you can use git to clone the repo into your project:

`git clone https://github.com/photonstorm/phaser.git`

Or if you have [Github's CLI](https://cli.github.com/) tool you can just run:

`gh repo clone photonstorm/phaser`

after that take in mind that the file we will import afterwards is called `phaser.js` located in `phaser/dist/phaser.js`. With this done you can go right into [how to import the Phaser 3 library.](#importing)

**<a name="js-install"></a> JS File**
The simplest and easiest way you can install Phaser, it's to just download the js file from here: [phaser.js](https://github.com/photonstorm/phaser/releases/download/v3.55.2/phaser.js)

Then just include the library into your project folder and... done!

**<a name="cdn-install"></a> CDN**
For those who don't know, a CDN (Content Delivery Network) is used to import library (an almost infinite amount of libraries) from the internet without needing to install them locally! Lucky for us, Phaser has it's own CDN! Installing it is easy, you just need to go to the index.html file (or your main html file) and included into the browser's `<head>` tag as a `<scrpt src="$PHASER_LIBRARY_CDN>`

```html
<html>
   <head>
      <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
   </head>
   <body>
    ...
   </body>
</html>
```

Now with any of these installation methods, you can now start [importing the library](#importing)

## <a name="importing"></a>Importing Library
With which ever method you chose! There are two main ways of importing the library:

* [Requiring the library using commonjs](#require-importing)
* [Include into the HTML file](#including-importing)

**<a name="require-importing"></a>Require inside javascript file**

If you are familiar with commonjs, than you know that when we talk about **importing** the library, we are actually **requiring** it's contents into a variable. This variable will have ALL the functionality we need from the library.

If you installed through npm, then you can simply write this into your main javascript file:

```javascript
const Phaser = require('phaser');
```

If you installed through github or just downloaded the javascript file, you basically do the same step, but specifying the library's directory:

With Github, it's highly likely that you import the library like this:

```javascript
const Phaser = require('./phaser/dist/phaser.js');
```

Or if you downloaded the phaser.js file into a custom directory then you would import the library like this:

```javascript
const Phaser = require('./path/to/library/phaser');
//REPLACE 'path/to/library/' WITH THE PHASER DIRECTORY
```
Regarding which step you chose, you would actually need a bundling tool to compile your code (we will get into bundling in another section, so don't worry yet).

**<a name="including-importing"></a>Including in HTML file**

This step was already done in the [CDN install](#cdn-install) section, but of course this is done differently regarding which method of installation you used.

Basically you just include your phaser.js script inside the `<head>` tags of you html file using a `<script src="src">` where `"src"` is your Phaser library.

If you used npm:
```html
<html>
   <head>
      <script src="./node_modules/phaser/dist/phaser.js"></script>
   </head>
   <body>
    ...
   </body>
</html>
```

If you used Github:

```html
<html>
   <head>
      <script src="./phaser/dist/phaser.js"></script>
   </head>
   <body>
    ...
   </body>
</html>
```

If you saved the phaser.js file into a custom directory:
```html
<html>
   <head>
      <script src="./path/to/library/phaser.js"></script>
   </head>
   <body>
    ...
   </body>
</html>
```

And with that, you're all done.

## What we learned...
In this part we learned the basic requirements we need to create our game, how to install the required library, and how to import the library into our project. In [Part 1](www.example.com) we will create our "Hello World" program inside our project so we are sure that things are running smoothly.

**Important**: If you imported the library using commonjs (`require("$PHASER_LIBRARY")`), then go to [Part 0.5](example.js) to learn about basic bundling using **browserify**.