Bringing Angry Birds To Facebook

Advertisement

There’s no avoiding those Angry Birds. They are, quite literally, everywhere: toys, snacks, cartoons, plush toys and that wildly addictive game that seemingly everyone has downloaded at some point — 1 billion of us last year alone.

2012 was another landmark year at the Angry Birds aviary, otherwise known as Rovio1. The Finnish-based developer not only released a slew of tie-ins — from Green Day2 to Star Wars3 — but also went social.

Not only did releasing Angry Birds on Facebook require the game’s engine to be rewritten in the all-new Flash 11, but the power of Facebook’s platform meant that the game’s mechanics could be tweaked further to take advantage of the social graph.

At the forefront of this project was Ville Koskela204, a lead game programmer at Rovio. Ville has been a developer for his entire adult life, with a background in C++ and ActionScript. And when he’s not working on one of the biggest games in the world for the biggest social network in the world, he loves running in and around his home town of Espoo, Finland (he ran a 100-km race in under 12 hours).

Ville sporting a 'play-off' beard from the last 3-4 weeks of the project!5
Ville sported a playoff beard during the last few weeks of the project.

I chatted with Ville about bringing Angry Birds to Facebook, and started by asking how he got the job.

“I worked as a software architect at Sulake, the company behind the teenage online chat world Habbo Hotel. At Sulake, I had been one of the two guys leading the conversion of Habbo Hotel from Shockwave to the Flash version. I had naturally read about the success of Angry Birds and checked Rovio’s website at some point, but back then there was no Web team yet, and even though I had done mobile programming myself, I wasn’t too interested in that anymore.

Then, during the summer of 2011, I was contacted through LinkedIn and asked if I was interested in coming in for an interview at Rovio. After hearing what the new job would be about, the decision to join Rovio was a really easy one.”

What exactly does his role entail?

“As a lead game programmer, I am a supervisor for a team of ten other Flash and C++ programmers, varying from trainees to seniors. I go through job applications, do interviews, and try to make sure all the projects have right set of programmer resources available to launch on schedule — and that they meet our quality expectations. I also still do some (mostly engine) ActionScript programming myself, but mainly try to concentrate on helping others do their programming job the best way possible.

I work closely with the graphic designers, server programmers and producers — basically most of the different people involved in the development of every Angry Birds game.”

So, what’s it like working at Rovio?

“The working environment is really nice, and the atmosphere is relaxed. We try to combine the good parts of traditional planning in advance with agile6 methods to achieve the best possible results. Last but not least, working on something as hot as the Angry Birds brand ensures that everyone is giving their best in the different projects.”

Angry Birds started life on the iPhone in December 2009 and has arguably become the biggest mobile franchise on the planet. With success came expansions, spin-offs and ports, and in 2010 Rovio started working on a Facebook version.

In March 2011, InsideMobileApps interviewed Peter Vesterback7 (@pvesterbacka8), Chief Marketing Officer and “Mighty Eagle” at Rovio, and asked him why development was taking so long.

“You can’t take an experience that works in one environment and one ecosystem and force-feed it onto another. It’s like Zynga. They can’t just take FarmVille and throw it on mobile and see what sticks. The titles that have been successful for them on mobile are the ones they’ve built from the ground up for the platform.”

Angry Birds on Facebook9

The original release date for Angry Birds on Facebook, now known as Angry Birds Friends, was May 2011. It wasn’t until later that year that Ville joined Rovio, and the port still wasn’t finished.

“When I joined the company at the beginning of September 2011, there was a Flash 10 prototype of the original Angry Birds game available that had been done earlier in 2011.

The prototype’s performance was not too good, which was the reason to wait for Flash 11, with the support of GPU-accelerated Stage 3D graphics. Before continuing the development, I was hired both to lead the new team of Flash developers joining the company and to make sure a fully optimized Flash 11 version of the game was ready for release as soon as possible.”

Flash? Yes, Flash. For those of us who have avoided Adobe’s waning flagship for the last few months or years, it turns out that it has gotten considerably better. Indeed, Flash 11 is Adobe’s attempt to reinvigorate the platform with cutting-edge 2-D and 3-D rendering.

The Stage 3D that Ville mentions is Adobe’s very low-level GPU-accelerated APIs. You can hack them directly using the AGAL language or, as Rovio has done, use a framework and ActionScript. For 2-D applications with 3-D acceleration, the open-source Starling Framework10 is the choice of many. But as Rovio was developing Angry Birds for Facebook, the framework still hadn’t been completed.

