Tuesday, June 04, 2013
Last week we launched Roll It, a Chrome Experiment that links phones to computers and gets people out of their chairs and swinging. We wanted to share how we built a physical game experience with no dedicated hardware. It requires just the web, your computer and a phone.
Here’s a look at the APIs and browser-based features we used to create it.
Roll It is a three-dimensional (3D) experience, from the swing of your phone’s accelerometer right up to the virtual models rendered on your computer’s HTML5 Canvas. On the phone side, we hooked into browser events like DeviceOrientation and DeviceMotion to detect the speed and direction of a swing. On the computer side we rendered our scene using Three.js and plugged in Physijs to add physics to the ball and environment.
To sync the phone to the computer we employed WebSockets which enable rapid two-way communication between devices via a central server.
For extra stability we built our backend on Google Cloud Platform:
- Our Google App Engine application, built in Go, dynamically balances users across our relay servers.
- A Google Compute Engine server maintains game state across synced devices.
- Google Cloud Storage speedily serves up the static assets.
To dig deeper into the technology behind Roll It, check out the HTML5 Rocks Case Study, or join the team for a Google Developers Live event this Friday, June 7, 2013 at 5pm GMT for an in-depth discussion.
Posted by Pete LePage, Developer Advocate and Boardwalk King