The Chromecast USB device is thought of as a device to beam content onto big screens. Its mainly used to beam movies and tv shows.

This “casting” action is done by sending bits wirelessly from phone to the Chromecast USB, attached to a giant screen.

Being techies, we often wonder …

What if, we could build a game with Chromecast?

We spent some time looking into the documentation. It appears that the phone (sender) can be programmed to beam data to the chromecast USB (receiver).

Based on this simple theory, we could build an interactive game. We could have the user *do stuff on the phone, and the results *get beamed onto the big screen.

We set about building a soccer game. We narrowed it down to the one thing people love seeing: goals!

Q: What’s the closest thing to scoring goals?

A: Penalty kicks! We first designed a simple wireframe diagram, to classify all objects and entities in the both parts.

Flow diagram for the game

Figure 1 - Clear separation of the flow

We split the project into 2 teams.

Team A worked on the sender app, using Android, Cordova and HTML5.

Team B worked on the receiver app, using HTML5.

Both teams had to work on their own challenges, as well as communicate with each other by setting common standards for transmitting data.

Team A’s challenges

Team A had to build an Android (Cordova) app that has a small HTML5 game, that allows user to flick the soccer ball. The view captures that of the player, looking down at his/her feet.

It was initially tricky to place the game into Cordova, but we managed it with a good frame rate. The next challenge was having the phone sync up to the Chromecast USB. This involved careful, step by step following of instructions in the developer docs. Once that’s done, we had to translate that into actionable code in the app.

Team B’s challenges

Team B had to design the goalie and goal scene. They had to figure out where the ball should come out from, given a set of data passed over by the sender app.

Based on the data (generated by the user’s swiping motion), the soccer ball should move/curl accordingly, into the goal net.

To make it challenging, we had a rather smart goalie who would block the user’s shots, deflecting it away from the goal.

The game loop is kept simple: score as many goals with 10 shots. Once the 10 shots are done, we show a quick rundown of results.

The entirety of the receiver is written using HTML5, our top choice for multi-platform code.

Demo

Here’s a quick video. We added a few fun sound effects as well.

Video - Everyone loves a good finger workout

Screenshots

Figure 2 - Goalie is chilling

Figure 3 - Goalie working hard to block that shot We hope that this article serves as a blueprint for future innovation in Chromecast games.

Ping us if you’ve made something cool, and would like to share it.