About Starshooter

Starshooter is a game about shooting stuff in space. It shoots automatically and the player controls the aiming point with a phone sticked to a wheelchair. The goal is to shoot as many planets as possible with in the time limit.

Motivations

The main theme of the second project in AGI project 2 was to create a game that could be help improve people's the daily life. We decided to create a game to help people learn how to use a wheelchair. Especially, this game helps to learn how to tilt correctly with the wheelchair.

Furthermore, another motivation was to learn how to code with the WebGL/Three.js library. During our first projects in Advanced Graphics and Interaction, we used Unity, a game engine, to develop our games. So for this project, we wanted to come back to classic computer programming.

Technology

Three.js

Three.js is a Javascript library for creating of 3D computer graphics in a web browser. It lays ontop of WebGL making it easier to use WebGL. All of the 3D elements in Starshooter are made in Three.js or WebGL.

Node.js

Node.js is a server-side scripting framework where you can easily set up a server using Javascript. The server in Starshooter uses Node.js because it takes no time at all to get up and running when using it.

Socket.io

Socket.io is a Websocket module for especially Node.js. Websockets allows fast communication between the computer browser and the smartphone, which is needed since the phones orientation is constantly sent to the browser.

Challenges

- Phone to server communication

- Using Three.js and WebGL

- Procedural rendering/generation

- Shaders

- Particle system

Lessons learned

- Three.js is a good library to use in computer graphics but it is quite complicated to learn to use it and to debug it because the documentation is not really detailed.

- Three.js examples found on the web generally can be difficult to use because some of them don't use the latest version of Three.js so the code didn't work anymore if you want to use the latest version since some functions have been replaced.

- WebGL is a rasterization API, meaning that all kind of view and camera matrix calculations have to be done by the engineer. Shader implementation, which is possible for vertex and fragment shaders should make use of the Three.js helper function to ease these operations.

- Procedural generation is really cool for this type of endless/runner games. Procedural generation means that you create the computer graphics dynamically using an algorithm, and the strengths by doing so is that you don’t have to model anything manually in beforehand, it gives you smaller file sizes and that the “world” seems to be created more randomly.

Code

You can get the code for this project at Github.

Photos

Videos

Team

Johan Kasperi
Johan Kasperi
Github
Johan Kitti Söderberg
Johan Kitti Söderberg
Github
Omid Ghorreshi
Omid Ghorreshi
Github