Handle input/Synchronize states WEB701 P2

Last part of the tutorial, is handling states, the server needs to control client states, in a multiplayer game, both client and server simulate the movements, then the server will send states to each client updating the positions of the clients in the game. In the tutorial we synchronize a minimum set of information and trust the client side. This is how it is done:

  • when a player issues a command (movement and fire), the local code will not handle it directly.
  • It will be sent to the server, the serve will then loop through all clients and send the clients input
  • each client will apply this input to the client side copy of the Tank
  • the Tank handle the input sent by the server as it was issued by a local input

also each time an input information is sent, we will send the information about each tanks position, this information will be used to synchronize tank states with all connected clients. This is the code that will handle this.


Reminder: Methods using exports namespace can be called from the server.

The updateState method will update Tank.Cursor with the shared input but will also correct the Tank position and angle. Now to handle this into the Tanks update method, we need to edit the Tank.prototype.update and add this code.


in this piece of code we are first detecting if the local player had made an input like, mouse click of WASD, if they have we send the information of the input to the server through the eurecaServer handleKeys method this method will then send back the input to all connected clients.

Now we begin working on the Server side code.

First we need to allow the newly declared client method into the server (updateState)


Then we declare the handleKeys method, which was mentioned above. However i changed the method name to handleState, as it makes more sense to me.


And then a modification to the handshake method.


I actually can’t show you the change because in the earlier blogs i showed the finished version. But it was there.

If we start the server now and run the game, both players can be seen in different locations on each screen. If you move one in one screen it will move in the other.


Now that this tutorial was finished, i began working in my own code and modifications to the game.



Part 2 of Practice Game + Discussion

So in this practice multiplayer game, the server needs to keep track of all connected clients in the game, each client will need to have their own unique ID, this will be generated by eureca.io, the unique ID will be shared between the client and server, it will allow the synchronization of the players data and make correspondence remote clients and Tanks.

So when a client connects the server will create a new ID, the server will send that ID to the client, the client will create the game scene with the player’s tank and the ID will be assigned to the Tank, the client will then notify the server that everything is ready on the clients side, the server will get a notification and call the Spawn method for each connected player, the client will spawn an instance of each players tank to display on their visual, when a player disconnects the server will be notified and will remove that players ID, when a client is removed from the client list their tanks will disappear from the game as well.



Here is an image of what was discussed, and if we disconnect then this will show up.


Eureca.io instances use a special namespace called “exports”, all methods defined under the namespace become available for RPC(Remote procedure call).

We implement the code shown below to just that.


This code is added below the eurecaClientSetup method that was shown in the last post. The above code is three methods that will be callable from the server side.

In the code you will be able to see a line of code that goes like this :
This is the client calling a server side method. That will be discussed in a minute.

After this we do some work on the Server side, start off by telling the eureca.io the client methods implemented before are trusted client functions, if we don’t the server will refuse to call them, client/server development we should never blindly trust the client. The next screen shot is basically telling eureca.io to trust the methods of the client and create a clientList object that will hold clients data.


We also make changes to the onConnect and onDiscconet methods.


The client also call a server side method, and here is how it is declared.


So now if we start the game again and we open up two windows with this game, two tanks should spawn, like the image at the top, however that top image is a screen shot with finished code. But yeah pretty cool.


While working on the practice game, I thought that this practice game may as well be the basis of my game, not everything in the game, but just the general functionality, so when I develop my game for project 2 of WEB, this tutorial will be the basis of my game to some degree.

I also talked to my expert friend about designing this game to work as a mobile app, he suggested using CORDOVA to make that happen, so research into CORDOVA will be needed. But he said to focus on a more easy feat before thinking of that, like hosting the game on a global server should be the first step to creating this game, well actually designing an coding the game will be the first step, then I will need to test that it can work over a server which I will use eureca.io as the testing, then I will finally try get it onto a global server, this is what i will try focus on first before trying to deal with CORDOVA.

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.



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.


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
After this was added and saved, I ran this next piece in the terminal : node server.js
This starts the server for our game.


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

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)

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.
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.
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.


Copied exercise

Description of area of IT that interests you

I am interested about game development and virtual realities/environments.


Why is it interesting to you

I enjoy playing games and want to create my own in the future and with virtual environments i want to create an immersive game for people to play.


Three things you know about it

  1. Virtual Environment techniques for manipulating and grabbing objects.
  2. Immersion and presence for virtual environments .
  3. Game dev relies on a lot of trial and error
  4. Polhemus Isotrak – position tracking device in virtual environments


