
Angry Birds for Chrome in Canvas and WebGL - patrickaljord
https://chrome.google.com/webstore/detail/aknpkdffaafgjchaibgeefbgmgeghloj
======
gkoberger
This is why I hate the concept of App stores.

It's just a link that uses open technologies that works well on any modern
browser, yet you need to open Chrome and "install" it. Why can't I just type
in a URL into any browser I want!? (Yes, I know that this specific app happens
to have a link. However, it's not clickable, it's not obvious and most apps
won't.)

If I made a site that you could only use if you opened it in IE and bookmarked
it? Everyone would be crying foul. Yet somehow, browser specific app stores
are considered moving the web forward.

Let's take it a step further. Let's say they charged for this app, which many
apps will. If I pay for it in the (currently in development) Mozilla app
store, that means I can't use it in Chrome. Is this really what we want for
the web?

Why can't browsers just beef up their bookmarking systems? Right now, we're
hiding regular links behind "installations."

I hate app stores, and I hate what they have the potential to do to the web. I
hate that someday soon, someone will say to me "You should use ____! But it's
(Firefox|Chrome|IE) only." I thought we left that mentality with IE6.

(Disclosure: I work for Mozilla, but have nothing to do with our web apps
store. Naturally, my opinions are my own.)

~~~
portman
Here's what excites me about Angry Birds in the Chrome app store. None of this
exists yet, but it could:

\- If I install it on one computer, it installs on all my computers \-
Purchase the Screaming Eagle in-app, using Google Checkout \- If I beat Level
X on one computer, I can resume on level X+1 on another computer (using the
same infrastructure as Chrome bookmark sync).

Currently, your game progress is in LocalStorage, but it would be great to
have the game database sync'd to my other browsers. Yes, you could "sign-in"
to Angry Birds to sync your data, and that option would still exist, but for
people who installed through the App Store (where you have to be auth'd to
Google anyways) it would be one less step.

~~~
gkoberger
Uh, you realize that's how the web already works... right?

~~~
portman
Zing! Fair point. But "video game" != "the web".

I tend to view HTML5 applications as closer to a traditional desktop
application than a web site.

Local storage has some advantages over server-based storage (latency, privacy,
etc), while the major disadvantage of local storage is the lack of persistence
across multiple devices.

I like the _idea_ of HTML5 app developers being able to use LocalStorage and
then seamlessly piggyback on Chrome's existing JSON sync framework. That's a
lot less work than managing state on the server, and lets game developers
focus more on their core competencies, effectively outsourcing the "webiness"
of their app to Google.

By no means do I think this kind of "Chrome App" will replace web apps, but I
do believe that in certain genres like video games there are advantages.

------
seanalltogether
I fired up Charles to try and dissect the source but it's a giant pile of
obfuscation. Here is everything I could see with executable code. They must be
pumping different sections of the game into individual iframes since there are
6 separate html files that _mostly_ have the same code.

[http://chrome.angrybirds.com/angrybirds/angrybirds.nocache.j...](http://chrome.angrybirds.com/angrybirds/angrybirds.nocache.js)

[http://chrome.angrybirds.com/angrybirds/10C85AF6734FAE7AFB4C...](http://chrome.angrybirds.com/angrybirds/10C85AF6734FAE7AFB4C2822A45A883B.cache.html)

[http://chrome.angrybirds.com/angrybirds/3C8E31D1DD3333197B71...](http://chrome.angrybirds.com/angrybirds/3C8E31D1DD3333197B714712576C7FFA.cache.html)

[http://chrome.angrybirds.com/angrybirds/0E4E6E6C7B52064E8C51...](http://chrome.angrybirds.com/angrybirds/0E4E6E6C7B52064E8C51988DA10DE399.cache.html)

[http://chrome.angrybirds.com/angrybirds/F94722960223E26D4BB6...](http://chrome.angrybirds.com/angrybirds/F94722960223E26D4BB6053F32532BD8.cache.html)

[http://chrome.angrybirds.com/angrybirds/09F8D37830DE81BA93CE...](http://chrome.angrybirds.com/angrybirds/09F8D37830DE81BA93CE98D1406F19AD.cache.html)

[http://chrome.angrybirds.com/angrybirds/0B93D95B5E595879D28E...](http://chrome.angrybirds.com/angrybirds/0B93D95B5E595879D28EE9CA28E135D9.cache.html)

And all of the levels are listed out with the following pattern

<http://chrome.angrybirds.com/angrybirds/json/Level1.json>

The spritesheet assets are actually larger then they appear in game, however
the scaling still looks really good in the final output, I'm surprised how
smooth the game ran.
[http://chrome.angrybirds.com/angrybirds/sprite_sheets/INGAME...](http://chrome.angrybirds.com/angrybirds/sprite_sheets/INGAME_BIRDS_PIGS.png)

~~~
mmastrac
This is standard GWT practice. Each of those files is a different browser
permutation. It'll have different code for certain functions depending on
which environment was loaded (likely IE, Gecko, early Gecko, WebKit, Opera).

Here's a little more info on it:

[http://code.google.com/webtoolkit/doc/latest/tutorial/compil...](http://code.google.com/webtoolkit/doc/latest/tutorial/compile.html)

~~~
seanalltogether
Thanks for that explanation. I really wish I could parse through this code,
I'd love to understand how to do 2d games inside webgl and the performance
differences between the normal canvas drawing functions and the webgl ones.

~~~
mmastrac
Ray Cromwell and Philip Rogers are doing a talk on this very topic:

[http://www.google.com/events/io/2011/sessions/kick-ass-
game-...](http://www.google.com/events/io/2011/sessions/kick-ass-game-
programming-with-google-web-toolkit.html)

Philip Rogers has a Chrome credit on the new Angry Birds game. The talk should
be up on YouTube within a few days.

------
natmaster
Smooth as butter in Firefox 4.

The concept of 'Chrome-only' web applications is appalling to me, and can only
remind me of 2000 when people just developed for IE6. This is REALLY BAD for
the web.

(Disclosure: I work for Microsoft.)

~~~
MatthewPhillips
I wrote a Chrome-only web app. It's a packaged app (installs on the user's
computer). That means:

1) My hosting cost are $0.

2) I don't have to implement my own payment system.

3) Users already have a payment account with Google, bringing down friction to
purchase considerably.

When a cross-browser solution for those 3 points comes around I'll be glad to
support other browser users.

~~~
ericwaller
Do you mind linking to it here? Those three points sound pretty enticing.

~~~
MatthewPhillips
Sure. warning: I wrote this on Christmas Eve and spent little time on making
it pretty :)

[https://chrome.google.com/webstore/detail/fjekppbejaekboiooi...](https://chrome.google.com/webstore/detail/fjekppbejaekboiooidnboobkoiklckl)

------
eli
Neat. Now I want to hack my own level editor:
<http://chrome.angrybirds.com/angrybirds/json/Level4.json>

~~~
bergie
No need to hack one, it exists: <http://www.badboll.nu/acme/able/>

There was an open source level pack made with this that has been popular on
Maemo

------
illumin8
Very cool! They are still using Flash for audio, however, which is slightly
less cool.

~~~
ch0wn
Especially since flash is mandatory and they won't let you launch the game
without it.

~~~
illumin8
I was able to launch it just fine in Chrome with Flashblock enabled, but of
course the game is silent unless you unblock Flash.

------
rflrob
Any good explanation for why it maxes out my CPU, even when it's just
displaying the end-of-level score screen? This game works fine on a
smartphone, but somehow makes use of everything my MacBook Pro can throw at
it?

~~~
jbermudes
IIRC, the game on the smartphone was running via a native C++ binary, so it's
pretty close to the metal. In a web browser you have layers of abstractions
that kill performance.

It's a sad day when we herald slow and buggy modern implementations of game
technology that was working just fine in 1985 as the future just because now
you don't have to install a program.

------
tlrobinson
Interestingly it works great for me in Safari but not Chrome (11.0.696.65)...

~~~
btucker
It works for me in both, but it's tremendously smoother in Safari. In Chrome
the fans on my i7 MBP spun up and the framerate was low. In safari, the fans
didn't come on and the framerate was high. Not what I would have expected.

~~~
jsprinkles
Sounds like GPU acceleration works for you in Safari but not Chrome.
about:gpu.

~~~
btucker
You're absolutely correct that GPU acceleration isn't working in Chrome.
Interesting.

~~~
skybrian
If about:gpu shows that your video card is blacklisted, you might try starting
Chrome from the command line with --ignore-gpu-blacklist to see if it still
works.

------
charlesju
Does anyone know what engine they used to build this? Or did they build it
from WebGL's base?

~~~
gnufs
It seems to be built using GWT (Google Web Toolkit) which churns out client-
side JavaScript from a Java codebase.

It makes sense since they probably had a Java version written for Android.

~~~
charlesju
<http://news.cnet.com/8301-30686_3-20061878-266.html>

CNET Confirms

------
daimyoyo
This question may be naïve, but I have Angry Birds for Mac on my laptop and
when I play it, the computer works fine. When I started playing this version,
my cooling fan almost immediately turned on full blast. Even when I'm
streaming HD video, that never happens. Is it the fact this game is written in
HTML rather than objective C the reason that it's so processor intensive?(it's
a 13" MacBook pro running OS 10.6.7 if that makes a difference)

------
navs
Never got the appeal of Angry Birds until now. There goes my productivity for
today.

Animation is a bit jerky in Opera 11 but certainly usable.

------
megamark16
I am in so much trouble. The Android version won't run on my phone, so I've
thus far avoided getting addicted to this game like so many of my friends. Now
it's all over. Goodbye productivity.

------
fairlyodd
It is very slow though! WebGL has a long ways to go..

(Macbook Pro with VGA and 8gb RAM)

~~~
starwed
Huh, it seems really smooth on my macbook air, using FF6 nightlies.

------
megaman821
For the canvas version, IE9 is much faster than Chrome 11.

------
brianr
Reallllly slow in Chrome 11 on my mac. Maybe 5fps.

~~~
pornel
Try Firefox. In Fx5 (and Fx4 probably too) it's _really_ smooth. Feels many
times faster than Opera and Chrome.

------
eduardoflores
Working well and fast on IE9, just paste the url.

------
drdaeman
Silently fails with "Uncaught Error: QUOTA_EXCEEDED_ERR: DOM Exception 22" in
console if you have cookies+site-data disabled.

------
atacrawl
Works pretty well in Safari 5, but it's a little laggy even on my rocket ship
(2x3GHz QC Xeon Mac Pro, 9 GB RAM).

~~~
nextparadigms
Does Safari 5 have WebGL implemented?

------
watty
Pretty awesome on my desktop but a little slow. It doesn't work at all on my
CR48, just a black screen.

~~~
hencq
Hmmm, it works fine on my CR-48. I'm on the dev channel, maybe that makes a
difference?

------
sid0
Works really nicely in Firefox 6 nightlies: <http://chrome.angrybirds.com/>

~~~
cookiecaper
Working fine on 4.0.1 for me ;)

------
jsprinkles
If this is as unplayably slow for you as it was for me check about:gpu in
Chrome.

Latest Chrome dev channel (12.0.742.30) on OS X is not enabling the GPU for me
on my 3.2 GHz iMac and it really is not clear why. There is no about:flags
entry for any GPU-related things either.

