Explore Free Phaser 3 Tutorials – GameDev Academy

Create a Basic Multiplayer Game in Phaser 3 with Socket.io – Part 1

Scott Westover — Mon, 19 Dec 2022 12:57:07 +0000

In this multipart tutorial, we will be using Phaser 3 and Socket.io to create a simple multiplayer game. For our multiplayer game, we will follow the client-server game architecture. If you are not familiar with the client-server game architecture, the client is responsible for displaying the game to the player, handling the player’s input, and for communicating with the server. The server, on the other hand, is responsible for broadcasting that data to each client.

The goal of this tutorial is to teach you the basics of creating a multiplayer game. You will learn how to:

Setup a Node.js and Express server that will render our game and communicate with it.
Setup a basic Phaser 3 game that will act as our client.
Use Socket.io to allow the server and the client to communicate.

Course Files and Versions

You can download all of the files associated with the source code for part one here.

At the time this tutorial was written, the following versions were used. You may need to use these versions to have the same results from this tutorial.

Node.js: 10.13.0
JSDOM: 13.0.0
Express: 4.16.4
Socket.IO: 2.1.1
Datauri: 1.1.0

BUILD YOUR OWN GAMES

Get 250+ coding courses for

LEARN MORE

AVAILABLE FOR A LIMITED TIME ONLY

Tutorial Requirements

For this tutorial, we will be using Node.js and Express to create our server. We will also be using NPM to install the required packages we need for the server to run. In order to follow along with this tutorial, you will need to have Node.js and NPM installed locally, or you will need access to an environment that already has them installed. We will also be using the Command Prompt (Windows) / Terminal (Mac) to install the required packages, and to start/stop our Node server.

Having a prior experience with these tools is a plus, but it is not required for this tutorial. We will not be covering how to install these tools as the focus of this tutorial is making a game with Phaser. The last thing you will need is an IDE or Text Editor for editing your code.

To install Node.js, click the link here: and choose the LTS version. You can download and use the current version with this tutorial, however, the LTS version is recommended for most users. When you install Node.js, NPM will also be installed on your computer. Once you have these tools installed, you can move on to the next part.

As a last note, we do not recommend this tutorial be used by educators looking for new classroom resources. Instead, try Zenva Schools which features K12-friendly courses on web development and game development – plus classroom management features.

Setting up the server

The first thing we are going to do is create a basic Node.js server that will serve our game files. To get started, create a new folder on your computer, it can be called anything you want. Then navigate inside this folder and create a new file called server.js. Open up server.js and add the following code to it:

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

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

server.listen(8081, function () {
  console.log(`Listening on ${server.address().port}`);
});

In the code above we:

referenced the express module, which is a web framework that will help us render our static files.
created a new instance of express and called it app.
supplied the app to the HTTP server, which will allow express to handle the HTTP requests.
updated the server to render our static files using express.static built-in middleware function in Express.
told the server to serve the index.html file as the root page.
had the server start listening on port 8081.

Before we can run the server, we will need to install the required modules for the server. Open your terminal/command prompt, and navigate to your project folder. Once there you will need to run the following command: npm init -f. This will create a package.json file in your project folder. We will use this file to keep track of all the packages that our project depends on.

Now, we will install express. In your terminal run the following command: npm install –save express. This will create a folder called node_modules in your project folder, and by adding the –save flag to the command, npm will save this package in our package.json file.

Setting up the client

With the basic server code finished, we will now work on setting up our client-side code. In your project folder, create a new folder called public. Any file we put in this folder will be rendered by the server that we set up. So we will want to put all of our static client-side files in this folder. Now inside the public folder, create a new file called index.html. Open up index.html and add the following code to it:

In the code above, we set up a simple HTML page and we referenced two JavaScript files, phaser.min.js (the phaser game framework) and game.js (our Phaser game code). Back in the public folder, create a new folder called js , and in this folder create a new file called game.js. Open up game.js and add the following code to it:

var config = {
  type: Phaser.AUTO,
  parent: 'phaser-example',
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      debug: false,
      gravity: { y: 0 }
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  } 
};

var game = new Phaser.Game(config);

function preload() {}

function create() {}

function update() {}

Let’s review the code we just added:

We created the configuration that will be used for our Phaser game.
In the config object, in the type field, we set the renderer type for our game. The two main types are Canvas and WebGL. WebGL is a faster renderer and has better performance, but not all browsers support it. By choosing AUTO for the type, Phaser will use WebGL if it is available, otherwise, it will use Canvas.
In the config object, the parent field is used to tell Phaser to render our game in an existing element with that id if it exists. If it does not exists, then Phaser will create a element for us.
In the config object, we specify the width and height of the viewable area of our game.
In the config object, we enabled the arcade physics that is available in Phaser, and we set the gravity to 0.
In the config object, we embedded a scene object which will use the preload, update, and create functions we defined.
Lastly, we passed our config object to Phaser when we created the new game instance.

With our basic client-side code setup, we will now test our server and make sure everything is working correctly. Back in the terminal/command prompt, run the following command: node server.js and you should see the following line appear Listening on 8081. Now, if you open up your web browser and navigate to http://localhost:8081/, you should see a black box on the web page, and if you open the console in the developer tools, you should see a log with the version of Phaser your game is running.

Adding Socket.IO

With our server now rendering our game, we will now work on adding Socket.IO to our game. If you are not familiar with Socket.IO, it is a JavaScript library that enables real-time, bi-directional communication between web clients and servers. To use Socket.IO, we need to update our client and server code to enable the communication between the two.

Back in your terminal, run the following command: npm install –save socket.io. If your server is still running, you can either: open a new terminal window and run the code in your project folder, or stop the server (CTRL + C) and then run the command. This will install the Socket.IO node package and save it in our package.json file.

Now, in server.js add the following code below the var server = require(‘http’).Server(app); line:

var io = require('socket.io').listen(server);

Then add the following code above the server.listen line:

io.on('connection', function (socket) {
  console.log('a user connected');
  socket.on('disconnect', function () {
    console.log('user disconnected');
  });
});

In the code above we:

referenced the socket.io module and had it listen to our server object.
added logic to listen for connections and disconnections.

Next, we will update the client side code to include the Socket.IO library. Open up index.html and add the following line at the top of the element:

Then, open up game.js and add the following line inside the create function:

this.socket = io();

Now, if you start the server back up again, and refresh your game in your browser, you should see the user connected/disconnected messages in your terminal.

Adding players – Server

Now that we have our socket connections setup, we can move on to adding players to our game. In order to keep all of the player’s games in sync, we will need to notify all players when a user connects or disconnects from the game. Also, when a new player connects we will need a way to let the player know of all the other players in the game. To do all of this we will need to store some player data, and we will use the socket connections to send messages to our players.

For this tutorial, we will store the player data in memory on the server. Normally, we would want to store this data in some type of database, that way it would be persistent, and if the server fails, we could easily recover the state of the game.

In server.js add the following line below the io variable:

var players = {};

We will use this object to keep track of all the players that are currently in the game. Next, in the callback function of the socket.io connection event add the following code below the console.log(‘a user connected’); line:

// create a new player and add it to our players object
players[socket.id] = {
  rotation: 0,
  x: Math.floor(Math.random() * 700) + 50,
  y: Math.floor(Math.random() * 500) + 50,
  playerId: socket.id,
  team: (Math.floor(Math.random() * 2) == 0) ? 'red' : 'blue'
};
// send the players object to the new player
socket.emit('currentPlayers', players);
// update all other players of the new player
socket.broadcast.emit('newPlayer', players[socket.id]);

Let’s review the code we just added:

When a player connects to the web socket, we store some player data in the players object and we use the socket.id as the key.
We are storing the rotation, x, and y position of the player, and we will use this to control were we create sprites on the client side, and use this data to update all players games. We also store the playerId so we can reference it in the game, and we added a team attribute that will be used later.
We used socket.emit and socket.broadcast.emit to emit an event to the client side socket. socket.emit will only emit the event to this particular socket (the new player that just connected). socket.broadcast.emit will send the event to all other sockets (the existing players).
In the currentPlayers event, we are passing the players object to the new player. This data will be used to populate all of the player sprites in the new player’s game.
In the newPlayer event, we are the passing the new player’s data to all other players, that way the new sprite can be added to their game.

When a player disconnects, we need to remove that player’s data from our players object, and we need to emit a message to all other players about this user leaving, that way we can remove that player’s sprite from the game.

In the callback function of the socket.io disconnect event add the following code below the console.log(‘user disconnected’); line:

// remove this player from our players object
delete players[socket.id];
// emit a message to all players to remove this player
io.emit('disconnect', socket.id);

Your server.js file should look like the following:

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

var players = {};

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  console.log('a user connected');
  // create a new player and add it to our players object
  players[socket.id] = {
    rotation: 0,
    x: Math.floor(Math.random() * 700) + 50,
    y: Math.floor(Math.random() * 500) + 50,
    playerId: socket.id,
    team: (Math.floor(Math.random() * 2) == 0) ? 'red' : 'blue'
  };
  // send the players object to the new player
  socket.emit('currentPlayers', players);
  // update all other players of the new player
  socket.broadcast.emit('newPlayer', players[socket.id]);

  // when a player disconnects, remove them from our players object
  socket.on('disconnect', function () {
    console.log('user disconnected');
    // remove this player from our players object
    delete players[socket.id];
    // emit a message to all players to remove this player
    io.emit('disconnect', socket.id);
  });
});

server.listen(8081, function () {
  console.log(`Listening on ${server.address().port}`);
});

Conclusion

With our server code for adding players in place, this brings part one of this tutorial to an end. In part two we wrap up our multiplayer game by:

Adding the client side logic for adding players to our game.
Adding logic for player input.
Adding collectibles for the players to collect.

I hoped you enjoyed part one of this tutorial and found it helpful.

Note that if you feel a bit out of debt, don’t be afraid to explore some basic web development courses first for individuals or even for teachers to use in the classroom.

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

Create a Loading Screen in Phaser 3 – Web Games Tutorial

Scott Westover — Sun, 17 Apr 2022 10:13:19 +0000

Have you ever played a game where you met with a blank, black screen while things loaded?

Sometimes, there isn’t getting around loading screens for your game, especially as your game gets larger and larger. Loading screens exist to provide players with important feedback – not only to indicate what the game is doing but also so players don’t think the game crashed.

In this tutorial, we’re going to cover how to make a loading screen for Phaser 3 games – an important skill considering these games loading are at the will of your internet connection.

If you’re ready to provide better UI-based user experiences, let’s start learning.

Intro and Projects Files

One of the things that almost all games have in common is a loading screen, which can be used to inform the player how long they must wait to play the game. Even though no one likes waiting to play a game, a loading screen is a valuable tool. Instead of having players stare at a blank screen, the loading screen can be used to inform the player how much longer they have to wait, or at minimum let the player know the game is doing something.

In Phaser, before you can use any assets, you must first load them in preload function of the scene. If you load a large number of assets, it can take some time for all of the assets to be loaded into the game, and this is where a preloader really makes a difference.

The goal of this tutorial is to teach you the basics of creating a preloading screen by creating a progress bar that will dynamically update as the game loads the assets. You can see what we will be creating below:

You can download all of the files associated with the source code here:

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

Learn Phaser 3 with our newest Mini-Degree

The HTML5 Game Development Mini-Degree is now available for Pre-Order on Zenva Academy. Learn to code and make impressive games with JavaScript and Phaser 3!

Get Instant Early Access

Project Setup

In order to run your Phaser game locally, you will need a web server for running your game. If you don’t already have this setup, you can read how to do that here: Getting Start With Phaser. You will also need an IDE or Text Editor for writing your code. If you don’t already have one, I would recommend the Brackets editor since it is easy to use, and it has a feature called Live Preview that will allow you to run your Phaser game without installing a web server.

Once you have these setup, we will setup the basic code for our game. Open your IDE, and create a new file called index.html. We are going to create a basic html page, add a reference to Phaser, and create our Phaser game object. In index.html, add the following code:

Let’s review the code we just added:

We created the configuration that will be used for our Phaser game.
In the config object, in the type field, we set the renderer type for our game. The two main types are Canvas and WebGL. WebGL is a faster renderer and has better performance, but not all browsers support it. By choosing AUTO for the type, Phaser will use WebGL if it is available, otherwise it will use Canvas.
In the config object, the parent field is used to tell Phaser to render our game in an existing element with that id if it exists. If it does not exists, then Phaser will create a element for us.
In the config object, we specify the width and height of the viewable area of our game.
In the config object, we embedded a scene object which will use the preload and create functions we defined.
Lastly, we passed our config object to Phaser when we created the new game instance.

If you try running your game, you should see a black screen, and if you open the console in the developer tools, you should see a log with the version of Phaser your game is running.

Loading Our Assets

Now that our project is setup, we can get started. Before we can create our preloader, we will need to load some assets into our game. To keep things simple, we are going to use one image and reload it a few times to simulate loading a large number of assets. The asset for the game can be downloaded here.

You will need to place the image in same folder as index.html.

To load our image and display it in our game, you will need to update the preload and create functions in index.html:

function preload() {
    this.load.image('logo', 'zenvalogo.png');
    for (var i = 0; i < 500; i++) {
        this.load.image('logo'+i, 'zenvalogo.png');
    }
}

function create() {
    var logo = this.add.image(400, 300, 'logo');
}

If you reload your game in the browser, you should see the logo appear in your game.

Creating the Preloader

With our assets loaded, it is time to create our preloader. In the preload function, add the following code:

this.load.on('progress', function (value) {
    console.log(value);
});
            
this.load.on('fileprogress', function (file) {
    console.log(file.src);
});

this.load.on('complete', function () {
    console.log('complete');
});

This code creates a few event listeners that will listen for the progress, fileprogress, and complete events that are emitted from Phaser’s LoaderPlugin. The progress and fileprogress events will be emitted every time a file has been loaded, and the complete event will only be emitted once all the files are done loading.

When the progress event is emitted, you will also receive a value between 0 and 1, which can be used track the overall progress of the loading process. When the fileprogress event is emitted, you will also receive an object containing information on the file that was just loaded. Both of these can be used to create custom preloader with the information that is provided.

Here is an example of the data that is sent:

For the preloader, we will use Phaser’s GameObject.Graphics to create the progress bar. In the preload function, add the following code at the top of the function, above the code you already added:

var progressBar = this.add.graphics();
var progressBox = this.add.graphics();
progressBox.fillStyle(0x222222, 0.8);
progressBox.fillRect(240, 270, 320, 50);

Then, update the progress event listener in the preload function with the following code:

this.load.on('progress', function (value) {
    console.log(value);
    progressBar.clear();
    progressBar.fillStyle(0xffffff, 1);
    progressBar.fillRect(250, 280, 300 * value, 30);
});

In the code above, we are creating two separate rectangles, progressBar and progressBox. The progressBox rectangle is going to be used as a border/container around the progressBar, and the progressBar will be used to track the overall percentage of the assets being loaded. We are doing this by calculating the width of the rectangle to be based on the progress value we are receiving. So, every time we receive the progress event, we should see the rectangle grow.

If you reload the game, you should see a nice progress bar that fills up as the assets are being loaded. However, there is one problem with it. When the all of the assets are loaded, the preloader is staying on the screen, and the logo image is being loaded over top of it. To fix this, we can update the complete event listener to destroy our preloader once all assets are loaded.

In the complete event listener, add the following code below the console.log():

progressBar.destroy();
progressBox.destroy();

Now, if you reload your game, the progress bar should disappear before the logo image is displayed on the screen.

Adding Some Text

We have the main part of our preloader done, but we can easily enhance the preloader by adding some additional text to it. First, we will add a simple ‘Loading…’ message to the preloader. In the preload function, add the following code below the progressBox lines:

var width = this.cameras.main.width;
var height = this.cameras.main.height;
var loadingText = this.make.text({
    x: width / 2,
    y: height / 2 - 50,
    text: 'Loading...',
    style: {
        font: '20px monospace',
        fill: '#ffffff'
    }
});
loadingText.setOrigin(0.5, 0.5);

Then, in the complete event listener, add the following code:

loadingText.destroy();

Let’s review what we just added:

We created two new variables, width and height. These variables are getting the width and height of the current viewable area of our game.
We created a new Phaser Text GameObject called loadingText. This game object is using the width and height variables we just created, and we set the style and default text of the game object.
We set the origin of the game object to be (0.5, 0.5), which will help center our game object.
Lastly, we updated the complete event listener to destroy our loading text once all the games assets were loaded.

If you reload your game, your screen should look like this:

Next, we are going to add some additional text that will display the percent of the loading bar. To do this, we just need to create another text game object, and update the text to use the value that is being sent to the progress event listener. In the preload function add the following code below the loadingText code:

var percentText = this.make.text({
    x: width / 2,
    y: height / 2 - 5,
    text: '0%',
    style: {
        font: '18px monospace',
        fill: '#ffffff'
    }
});
percentText.setOrigin(0.5, 0.5);

Now, in the progress event listener, add the following code above the progressBar code:

percentText.setText(parseInt(value * 100) + '%');

Lastly, in the complete function add the following code:preload

percentText.destroy();

Here is a quick summary of what we just did:

Created a new Phaser Text GameObject called percentText.
We set the origin to (0.5, 0.5) to help center the object.
In the progress event listener, we are updating the text of the object, every time a file is loaded. We are multiplying the value by 100 since the value that is emitted is between 0 and 1.
Lastly, we updated the complete event listener to destroy the object.

If you reload your game, you should see the progress bar percentage update as the progress bar fills up.

With the progress bar now showing the percentage, we will now add some text to display which asset has been loaded. Once again, we will create another text game object and we will update the text of the game object with the file data that is being sent to the fileprogress event listener. In the preload function add the following code below the percentText code:

var assetText = this.make.text({
    x: width / 2,
    y: height / 2 + 50,
    text: '',
    style: {
        font: '18px monospace',
        fill: '#ffffff'
    }
});
assetText.setOrigin(0.5, 0.5);

Then, in the fileprogress event listener, add the following code:

assetText.setText('Loading asset: ' + file.key);

Lastly, in the complete function add the following code:

assetText.destroy();

Now, if you reload your game, you should see the asset text being updated as each asset is loaded.

For this example, we ended up outputting the asset key instead of the file name since we are only loading the one image. If you want to output the file name, you can update the following line:

assetText.setText('Loading asset: ' + file.key);

to be:

assetText.setText('Loading asset: ' + file.src);

Here is the completed index.html file:

You can download the completed example here.

Conclusion

With the asset text now being displayed, this brings this tutorial to a close. As you can see, adding a preloader to your game is a great solution when you will be loading a large number of assets, and you want to keep the players informed of the games current state. With Phaser, it is really easy to add a simple preloader and you can easily extend these examples to create a more complex preloader.

I hoped you enjoyed this tutorial and found it helpful. If you have any questions, or suggestions on what we should cover next, let us know in the comments below.

How to Make an HTML5 Game

Pablo Farias — Thu, 06 Jan 2022 09:30:39 +0000

Although Flash games have departed from this world, there is still a significant demand for browser-based and cross-platform games. Whether you yourself actively play them or not, more and more games from professional and indie developers alike come out each day.

This phenomenon is largely thanks to HTML5 games which have filled the gap to keep up with these eager gamers. In addition, thanks to the advancement of technology and new frameworks, HTML5 game development has reached extensive heights, allowing for multiplayer experiences, 3D graphics, and more! It is not unwise to say that gaming is now just as viable via a browser as it is on many other devices!

Assuming this sounds like an exciting prospect to you as a game developer, in this guide we’re going to delve into the topic of HTML5 game development and give you the run-down of how you can make your own games! Sit back, relax, and prepare to enhance your game development skills in entirely new ways!

What exactly is an HTML5 game?

Let’s start from total zero. What is HTML5? that’s a tricky question. There is an official definition of HTML5, which simply stands for the latest revision of HTML (the markup language used all over the world to build websites), and the more hyped definition (what most people understand when HTML5 is mentioned) which is all the “new” features of the web technologies that have come out in the last few years (JavaScript API’s like the Canvas or WebAudio, semantic HTML tags, etc).

For our purpose, we’ll use bits of the two. HTML5 is HTML in its latest version, which includes a whole bunch of cool features that make web technologies an open standard with endless possibilities combining HTML, CSS and JavaScript.

Having HTML along with all these superpowers that go beyond making a simple website allows us to make, among other things, games. These are HTML5 games.

BUILD YOUR OWN GAMES

Get 250+ coding courses for

LEARN MORE

AVAILABLE FOR A LIMITED TIME ONLY

"}" data-sheets-userformat="{"2":577,"3":{"1":0},"9":1,"12":0}">

BUILD YOUR OWN GAMES

Get 250+ coding courses for

LEARN MORE

AVAILABLE FOR A LIMITED TIME ONLY

Building blocks

The very basic building blocks of a HTML5 game are those of the web:

HTML
CSS
JavaScript

Similarly to what happens with HTML5, when people talk about CSS3 they usually refer to the new things that come with CSS’s latest specifications, but in an analog manner, CSS3 is simply the latest CSS. Ignoring for a second the semantics of these definitions and thinking of the hyped versions of these terms, we also may need, in order to make HTML5 games:

HTML5 (JavaScript API’s)
CSS3

With the above you can make awesome games that will run on modern web browsers on mobile and desktop, but some games might require more features, so there are more building blocks that you can add.

For instance, you may want to make 3D games. If that is the case there is also WebGL, which is a JavaScript API to render 2D and 3D graphics on the browser, using the GPU for greater performance.

Server side

If you want your games to saved data remotely you’ll need a server-side for your game. You can develop your own backend using any server-side language, you’ll need well a server in this case.

JavaScript (NodeJS)
PHP
Java
Python
Ruby

Or you can use a third-party Backend-as-a-Service provider such as Firebase or Parse. Some have free versions you can use and they’ll start charging you once you surpass certain limits. Some of these providers are particularly focused on games, some are mostly conceived for mobile apps but can be used for games too.

How to distribute a HTML5 game

The easiest way to distribute a HTML5 is to simply put it out there! By being built as a website, you can just embed it in on a page and publish it. Just like that.

If you want to distribute it through proprietary platforms you have to go through a process called wrapping. Basically, you create a native app for the platform you wanna distribute it to (iOS, Android, etc) and put your game inside so that this app acts like a web browser and “runs” your game.

For desktop platforms such as Windows, Mac or Linux there is a tool called NWjs that allows you to pack your HTML5 games for these platforms.

We can only cover the basics here, but we encourage you to read our more in-depth advice about publishing games.

HTML5 game frameworks

Most games share some concepts, that of sprites (graphic elements that represent enemies, players, elements in your game), scenes or stages, animations, sound, loading graphic assets, etc. Since most game developers want to focus on their actual game and not in creating this whole abstraction layer, it is recommended you use a HTML5 game frameworks.

HTML5 game frameworks and libraries that contain building components you can use to create your own games. These libraries are Open Source projects created and maintained by people who want to contribute to the HTML5 gamedev environment. In many cases they created the frameworks for their own games, and after realizing that other people would want to not only use it but also contribute to it they released them as Open Source code, so everybody wins.

Picking what game engine to use is an important decision, so make sure you do proper research before making your choice. No matter what engine you pick, you will have to get familiar with its code and inner working if you want to use properly, so they shouldn’t be treated as black boxes.

What can help you make your choice:

Is your game for desktop, mobile or both?
Do they have an active community?
Are there many people using the framework nowadays?
Is it being maintained or the Github page looks like an abandoned town?

Sometimes looking at real games gives you more insight than just words. This project compares different engines by making the exact same Breakout game in all of them.

Some popular free frameworks are:

Phaser –> The most popular these days
CreateJS
LimeJS
Quintus
CraftyJS
MelonJS
PixieJS
BabylonsJS –> WebGL framework for 3D rendering
PlayCanvas
ThreeJS
KontraJS
Cannon.js
Stage.js
Matter.js

HTML5 game development courses

Video courses are a great way to learn new technologies. The main difference between a video course and just watching YouTube videos is that there is more structure. Good courses have a clear goal and build on to it step by step. Below a list of courses and tutorials by Zenva that can give you the tools you need to create HTML5 games.

General Game Development

Phaser

HTML5 Game Development Mini-Degree (Premium curriculum covering the creation of multiple mini-games with Phaser)
Phaser 4 Tutorials – Complete Guide

WebGL, 3D, and XR

3D & XR JavaScript Academy (Premium curriculum covering a variety of JavaScript frameworks for 3D and XR experiences on the web)
WebVR for Beginners – Build VR Websites with A-Frame (Premium course on A-Frame)
Learn the Basics of Babylon.js (Free course on Babylon.js)

HTML5 Skills

At the GameDev Academy, as you know already we have a bunch of HTML5 game development tutorials, mostly on Phaser, LimeJs, Quintus and BabylonJS. There are other great places to find good quality HTML5 gamedev tuts:

Build New Games
Gamedevtuts+
HTML5 Game Development (news and links to tutorials)
Phaser Tutorials
Mozilla Game Tutorials
HTML5 Game Tutorial
HTML5 Games with JavaScript & Phaser
JavaScript HTML5 Game Development Tutorial
HTML5 Game Development Tutorials

HTML5 for Schools

Are you a teacher looking to help students get into frameworks like Phaser or teach them core and relevant web development skills? Try out Zenva Schools – an online platform offering coding-based courses for use in the classroom. The platform comes with video lessons, text summaries, quizzes, classroom management features, reporting, and more to help support learning HTML5!

HTML5 gamedev communities

You can find plenty of active communities on the Internet, some focus on gamedev in general and some others just in HTML5 gamedev.

Web:

HTML5GameDevs

Facebook:

Other Communities:

HTML5 gamedev challenges

The Global Game Jam® is an annual event, usually occurring in January every year. Participants work concurrently around the globe, and around a central theme, and then work together to create a game.
j13k competition: the competition is over but you can still read the Blog, subscribe to the Newsletter, and check the Resources for tools.

HTML5 gamedev podcasts

I just know Lostcast, a podcast created by the guys from Lost Decade Games (whom we’ve interviewed in the past). In the podcast episodes they talk about they HTML5 games and game development in general.

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

How to Install Webpack

Lindsay Schardon — Fri, 15 Nov 2019 16:00:06 +0000

You can access the full course here: Discover Developer Tools for JavaScript Apps

In this lesson, we’re going to start the process of converting our client-side code to Node Modules and modern JavaScript. We’ll start by creating a package.json file which holds our Node Package Modules (NPM) configuration. This sets our project directory up to install our NPM dependencies. The first things to install are Webpack and Webpack dev server. Next we’ll install Phaser from NPM.

For this project, the client-side code in the stater-files resides in the folder named zenva_mmorpg. Open this folder in your editor.

Next, create a client folder inside zenva_mmorpg that will hold our client code. The other files, including index.html and folders/files under assets can stay where they are for now. We will migrate them to client in a later step.

In your terminal, change directory to client and follow instructions below to setup the client folder with a package.json file that will contain our NPM dependencies and other project details. Just follow the directions in the video lesson substituting author name for your name.

Ensure your terminal/command prompt is in the client folder in the same location as the package.json file and enter npm init and press enter.

npm init

Accept the defaults except those noted below:

Next, open the client folder in your editor and notice the newly created package.json file. Click on the file to open it and notice its contents match what you entered into the terminal.

Next, back in terminal, we can start installing our dependencies into our client folder. Some dependencies are needed for production for use in running our code while other dependencies are only needed for development. These are distinguished during installation by adding a --save-dev flag to the npm install command.

Webpack is an example of a dev-dependency, so we install Webpack itself along with the Webpack command line interface (CLI) and the Webpack development server.

WebPack-cli provides a flexible set of commands for developers to increase speed when setting up a custom webpack project.

Webpack-dev-server provides a development server that provides live reloading while using Webpack during development.

Ensure your terminal/command prompt is in the client folder in the same location as the package.json file.

npm install --save-dev webpack webpack-cli webpack-dev-server

You’ll notice that a couple of things have changed in our client folder. Our package.json file has been updated to include the dependencies we installed. As well, we now have a node_modules folder. There is generally no need to touch the node_modules folder. If you do look inside, it may seem like a lot of files got added to our project but rest assured that Webpack will include only the production pieces of code we need in the final bundle it creates.

Currently, we have Phaser.js linked in our index.html file which loads it separately. Since we are using Webpack now we can npm install phaser as a dependency and we will no longer have to link to it inside index.html. Notice the install difference as Phaser is actually a Production dependency. We therefore add the flag --save instead of --save-dev.

Note: As of NPM version 5, installed modules are added as a dependency by default, so the --save flag is no longer needed.

Ensure your terminal/command prompt is in the client folder in the same location as the package.json file.

npm install phaser

The other advantage of including Phaser this way is we can more easily manage the version of Phaser we are using or upgrading.

Notice our package.json file now contains both Development dependencies (e.g. Webpack) as well as Production dependencies (e.g. Phaser).

Transcript

So now that we’ve talked about what Webpack is, we’re going to work on adding Webpack to our client-side code.

So in the source code that was provided, you’ll see two folders, one will be ZENVA_MMORPG, this is our client-side code, and the other one is the REST API code, that’s where’s we have our server-side logic. So, right now we’re shifting our focus just on the client-side code, so if you can go ahead and open up the ZENVA_MMORPG folder, inside your code editor, and then inside you will see we have an index.html file, and we have an assets folder. That will have all of our audio, css, images, JavaScript, and everything that we used in the previous courses to start building our MMORPG.

All right, so the first thing that we’re going to do, is let’s go ahead and make a new folder, we’re actually going to go ahead and call it client. So this is going to keep, this will contain all of our client-side logic. For now, we will not drag the index.html file in our assets folder in there, we will do that later.

So, to actually use Webpack, we need to install it as a dependency, so the first thing we should do is actually create a package.json file for our code. So, if we go ahead and switch over to our Terminal, let’s go ahead and go cd into the client folder, and let’s go ahead and run the npm init command.

So, if you recall, the npm init command is going to walk us through creating a package.json, so for a package name, we’re going to go ahead and just leave it as client, we’ll do 1.0, for our version, description we’ll just do client side code for zenvo mmorpg. For our entry point, we’re going to go ahead and do source and then index.js, test command, we’ll go ahead and just leave that a blank for now, we won’t worry about git repository or keywords, and as for author, I’m going to go ahead and put my name, you can go ahead and put yours, and then for our license, we’re just going to go ahead and leave that as the default license.

And then, we just need to go ahead and verify the information we put in. Yes, and then now, if you go ahead and check, we should have, inside our client folder, our package.json.

Perfect, so now, we can go ahead and start, actually installing some of our dependencies, so do go ahead and install Webpack, we just need to do npm install, –save, but instead of just -save, we’re going to go ahead and do save-dev, and what this will do, is it’s going to install this dependency as a dev dependency, which shows that it’s needed, well, for development, but it’s actually not needed in our production code. We’re going to go ahead and do webpack, we’re going to do webpack-cli, and then webpack-dev-server. And then we’ll go ahead and hit Enter to start installing your dependencies, so, webpack-cli, webpack-dev-server, are additional packages that are helpful while you are working with Webpack,

So, what Webpack test server will do, is it’s going to run a development server that’s going to bundle and run our code as we’re working on it, so that way we can actually test our changes in real time, where if we’re just doing the webtag build, we would actually have to build our source code every time we make a change, and then run another server to test it. That’s why webpack-dev-server is really nice, is because we can actually do it while we’re developing. And webpack-cli is just a set of commands for developers that makes it very easy to set up a custom Webpack project.

All right, perfect, so now these are installed. The next package we’re going to go ahead and install is we’re going to go ahead and install Phaser. So, currently, we have our Phaser library included with our source code, since we’ll be switching to Webpack, we can install Phaser as a dependency, and then reference it, and then when our code gets bundled, Phaser will be bundled with our code, and we don’t actually have to include that file separately.

So we’re going to go ahead and do npm install -save and we’ll do phaser, and another benefit of doing this, is we can easily upgrade our version of Phaser, without having to download and save the source code, and then upload it into our server, and since we are including it as a dependency, we can easily update our dependency to get the newest version, re-bundle our code and push it up to our server, and then we’ll be using the new version of Phaser.

All right, so now that Phaser installed, let’s go ahead and switch back to our code editor. And you will see our package.json’s been updated with our dev dependencies and our regular dependency.

Interested in continuing? Check out the full Discover Developer Tools for JavaScript Apps course, which is part of our MMORPG Academy.

An Introduction to Webpack

Lindsay Schardon — Fri, 08 Nov 2019 16:00:32 +0000

You can access the full course here: Discover Developer Tools for JavaScript Apps

Webpack is an open source JavaScript (JS) static module bundler for modern JS Applications. This has two important implications. One, it means that Webpack is a JS Tool that runs at BUILD-time; not RUN-time which makes it an important part of a modern development process. Secondly, Webpack extends its power and flexibility with various plugins that not only ties together all your code and assets but allows you to incorporate linters for code quality and tools to ensure modern JS will run in all browsers. We will look in greater detail at these tools in upcoming lessons.

Webpack allows you to write as many JS files you want and organize those files along with styles, images and more in a way that makes sense for developing and supporting your project and then bundles everything together in such a way that the end result is an bundled file that is transformed, minified and optimized to run efficiently in any browser you are targeting.