Three things you believe about it

  1. I believe that virtual environments can help people
  2. I believe it takes more than one person to create something within this subject
  3. I believe that virtual environments will lead technology into the next greatest game tech discovery or something


Three things you don’t know about it

  1. Technology behind virtual environments
  2. Creation the virtual world in panoramic views for immersion
  3. Creation and deploying of an online game, real time application
  4. Implementing objects in virtual environments
  5. 3-D maneuvering
  6. Navigation


Find an online resource about it – (post url)








Construct 10 (interesting!) questions about your topic


How do you implement 3-D Maneuvering ?


Should i know about photography in order to understand panoramic views?


What process will i need to know in order to create a fully functional immersive world?


What software applications will i need in order to create a virtual game environment?


What should i know about virtual environments before trying to create one?


Who would be some good people to talk about or read about in terms to game creation and virtual environments?


Who is the leading company when it comes to virtual environments?


What sort of software do you need for virtual environments? (in general)


Does the head-mounted display and hand controllers require you to incorporate code for them to be able to interact with objects in a game? And if yes, how do you do that?


How well do traditional game mechanics transfer over to virtual environment?


I’ve decided to use these CMS’s for WEB701, WordPress, drupal and silverstripe. The installation of silverstripe was a bit annoying because in order to install it you need to have xampp running php 5.6, for some reason php 7 does not work, in order to get around this predicament, I installed a 5.6 version of xampp instead of deleting the old one. I’m going to see if it would let me run to xampp versions at the same time, and just change the port numbers, this is purely just for practice for milestone 2.

Success! i can now run php 7 for drupal and wordpress and run php 5.6 for silverstripe. I had to change the port numbers of the xampp 5.6 , apache to port 84, 443 and mysql to 3307.


Silverstripe is now installed and all up in running ! for me to start editing. However this is only running off my local machine.

RES701 Reading Exercise

Did the abstract tell you the three things it should?

The abstract told me what the research was about, what the authors did, how they did it and what they were able to create from the research they were conducting.

What seems to be the research question(s) they were trying to answer?

From what I understood, the question they were asking was which method is the best for manipulating objects in an virtual environment and if they could create hybrid techniques from the existing techniques.

What method(s) did they use to answer the question(s)

I think they used Secondary Method, Observational Research and Exploratory Research.

How credible is the paper?

I believe the paper to be very credible, because they have used existing data on the subject for most of the paper, which was the information on the different techniques for gabbing and manipulating objects in VE (Virtual Environment). This paper was also partially supported by the National Science Foundation.

Agree with conclusion?Why?

I agree with what they have written in their conclusion, because they have used valid information to conduct their research and also done test with people to finalize their theories, which then lead them to be able to create their own technique.

Two things I learnt?

I learnt about the Go-Go Technique which is an immersive technique of grabbing an object, this technique allows the user to reach for objects at a greater distance.

The Ray-Casting technique is another grabbing technique where a light ray extends from the user’s hand, the ray intersects with an object, with the ray and the releasing of the button the object will attach to the ray, allowing the user to then manipulate it using hand gestures or arm motions.


This paper describes the immersive techniques used to grab and manipulate objects in a virtual environment. The researchers/authors describe existing techniques in a brief paragraph then move onto explaining the more popular techniques in more detail, explaining how they work, their best features etc. They got volunteer students to participate in using the various techniques in order to get a more data, they used head-mounted displays, polhemus trackers on the head and hands and a mouse. They were then fully immersed into a virtual environment, they asked questions while the students were immersed, asking what they thought were the strength and weaknesses of each technique. they were then able to create, the results of the test and have a discussion, then development a small table with relative data.  The purpose of this research was so they could use the strengths of the various techniques to create their own hybrid technique, cutting out the weaknesses of the usual ones, this was for increased usability. The researchers were successful in creating their own technique, which was called H.O.M.E.R (Hand-centered Object Manipulation Extending Ray-casting), this hybrid technique grabs objects using the light ray but the object doesn’t get attached to the light (like with ray-casting), the virtual hand moves to the objects position and the object is attached to the hand, once the virtual hand drops the object, the hand returns to normal position.


Academic Papers

Academic Paper one:

