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:
After that we will pass to Part 1 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!
Installation
There are many ways for installing Phaser 3 into your machine:
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.
NPM
Phaser 3 is available through the NPM Registry 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.
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 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 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.
JS File
The simplest and easiest way you can install Phaser, it's to just download the js file from here: phaser.js
Then just include the library into your project folder and... done!
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>
<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 Library
With which ever method you chose! There are two main ways of importing the library:
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:
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:
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:
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).
This step was already done in the 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>
<head>
<script src="./node_modules/phaser/dist/phaser.js"></script>
</head>
<body>
...
</body>
</html>
If you used Github:
<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>
<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 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 to learn about basic bundling using browserify.
Top comments (0)