The Cutting Edge award

Rob Ford

The latest technology allows us to do more than we ever imagined. But old tech can sometimes inspire us.

In this column, I show you an amazing interactive game that was inspired by one of the original and most influential computer games ever. I also show you a site created by one of the most progressive agencies around that sets the bar higher for agency websites everywhere. Finally, you'll see how high tech is bringing some real-world games to the digital world. I never thought I'd see myself using my mobile phone as a game controller!

Cube Slam

I really love this game. It has an outstanding level of production, seamless video chat, and faultless gameplay that's oozing with personality. Without a doubt, it's one of the most exciting experiences I have seen for quite a while. The game is massively fun to play against the computer, but when you play with a friend and you both have webcams, you go to a whole new level. Beware: it's massively addictive. Cube Slam is a fine example of what can be achieved without a plug-in. Quite frankly, it's remarkable and very exciting.

Watch the trailer for Cube Slam

Cube Slam

Ford: What did you want to accomplish with the site?

Cube Slam team: When we started the project, our objective was clear. We wanted to showcase the capability of a technology that makes it easy to communicate with sound and video through the Google Chrome browser — called WebRTC — and bring it into a game context where users can communicate with each other in real time, face to face, while playing.

We went back and found inspiration from one of the most influential two-player games of mankind: Pong. It's crude simplicity and refined gameplay served as a starting point. But we were also inspired by far more physical stuff — like our own ping-pong table here in the office. The social aspect of knock-out tournaments triggered a lot of ideas in the beginning. Another particular reference that some of you might recognize (and that probably was even more influential than Pong) was the good old Shufflepuck Café created for the Mac in the late '80s.

With all this inspiration in mind, we created a simple mock-up film that manifested our vision — a modern version of an old-school arcade game where you can hook up with your friends instantly to have a good time. It was crucial for us to make the experience somehow retro-modern as a tribute to the gaming community.

The storytelling emerged from one simple question — who is your competitor in single-player mode? Then we started to think about this imaginary visual world, where animals roam. It's quite lucid if you think about it, yet the storytelling makes the advanced technology way more approachable and human. Now you can have an equally fun experience playing against Bob the Bear or playing against a friend.

The graphic design itself is also a reflection of the retro-modern approach — essentially a crazy mix of oblique base colors and low-poly shapes, with a twist.

Ford: What technical challenges did you encounter?

Cube Slam team: From a technical perspective, the biggest challenge was to get the two-player gameplay running smoothly without losing sync and with decent latency [time delay] compensation. The physics have to behave exactly the same on both clients, and everything needs to happen in the same order. Just the low-level precision of numbers in JavaScript can make two simulations diverge and lose sync as the butterfly effect kicks in.

"This is a must-see demonstration of modern web technologies without any plug-in required. A perfect combination of what the new web can do and, above all, a massive and addictive game to share between friends. Information architecture is really impressive too. Amazing experience!"

— Ronan Coat, FWA Judge

Tools used

Adobe After Effects

Adobe Illustrator

Adobe Photoshop

CINEMA 4D

3D Studio Max

WebRTC

Web Audio API

Stylus

Jade

Node components

Chrome DevTools

Hot facts

500 code names before finally settling on "Cube Slam"

5,000+ code commits

10,000 max concurrent users at once

2 million unique visitors in the first month

Legwork Studio

The elegance of this agency's own website, combined with the seamless blend of technology, makes this a calm yet inspiring site for many to be in awe of. Here we see a subtle way of showing innovation, which this agency's work shows in abundance, without going to experimental levels. It's slick, clever, and original — a benchmark for agency websites moving forward.

Legwork Studio

Ford: What did you want to accomplish with the site?

Legwork team: We approached our agency's new website with a few things in mind. First, we needed to do a better job of communicating our capabilities. We have a somewhat unique skill set, and the old site was pretty ambiguous.

When you look at the filters and layout, our goal was to make it easy to immediately understand what kind of projects we work on. Our next requirement was to make it modern in terms of style and technology. The final and most important requirement was to make sure our brand essence was kept intact.

Ford: What technical challenges did you encounter?

Legwork team: We wanted to implement an organic masking animation as a transition between sections of the site. Unfortunately, HTML5 doesn't support transparency in video right now, at least not in any kind of usable capacity. So we came up with a technique using image sequences with transparent PNG files and the Canvas element.

Besides that, we were targeting progressive browsers and people who aren't afraid to use them, so we knew what we were getting ourselves into. We actually implemented fallback versions of our site for old versions of [Microsoft Internet Explorer]. We even built them with tables and other obsolete methods to keep true to the theme of the idea.

"The masking effect that uses Canvas is a very simple idea, but it makes the website look special. Great!"

Roll It

I really didn't expect to ever use my mobile phone as a game controller. Using the motion of rolling a ball into my computer and actually seeing it happen in front of me is just crazy, and it makes me realize that anything is possible with the right tools, technology, and creative minds.

Watch the trailer for Roll It

Roll It

Ford: What did you want to accomplish with the site?

Roll It team: Modern mobile browsers pack powerful features that complement and sometimes rival their desktop counterparts. We wanted to highlight one of those features — live accelerometer data — in a fun way that got users out of their seats and moving their bodies. Syncing phones to computers let us create a game that both utilizes motion data and flexes the graphics power of a desktop system. We were excited by the idea that when devices can talk to each other, the experience becomes more than the sum of its parts. The game isn't just on the phone and on the desktop — it also exists between the phone and desktop.

Ford: What technical challenges did you encounter?

Roll It team: Building and rendering a three-dimensional environment on the desktop presented its own challenges, but the two biggest hurdles were increasing the communication speed between devices and crafting the phone swinging experience to be as consistent as possible across a wide range of hardware.

For our communication problem, we used the Google Cloud Platform to distribute data requests and updates through the Google Compute Engine cluster geographically nearest to the player. This ensured that ping times between synced devices were as low as possible. Finessing the swing interaction required testing on many phones and fine-tuning our code based on those results.

"Great example of Chrome's cross-platform syncing feature that feels like more than a prototype. It's fun to play, better with more people. A fun game first, technological innovation second. Great combo. Great work."

— Jason Curtis, FWA Judge

Tools used

JavaScript (orchestrating game elements)

HTML5 Canvas (desktop rendering)

Three.js framework (desktop rendering)

WebSockets (speedy phone communication to desktop)

Go (relatively new language on back end)

Hot facts

Three people made 1,000+ code commits (lots of furious coding)

Tuesday at 3 p.m. was highest productivity (per repo punch cards, just after the coffee break)

Zero phones broken during swing testing (but a couple near misses)

About the author

Rob Ford founded The FWA Network in 2000. Since then, it has received more than 170 million visits. The FWA Network showcases projects that use cutting-edge technology for desktop, mobile, and offline experiences, together with photography and video. Rob is also the author of three best-selling books on web and mobile.