Title: On Temporal-Spatial Realism in the Virtual Reality
Authors: Jiandong Liang, Chris Shaw and Mark Green
APA: Liang, J., Shaw, C., & Green, M. (1991, November). On temporal-spatial realism in the virtual reality environment. In Proceedings of the 4th annual ACM symposium on User interface software and technology (pp. 19-25). ACM.
How: I found the paper using google scholar, using the keywords ‘Three dimensional navigation in virtual reality’.
What kind of article: Research Article
Reasons: The content contains research information, experiment results from what they researched.
How it fits: This research paper fits very well into the structure of academic paper.
References: 8 references
Citations: No idea
URL: http://citeseerx.ist.psu.edu/viewdoc/download?doi=
Interested? Yes, this research paper talks Polhemus Isotrak which is a orientation and position tracking device in VR, they discuss how this device when used dynamically to determine the line of sight for example a head mounted display, the noise and delay in its measurement data causes temporal-spatial distortion, perceived by the user as jittering of images and lag between head movement and visual feedback, they discuss how to approach this.

Academic Paper 2

Title: Quicktime VR – An Image-Based Approach to Virtual Environment Navigation
Authors: Shenchang Eric Chen
APA: Chen, S. E. (1995, September). Quicktime VR: An image-based approach to virtual environment navigation. In Proceedings of the 22nd annual conference on Computer graphics and interactive techniques (pp. 29-38). ACM.
How: Using these words in google scholar “Virtual environment navigation”
What kind of article: Research Paper
Reasons: Research information, experiments, test results.
How it fits: 10/10
References: 31
Citations: 1948
URL: http://publicationslist.org/data/melslater/ref-232/pres5.pdf
Interested? Yes, they discuss the method of creating a virtual environment using 360-degree cylindrical panoramic images.

Academic Paper 3

Title: An Evaluation of Techniques for Grabbing and Manipulating Remote Objects in Immersive Virtual Environments
Authors: Doug A. Bowman and Larry F. Hodges
APA:Bowman, D. A., & Hodges, L. F. (1997, April). An evaluation of techniques for grabbing and manipulating remote objects in immersive virtual environments. In Proceedings of the 1997 symposium on Interactive 3D graphics (pp. 35-ff). ACM.
How: Google scholar ‘immersive objects in VR’
What kind of article: Research Paper
Reasons: Research information, experiments, test results.
How it fits: 10/10
References: 9
Citations: 598
URL: http://publicationslist.org/data/melslater/ref-232/pres5.pdf
Interested? Yes, they discuss grabbing and manipulating objects in virtual reality and the implementations and techniques that allow manipulation.

Web701 IA Blog

Information Architecture
This is a blog solely about the information architecture documentation for milestone one.

Before working on the document itself i needed to read and analyse the project brief given to us to work off of. Using the project brief i was able to figure out a basic understanding of the requirements for the website and produce a basic introduction and user requirement.

Web milestone one
Project Brief^

At first working on the user requirements, I had no idea what it involved at first but had a general understanding that it had something to do with website requirements or at least the user side requirements for the website, but i had to research it anyway. In the user requirement area i talked about general functionality of the website which is basically what it said to write about with user requirements. With the general functionality i basically talked about the functional requirements and how everything will work on the website, not in great detail though. Basically what i hope it will end up doing.

How I ended up doing the information architecture was by using the WEBMONKEY website, they have the tutorial, so i followed the tutorial basically.

After completing the introduction and user requirements, moved onto working on the site goals, the goals were not clearly made apparent in the project brief but from what they have said, i was able to deduct a purpose, short term, long term goals, an intended audience and why people will come to the website. This was the first part of the information architecture tutorial.

Defining the user experience was the next phase of working on the information architecture, the audience list i had written down were as followed:

  • Domestic businesses – purchasing
  • global businesses – purchasing
  • individual buyers
  • other growers

I didn’t think about adding people who were interested in joining the website, they would of been a good addition to the information architecture. Next i had to carefully analyse each audience’s needs and goals of using the website.


Moving on to the scenarios of the each audience, basically i just made up a story of how each audience would use the website. I should of explained how they could of used the auction system of the website. This completed this part of the information architecture.

Next moving on to the competitive analysis, i had to find some websites that worked in the wool industry or whatever. In the project brief they mentioned a website that interested them which was Wine Nelson. The other two websites in analysed were Wools of New Zealand and New Zealand Wool Services. First thing to do was draw up a competitive grid and rate certain aspects of those websites out of 10.


