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 …
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!
A: Penalty kicks!
We first designed a simple wireframe diagram, to classify all objects and entities in the both parts.
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 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 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.
Here’s a quick video. We added a few fun sound effects as well.
Video - Everyone loves a good finger workout
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.
|5 Design Tips For Real Money HTML5 Games|
|4 Common Missed Opportunities in Reskinning Games for Brands and Agencies|
|Split Screen Chromecast HTML5 Games|
|Funny Faces: Spatial Memory Game for Kids|
|HTML5 Game for Cognitive Training|
|Classic Game of Tic Tac Toe with New Fun Features|
|4 in a Row: Two-Player HTML5 Game with a Chat System|
|Smart Soccer: Physics-based Game with a Smart AI|
|New 3D Game: Jumpee Land|
|Escape from Aztec: New and Exciting Endless Runner Game|
|Social Blackjack: Card Game with Friends|
|Wasteland Warriors: a real time multiplayer game|
|We built a Google Chromecast game|
|Rising Cost Per Install In The App Economy|
|New HTML5 Game: Monsters and Cake|
|New HTML5 Game: Street Fight|
|New HTML5 Game: Taxi Pickup|
|Merchandising done right|
|Superbowl Ad Recap : Clash of Clans|
|The Old Game Flow Design|
|New HTML5 Game: Guess The Celebrity|
|New HTML5 Game: Leave Me Alone|
|HTML5 Endless Runner: History and Design Thinking|
|New HTML5 Game: Snowball Office Fight|
|Thinking HTML5 with castle walls and moats|
|Thoughts on Supercell videos|
|New HTML5 Game: Hidden Objects Pirate Adventures|
|Would a brand spend $20,000 to acquire 10,000 users?|
|New HTML5 Game: Banana Jungle|
|New HTML5 Game: Snowball Fight|
|New HTML5 Game: Totem Volcano|
|New HTML5 Game: Shark Attack|
|Good old times with OpenRA|
|New HTML5 game: Pop Star Dentist 2|
|Indie Reality Check: Guidelines|
|New HTML5 game: Slots Beach|
|HTML5 Game Development Workshop|
|How we can all learn from Jay-Z|
|Product launch: Triumphs and Tribulations|
|3 AM days and ways to avoid them|
|When the errors keep coming, what do you do?|
|What a great producer does|
|Mini-Detachment Experiment 1: Stop reading tech news|
|New game: Monster Mash|
|Gmail is winning on mobile|
|Why software matters|
|Serendipity as a game mechanic|
|A blast from the past: Buenos Aires|
|Upcoming event worth attending|
|New game: Sector 49|
|New game: Vampire Dress Up|
|New game: Kitten Bounce|
|New game: Ships and Monsters|
|iOS7 Mobile Safari: Big Branding Opportunity|
|New game: Mouse and Cheese|
|New game: Whats My Brand?|
|New game: Royal Princess Dress Up|
|New game: Feed the Grandma|
|New game: Pop Star Dentist|
|Mobile first mentality|
|How to focus|
|On raising money|
|98 percent of everything is crap|
|Common Fallacy #1|
|Offline advertising done right|
|Blogging from the phone|
|Avoid gatekeepers, and focus|
|Refresher - Mobile HTML5 browsers|
|A dataset that I enjoy|
|On the Paul Graham accent debacle|