Chrome Web Store Games: Sketchout
Chrome Web Store Games: Sketchout
Launch the Site

Save your planet from destruction!

The Chrome Web Store team approached Fi to create this compelling and visually stunning HTML5 game. We created an immersive and fun take on a classic old-school game using Google’s cutting-edge browser, Chrome. In the game you are defending your home planet from an incoming invasion. You can draw ‘constellation shields’ to protect yourself from missiles, and should any get through those defenses you have a final shield that follows your mouse. You level up by hitting the alien ship, and you lose if any missiles hit your home planet.

Project Screenshot

The Concept

With any game you want the players to invest themselves emotionally, to really want to succeed. This is the basis of creating an addictive game, and is what Fi has delivered. Ultimately we want people to feel a little bit of panic when the alien ship launches its missiles and satisfaction at sending them right back.

As you reflect the incoming missiles they will strike the alien ship’s defenses. Once they are broken down you have an opportunity to hit the alien ship itself. Doing so will cause you to level up. There are four levels in the game and the final level is extremely brutal as the alien ship goes all-out to hurt you. If you beat this level you have completed the game.

On the design side we wanted the game to feel balanced so that it was both random and unpredictable to keep it interesting but at the same time it needed to be fair and enjoyable. The game is simple and fun, but there is enough challenge for people who have lightning reflexes, so anyone who enjoys a casual game should feel right at home.

Design

The general design direction was to make a futuristic and simple space-inspired game with comets shooting at you. The idea was to create a more advanced version of the popular game Breakout, but we have two different defense mechanisms instead of one.

Tech

The most challenging part of development was surely the collision detection maths required for all the moving parts. We have to perform a lot of calculations to determine if a missile is hitting a shield and then, if it is, we need to reflect the missile. Maintaining a high frame rate when rendering a large canvas was a big undertaking as well. In the end we heavily optimized the number of collisions we needed to handle and the game can accurately handle lots of missiles and shields on screen at once.

The game primarily uses the HTML5 canvas tag, which is a relatively low-level but powerful rendering engine. A major challenge of using the canvas tag is that very little is done for the developer as compared to using a longer-standing platforms such as Flash. This also brings a great strength with it, too: we can focus on creating the purest experience possible, ensuring only what is needed is included in the game engine.

How to Win

Click and drag your mouse below the middle line to draw out constellation shields. Any missiles that hit these will be reflected back towards the alien ship. If missiles get past your constellation shields you have a final shield that follows your mouse position. Whatever happens you mustn’t let any missiles hit your planet.

Quick tip: don’t try to draw long constellation shields. The game prevents you from drawing anything too long so you should draw in short bursts, ideally near the middle of the screen. Drawing little and often is the key to success.

The Result

We ended up with a really fun and addictive game that showcases the power of the canvas tag and Google’s Chrome browser, which is one of the best in the world. We used a cutting-edge technology to create a unique experience that runs natively in the browser. We think the game is so fun and quick to pick up that people who install it will come back to it time and again to see if they can beat their high score.

Components

A collection of components from Chrome Web Store Games: Sketchout

Project Icon

Client
Google

Release Date
December 8, 2010

Technologies
Flash
Canvas
JavaScript
HTML5

Similar Projects