Next thing to do was talk about the pros and cons of each website, this was helpful to me because i was able to think of functions and what not that would be helpful for the website i will be developing. By taking certain aspects of the website and adding them to the one that will be in development. Taking screenshots was also a good way to display information in the IA. I did this for each of the websites. After finishing analyzing each of the websites i had some idea of what the website would look like and function.

Working on the Site Content this is where i discuss the content and functional requirements of the website. After which i then grouped the content into a diagram of sorts .


Not perfect but i think i was able to this correctly.

Next was the site structure this park i had a lot of trouble with mainly with the, metaphor explanation, which i kind of know for a fact i may not have done correctly but did what i could. Site structuring list was next.

The next part of the IA was working on the architectural blueprint, which is thought i did a great job with, i created my own legend so that who ever was viewing it would know what the different shapes were.


Next on the list, i worked on global and local navigation, explained what those systems would be, after which i spent the last piece of the IA working on visual design, layout grids and page mock-ups which are im pretty sure, exact representations of the website to be, but not exactly everything.

example of the IA work.

And this is the end of my IA blog.

WEB701 Project 2

Today’s class was based around choosing a topic for our individual project, Project 2!

Project 2 is about exploring and developing on the edge of web tech space! basically choosing something to do with the internet. At first i was interested in the idea of Cordova, which seems to be a type of programming that allows the creation of mobile apps using HTMl, CSS and JS (javascript), which i thought was pretty cool, I’ve only ever thought of using software devs to program mobile apps, this has widen my view.

Looking more into other web based development tools, also came across Meteor, which is a open source platform that performs in dealing with RTA (real time applications), this is more to do with, webchats, online gaming etc. This was also an interesting idea, and i was thinking about creating a webchat type application, but I’m really quite interested in doing an online mobile game, using javascript, meteor does support some form of game development but not in the ways of what i want to do.

So next I looked into JavaScript game development tools or something along those lines and ended up with something like this.

I am going to make a real time game application for mobiles. Unaware of the type of game to create at the moment. I will be using phaser, which is a desktop and mobile HTML5 game framework. Phaser is a library for JavaScript that builds on top of another API called Pixi and Pixi is built around WebGL. WebGL is a low-level graphics library that communicates with the hardware. Phaser also comes packaged with webaudio which is for sound. Phaser is programmed in JavaScript and I will be writing JavaScript code to make things happen.

I will be using Brackets software as my editor for writing up javascript code. I am already running a local web server Xammp, the reason i need xammp is for browser security according to information provided on phaser website.

I will be learning about phaser and other tools that are required for this application through several tutorials provided through the website.

Phaser can be exported to android platforms which will be part of my project for project 2.

Virtual Reality : In Gaming

Virtual reality is a user interface that involves real time simulations and interactions through multiple sensorial channels. VR is able to immerse some one into a computer generated world where you can then explore imaginary worlds. VR gaming is where a person can experience being in a 3D environment and is able to interact with that environment during the game. Gaming is not the only use of VR, however it is the most popular use. VR has been used in research and teaching students as well.


Biosensor – a device which uses a living organism or biological molecules, especially enzymes or antibodies, to detect the presence of chemicals

Virtual Reality works by using a collection of technological devices. A computer with the capabilities of running 3D visualization, a head mount, and data gloves to equipped with position trackers. These trackers sense the position of the user and send reports to the computer that will then update the display.

Head Mount –  is a display device, worn on the head or as part of a helmet, that has a small display optic in front of one (monocular HMD) or each eye (binocular HMD).

Data gloves – A data glove is an interactive device, resembling a glove worn on the hand, which facilitates tactile sensing and fine-motion control in robotics and virtual reality. Data gloves are one of several types of electromechanical devices used in haptics applications.

Bio-sensing – new way of detecting a person’s presence in a game is bio-sensing. These are small sensors which are attached to a data glove, suit or even the body and record movements are interpreted by a computer and trigger a variety of response within that space

The concepts behind virtual reality are based upon theories about a long held human desire to escape the boundaries of the ‘real world’ by embracing cyberspace. Once there we can interact with this virtual environment in a more naturalistic manner which will generate new forms of human-machine interaction.

The aim of virtual reality is to go beyond the standard forms of interaction, like a controller or mouse and keyboard. Most people use these on a daily basis. But a virtual environment allows someone to become fully immersed in a high visual world, that they can explore using their senses.

Next blog i will be discussing the future of virtual environments and where it is heading.

How virtual reality gear works: