Fi - The Interactive Firm: Chrome Web Store Games: Celesta

The Chrome Web Store team approached Fi to create this compelling and visually stunning HTML5 game. Celesta is a music-based game that is visually engaging and incredibly easy to start playing whether you’re a pro or a beginner. The object of the game is to protect your ball as it rolls through a path filled with holes. Users must cover the holes by pressing arrow keys in sync with the beat and rhythm of the music.

The Concept

The concept was inspired by games like Guitar Hero and Rock Band since we’re all big fans of the franchise. As with any game development process we started out with a rough concept of what we wanted to build and continued to refine the idea as we developed each section of the game.

Our main objective was to create a light, creative and simple experience for users. By simply strumming a couple of keys users can generate not only sound but also a pleasing visual response. If you can keep your ball alive for long enough, you reach the next level, which has more holes and runs at a higher speed.

Design

The design aim was to convey the upbeat and positive mood that characterizes the game, so for instance we used a lot of light colors and added moving clouds to the background. The game appeals to a very broad audience since it has almost no learning curve and an aesthetic that appeals to a wide range of people. Friendly, fun, heavenly and musical would be the keywords to describe the look and feel for the game. It's a simple visual solution for a game where precision is key.

Tech

The game depends heavily on the visuals working in harmony with the music so it was very important for us to make sure they never fall out of sync. Accordingly we decided to base progress in the game on time rather than frame rate. This means that even if your computer were to perform at half the intended visual frame rate, you will be moving forward as quickly as if you were running at the intended 60 FPS.

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

All you need to control the game is your keyboard, namely the UP, DOWN, LEFT and RIGHT keys. When you start the game you’ll see colorful icons coming in from the right with an arrow in them - you need to hit the corresponding arrow on your keyboard just as it is within your aim. If you’re successful in hitting the right key at the right time, the hole will close and allow your ball to roll right over. If you hit the wrong key, or no key at all, you’re ball will fall down causing you to lose some of your limited energy stores.

An important part of the game is the multiplier that builds up when you hit several consecutive notes. If you’re shooting for a high score, you’ll need to keep this up at all times!

The Result

In the end, we created a fun and visually appealing 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 simplicity of the game gives it a very broad appeal that will attract many different types of users.