Dear friendy reader,

nice to see you around here. I publish these articles for free and it would be very kind of you to support my blog. You can start by disabling your AdBlocker. That would mean a lot to me and will help to finance this blog.

Best regards, J. Wiese

Phaser 3 - Download

Phaser is one of the most powerful 2D game engines for JavaScript. Many games have been published with Phaser 2. The development of Phaser 3 started long ago and now the first alpha is released. Phaser 3 includes many new techniques and features. Lately (11.08.17) the lightning layer with deferred and forward render path is added.

There are multiple ways to start with a Phaser3 project. You can start from scratch or you use one of the many boilerplates out there. I recommend that you to start from scratch at least once. So you know the basics. But starting with a boilerplate can speed up your project setup. You should also consider creating your own, which fits exactly your needs.

Start from scratch

At first grab the latest release from GitHub https://github.com/photonstorm/phaser/releases. Secondly create the following folder structure to organize your files and save the Phaser files into the js folder.

Phaser-Project-Name
|- js
|  |- phaser.js     //full phaser.js, including sourc code comments
|  |- phaser.min.js //minified phaser.js for release
|  |- app.js        //entry for your game
|- assets           //put all mp3, jpeg, png, svg... here
|- index.html       //entry point for the browser

At last, you need to populate the index.html with a basic html5 schema and include js/phaser.js and js/app.js with a script tag.

<!DOCTYPE html>
<html>
<head>
   <title>;Project Title</title>;
   <srcipt src="js/phaser.js" type="application/javascript"></script>
   <srcipt src="js/app.js" type="application/javascript"></script>
</head>
</html>

Now you are ready to go to start scripting within the app.js.

Prebuild boilerplates

In general all boilerplates for Phaser 3 use Webpack, because Phaser 3 is build with Webpack. Using Webpack with your boilerplate enables you to easily create custom builds of Phaser, because Webpack can build Phaser along with your project from the source code.

The first to mention here is from the maker of Phaser itself github.com/photonstorm/phaser3-project-template. At the time writing this, it is a minimal boilerplate which only supports live reloading, when changes at the source code are detected. Therefore, it is optimal for small projects and quick test games.

The second is a full example including a mario like game github.com/nkholski/phaser3-es6-webpack. This supports ES6 transpilation to ES5 and provides two differen configurations, one for development with live reload and one for release with minimization and optimizations. It also features a general file structure for your projects to start with.

The plan for the future is a central boilerplate, with support of the community and the Phaser developers. Take a look at the development forum phaser-3-boilerplates-starters-list-discussion-and-features to inform you about the current status. But for now, it is only work in progress and nothing fixed.

You want to comment on this post?
Send an email to: bloginput@jwiese.eu