CUBE SLAM

A Chrome Experiment

CUBE SLAM

Cube slam a face-to-face ‘pong’ inspired game which you can play either against the ai or your friends anywhere in the world – by simply share a unique link. The main objective by creating cube slam was to show the world the capability of webrtc which makes it possible for users to communicate with sound and video inside the google chrome browser.

We were very certain about what we wanted to do with this game from the beginning, to take a classic retro game and modernise it as a tribute to the gaming community. Not only by modern 3d graphics (webgl), but also new and fun functions to spice up the game experience.

POWER-UPS AND
BOB THE BEAR

In order to win against your opponent you have to hit your friend’s screen three times until the screen explodes. To make variations for each level besides increasing the tempo, we also added obstacles, shields and gravity fields that varies within the levels. In order to make the game experience more fun we decided to include various power-ups such as fireballs, lasers, multi-balls, mirrored controls, bulletproof shields, fig, ghost balls, time bombs, resized paddles, extra lives and death balls – which obviously is something you don’t want to hit. If you can’t find anyone to play with you can always play against ‘bob the bear’, a bear that might be just as hard to win over as your friends.

TECHNOLOGY

The cube slam music-tracker and sound manager are built on the web audio api, allowing for a dynamic soundtrack that adapts in real-time to every level you reach and extra you unlock.

If you play cube slam on chrome or firefox, you’ll see real-time 3d rendering enabled by webgl and three.Js. If you don’t have webgl, you can still play cube slam in 3d thanks to css3, with the same game engine running under the hood. All the graphics run on your gpu, freeing the cpu for other tasks.

Cube slam is built entirely on google cloud platform. The app is hosted on google app engine with a backend written in go, and the channel api is used to set up the connection with your opponent. If one of the players is behind a firewall, the game uses a stun/turn server hosted on google compute engine to exchange data. Pagespeed helps things load quickly, and appcache lets you play offline.

You can check out cube slam’s source on google code or in the chrome developer tools (you’ll need to enable source maps). Also, as a reward for reading this far: you can add the ?⁠dev parameter to the url to enable dat.Gui and tweak all the levels, extras, and other attributes of the game.

RESULTS

10,000 max concurrent users at once.
2 million unique visitors in the first month.
Fwa site of the month
Adobe the cutting edge project of the week
Runner up for cutting edge project of the year
Awwwards site of the day

CLIENT:
GOOGLE
AGENCY:
NORTH KINGDOM
ROLE:
SENIOR DESIGNER, ANIMATOR
CREDITS:
ROBERT LINDSTRÖM ART DIRECTOR
FÉLIX HILL 3D ARTIST & MOTION DESIGNER
MATTHIAS LINDGREN – 3D ARTIST