Flash image replacement!

PocketShip is a unique game which allows players to join a communal experience on a projector (or any other display) by visiting a site with their handheld device. Visiting pocketship.dyndns.org presents an app-like interface where users customize a spaceship then fly their ship around a shared environment with other users, with the occasional mini-game to spice things up.

PocketShip was created as a 3rd year project in IMD (interactive media and design), a program split between Carleton University and Algonquin College. The result of this is a display spot at this years FITC. The opportunity has been wonderful and we have Algonquin College to thank for it!

Project members include:

• Chris Atallah – chrisatallah.com
• Chris Burt – chrisburt.archonic.com
• Joshua Mark – archonic.com
• Kevin Paquette – kevinpaquette.com

Our instructor for the course of which PocketShip was the term project is the talented James Acres.

How it works

Initial drive train design was quite complicated, but after researching node.js and Unity 3.0, we were pleasantly surprised with how simple it became.

HTML and Javascript on hand held device

Once the client.html is served, the client is connected to the socket server which is has already been created by node.js. All information is on a single html page and what the user sees changes via changing a div’s “visible” css property. This was inspired by jQTouch which we ditched it since it was more than we needed and only added swoopy transitions. Once “join the game” has been hit, it will load the flying interface which is different depending on what the user’s device is.

If the user has an iPhone with iOS 4.2+, then the browser can pass gyroscope data by accessing the javascript references event.alpha, event.beta and event.gamma. This means you can steer your ship by tilting the phone (super awesome!). To make it more usable you have to watch for the window.orientation event as well and change the gyro-to-game behavior. This is because when the browser changes orientation, it will swap event.beta values by 90 degrees which can cause your ship to suddenly steer sideways.

Devices not of the iOS 4.2+ breed have either spotty or no gyroscope browser access. We needed to create a non-gyro interface anyways so we stuck to this simple check – if accessing event.beta returns anything other than “0″ or “null”, then load the gyro interface. If not, go to the touch interface. Touch events are also different between devices however. You can read more about gyro and accelerometer browser access here.

The touch interface accesses, depending on the device, either the “touchmove” event or the “MozTouchMove” event. This covers mozilla mobile, and all known webkit versions (including Safari for iDevices and Android). Devices and browsers we couldn’t accommodate include Blackberry, some Sony and Samsung devices using NetFront based browsers, and Opera Mobile. Any smartphone without a touchscreen is obviously not supported either. There’s a massive variety of devices, operating systems and browsers in the mobile eco-system and all we or anyone can do is attempt to accommodate the majority of users within the effort constraints of the project. We apologize if you could not participate due to incompatibility.

node.js Socket Server

node.js has been a pleasure to work with. Once configured, it serves as an excellent out-of-the-way middle man between PocketShip clients and the game. There’s a few things to note about setting it up though. If you want to have it work on a paid server, you may have difficulty running it if you’re not the root user. If you set it up on your home computer using something like XAMMP, keep in mind the server created by node.js is just for socket connections. Your images will need to be hosted on a web server which node.js by itself does not provide.

PocketShip the Game, running Unity 3.0

Unity 3.0 has been an even greater pleasure to work with. With drag-and-drop functionality, excellent tutorials, built in shaders and particle systems and a socket listener, it’s allowed us to create an impressive result in a limited time. The group is considering using Unity for our senior project as well as a result of the success here.

We hope you enjoyed our little demo and thanks for your interest!