Webpack does this by creating a dependency graph of every part of your project then uses that information to intelligently generate one or more files based on your project needs. Webpack and its plugins are installed in the normal way using Node Package Manger (NPM).

Note: As of Webpack 4, it does not require a config file. This is important because the webpack config file could be a barrier to starting modern projects for many developers. Webpack now bundles your entire frontend app together using intelligent defaults significantly lowering the barrier of entry for the majority of devs. Devs or organizations wanting to take more fine grain control of code bundling still have the option to customize a webpack config file!

Transcript

So the first tool that we’re gonna look to use is Webpack. So if you’re not familiar, Webpack is a module builder and what that means is, Webpack is a tool that we use during development of our code. It’s not something that’s actually used during the run time of our assets. So, it’s only used during development.

So Webpack is a tool where you use a configuration to explain how you want the builder to load specific things. You describe to Webpack how you want to load your JavaScript files or how you want it to look at your SVG, CSS, or JPEG files. Then when you run your – the Webpack builder – it will go into our entry point so what is the main file of our program and it will walk up and down our program to grab all of these assets and it will figure out what needs to be done with them.

So in the case of how we’re going to be utilizing it for our project is we’re going to have all of our JavaScript files separated out as they are now and it’s going to go through and bundle all these files together and to create one JavaScript file for us. So this would be our bundle – it’s gonna bundle everything in together so that way all of our code is optimized into one location.

Furthermore, we’re gonna be able to use plugins like Babel to take our JavaScript code that will be written in ES6 syntax and it can modify and transform it back into ES2015 standard. So that way it’s supported across all browsers. And this is another benefit of using Webpack because we can use these plugins to do all this for us and then that way it ends up in our bundled file.

So to actually use Webpack, it’s actually quite easy. It’s available through NPM so we can install it like any other node package and then what we need to do is we actually need to create a configuration file so Webpack config file and that’ll allow us to tell Webpack how to bundle our code.

Interested in continuing? Check out the full Discover Developer Tools for JavaScript Apps course, which is part of our MMORPG Academy.

How to Install Node.js for Phaser Games

Lindsay Schardon — Fri, 18 Oct 2019 15:00:56 +0000

You can access the full course here: Node.js and Express for Game Development

Node.js is a cross-platform, Javascript runtime environment that executes Javascript code outside of a browser. To follow the videos, you will need Node.js installed on your machine.

Go to nodejs.org on your browser.

From here we will be able to download a version for our particular operating system (macOS here). There are 2 versions available for download. You are welcome to use the current release (with the latest features) but we recommend the LTS (long term support) version for this course.

Downloading on Mac

Click on the LTS version. We are prompted to download the node.js package. Let’s save it in our install directory.

Let’s run the installer (this step will vary based on your operating system). Click Continue.

Next accept the License Agreement. Click Continue.

The installer displays the space that will be taken by by the installation. Click Continue.

Node.js begins to install. This may take a few minutes.

Now that Node is installed, let’s open a new terminal (command prompt). Type the following:

$ node -v

This displays the version of Node installed (and being resolved) on our machine.

$ npm -v

This displays the version of NPM installed (and being resolved) on our machine.

Transcript

So for our API, we will be dealing with this using Node.js. If you’re not familiar, Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside of a browser. And so to follow with the videos, you will need to have Node.js installed on your machine.

So in your browser, if you go to nodejs.org, you’ll be taken to this page here, and you’ll be able to download a version for your particular operating system. So it’ll be two different versions. One will be LTS and the other one will be current, so I recommend the LTS version. So this is the long-term support. This is currently the supported version of Node.js. You are welcome to use the current release that has the latest features, but I do recommend the LTS version since that’s what we’ll be using for this course.

So to download it, go ahead and click on the LTS button. You’ll be then prompted to download the package. Go ahead and save. So then after the package has been installed, you’ll wanna go ahead and run your installer for your appropriate operating system, so this may be different, because I am on a Mac.

So after you run the installer, you’ll be prompted and it’ll let you know you’ll be installing Node and npm, so to install Node, you’ll need to agree to the software license agreement. So if you wanna go ahead and pause the video and read that.

Then next you’ll see you’ll go ahead and continue through the prompts until you install Node on your machine. This may take a few minutes. All right, so to verify if Node is installed and working correctly, let’s go ahead and open up a new terminal or command prompt. And then once you’re there, if you go ahead and do node -v, it’ll show you which version of Node that you currently have installed on your machine, and which one’s been resolved. And then also, if you do npm -v, it’ll show you which version of npm is currently installed as well.

Interested in continuing? Check out the full Node.js and Express for Game Development course, which is part of our MMORPG Academy.

A Bite-Sized Guide to HTML5 Game Design

Lindsay Schardon — Fri, 11 Oct 2019 15:00:54 +0000

You can access the full course here: Bite-Sized HTML5 Game Development

Part 1

Learning Goals

Basic Phaser development environment.
Setting up a web server.

In order for you to start making games with Phaser you will need to have a web browser (Google Chrome will be used for this course), code editor, and a web server.

There are many different code editors out there that are free to use, and it doesn’t matter which one you choose.

