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.
Great tutorial. Couple suggestions. Why not?
…
const app = express();
…
app.listen(port, () => { …
Also I notice I can’t run on port 880?
I didn’t even read this comment, I just immediately changed to const and 8080 without thinking 😀
good suggestions.
I have changed the app variable to Const, good suggestion there. The port is 880 because it is my lucky number! 🙂 (like the website).
Thank you for reading my website guys!
I enjoyed part 1!! I would love to see a part 2!