“We started the development with an unreleased version of the Starling Framework. Back then, Starling’s performance was not too good, so I did lots of optimizations there myself, about which I also wrote on my blog11. Now these optimizations (and also many others) have found their way into the current version of the Starling Framework, so other developers don’t have to go through this process themselves anymore.

It soon became clear that we could achieve the desired performance with GPU rendering, but machines with only CPU rendering were not doing too well. To get the game running smoothly on those machines meant we had to cut down some graphical detail — lowering rendering quality and dropping some layers and animations from the background graphics.”

Flash 11 and Stage 3D have excited many people, and they represent a lifeline for a product that seemed to be drowning, not waving12. I asked Ville what he thought this meant for the future of the platform.

“In my opinion, with the release of Flash 11, Adobe has proven that it really wants to provide millions of developers with tools with which you can bring A-quality games to Web. Stage 3D graphics might not be a thousand times faster like some advertisements read, but they are still a lot faster, enabling 60-FPS full-screen gameplay for our 2-D Angry Birds and really high frame rates for some 3-D games out there. The release of Flash 11 has also made the “Flash is dead” chanters pretty quiet this year.”

Or has it? Many proponents of HTML5-based apps are quick to dismiss Flash. And a certain Steve Jobs announced the end of support for it completely on iOS in a well-publicized open letter13 back in 2010.

Indeed, Google is dropping support for Flash14 on Android, and an HTML5 version of Angry Birds is available in the Chrome Web Store15. Even Microsoft is getting in on the act, teaming up with ZeptoLab to create an HTML5 version of Cut the Rope16 to show off the latest version of Internet Explorer.

Microsoft used an HTML5 version of Cut the Rope to demo its latest browser.17
Microsoft used an HTML5 version of Cut the Rope to demo its latest browser.

With all of the trash talk about HTML5 versus Flash, does Ville think comparing the two is even fair?

“Here at Rovio, we do not have “this technology” versus “that technology” thinking. If a new platform has the capabilities and a big enough audience, there’s a good chance that you will see Angry Birds there. I believe that all the technologies have their strengths, and when there’s competition, each participant will gain from that and become better in the long run.”

As Peter Vesterback mentions in his interview with InsideMobileApps, a successful game needs to be built from the ground up for each platform. This presented an opportunity for Rovio to tweak the tried-and-trusted Angry Birds formula for a social environment.

I asked Ville just how far they pushed the envelope.

“Bringing the game to Facebook naturally added the social aspect. We tried to think of how players would like to either compete against or support their friends. Our game designer spent time playing other successful Facebook games and thinking about what ideas would work in Angry Birds and what wouldn’t. We came up with the crown concept; the three best players in your friends network would have crowns — gold, silver and bronze — for each of the levels, so that there is continual competition to be the best player on every single level.

The biggest change we introduced to the actual game was the power-ups, with which the players can achieve even higher scores on the levels. The power-ups provide a way to monetize the game since they are available as an in-application purchase; but they also help with retention since players who keep returning to the game get free power-ups, and it’s also possible to gift your friends with those.”

Those two magic words, “social” and “monetize.” This is perhaps one of the main draws of Facebook for Rovio. And with over 23 million likes already, it is clearly delivering on the promise that the Angry Birds brand makes.

Angry Birds Star Wars on Facebook18

But with so many platforms, so many crossovers and licensing opportunities, what is now driving development for the team? Is it new game features? Or is it new content, like the recent tie-in with Green Day? Just how far can these birds fly?

“The guys making decisions [about licensing opportunities] go through the pros and cons in each individual case both before and after the project. All of the Angry Birds fans out there should be pretty confident that the brand will stay strong, and new and interesting things will keep coming at a steady pace.”

As the Angry Birds empire continues to grow — and it certainly shows no signs of stopping — people such as Ville are the ones keeping the brand and experience consistent across all of the platforms that we now use.

We can only hope that the continued development of new angles and spin-offs — like Bad Piggies — do not dilute the experience that many of us fell in love with. There can be too much of a good thing, after all.

For games developers and designers, Angry Birds Friends also reminds us that Flash still has a prominent place in the market. By finally harnessing the power of the GPU, Adobe has opened up the floodgates to 3-D games that look and play just like their PC and console equivalents. The big question is whether it’s too little, too late.

Ultimately, the power now lies with Android and iOS, because the desktop market — and, thus, the market for Flash apps — is shrinking. But by covering all of its bases, Rovio has made sure that Angry Birds will be flying in and out of our lives for years to come.

Resources

Credits of image on front page: thethreesisters25.

