PhaserJs logo

This post is part of a series of blog posts aimed to describe the step by step process of creating an browser game with PhaserJs using the latest ECMAscript standards.

This post in particular will set up the basic requirement for the game (server and file structure).

The Tech stack

For this game, I am going to use NodeJs and Express as our back-end server.  I usually use side project like this to gain experience on new territory, but this does not indicate that other servers may be less suitable.

Most of the game and all the game engine, are handled by the browser ( hence the name browser game) and therefore the Server does not play a key part and using nodeJs may actually be a good lightweight option.

The Javascript will be written using the latest ECMAscript 6 standards (please check current support from other blog post). This will enable us to investigate and lean the new standards, while developing the game. (Achieving two objects at once).

Set up the Work Station

Folder Structure

Game

->Server.js

->Index.html

->Assets //This will include all the images and sprites

->Js //This will include all the js file required for our game

->External //This will include the phaser.js library

NodeJs

To install node js you need to download the latest stable version from the Node.js download page. The installation process is quite simple and quick.

After installing node, we will then be able to install all necessary packages by using the NPM software registry, directly from the command prompt.

Express

The first requirement for our small server, will actually require us to install an NPM package called express. This package is one of the most comprehensive web application framework available for NodeJs. To install it you will need to enter the following in your command prompt window:

cd c:/game/
npm install express

If you are not familiar with the command prompt, in the above snip of code we have firstly navigated to a specific folder, then run the “npm install” command specifiying the name of the package we wanted to install “express”.

This is all that is needed to install new packages using the NPM (Node Package Manager).

Code Editor

There is no requirement for  a code editor. PhaserJs can be ever be developer in a basic notepad.

For personal experience I would suggest one of the following:

  • Visual Studio Code
  • Atom
  • Sublime
  • Nodepad++

Basic Server

To create a web server using Node and Express we just need a couple of lines of code. More information can be found on the express website.

The following code need to be inserted in the file names Server.js.

//Example usage in the command prompt
//node Server.js

// Parameters
const port = 880; //Specify a port for our web server
const express = require('express'); //load express with the use of requireJs

const app = express(); //Create an instance of the express library

app.use(express.static(__dirname + '/'));//Serving static files
app.listen(port, function() { //Listener for specified port
    console.log("Server running at: http://localhost:" + port)
});

The code is heavily documented for illustration purpose. Please also note the use of the “const” type.

To run our server we just need to enter the following in our command prompt

 node Server.js

Web page

Now that our server is now ready, it is time to create our first webpage.

To do so, just enter the following in the Index.html file:

 <!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>My Game with PhaserJs</title>
</head>
<body>
    <h1>Welcome to my game</h1>
    <p>This is my game page.</p>
</body>
</html>

PhaserJs

It is time to add the PhaserJs library in our folders. To do so, visit the phaser JS website. There are many ways to download the library, either by npm command, or by cloning the repository from Git.

After downloading the library, please place the minified file “phaser.min.js” in the external folder to have it ready to be used in our next post.

Conclusion

Our server is now running (by using the command above) and we can access out newly created server by accessing “localhost:880” in our web browser.

This post was needed to set the scaffolding for out game.

 

🤞 Don’t miss these tips!

No spam emails.. Pinky promise!