A list of code editors that are free
- Brackets(https://brackets.io)
- Atom(https://atom.io)
- Sublime text(https://www.sublimetext.com)
- Visual Studio Code(https://code.visualstudio.com/)

A web browser is a program that will receive requests from the browser, and we will send, it will serve files as a response.

A browser doesn’t allow you to load files from the file protocol due to security reasons. The web would be a very dangerous place if random websites could get access to the files on your computer. This is why you cannot just go and open a Phaser game by double clicking on the index.html file.

You have to load the game through a web server. The simplest way to get a web server up and running is to install the Brackets code editor.

You can download Brackets from here: http://brackets.io

The direct link to download Brackets is here: Download Brackets

Brackets comes with a built-in web server and it is free to use.

Web Server-Brackets
- Download and install Brackets (https://brackets.io)
- File-Open Folder
- Live preview

Always keep the Chrome Developer Tools open when working.

There is a more advanced way of using a web server and this involves using a called http server.

The first step is to install Node JS, and you can download Node JS from here: https://nodejs.org/en/

The direct link to download Node JS is here: Node JS Download

Node JS is an application that allows you to run JavaScript code on a server, in this case your computer.

For Window Users Only: Once you have downloaded Node JS you will need to download Git Bash, and this will give you access to a terminal on your system.

Mac users will already have access to the Mac terminal.

You can download Git Bash for windows here: https://gitforwindows.org/

The direct link to download Git Bash for windows is here: Git Bash

The first step is type “npm” in the terminal

If you type this and it is installed you will see this:

Once you verify that the npm is installed you can then type “npm install http-server -g” this is the name of the package that we want installed for us.

We now need to navigate and find our folder where the game is located.

In my case the game is located in the D drive, the www folder>Phaser3>crossy-rpg this will be different in your case.

If you have issues with using the command line options here you can just use Brackets, Brackets is much easier to use and doesn’t require this extra setup for the http server setup.

So in the terminal you type “cd d:” this brings you to the D drive.

Then type “cd www/phaser3/crossy-rpg/”

Now you should be inside the correct folder in the terminal.

Now that you are inside the correct folder you then type “http-server” and that should launch the web server for that particular folder.

You should now see that the server is available in different URLs.

You then can copy one of the URLs and go back into Google Chrome or whatever web browser you are using and paste the copied code into the navigation bar.

And now the game will be working just like it should.

Learning Summary

There are three basic requirements for Phaser development
- Web browser
- Code editor
- Web Server
A list of code editors that are free
- Brackets(https://brackets.io)
- Atom(https://atom.io)
- Sublime text(https://www.sublimetext.com)
- Visual Studio Code(https://code.visualstudio.com/)
Web Server-Brackets
- Download and install Brackets (https://brackets.io)
- File-Open Folder
- Live preview

Web Server-http-server
- Download and install Node.js (https://nodejs.org)
- (Windows Only) install Git Bash (https:gitforwindows.org/)
- Open terminal, install http-server: npm install http-server -g
- Navigate to the project folder, run the server: http-server

Part 2

Learning Goals

Game Design Documents
Importance of scoping
Outlining game requirements

Game design documents(GDD’s) are used in the game industry to describe and communicate the concepts and requirements of a game that will be developed.

These documents can be very short or very long. The length will depend on the type of game and scope of the game as well.

The GDD’s allow you to see everything in one place for the game that is being developed. It makes it easy for people who are developing a game on a team to get an idea of what the game should be, or other people who might just be interested in the development of the game. They can look at the GDD and see exactly what mechanics are going to be in the game and even see the type of art being used in the game.

GDD’s can be used if you are working on a team or if you are just a solo developer.

You will want to include the concept of the game, the game mechanics, the theme, the genre, the targeted platforms, and any art or sound assets in the GDD.

A simple template for a GDD:

You can use just about word processing software to write the GDD in.

A GDD is considered to be a “live” document because it should be constantly updated and everyone working on the game should have access too the document at all times.

Learning Summary

Game Design Documents (GDD)
- Short documents to describe a game concept and requirements.
- Used by and number of people (1 or many)
- Includes:
  - Concept
  - Mechanics/UI
  - Platforms
  - Assets
Challenge
- Make a GDD of your game idea
- Share it in the comments

Transcript 1

Hi there. My name is Pablo Farias Navarro, and I will be your instructor in this course. In this course, you’ll learn to create from absolute scratch the game that you are seeing on the screen. Where you have to move one character from one end of the screen to the other end of the screen. Sort of like Frogger or Crossy Road, games like that.

And you’ll be learning how to create this game using the Phaser framework. The only requirement for this course is for you to have basic JavaScript skills. We’re gonna introduce Phaser from absolute scratch. So, you’ll learn how to build this amazing game. You’ll be learning about Sprites, which are the, you know, players and enemies on the screen. You’ll learn how to work with Groups, a convenient way of dealing with multiple Sprites. We’ll go through how to detect user inputs so that you can move that character and we will work on the computer and on a touch screen as well.

We’ll go through the basics of collision detection, so you can learn how to detect when different elements are overlapping, something key when making games and we’re going to end up by covering some basic camera effects. So as you can see, when the player runs into one of the enemies, there’s a shake up camera effect and also fade out before the game restarts. So you’re going to learn how to do that, which will also give us the chance to introduce events, another important topic. When it comes to our courses, and besides making courses I also take a lot of courses all the time. I’m always learning things. Something that I really like about courses since one of the reasons why we make them is because they empower people to learn regardless of their own learning style.

For example, let’s say that you are a visual learner, you’re going to watch somebody creating the game on the screen, but if you are somebody who learns by doing, a kinesthetic learner, you can follow along, you can code along, and build everything and play around with the code, the source code, so you can learn as well. We recommend that students revisit the lessons so that once you complete a lesson, you can watch it again in the future when you need a bit of a reminder of how to do something and also it always helps if you are building your own projects.

So if you already have a game idea, you can start working on that game and put in practice the things that you learned in the course. You can put them in your own game as you learn them. We’ve seen that people who plan for success really get the most out of our material. For example, people who allocate certain days of the week to complete the courses, and stick to that plan even if it’s once a week. Ideally, three times a week, but depends on how much time you have.

So it really adapts to your own schedule and learning style and if you make learning a priority, you will get so much out of this training. Alright, well thanks for watching this introduction, now let’s get started and let’s start making games.

Transcript 2

In order for you to start making games with Phaser, you will need to have installed a web browser, I’ll be using Google Chrome, a code editor and a web server.

You can use whichever code editor you are already familiar with. Well, lets start with the beginning here. What is a web browser? A web browser is simply a program that will receive requests from the browser, it will serve files as a response. It will send our game as a response. The simplest way to get a web server running, that doesn’t require any advanced technical knowledge, is to install the Brackets Code Editor. When you open brackets go to file and open the folder. Find the folder that you want to serve with the web server so I’m gonna find the folder where my game is located, already had it here, so I’m gonna select that folder that will show me all of the files here, and then what you do is you press this live preview button.

So when you press that, brackets opens a Chrome page and it serves your files using a web server. So you can see that we have a specific URL here. This is the URL of this web server.

Transcript 3

So, the concept of our game is the casual game, two dimensional and I’m going to use the analogy that it’s Frogger-style. Frogger is an old Atari game where the player controls a, sort of like a Valkyrie, who needs to reach a treasure and avoid dragons.

So, that is a very short description, it’s a very simple description of a game and what I want to do now is add some concept art and some ideas. So, I’m going to start by going into Google Images and finding a screen-shot of that Frogger game that I mentioned. I’m going to take a scren-shot of this and add it to my game design document and now what I’m going to do is make a quick sketch of what the game looks like. So, this already gives an idea of what the game does.

Now, what platforms is this game going to be made for? So, first of all this is going to be a cross-platform game, which will work on both desktop and mobile and it will be a browser game, so it is run on the web browser. In terms of user interface we don’t really have any proper user interface but we want to describe how the player interacts with the game so that is how you interact with this game. It’s really simple. Now, what about the game mechanics?

You’ve got dragons moving up and down if the player is hit by a dragon the game restarts. The player wins if they reach the treasure and the game will restart. Player moves in only one direction. Now, the assets. First of all, what is going to be the style of the game? I would describe this as pixel art, 8-bit style with a retro kind of feel, like a retro RPG sort of feel, like old Final Fantasy or Zelda games.

We are going to need Sprites, so we need a background for the game, we need a Sprite for the player and one for the enemy and for the treasure. So this game doesn’t need that many assets, these are all the assets that we need.

Interested in continuing? Check out the full Bite-Sized HTML5 Game Development course, which is part of our Bite-Sized Coding Academy.

How to Set up and Test Phaser for RPGs

Lindsay Schardon — Fri, 13 Sep 2019 15:00:27 +0000

You can access the full course here: Intro to RPG Development with Phaser

Part 1

Learning Goals

Developer tools.
Setting up a web server.
Installing VS code.
Downloading Phaser.

Obtaining the Chrome Web Server Browser Extension

Before we can jump in and start coding there are a few setup tasks that we need to complete. The first thing we need to do is have a local web server running on our machine. We will be using a Chrome browser extension to setup our web server. You are welcome to use another route as far as the webserver goes, but this course will only be covering the Chrome browser extension we use in this course. In order to get the Chrome extension you will need to visit this link here to obtain it: https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

This is a very simple browser extension that you just simply point it to a local folder where you want to host files and then it will spin up your server for you. Once you have the extension added to your Chrome browser you will see it in the Chrome apps menu:

In order to use the extension you will just click on the icon, and a new window will open:

All you need to do now is click on “Choose Folder”:

So once you select the folder, all the assets that are in that folder will be made available on the server. Then if you click the link provided:

You will see a list of all the current assets in that directory:

Currently the directory is empty so that is why it is showing the way it is. The second toll that you are going to need is an Editor. There are many free editors out there to download and use.

Obtaining the Code Editor

We will be using VS Code in this course. Again you are welcome to use any editor of your choice, but we will only be covering VS Code in the course. In order to download VS Code you can visit this link here: https://code.visualstudio.com/

Once you have the installer downloaded all you need to do is run the installer and follow all the on-screen prompts for the installation.

Obtaining the Phaser Library

The final tool we need now is the actual Phaser 3 library. You can visit this link to obtain the Phaser library: https://phaser.io/download/stable

At the time of this course the latest version of Phaser is Phaser 3.16.2 “Ishikawa.” There are a few different ways to obtain the Phaser library from here:

You can download the min.js file.

Summary

Part 2

Learning Goals

Basic project setup.
Creating a basic HTML page.
Running the server.

In this lesson we will begin by setting up our project structure. You should begin this lesson by first downloading the course assets, and you can download these assets from the course home page (NOT AVAILABLE IN THE FREE WEBCLASS). Once you have downloaded and extracted the assets folder you should see two folders called “assets” and “images:

The audio folder has five different sound effects in it, we will use these in our game for the player attack, when the player takes damage, etc:

In the images folder there are a few sprite sheets, one of them is characters, the other one is items:

There is also a test spawner image, and a UI folder that contains two buttons for us to use in our game:

In order to start setting up our project structure we will need to create a new folder and call it “zenva_mmorpg” once you have this folder created you can place the assets folder inside this folder:

We now need to create a new folder inside the assets folder that is now in the zenva_mmorpg folder and call the folder “js”:

Create a new subfolder in the js folder called “lib”:

The lib folder will be used to keep track of any external libraries that we wanna use for our game. We will need Phaser inside of the lib folder. For the time being we are going to include both the Phaser and the Phaser minified file. One other folder that we need to make inside the assets folder is the “css” folder:

We will use this folder to keep track of any external CSS files. We now have the basic structure of our project in place and now we can open up the folder inside the code editor. One way to do this in VS Code is when you open VS code without any folders selected you can click on the File Icon in the upper left hand corner and then choose Open Folder:

Once you choose Open Folder you will need to navigate to where you have the folder you just created in the previous steps:

This will reload the code editor once you open the zenva_mmorpg folder in VS Code. You will see that we have our assets in here now, and they are listed on the left side of the editor:

Next we need to start up the Webserver for hosting our files, open the Chrome browser and click on Apps:

Once the Chrome webserver has been opened click on Choose Folder:

You will then choose the zenva_mmorpg folder you just created previously:

This will be the root of our project. So now when we click on the link, you will see that the localhost 8887 is now hosting our static files. You will see that we have the assets folder and images:

You can switch back to the code editor now, and next we need to create an HTML page. Because this is a JavaScript library, we will be including the JavaScript files in our HTML page. The HTML page will be what is rendered to the end user when they visit our site. Create a new file:

Name the file “index.html” We then need to create the basic structure of the HTML page, so open this file in the code editor. See the code below and follow along:



    
        
        
        Zenva MMORPG

Save this file. Switch back to the browser and refresh the page, you will see a few things and the first is that our asset list has went away. The reason for this is that when a server detects an index.html page, the server will render that page at the root path. You can see that our index page is being rendered, but we don’t have any content currently, but if you look at the title on the tab you can see that it has the tile name we specified:

Right click on the webpage and choose inspect:

Click on the Console:

Summary

Phaser Library

In order to create your game, you will need to include the Phaser library. The library is available via direct download, on a CDN, NPM, and on GitHub.
When you are developing your game, it is important to keep an eye on the version of Phaser you are developing against. Some features may not be backwards compatible.

Transcript 1

For our course, we’ll be using the Phaser 3 framework for developing our game. If you’re not familiar, Phaser is a fast, free and fun open-source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. The framework itself is written in JavaScript, so games can be compiled to iOS or Android and native apps by using third-party tools, and you can also use JavaScript or TypeScript for your game development.

The only requirement for using Phaser is the web browser has to support the Canvas HTML tag, which most browsers currently support.

Some of the benefits of using the Phaser framework is there’s a lot of options right of the box. Phaser comes with a fantastic plugin system, offers device scaling, mobile browser support. It offers things like asset preloading. It has built-in physics. It also includes a plugin for Facebook instant games.

So before we start working on our game, I wanted to share a few additional resources with you that are very helpful. The first is the labs.phaser.io website. This has replaced the Phaser 2 examples that you’ll find on the Phaser site and is exclusive to Phaser 3. On this site, you’re gonna find over 700 different examples of how you can use Phaser, and how each of the individual components work.

So for example, if we wanna go ahead and take a look, we’ll go and take a look at Game Objects. We’ll go ahead and do Sprites, and you’ll just see we have all these different examples for rendering a single Sprite, if we wanted to move a Sprite across the scene, and many more.

The second resource I want to share with you is the Phaser 3 API documentation, which is hosted on GitHub. The documentation is still a work in progress, but there is a lot of great information here. So if you want to look up the different things that are available for a particular class, like for example, if we wanted to look up more information on a sprite, we can search for it, and then you’ll see it’ll break it down.

It gives you all of the available methods, the properties, what’s expected, and there’s just a lot of great information. And what’s nice is for each method, they’ll be a link to the original source code. So you can go ahead and take a look at it in GitHub.

So the next resource is the GitHub repo itself. Phaser is under active development, and there is a new releases quite often, so in the repo they’ll be links to all of the resources I listed before, plus a few additional ones. You’ll also find things like release notes, how you can get the current version of Phaser. You’ll also get things like the TypeScript definition and a few links to a few different project templates.

The last resource I wanna share with you is the Phaser 3 forums. So there is an active community that is currently using Phaser, and then there’s a lot of a support for it. So if you have any questions, you can always search the forum. There’s a good chance someone else may have had the same question or ranted the same issue, or even if you’d just like to share your current game, or anything that you’re currently working on, this is the place to share it.

Transcript 2

Before we can jump into the code, there are a few setup tasks we have to do in order to run our game. The first thing we have to do is, we need to have a local webserver running on our machine. The reason for this is that it has to do with browser security. So we can create an index HTML page, and we can view it in our browser by using the file local path to view that file. However, once it comes time to load in external assets using the file path, the browser will block this for security reasons. So in order to not be hindered by the browser security, we need to be able to host our assets over HTTP and that’s where our web server will come in.

So there are many options available to you. Some are OS specific, other ones can be tied to the browser you’re currently using. So on the Phaser 3 site you’ll see some examples like you can use WAMP or XAMPP, Mongoose. You can use MAMP if you’re on Mac OS. You can also use things like grunt, Python, http-server for node.js, you can do php built-in web server.

So, for this course, we will be going another route and we’ll be using a Chrome browser extension, and I’ll be showing how we can set that up to serve our web server. You are welcome to use another one – however, that is out of scope for this course.

So to get the Chrome extension, if you go ahead and do a search for web server for chrome, you should see it as the first result. So it is a very simple Chrome extension where you just point it to a local folder where you want to host files and then it will spin up your server for you. So to use it we just need to click the Add to Chrome button. Click Add App and then you’ll see on your chrome apps you’ll have a new app added.

So to use the Chrome extension, you just go ahead and click on the app, a new window will open. So you just need to click on Choose Folder to where you should serve your files from and then, what will happen, is any assets in that folder will start being – will be made available and if you click this link here. You’ll see a list of the current assets in that directory. So currently this directory is empty, so that’s why it’s showing this.

So the second tool you’re going to need is an Editor. So there are many Editors out there, each with their pros and cons, just to list a few of them: there is Sublime Text, Atom, VS Code, Brackets, WebStorm. You could use Notepad, Notepad++. So for this course I’m going to show you – so for this course I will be using VS Code, and you’re welcome to also use VS Code. However if you have a personal preference, you are welcome to use any code editor that you would like to use.

So to get VS Code, if you come down here, you click on this link, and you should be taken to the VS Code version for the OS you’re currently on. If you go ahead and click on the Download for Mac button, this will download the installer, then you just need to run the installer and follow the instructions.

Finally, the last tool we need is, we actually need the Phaser library itself. So to get the library, if you click the Download button up here on Phaser, you’ll be taken to this page and then if you click on this button over here, it’ll take you to the stable releases. So at the time of this recording, Phaser 3.16.2 is the latest version.

So there are few different ways to get the Phaser library. It’s available on npm, so you can install it from ther,e and it’s also hosted on the jsDelivr CDN, so you can include the script tag on your web page, if you would just like to use Phaser that way. You can also clone the Gallop Repository, if you’d like to go that route, you can download Phaser as a .zip and you can also get direct links to the JavaScript file and the Minifier JavaScript file.

So if you click the links those files will be downloaded for you in your browser. So if you like to take a look at the source code while developing, I definitely recommend getting the Phaser.js file, since it’s the unminified version and it’d be easier to read. For production-ready, I definitely do recommend that you use the Phaser.min file, since it’s already minified for you if you’ll be including Phaser that way in your project.

Transcript 3

To begin, we are gonna start setting up our project structure. In the course links below, you will see a link to our assets. So, if you go ahead and download the asset folder and you extract it, you will see two folders inside. One will be audio and one will be images. Our audio has a few sound effects that we’ll be using for our game throughout our courses. Some of these include, like, an item pickup, when the player attacks, when the player takes damage. In the images folder, you’ll see a few sprite sheets. One of ’em will be characters and the other will be items. So, this will be a few different assets we’ll be using throughout our game. You’ll also see a test spawner image. And you also have a UI folder that has a few UI buttons inside it.

So to start setting up our project structure, we’re gonna go ahead and create a new folder called zenva_mmorpg. We’re gonna go ahead and take our assets folder and place it inside this folder. So now in here, we’ll have assets. And let’s go ahead and make another folder and we’ll call it js. This will be used to keep track of all our JavaScript files that we’ll use in our game.

And let’s go ahead and make a new subfolder called lib. The lib folder will be used to keep track of any external libraries that we wanna use for our game. We’ll, of course, will have Phaser inside here. For the time being, we’ll include both the Phaser and the Phaser minified file. One other folder we wanna go ahead and make over in here is we’ll make a css folder. We’ll use this to keep track of all any external CSS files that we create while making our game.

So now that we have our basic structure for our project in place, let’s go ahead and open up the folder inside your code editor. One way to do this in VS Code is when you open up VS Code without any folders selected, you can go ahead and click on the File icon here and then choose Open Folder. We’ll go navigate to the folder we just created. This will go ahead and reload the code editor and you’ll see that we have our assets in here.

Next, we’re gonna go ahead and start up our web server for hosting our files. We’re gonna go ahead and come into Chrome, go click on Apps, click on Web Server. And we’re gonna go ahead and Choose Folder and we’re gonna go ahead and choose the folder we just created. And that will be the root of our project. So now, when we click on the link, you’ll see the localhost 8887 is now hosting our static files. In this, we have our assets folder, we’ll have our images. So you’ll see, that’s serving up that file through HTTP. So we’re gonna go ahead and go back. And then let’s switch back to our code editor.

So, the first thing we need to do is create an HTML page. So the HTML page, because this is a JavaScript library, we’ll be including the JavaScript files in our HTML page, and that HTML page will be what is rendered to the end-user when they visit our site. So we’re gonna go and come up and we’re gonna go and create a new file, and we’re gonna go ahead and call this index.html.

So then we just need to create the basic structure of an HTML page. So, we’ll do DOCTYPE html and then we’ll create our html tags. And let’s go ahead and create a head tag. And then a body tag. Okay, so the head tag for our HTML file is used to put any meta information for our webpage here. This includes things like any viewport meta tags we wanna have, if we want to have a title displayed on our webpage, and it’s also used to including external resources that we want to be loaded before our webpage starts to render.

And then our body tag is used to render the content of the page. This will be like any of the text, the images, anything we show on the site. For the purpose of our game, this is where we’re gonna have our canvas element. And it’s also where we can include any JavaScript files that we want to be loaded after our page has started loading.

So the first thing we’re gonna do in our head tag is we’re gonna create a new meta tag, which I’m gonna give it a character set of utf-8. And then we’re also going to create another meta tag, and this is going to be a viewport meta tag. And we’ll do content equals user-scalable=0 to initial-scale=1. We’ll do minimum-scale=1, maximum-scale=1, width=device-width, and minimal-ui=1. We’ll close our tag.

So, what this meta tag does is, by default, if it’s not provided, a mobile device will try to render that page at a typical desktop screen width and then it will try to scale that page to fit the mobile device. This can lead to a bad user experience, because trying to render that large page on that small device means the user has to zoom in to try to view the content. It’s not a very pleasant experience.

By including that tag, it allows us to set the width and height of our viewport. So you’ll see, what we did is we went to the device-width, which allows it to then treat that as the maximum width and our page will be rendered much more cleanly.

So next, we’ll go ahead and we’ll add a title property and we’re just gonna go and call this Zenva MMORPG. And then down in our body, let’s go ahead and create a div and we’re going to give this div an id of phaser-game. And then next, we’re going ahead and load in our external JS files. So we’re gonna do script src and we’ll do assets, JavaScript, lib, and we’ll do phaser.min, and we’ll give it a character set of utf-8. And we’ll have our closing script tag.

All right, so if we go ahead and save our changes and we switch back to our browser and we refresh the page, you’ll see a few different things. First is our asset list has went away. The reason for this is when the server detects an index.html page, the server will render that page at the root path. So if we would have named our HTML page something like main.html page or game.html, we would still see a list of our files here.

So you’ll see that our index page is being rendered but we don’t have any content currently, but if you look at the title in the tab here, you’ll see that it has the title we specified. Then we’ll go ahead and we’ll do Inspect, we’ll do Console. Let’s do that for now.

Interested in continuing? Check out the full Intro to RPG Development with Phaser course, which is part of our MMORPG Academy.

Creating Mobile Games with Phaser 3 and Cordova

Tobe Osakwe — Sun, 23 Jun 2019 23:44:37 +0000

Find the source code for this example here.

Photon Storm’s Phaser is one of the most trusted frameworks for developing professional-quality 2D games in JavaScript. With Phaser, it’s feasible to make performant games that run smoothly in all major browsers, across all major systems, while only having to maintain one codebase. And now, the latest installment of Phaser has made its debut: Phaser 3.

But did you know that the same code that runs in your browser can be wrapped into a “native” mobile application? By combining Phaser 3 with Apache Cordova, we can produce games that not only run in the browser, but can also be published to the App Store and Google Play Store.

In this article, we’ll use Phaser to make a simple “game” that can be built for iOS, Android, and the Web. Though the result won’t truly be a “game” in the playable sense, the concepts it introduces will be referenced again in future tutorials where we will, indeed, create playable games.

Pre-requisites (things to install!)

We’ll be dealing with purely JavaScript (and tiny bit of HTML) through this tutorial, so all you need to install manually is Node.js. This will give you the node and npm executables on your system.

Once Node.js is installed, download the Apache Cordova command line by running this command in your terminal/command prompt:

npm i -g cordova

Learn Phaser 3 with our newest Mini-Degree

The HTML5 Game Development Mini-Degree is now available for Pre-Order on Zenva Academy. Learn to code and make impressive games with JavaScript and Phaser 3!

Get Instant Early Access

Project Setup

Cordova includes boilerplate projects that make it much simpler to start off with a mobile-enabled project, so let’s take advantage of that, by running:

cordova create hello

This will create a directory named hello, and copy multiple files into the project.

Next, let’s install Phaser into our project. In our project directory, run the following:

cd www
npm init
npm i --save phaser

For those unfamiliar with npm, the above command downloads the source code of the Phaser framework and saves a local copy in the www/node_modules folder. This way, we have a copy of the code without having to download it from a CDN on every run. The reason we have to have a separate package.json file in the www directory is that static files are served from the www directory, and not from our project root. If Phaser were installed in the project root, we would never be able to access it in the browser.

Next, let’s add support for running our app in a browser. We’ll add support for running on iOS and Android later. Run this:

cordova platform add browser

Next, we’ll want to add support for live-reloading our changes when we edit our file. Otherwise, Cordova will only ever serve one version of our files, which will lead to a lot of head scratching and wondering why errors seemingly don’t vanish, even after changing your code! Run this command:

cordova plugin add cordova-plugin-browsersync

Now that we’ve set our project for development, let’s run the HTTP server:

cordova run browser --live-reload

Now, you should be able to visit http://localhost:8000/index.html to view your game in action.

Basic Game Code

First, let’s remove the starter code that Cordova gives us; we won’t be needing it anymore. Remove the

...

code in index.html, and add a reference to our downloaded Phaser source, so that the file looks like the following, ignoring comments:


    
        
        
        
        
        
        Hello World

Feel free to remove the Content-Security-Policy tag in the head. Though it’s a smart choice for security, if you are unfamiliar with CSP, it can be a rather confusing roadblock for such a simple tutorial.

Next, let’s add some code in js/index.js to start up a Phaser instance:

document.addEventListener('deviceready', function() {
    var config = {
        type: Phaser.WEBGL,
        parent: 'game',
        scene: {
            preload: preload,
            create: create
        }
    };
    
    var game = new Phaser.Game(config);
    
    function preload() {
    }
    
    function create() {
    }    
});

Even in this relatively small code snippet, there’s quite a bit going on:

We create a configuration object, which we pass to the Phaser.Game constructor to specify where the framework should call our code.
We indicate to Phaser, via, type: Phaser.WEBGL, that we want to use the WebGL-based renderer, which is faster than plain Canvas 2D-based rendering.
We tell Phaser to render into an existing where id="game", or to create such a element if one does not exist.
We embed a scene object, which points to two functions Phaser will call at different points in the game lifecycle.

Now, let’s run our game! Type the following in your terminal:

cordova run browser -- --livereload

Next, to actually see the game in your browser, visit http://localhost:8000 in your browser. Check out the output!

Beautiful! It’s an empty black screen!

Adding Game Objects

As you can probably imagine, nobody wants to just sit there and stare at an infinitely-blank screen. So let’s spruce it up and add something that moves!

Phaser has long been based on object-oriented programming, but Phaser 3 introduces the categorization of certain objects as game objects, which share common functionality while achieving different goals. The kind of game object we’ll be adding now is called a sprite, which in the 2D world means “image that represents an object.” Common examples of sprites include animated sprites, which are often used to represent characters in games.

Even though a sprite by itself is just an image, in the context of a game engine like Phaser, it is frequently associated with physics computations, and provides an abstraction through which a game can programmatically change what’s visible on screen in a logical way.

Using an asset from Kenney, let’s load an image and draw it to the screen.

First, let’s download the Tappy Plane Asset Pack. Copy SpriteSheet/sheet.png and SpriteSheet/sheet.xml into the local www/img directory. We’ll load these into our game by modifying our preload and create functions as follows:

function preload() {
   this.load.atlas('sheet', 'img/sheet.png', 'img/sheet.json');
}
    
function create() {
    this.add.sprite(400, 300, 'sheet', 'planeBlue1.png');
}

Note that img/sheet.json is included in the project assets, and is based on the contents of img/sheet.xml.

Quite a bit happened in the lines above. First, we told Phaser that we have a texture file, img/sheet.png, and that the framework should use the contents of img/sheet.json to find the location of frames within the image. img/sheet.json contains a map of frames that map names (i.e. planeBlue1.png) to distinct locations and sizes within the texture file, which contains the entire Tappy Plane pack compressed into a single image.

Next, we created a sprite that references planeBlue1.png within our sheet asset. As mentioned earlier, though a Sprite is just an image, in Phaser, we can use it to perform physics computations and another complex transformations.

Refresh the page to see the current game:

Animating the Sprite

The blue plane sprite included in Kenney’s Tappy Plane pack includes three frames, which can be combined to create an animation. Change the create function as follows:

function create() {
    this.anims.create({
        key: 'plane',
        repeat: -1,
        frameRate: 10,
        frames: this.anims.generateFrameNames('sheet', { start: 1,  end: 3, prefix: 'planeBlue', suffix: '.png' })
    });
        
    var plane = this.add.sprite(400, 300, 'sheet').play('plane');
}

Firstly, we register an animation configuration in Phaser’s AnimationManager. Using the generateFrameNames helper, we specify that the animation contains the frames planeBlue1.png, planeBlue2.png, and planeBlue3.png. The animation we create, named plane, can be applied to any sprite; however, for this example, we will only apply it to our plane sprite.

Next, we add .play('plane') to our instantiation of the plane sprite. Reload the page, and you’ll see the plane’s turbine spinning infinitely!

Note that the plane key corresponds to the key of the animation object we created.

Adding a Background

Of course, a game with a boring, empty background is (usually) a boring, empty game. Let’s add a background sprite, right before creating our plane. create should look like this:

function create() {
    this.anims.create({ ... });
    this.add.image(0, 0, 'sheet', 'background.png').setOrigin(0);
    var plane = this.add.sprite(400, 300, 'sheet').play('plane');
}

Note the setOrigin(0), which tells the image to position itself according to its top-left corner, rather than the middle (the default origin is 0.5).

Let’s take a look at the game now:

Scaling the Game

As you’ve likely noticed, there’s still a lot of dead space. We can eliminate this by explicitly sizing the game canvas to the size of our background image, 800x480.

Modify the game configuration like so:

var config = {
    type: Phaser.WEBGL,
    parent: 'game',
    width: 800,
    height: 480,
    scene: {
        preload: preload,
        create: create
    }
};

And voila, empty space gone!

One caveat to mobile development is that there is no guarantee of the size of a screen. Even within the context of one device, a resize of the window or orientation switch can throw the scaling of your game completely off-balance. However, with some simple math, we can responsively resize our game. Change your create function as follows (source):

function create() {
    window.addEventListener('resize', resize);
    resize();

    // Earlier code omitted
}

Next, implement the resize function that auto-resize our game canvas:

function resize() {
    var canvas = game.canvas, width = window.innerWidth, height = window.innerHeight;
    var wratio = width / height, ratio = canvas.width / canvas.height;

    if (wratio < ratio) {
        canvas.style.width = width + "px";
        canvas.style.height = (width / ratio) + "px";
    } else {
        canvas.style.width = (height * ratio) + "px";
        canvas.style.height = height + "px";
    }
}

Now, the game will resize automatically when the window does!

Infinite Scrolling

As is the nature of Tappy Plane and Flappy Bird, our background should scroll infinitely. Fortunately, it’s simple to implement this in Phaser. First, let’s update our game configuration to point to an update function we will create. This function will be called once per frame.

var config = {
    type: Phaser.WEBGL,
    parent: 'game',
    width: 800,
    height: 480,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

Next, let’s change our create function to declare the background image as a tile sprite instead. A tile sprite is a special sprite that can update its position relative to the camera, to create parallax/infinite scrolling phenomena.

this.bg = this.add.tileSprite(0, 0, 800, 480, 'sheet', 'background.png').setOrigin(0);

Lastly, let’s actually implement that update function:

function update() {
    this.bg.tilePositionX += 5;
}

Refresh the game, and you’ll see the background continuously scrolling, repeating itself once it reaches the end of the screen.

Note that though we are adding to tilePositionX, it looks as though the background is moving to the left. It helps to think of tile sprites as an endless wallpaper, that we are only viewing a certain piece of at a time. When tilePositionX increases, this is analogous to the viewer’s eyes moving to the right, which creates a parallax effect moving to the left.

Building the Game for iOS and Android

Now for the fun part: Running our game on mobile! First off, add the ios and android platforms to the codebase:

cordova platform add ios android

If this errors, you may need to delete package-lock.json.

Next, we can use cordova to run our app in an emulator:

cordova emulate ios

This will bring our app up in the iOS Simulator (granted, you’ll need to install that, which comes bundled with XCode, first):

Distributing the Game

Lastly, we eventually will want to publish and distribute our game. Whether through the App Store, the Google Play Store, or another app distribution platform, our game needs to be downloadable and easily accessible in order for our users to get their hands on it.

Firstly, you’ll need to build your app in release mode. Try the following for iOS:

cordova build --release ios

The steps to build a properly signed application for iOS are quite intensive, and include the following steps:

Sign the application
Register an app ID
Make a provisioning profile
Modify app configuration
Submit to the App Store

This process is well summarized in this article; for the sake of not reinventing the wheel, I’ve linked to it, rather than rewriting content.

After that, you’re done! Good work.

Conclusion

Apache Cordova is a great solution for running applications originally aimed at web browsers on mobile devices. By wrapping such applications in webview wrappers, Cordova lets us produce a “native” (notice the quotes) experience across multiple platforms. This is great when writing games, because it eliminates the need for rewriting code to target different platforms.

With Phaser, we can create games with Cordova that run in the browser, iOS, and Android.

Stick around for the next tutorial, where we continue with the Tappy Plane Pack and turn this into a real game!

How to Create a Game with Phaser 3

Pablo Farias — Sun, 23 Jun 2019 06:11:29 +0000

Making amazing cross-platform games is now easier than it’s ever been thanks to Phaser, an Open Source JavaScript game development library developed by Richard Davey and his team at Photonstorm. Games developed with Phaser can be played on any (modern) web browser, and can also be turned into native phone apps by using tools such as Cordova.

Learn by making your first game

The goal of this tutorial is to teach you the basics of this fantastic framework (version 3.x) by developing the “Frogger” type of game you see below:

You can download the game and code here. All the assets included were produced by our team and you can use them in your own creations.

Learning goals

Learn to build simple games in Phaser 3
Work with sprites and their transforms
Main methods of a Phaser scene
Utilize groups to aggregate sprite behavior
Basic camera effects (new Phaser 3 feature)

Tutorial requirements

Basic to intermediate JavaScript skills
Code editor
Web browser
Local web server
Tutorial assets to follow along
No prior game development experience is required to follow along

Learn Phaser 3 with our newest Mini-Degree

The HTML5 Game Development Mini-Degree is now available on Zenva Academy. Learn to code and make impressive games with JavaScript and Phaser 3!

Get Instant Access

Development environment

The minimum development environment you need consists in a code editor, a web browser and a local web server. The first two are trivial, but the latter requires a bit more explanation. Why is it that we need a local web server?

When you load a normal website, it is common that the content of the page is loaded before the images, right? Well, imagine if that happened in a game. It would indeed look terrible if the game loads but the player image is not ready.

Phaser needs to first preload all the images / assets before the game begins. This means, the game will need to access files after the page has been loaded. This brings us to the need of a web server.

Browsers, by default, don’t let websites just access files from your local drive. If they did, the web would be a very dangerous place! If you double click on the index.html file of a Phaser game, you’ll see that your browser prevents the game from loading the assets.

That’s why we need a web server to server the files. A web server is a program that handles HTTP requests and responses. Luckily for us, there are multiple free and easy to setup local web server alternatives!

Setting up your local web server

The simplest solution I’ve found is a Chrome application named (surprisingly) Web Server for Chrome. Once you install this application, you can launch if from Chrome directly, and load your project folder.

You’ll be able to navigate to this folder by typing the web server URL into your browser.

Hello World Phaser 3

Now that our web server is up and running, lets make sure we’ve got Phaser running on our end. You can find the Phaser library here. There are different manners of obtaining and including Phaser in your projects, but to keep things simple we’ll be using the CDN alternative. I’d recommend you use the non-minified file for development – that will make your life easier when debugging your game.

More advanced developers might want to divert from these instructions and use a more sophisticated development environment setup and workflow. Covering those is outside of the scope of this tutorial, but you can find a great starting point here, which uses Webpack and Babel.

In our project folder, create a index.html file with the following contents:




    
    Learn Game Development at Zenva.com

Now create a folder named js, and inside of it, our game file game.js:

// create a new scene named "Game"
let gameScene = new Phaser.Scene('Game');

// our game's configuration
let config = {
  type: Phaser.AUTO,  //Phaser will decide how to render our game (WebGL or Canvas)
  width: 640, // game width
  height: 360, // game height
  scene: gameScene // our newly created scene
};

// create the game, and pass it the configuration
let game = new Phaser.Game(config);

What we are doing here:

We are creating a new scene. Think of scenes as compartments where the game action takes place. A game can have multiple scenes, and in Phaser 3 a game can even have multiple open scenes at the same time (check out this example)
It’s necessary to tell our game what the dimensions in pixels will be. Important to mention this is the size of the viewable area. The game environment itself has no set size (like it used to have in Phaser 2 with the “game world” object, which doesn’t exist on Phaser 3).
A Phaser game can utilize different rendering systems. Modern browsers have support for WebGL, which in simple terms consists in “using your graphic card to render page content for better performance”. The Canvas API is present in more browsers. By setting the rendering option to “AUTO”, we are telling Phaser to use WebGL if available, and if not, use Canvas.
Lastly, we create our actual game object.

If you run this on the browser and open the console you should see a message indicating that Phaser is up and running:

Scene life-cycle

In order for us to add the first images to our game, we’ll need to develop a basic understanding of the Scene life-cycle:

When a scene starts, the init method is called. This is where you can setup parameters for your scene or game.
What comes next is the preloading phaser (preload method). As explained previously, Phaser loads images and assets into memory before launching the actual game. A great feature of this framework is that if you load the same scene twice, the assets will be loaded from a cache, so it will be faster.
Upon completion of the preloading phase, the create method is executed. This one-time execution gives you a good place to create the main entities for your game (player, enemies, etc).
While the scene is running (not paused), the update method is executed multiple times per second (the game will aim for 60. On less-performing hardware like low-range Android, it might be less). This is an important place for us to use as well.

There are more methods in the scene life-cycle (render, shutdown, destroy), but we won’t be using them in this tutorial.

Bring in the sprites!

Let’s dive right into it and show our first sprite, the game background, on the screen. The assets for this tutorial can be downloaded here. Place the images in a folder named “assets”. The following code goes after let gameScene = new Phaser.Scene(‘Game’); :

// load asset files for our game
gameScene.preload = function() {

  // load images
  this.load.image('background', 'assets/background.png');
};

// executed once, after assets were loaded
gameScene.create = function() {

   // background
   this.add.sprite(0, 0, 'background');
}

Our game background image “background.png” is loaded. We are giving this asset the label “background”. This is an arbitrary value, you could call it anything you want.
When all images are loaded, a sprite is created. The sprite is placed in x = 0, y = 0. The asset used by this sprite is that with label “background”.

Let’s see the result:

Not quite what we wanted right? After all, the full background image looks like so:

Before solving this issue let’s first go over how coordinates are set in Phaser.

Coordinates

The origin (0,0) in Phaser is the top left corner of the screen. The x axis is positive to the right, and y axis is positive downwards:

Sprites by default have their origin point in the center, box on x and y. This is an important difference with Phaser 2, where sprites had what was called an anchor point on the top-left corner.

This means, when we positioned our background on (0,0), we actually told Phaser: place the center of the sprite at (0,0). Hence, the result we obtained.

To place the top-left corner of our sprite on the top-left corner of the screen we can change the origin of the sprite, to be it’s top-left corner:

// executed once, after assets were loaded
gameScene.create = function() {

  // background
  let bg = this.add.sprite(0, 0, 'background');

  // change origin to the top-left of the sprite
  bg.setOrigin(0,0);
};

The background will now render in the position we want it to be:

The Player

Time to create a simple player we can control by either clicking or touching on the game. Since we’ll be adding more sprites, let’s add these to preload so we don’t have to modify it again later:

// load asset files for our game
gameScene.preload = function() {

  // load images
  this.load.image('background', 'assets/background.png');
  this.load.image('player', 'assets/player.png');
  this.load.image('dragon', 'assets/dragon.png');
  this.load.image('treasure', 'assets/treasure.png');
};

We’ll then add the player sprite and reduce it’s size by 50%, inside of create:

  // player
  this.player = this.add.sprite(40, this.sys.game.config.height / 2, 'player');

  // scale down
  this.player.setScale(0.5);

We are placing our sprite at x = 40. For y, we are placing it in the middle of the game viewport. this gives us access to our current scene object, this.sys.game gives us access to the global game object. this.sys.game.config gives us the configuration we defined when initiating our game.
Notice we are saving our player to the current scene object (this.player). This will allow us to access this variable from other methods in our scene.
To scale down our player we using the setScale method, which applies in this case a scale of 0.5 to both x and y (you could also access the scaleX and scaleY sprite properties directly).

Our Valkyrie is ready for some action! We need to develop next the ability for us to move her with the mouse or touchscreen.

Detecting input

Phaser 3 provides many ways to work with user input and events. In this particular game we won’t be using events but will just check that the “active input” (be default, the mouse left button or the touch) is on.

If the player is pressing/touching anywhere on the game, our Valkyrie will walk forward.

To check for input in this manner we’ll need to add an update method to our scene object, which will normally be called 60 times per second (it is based on the requestAnimationFrame method, in less performing devices it will be called less often so don’t assume 60 in your game logic):

// executed on every frame (60 times per second)
gameScene.update = function() {

  // check for active input
  if (this.input.activePointer.isDown) {

    // player walks
  }
};

You can verify that this works by placing a console.log entry in there.

this.input gives us access to the input object for the scene. Different scenes have their own input object and can have different input settings.
This code will be true whenever the user presses the left button (clicks on the game area) or touches the screen.

Moving the player

When the input is active we’ll increase the X position of the player:

  // check for active input
  if (this.input.activePointer.isDown) {

    // player walks
    this.player.x += this.playerSpeed;
  }

this.playerSpeed is a parameter we haven’t declared yet. The place to do it will be the init method, which is called before the preload method. Add the following before the preload definition (the actual declaration order doesn’t matter, but it will make our code more clear). We are adding other parameters as well which we’ll use later:

// some parameters for our scene (our own customer variables - these are NOT part of the Phaser API)
gameScene.init = function() {
  this.playerSpeed = 1.5;
  this.enemyMaxY = 280;
  this.enemyMinY = 80;
}

Now we can control our player and move it all the way to the end of the visible area!

Treasure hunt

What good is a game without a clear goal (take that Minecraft!). Let’s add a treasure chest at the end of the level. When the player position overlaps with that of the treasure, we’ll restart the scene.

Since we already preloaded all assets, jump straight to the sprite creation part. Notice how we position the chest in X: 80 pixels to the left of the edge of the screen:

  // goal
  this.treasure = this.add.sprite(this.sys.game.config.width - 80, this.sys.game.config.height / 2, 'treasure');
  this.treasure.setScale(0.6);

In this tutorial we are not using a physics system such as Arcade (which comes with Phaser). Instead, we are checking collision by using a utility method that comes in Phaser, which allows us to determine whether two rectangles are overlapping.

We’ll place this check in update, as it’s something we want to be testing for at all times:

  // treasure collision
  if (Phaser.Geom.Intersects.RectangleToRectangle(this.player.getBounds(), this.treasure.getBounds())) {
    this.gameOver();
  }

The getBounds method of a sprite gives us the rectangle coordinates in the right format.
Phaser.Geom.Intersects.RectangleToRectangle will return true if both rectangles passed overlap

Let’s declare our gameOver method (this is our own method, you can call it however you want – it’s not part of the API!). What we do in this method is restart the scene, so you can play again:

// end the game
gameScene.gameOver = function() {

    // restart the scene
    this.scene.restart();
}

A group of dragons

Life is not easy and if our Valkyrie wants her gold, she’ll have to fight for it. What better enemies than evil yellow dragons!

What we’ll do next is create a group of moving dragons. Our enemies will have a back and forth movement – the sort of thing you’d expect to see on a Frogger clone

In Phaser, a group is an object that allows you to create and work with multiple sprites at the same time. Let’s start by creating our enemies in, yes, create:

  // group of enemies
  this.enemies = this.add.group({
    key: 'dragon',
    repeat: 5,
    setXY: {
      x: 110,
      y: 100,
      stepX: 80,
      stepY: 20
    }
  });

We are creating 5 (repeat property), sprites using the asset with label dragon.
The first one is placed at (110, 100).
From that first point, we move 80 on x (stepX) and 20 on Y (stepY), for every additional sprite.
For future reference, the members of a group are called “children”.

The dragons are too big. Let’s scale them down:

  // scale enemies
  Phaser.Actions.ScaleXY(this.enemies.getChildren(), -0.5, -0.5);

Phaser.Actions.ScaleXY is a utility that reduces the scale by 0.5, to all the sprites that are passed in.
getChildren gets us an array with all the sprites that belong to a group

This is looking better:

Bouncing enemies

The up and down movement of the dragons will follow the logic described below. When making games and implementing mechanics, it is in my opinion always good to outline them and understand them well before attempting implementation:

Enemies have a speed, a maximum and a minimum vale of Y they will reach (we already have all of this declared in init).
We want to increase the position of an enemy until it reaches the maximum value
Then, we want to reverse the movement, until the minimum value is reached
When the minimum value is reached, go back up..

Since we have basically an array of enemies, we’ll iterate through this array, in update, and apply this movement logic to each enemy (note: speed hasn’t been declared yet, so assume each enemy has a value setup for this property):

// enemy movement
  let enemies = this.enemies.getChildren();
  let numEnemies = enemies.length;

  for (let i = 0; i < numEnemies; i++) {

    // move enemies
    enemies[i].y += enemies[i].speed;

    // reverse movement if reached the edges
    if (enemies[i].y >= this.enemyMaxY && enemies[i].speed > 0) {
      enemies[i].speed *= -1;
    } else if (enemies[i].y <= this.enemyMinY && enemies[i].speed < 0) {
      enemies[i].speed *= -1;
    }
  }

This code will make the dragons move up and down, provided speed was set. Let’s take care of that now. In create, after scaling our dragons, let’s give each a random velocity between 1 and 2:

  // set speeds
  Phaser.Actions.Call(this.enemies.getChildren(), function(enemy) {
    enemy.speed = Math.random() * 2 + 1;
  }, this);

Phaser.Actions.Call allows us to call a method on each array element. We are passing this as the context (although not using it).

Now our up and down movement is complete!

Colliding with enemies

We’ll implement this using the same approach we took for the treasure chest. The collision check will be performed for each enemy. It makes sense to utilize the same for loop we’ve already created:

  // enemy movement and collision
  let enemies = this.enemies.getChildren();
  let numEnemies = enemies.length;

  for (let i = 0; i < numEnemies; i++) {

    // move enemies
    enemies[i].y += enemies[i].speed;

    // reverse movement if reached the edges
    if (enemies[i].y >= this.enemyMaxY && enemies[i].speed > 0) {
      enemies[i].speed *= -1;
    } else if (enemies[i].y <= this.enemyMinY && enemies[i].speed < 0) {
      enemies[i].speed *= -1;
    }

    // enemy collision
    if (Phaser.Geom.Intersects.RectangleToRectangle(this.player.getBounds(), enemies[i].getBounds())) {
      this.gameOver();
      break;
    }
  }

Camera shake effect

A really cool feature of Phaser 3 is that of camera effects. Our game is playable but it will be nicer if we can add some sort of camera shake effect. Let’s replace gameOver by:

gameScene.gameOver = function() {

  // shake the camera
  this.cameras.main.shake(500);

  // restart game
  this.time.delayedCall(500, function() {
    this.scene.restart();
  }, [], this);
}

The camera will be shaken for 500 miliseconds
After 500 ms we are restarting the scene by using this.time.delayCall, which allows you to execute a method after some time

There is a problem with this implementation, can you guess what it i?

After colliding with an enemy, the gameOver method will be called many times during the 500 ms. We need some sort of switch so that when you run into a dragon, the gameplay freezes.

Add the following at the end of create:

  // player is alive
  this.isPlayerAlive = true;

The code below goes at the very start of update, so that we only process it if the player is alive:

  // only if the player is alive
  if (!this.isPlayerAlive) {
    return;
  }

Our gameOver method:

gameScene.gameOver = function() {

  // flag to set player is dead
  this.isPlayerAlive = false;

  // shake the camera
  this.cameras.main.shake(500);

  // restart game
  this.time.delayedCall(500, function() {
    this.scene.restart();
  }, [], this);
};

Now the method won’t be activated many times in a row.

Fading out

Before saying goodbye we’ll add a fadeout effect, which will commence half-way through the camera shakeup:

gameScene.gameOver = function() {

  // flag to set player is dead
  this.isPlayerAlive = false;

  // shake the camera
  this.cameras.main.shake(500);

  // fade camera
  this.time.delayedCall(250, function() {
    this.cameras.main.fade(250);
  }, [], this);

  // restart game
  this.time.delayedCall(500, function() {
    this.scene.restart();
  }, [], this);

  
};

At time 250 ms we are starting our fade out effect, which will last for 250 ms.
This effect will leave the game black, even after restarting our scene, so we do need to call this.cameras.main.resetFX(); to go back to normal, for that, add this to the bottom of the create method, or the screen will remain black after you restart the scene:

// reset camera effects
this.cameras.main.resetFX();

That’s all for this tutorial! Hope you’ve found this resource helpful.