The Official
Moosylvania Blog

Apps are everywhere in today’s digital world. From health and fitness trackers to games and finance advice, consumers can find it all on their smartphones, tablets and even in their Facebook feeds. With such a proliferation of app activity, it’s no surprise that custom application development is becoming more and more important for brands.

But what really goes into developing an app? Have you ever wondered about the technology behind that Facebook game? Custom application development takes a lot of hard work, some serious knowledge of browsers and code, and even a little background in physics (at least in some cases). Sound intriguing? Read on and get the technophile’s behind-the-scenes look at a recent game we developed for Balance Bar:

The Project:

Balance Bar wanted to increase social awareness with an engaging summer promotion. So we developed a game-focused custom Facebook application called the Outlast the Clock Challenge.

How it Worked:

Our app consisted of four time-based mini games. To win, the user had to balance, juggle and outlast the clock through each level. Pass all four levels to for an instant prizes, or play daily for coupons and entries into a $3,000 sweepstakes.

The Tools Used to Built It:

Audio and Visual:

When creating our game, we started by thinking about Flash … and deciding not to use it. We didn’t want to see issues for users who didn’t have the newest Flash version installed on their computer, and we wanted to utilize the newest technology available for the game: Canvas and Audio. But we did pull Flash in as part of a fallback scenario for older browsers that weren’t capable of running those new HTML5 technologies (we’ll get to that in a bit).

If you’re not familiar, HTML5 Canvas provides a way to draw and script 2D shapes and bitmaps with javascript in real time. Non-technically speaking, it allowed us to create game a surface for our animations to take place.

HTML5 Audio allowed us to set up sound effects that tied into the game. We created these with simple javascript commands to play, stop or manipulate the sounds.

Frameworks:

To complete basic tasks, such as drawing images on our game canvas and setting up audio, we selected two frameworks: a game library called ImpactJS and an audio library called SoundManager2.
Because our game was slightly complex, ImpactJS helped us manage the overall game loop, assisted with level management and helped solidify game physics (yep, the laws of physics even apply to your apps). It was also useful for drawing graphics, and had a number of tools that were great for testing and debugging.

SoundManager2 essentially allowed us to quickly and easily load a number of sound files at once, creating a multi-channel audio player for our sound effects. What we loved about this library was its built in flash fallback. If a browser does not support HTML5 audio, it simply uses flash file to play the sounds as needed. Knowing that our wide audience would use a number of browsers, we wanted to be covered in all cases.

Tying the Tools Together:

At this point, we were using a number of tools, which meant we needed to figure out how to make them talk to each other—and ensure that all game details were managed simultaneously. To do this, we used a javascript technique called Pub/Sub that derives from event management. This technique allowed us to subscribe (Sub) multiple objects to an event. Then, when the event is published (Pub) within the game, all the objects run their given set of code together. So, for example, when users in our game won a level, Pub/Sub would publish our “game won” event, playing cheering sound effects, pausing the game appropriately and showing the congratulatory “WINNER!” screen all at the same time.

Solving for Non-Standardization:

At this point, our game was starting to come together nicely. But what about those old browsers that don’t support HTML5? (Thought we forgot, didn’t you?) Knowing that many HTML5 conventions have not yet been fully standardized for various browsers, we had to make sure we were covered. That’s where polyfill came in. polyfill is sort of a gap-filler in for any technology that might be missing in an older browser (like IE7 and IE8).

Polyfills come in all shapes and sizes, but we selected one called FlashCanvas Pro. It basically re-implements the HTML5 Canvas spec in Flash, captures all standard JS calls and then renders it inside a flash object. With the combination of this and our game library we were able to display our graphics in all browsers IE7+ and up.

The Totally Stellar Results:

After a few rounds of QA, our game was ready to go, and it launched smoothly, to some pretty serious success.

In just over a month, Balance Bar’s fan base skyrocketed from around 70,000 fans to over Nearly 102,000 (and counting), with users logging thousands of playing hours.

Of course, we also developed a promotional micro site and a digital ad campaign to support the program … but that’s a whole other blog post.

Are you an app-building technophile, interested in custom application development? What are some of the tools you use when creating your online masterpieces? Share your thoughts with us in the comments below.