HTML5 Game Development
   
  • HOME
  • News
  • Tutorials
  • Engines
  • Demos
  • Tools
  • Partners
  • Mobile HTML Game
  • Guess The Celebrity
  • About us

Building a Google Chromecast Game

Building a Google Chromecast game

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 game developers, 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

Figure 1 – A simple flow diagram

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 youtube. We added a few fun sound effects as well.

Screenshots

Goalkeeper chiiling


Figure 2 – Goalie chiiling

Goalie working hard to block the shot

Figure 3 – Goalie working hard to block the 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.

Share List

You might also find this interesting:


  1. HTML5 Game Development Facebook, Twitter and G+ The official HTML5GameDevelopment.org Facebook page up at: http://www.facebook.com/Html5GameDevelopment The official HTML5GameDevelopment.org Twitter account is at: https://twitter.com/#!/gamedevhtml5 The Google Plus page is up at: https://plus.google.com/b/106608051085232600929/ All are updated automatically via the...

  2. 4-Part Creating a Simple Windows 8 Game with JavaScript Tutorial Chris Bowen has written a 4-part series on SitePoint on creating a game for Windows 8 using JavaScript. The tutorial series walks you through the steps of building Catapult Wars,...

  3. Developing Split Screen HTML5 Games on Google Chromecast Google Chromecast is a streaming device that connects your mobile device to your TV. In the past, it was mostly used for watching movies or playing music. But these days,...

  4. Commentary on: 5 Best Practices for Building HTML5 Game Kai Jager writing for MSDN has posted 5 tips for best practices for writing HTML5 Games – here’s his 5 tips (with my comments on each): 1. Use a framework...

  5. Building a 3D engine in HTML5 Marius Gundersen gave a well-received talk at OnGameStart 2011 on how to build a 3D engine using 2D canvas in HTML5. The check out the HTML5-based slide deck (with interactive...

Chromecast-4, Games-4, HTML5 Game Dev Tutorials, HTML5-4, Impact.js-4

License HTML5 Games

Are you a company looking to license HTML5 games? We recommend MarketJS.com, a B2B platform for licensing games.

MarketJS has over 300 HTML5 games for licensing. They also provide additional services such as game reskin, custom development, and white label portals.

Html5 Game Development


Follow @GameDevHTML5



WHAT’S NEW

  • Game Localization For Food Delivery App

  • HTML5 Games in Guest Room Tablets

  • What’s New in Phaser 3.50

  • Particle and Sprite Editors in Babylon.js 4.2

  • Healthcare Industry HTML5 Games



NEW DEMOS

  • Vertical Endless Runner Prototype

  • Particle and Sprite Editors in Babylon.js 4.2

  • Song Maker in Google Experiment

  • Phaser 3 Experiment for Drawing Cards

  • HTML5 Game for a Recycling Campaign


ENGINES

  • Phaser 3 Game Object Pools Tutorial

    Memory allocation inside update loops often causes framerate problems in real-time gaming. One of the best solutions to this is to use Object Pools in Phaser 3. An Object Pool …Read more

  • Games During The COVID-19 Pandemic

    There so many effective ways to engage your audience with HTML5 games. Here is an example of how to run a game campaign to keep users motivated during difficult times. …Read more

  • Building Simulated 3D HTML5 Games With Phaser

    Phaser is commonly used as a 2D game engine for creating HTML5 desktop and mobile games. However, with the help of three.js and Phaser 3D library, you could render your …Read more

SEARCH OUR ARCHIVES

CONNECT

rss twitter

HTML5 Game Development is proudly run by 3P Solutions Inc

GOT NEWS?

Send new engines, demos, information and tips to hello@html5gamedevelopment.com

MONTHLY MEETUP

In boston? Join us for the Monthly HTML5 Game Development meetup.

BOOKS

We're in the process of writing a few books about game development. Coming soon!

Copyright HTML5gamedevelopment.com