How to develop a game with Phaser CE

It is now known that PhaserJS is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

But, how to start developping your game ?

So, you’ll need to read the official tutorial on GitHub or read it online on the tutorial page of the framework site but I know it’s not easy, this is why I am writing this article, so let’s go

First, you’ll need to build an index.html page like this

<!DOCTYPE html>                       
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Phaser Game</title>
</head>
<body>                           
    <div id='game'></div>
    <script type="text/javascript" src="js/phaser.min.js"></script>
    <script src="js/game.js" type="text/javascript"></script>
</body>
</html>

As you can see it contain a script link to the last phaser-ce build in the folder /js/, that you can replace by a link to the last version of Phaser CE that you can find on the official repository if you are like me and have made some w3school tutorials

The actual version of Phaser CE (when the article was written) is:

//cdn.jsdelivr.net/npm/phaser-ce@2.11.0

Then, at the end of your index.html you can add the script that contains your game.js code which in short should look like the phaser.io examples

So if you want to just display an image it will look like this:

var game = new Phaser.Game(640, 360, Phaser.CANVAS, 'game', { preload: preload, create: create });
function preload() {
    game.load.image('link', 'assets/sprites/link.png');
}
function create() {
    var sprite = game.add.sprite(80, 0, 'link');
}

You can find this code on the example of displaying an image, of course the image will be put in a folder called /assets/ so your porject will look like

Structure of a Phaser CE Projet

Once this is done just load the index.html file in your browser and it will displays a funny draw of link

If you want to run it in a server you’ll need to take a look at the documentation from expressjs site, it means you’ll need to install expressjs with nodejs then put all the code in a folder, for example /public/ at the root of your project then create a file called app.js like this:

var express = require('express');                       
var app = express();
var server = require('http').Server(app);

app.use('/css', express.static(__dirname + '/css')); app.use('/js', express.static(__dirname + '/js')); app.use('/assets', express.static(__dirname + '/assets'));

app.get('/', function(req,res){
    res.sendFile(__dirname+'/index.html');                       
});
server.listen(3000, function(){
    console.log('Listening on '+ server.address().port);                       
});

Your project will look like this:

A Phaser CE Project with ExpressJS

Then just run

node app.js

Then connect to http://localhost:3000 in your browser to see the result

That’s all

If you want to deploy your game on heroku please read about How to deploy a NodeJS app to Heroku from Github

If you want to develop an entiere game feel free to read (in french) about Zelda mystery of Phaser CE