Phaser 3 Basics: Setup

Phaser 3 Basics: Setup

September 25, 2019 5:35 pm Published by Leave your thoughts

In this part, we will be setup a basic environment for tinkering with Phaser 3.

First, we need a web server of some sort in order to run our game. This is necessary because we don’t want any malicious JavaScript to read our file system from within the browser. Phaser’s website has a great guide on the web server portion of the setup.

Second, create a directory to house our project. The directory should be made in a location where the web server you installed can serve from. For example, if I’m using XAMPP or MAMP, I would create a folder in the htdocs directory.

Grabbing the Phaser Script

Third, go to the Phaser 3 GitHub repository. Click the “dist” folder. We can pick one of two files to download: phaser.js, or phaser.min.js. The difference is that phaser.js contains a uncompressed version of the Phaser framework. This is useful for contributing to the project, and for checking implementation details. The file phaser.min.js is compressed and is meant for distributing your game. Either file will work for our purposes. To download a file, simply click on it and click “Download” or “Raw.” After that, right click the page with the code and click “Save Page As.” Save the file into the project directory we made.

Adding Initial Files and Folders

Finally, create a two files in our project directory: index.html and game.js. The .html and .js extensions are very important. The .html extension denotes an HTML file and the .js extension represents a JavaScript file. Create a folder for images of be used. Name it anything you wish, I usually name my folder for images pretty simply — images. Last, create a folder for sounds to be used as well. Like the images folder, name the sounds folder anything you like.

Ready to Tinker with Phaser 3

Everything we need is setup and ready to go for our Phaser 3 project! Stay tuned for part two. If you like what you’ve read so far, consider subscribing to our newsletter. Our newsletter brings you the latest news regarding our tutorials and courses.

Tags:

Categorised in:

This post was written by Jared York

Leave a Reply

Your email address will not be published. Required fields are marked *