(al)

Footnotes

  1. 1 http://www.rovio.com/
  2. 2 http://www.billboard.com/articles/news/480358/green-day-partners-with-angry-birds
  3. 3 http://www.rovio.com/en/our-work/games/view/50/angry-birds-star-wars
  4. 4 http://villekoskela.org/
  5. 5 http://villekoskela.org/
  6. 6 http://en.wikipedia.org/wiki/Agile_software_development
  7. 7 http://www.insidemobileapps.com/2011/03/13/rovio-angry-birds-facebook/
  8. 8 https://twitter.com/pvesterbacka
  9. 9 https://www.facebook.com/angrybirds
  10. 10 http://gamua.com/starling/
  11. 11 http://villekoskela.org/2011/12/12/starling-gets-wings/
  12. 12 http://en.wikipedia.org/wiki/Not_Waving_but_Drowning
  13. 13 http://www.apple.com/hotnews/thoughts-on-flash/
  14. 14 http://www.theverge.com/2012/6/29/3125219/flash-mobile-android-4-1-not-supported
  15. 15 http://chrome.angrybirds.com/
  16. 16 http://www.cuttherope.ie/
  17. 17 http://www.cuttherope.ie/
  18. 18 http://www.rovio.com/en/our-work/games/view/50/angry-birds-star-wars
  19. 19 https://www.facebook.com/angrybirds
  20. 20 http://villekoskela.org/
  21. 21 http://www.insidemobileapps.com/2011/03/13/rovio-angry-birds-facebook/
  22. 22 http://gamua.com/starling/
  23. 23 http://www.adobe.com/devnet/flashplayer/stage3d.html
  24. 24 http://www.rovio.com
  25. 25 http://www.flickr.com/photos/tripletsisters/7394261682/

↑ Back to topShare on Twitter

Richard (@richardshepherd) is a UK based web designer and front-end developer. He loves to play with HTML5, CSS3, jQuery and WordPress, and currently works full-time bringing VoucherCodes.co.uk to life. He has an awesomeness factor of 8, and you can also find him at richardshepherd.com.

Advertising
  1. 1

    One trick ponies are unremarkable. Keep riding that 15-minutes of fame!

    -2
  2. 2

    really good and super interesting article. thumbs up!

    -3
  3. 3

    Like it! Just developed a game for facebook android and ios off the same codebase. Starling and as3 is really amazing. Only minor layout changes required.

    -1
  4. 4

    It may be worth mentioning that when the HTML5 based Angry Birds (the one in Chrome Web Store, mentioned in the article) first came out, it required Flash for the sound. Back then, the sound API in browsers was not quite up to synchronized game sound. So it was a bit ironic when blogs and twitterers pronounced Flash dead, once again, because of the HTML5 Angry Birds, apparently unaware that Flash was in fact still required, used behind the scenes for the sound. Nowadays, it works, including sound, without Flash, in modern browsers (that supports MP3, so in Firefox it still requires Flash).

    3
  5. 5

    good read! although its adobe who dropped support for flash on android, not google.

    -2
  6. 6

    What would be really cool is to have pictures of your friends instead of pigs.

    -2
  7. 7

    good and nice post…

    Thanks & regards

    -1
  8. 8

    It is so refreshing to see a positive story about Flash in a major web tech blog. Misinformation and proselytising tends to be the norm whenever it’s under discussion. Flash, and Starling/Feathers in particular still has much to offer the desktop web, not to mention rapidly building cross platform mobile native apps. The hatchet job that’s been done on Flash and the awful management by Adobe have been in real danger of killing it just when it’s getting really exciting again. nice one!

    4
  9. 9

    Why do people like these angry birds so much?

    2
  10. 10

    “Android and iOS, because the desktop market — and, thus, the market for Flash apps — is shrinking…” I think this statement is misleading, as Adobe has recognized the desire for native applications, which is why with the latest version of Flash Builder (4.7), projects can be exported to native runtimes for both Android and iOS, Adobe Air not required. With that said, I would say Flash is just beginning to enter the mobile market, and will continue to grow.

    From a development standpoint, you don’t get a more user-friendly environment than Flash Builder and AS3. Coupled with frameworks like Starling, physics engines like Box2D, and the ability to quickly publish natively to both Android and iOS, Flash is going to redefine efficient cross platform development.

    -1
  11. 11

    Wonderful paintings! That is the type of info that are supposed to be shared across the web. Disgrace on the search engines for not positioning this submit higher! Come on over and discuss with my website . Thank you =) ew

    -1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top