Practice multiplayer game & Discussion

When deciding on what kind of application i wanted to create using phaser framework, I decided I would create an online multiplayer game.

While discussing my project over with a friend who happens to be an expert in using phaser framework, we discussed the possibilities of the application and what would be required to achieve such a feat, after researching for awhile we found a way to create a basic HTML5 multiplayer game using phaser for the game development and eureca.io for client/server communication, this was to be my first in depth dive into this kind of development.

The game was based around multiplayer tank game, where user’s would join the game whenever they wanted and try to attack the other tanks that were in game. Now that wasn’t really what the tutorial was about, the tutorial gave information about using eureca.io and setting up how to have more than one player in the application. Eureca.io is an RPC library.

The practice game is based off a tutorial that is meant to help beginners get a grasp on creating an online game using phaser and eureca.io.

Link:

http://ezelia.com/2014/tutorial-creating-basic-multiplayer-game-phaser-eureca-io

Firstly i had to create a new project in my htdocs, called it multiplayer. This was going to hold all the files for the game. Next I installed the assets required for this game and the tank script as i wasn’t too interested in the tank script and more interested in the other pieces of code, setting up eureca.io and learning about server set-ups.

I had to use the terminal a lot in this process to install various files.  I started by creating a basic web server for the game, here we installed express library for nodejs, to make file service simpler. I had to used the terminal and change directory into the folder that had the game files.

cd

Then run this command in the terminal : npm install express

I then created a server.js script and added it to the root directory of the game, and added the following code.

var express = require(‘express’)
  , app = express(app)
  , server = require(‘http’).createServer(app);
  
// serve static files from the current directory
app.use(express.static(__dirname));
 
 server.listen(8000);
After this was added and saved, I ran this next piece in the terminal : node server.js
This starts the server for our game.

nodeserver

I then opened my browser for the test phase, using 127.0.0.1:8000 in the url, my browser opened up the practice game.
tank

It’s Working!!

Next part was to install and prepare using eureca.io. Eureca.io can use either engine.io or sockjs as network transport layer, by default, engine.io is used. to use eureca.io with the default configuration we’ll need to install eureca.io and engine.io.

We do this in the terminal again using : npm install engine.io and npm install eureca.io.

After the install has completed we modify the server code and add eureca stuff before the server.listen(8000)

image2.PNG
note: image of the specified code, as well as the code I added.
Then I added some event listeners to detect client connections and disconnections.
image3.PNG
Note: Image of the specified code, as well as the code I added.
We then add eureca.js script to the index.html just before the tank.js script, by typing src=“/eureca.js”>. This will allow eureca.io to be available to the client, next we added this next piece of code into tanks.js.
image4.PNG
This is creating the client initialization method “eurecaClientSetup”, which instantiates eureca.io Client and wait for the client to be ready, it then calls the method create, this was initially called by Phaser.Game instantiation method.
Note: code is edited later in tutorial.
 If creating a multiplayer game, its important to make sure the server is available before starting the game code, this is what we are doing with eurecaClientSetup.
With this part of the tutorial done, when navigating to the localhost in the URL the server should have detected that a client has connected and when they disconnect.
Note: This blog was suppose to be posted a couple weeks ago, I forgot, i will be updating my posts more with the practice game and actual work for project 2 WEB701 over the following week.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s