9 ms·

Angry Birds for Chrome in Canvas and WebGL

234 points by patrickaljord 16y ago

fairlyodd 16y ago
It is very slow though! WebGL has a long ways to go.. (Macbook Pro with VGA and 8gb RAM)
- starwed 16y ago
  Huh, it seems really smooth on my macbook air, using FF6 nightlies.
- jsprinkles 16y ago
  You probably do not have GPU enabled. about:gpu might tell you why.
- masklinn 16y ago
  No problem in Safari 5, on a 2010 15" macbook
sid0 16y ago
Works really nicely in Firefox 6 nightlies: http://chrome.angrybirds.com/ http://chrome.angrybirds.com/
- cookiecaper 16y ago
  Working fine on 4.0.1 for me ;)
watty 16y ago
Pretty awesome on my desktop but a little slow. It doesn't work at all on my CR48, just a black screen.
- hencq 16y ago
  Hmmm, it works fine on my CR-48. I'm on the dev channel, maybe that makes a difference?
atacrawl 16y ago
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 16y ago
  Does Safari 5 have WebGL implemented?
gkoberger 16y ago
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.)
- yanw 16y ago
  You don't have to install it to use it: http://chrome.angrybirds.com/ http://chrome.angrybirds.com/
  - udp 16y ago
    That one doesn't require Chrome, but it does require Flash! I'm pretty sure FF4 supports everything that's needed to run a game like this, out of the box.
    - lftl 16y ago
      In Chrome it requires flash to play the sound (same as the plugin version). Everything else works fine without flash.
      - udp 16y ago
        Why doesn't it just not play any sounds, then, instead of refusing to start the game? (FF4, no flash)
tlrobinson 16y ago
Interestingly it works great for me in Safari but not Chrome (11.0.696.65)...
- chrismealy 16y ago
  Me too.
- danzheng 16y ago
  Just tried it out on Chrome(11.0.696.65) on my macbook pro, it worked well for me.
  - diamondhead 16y ago
    works on UZBL as well
- btucker 16y ago
  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 16y ago
    Sounds like GPU acceleration works for you in Safari but not Chrome. about:gpu.
    - btucker 16y ago
      You're absolutely correct that GPU acceleration isn't working in Chrome. Interesting.
      - skybrian 16y ago
        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.
illumin8 16y ago
Very cool! They are still using Flash for audio, however, which is slightly less cool.
- thushan 16y ago
  Ah thanks for that insight - I was wondering why it asked for Flash on an iPad.
  - nextparadigms 16y ago
    I don't think the iPad browser supports WebGL anyway.
    - quux 16y ago
      If WebGL isn't available, angry birds will fall back to Canvas drawing.
      - MrNibbles 15y ago
        Interestingly, it actually falls back to a DOM based renderer. Inspect it using Safari and you will see what i mean.
- ch0wn 16y ago
  Especially since flash is mandatory and they won't let you launch the game without it.
  - illumin8 16y ago
    I was able to launch it just fine in Chrome with Flashblock enabled, but of course the game is silent unless you unblock Flash.
jsprinkles 16y ago
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.
natmaster 16y ago
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 16y ago
  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 16y ago
    Do you mind linking to it here? Those three points sound pretty enticing.
    - MatthewPhillips 16y ago
      Sure. warning: I wrote this on Christmas Eve and spent little time on making it pretty :) https://chrome.google.com/webstore/detail/fjekppbejaekboiooidnboobkoiklckl https://chrome.google.com/webstore/detail/fjekppbejaekboiooi...
- patrickaljord 16y ago
  It is not supposed to be chrome-only, the web store is just a convenient way to manage your web app. Web apps are not like regular web sites and need a better way to be managed. I love the apps icons on my new-tab page in Chrome. That+pinned tabs+chrome webstore make for a great way to manage web apps. Maybe IE will get there one day.
charlesju 16y ago
Does anyone know what engine they used to build this? Or did they build it from WebGL's base?
- gnufs 16y ago
  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 16y ago
    http://news.cnet.com/8301-30686_3-20061878-266.html http://news.cnet.com/8301-30686_3-20061878-266.html CNET Confirms
eduardoflores 16y ago
Working well and fast on IE9, just paste the url.
brianr 16y ago
Reallllly slow in Chrome 11 on my mac. Maybe 5fps.
- pornel 16y ago
  Try Firefox. In Fx5 (and Fx4 probably too) it's really smooth. Feels many times faster than Opera and Chrome.
eli 16y ago
Neat. Now I want to hack my own level editor: http://chrome.angrybirds.com/angrybirds/json/Level4.json http://chrome.angrybirds.com/angrybirds/json/Level4.json
- hopeless 16y ago
  Very very interesting. A level editor is where Angry Birds has been heading since Day 1. Hopefully we'll see one soon :)
- bergie 16y ago
  No need to hack one, it exists: http://www.badboll.nu/acme/able/ http://www.badboll.nu/acme/able/ There was an open source level pack made with this that has been popular on Maemo
navs 16y ago
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.
seanalltogether 16y ago
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.js http://chrome.angrybirds.com/angrybirds/angrybirds.nocache.j... http://chrome.angrybirds.com/angrybirds/10C85AF6734FAE7AFB4C2822A45A883B.cache.html http://chrome.angrybirds.com/angrybirds/10C85AF6734FAE7AFB4C... http://chrome.angrybirds.com/angrybirds/3C8E31D1DD3333197B714712576C7FFA.cache.html http://chrome.angrybirds.com/angrybirds/3C8E31D1DD3333197B71... http://chrome.angrybirds.com/angrybirds/0E4E6E6C7B52064E8C51988DA10DE399.cache.html http://chrome.angrybirds.com/angrybirds/0E4E6E6C7B52064E8C51... http://chrome.angrybirds.com/angrybirds/F94722960223E26D4BB6053F32532BD8.cache.html http://chrome.angrybirds.com/angrybirds/F94722960223E26D4BB6... http://chrome.angrybirds.com/angrybirds/09F8D37830DE81BA93CE98D1406F19AD.cache.html http://chrome.angrybirds.com/angrybirds/09F8D37830DE81BA93CE... http://chrome.angrybirds.com/angrybirds/0B93D95B5E595879D28EE9CA28E135D9.cache.html http://chrome.angrybirds.com/angrybirds/0B93D95B5E595879D28E... And all of the levels are listed out with the following pattern http://chrome.angrybirds.com/angrybirds/json/Level1.json 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_BIRDS_PIGS.png http://chrome.angrybirds.com/angrybirds/sprite_sheets/INGAME...
- msy 16y ago
  And we all laughed when RMS warned us about obfuscation in web apps.
- mmastrac 16y ago
  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/compile.html http://code.google.com/webtoolkit/doc/latest/tutorial/compil...
hamidp 16y ago
The really weird thing is that it runs BETTER on IE9 for me than on Chrome. Must be all the fishies swimming around.
megaman821 16y ago
For the canvas version, IE9 is much faster than Chrome 11.
megamark16 16y ago
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.
rflrob 16y ago
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 16y ago
  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.
daimyoyo 16y ago
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)
drdaeman 16y ago
Silently fails with "Uncaught Error: QUOTA_EXCEEDED_ERR: DOM Exception 22" in console if you have cookies+site-data disabled.

234 points by patrickaljord 16y ago

fairlyodd 16y ago

It is very slow though! WebGL has a long ways to go.. (Macbook Pro with VGA and 8gb RAM)

starwed 16y ago
Huh, it seems really smooth on my macbook air, using FF6 nightlies.
jsprinkles 16y ago
You probably do not have GPU enabled. about:gpu might tell you why.
masklinn 16y ago
No problem in Safari 5, on a 2010 15" macbook

sid0 16y ago

Works really nicely in Firefox 6 nightlies: http://chrome.angrybirds.com/ http://chrome.angrybirds.com/

cookiecaper 16y ago
Working fine on 4.0.1 for me ;)

watty 16y ago

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

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

atacrawl 16y ago

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 16y ago
Does Safari 5 have WebGL implemented?

gkoberger 16y ago

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.)

yanw 16y ago
You don't have to install it to use it: http://chrome.angrybirds.com/ http://chrome.angrybirds.com/
- udp 16y ago
  That one doesn't require Chrome, but it does require Flash! I'm pretty sure FF4 supports everything that's needed to run a game like this, out of the box.
  - lftl 16y ago
    In Chrome it requires flash to play the sound (same as the plugin version). Everything else works fine without flash.
    - udp 16y ago
      Why doesn't it just not play any sounds, then, instead of refusing to start the game? (FF4, no flash)

tlrobinson 16y ago

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

chrismealy 16y ago
Me too.
danzheng 16y ago
Just tried it out on Chrome(11.0.696.65) on my macbook pro, it worked well for me.
- diamondhead 16y ago
  works on UZBL as well
btucker 16y ago
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 16y ago
  Sounds like GPU acceleration works for you in Safari but not Chrome. about:gpu.
  - btucker 16y ago
    You're absolutely correct that GPU acceleration isn't working in Chrome. Interesting.
    - skybrian 16y ago
      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.

illumin8 16y ago

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

thushan 16y ago
Ah thanks for that insight - I was wondering why it asked for Flash on an iPad.
- nextparadigms 16y ago
  I don't think the iPad browser supports WebGL anyway.
  - quux 16y ago
    If WebGL isn't available, angry birds will fall back to Canvas drawing.
    - MrNibbles 15y ago
      Interestingly, it actually falls back to a DOM based renderer. Inspect it using Safari and you will see what i mean.
ch0wn 16y ago
Especially since flash is mandatory and they won't let you launch the game without it.
- illumin8 16y ago
  I was able to launch it just fine in Chrome with Flashblock enabled, but of course the game is silent unless you unblock Flash.

jsprinkles 16y ago

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.

natmaster 16y ago

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 16y ago
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 16y ago
  Do you mind linking to it here? Those three points sound pretty enticing.
  - MatthewPhillips 16y ago
    Sure. warning: I wrote this on Christmas Eve and spent little time on making it pretty :) https://chrome.google.com/webstore/detail/fjekppbejaekboiooidnboobkoiklckl https://chrome.google.com/webstore/detail/fjekppbejaekboiooi...
patrickaljord 16y ago
It is not supposed to be chrome-only, the web store is just a convenient way to manage your web app. Web apps are not like regular web sites and need a better way to be managed. I love the apps icons on my new-tab page in Chrome. That+pinned tabs+chrome webstore make for a great way to manage web apps. Maybe IE will get there one day.

charlesju 16y ago

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

gnufs 16y ago
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 16y ago
  http://news.cnet.com/8301-30686_3-20061878-266.html http://news.cnet.com/8301-30686_3-20061878-266.html CNET Confirms

eduardoflores 16y ago

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

brianr 16y ago

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

pornel 16y ago
Try Firefox. In Fx5 (and Fx4 probably too) it's really smooth. Feels many times faster than Opera and Chrome.

eli 16y ago

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

hopeless 16y ago
Very very interesting. A level editor is where Angry Birds has been heading since Day 1. Hopefully we'll see one soon :)
bergie 16y ago
No need to hack one, it exists: http://www.badboll.nu/acme/able/ http://www.badboll.nu/acme/able/ There was an open source level pack made with this that has been popular on Maemo

navs 16y ago

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.

seanalltogether 16y ago

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.js http://chrome.angrybirds.com/angrybirds/angrybirds.nocache.j... http://chrome.angrybirds.com/angrybirds/10C85AF6734FAE7AFB4C2822A45A883B.cache.html http://chrome.angrybirds.com/angrybirds/10C85AF6734FAE7AFB4C... http://chrome.angrybirds.com/angrybirds/3C8E31D1DD3333197B714712576C7FFA.cache.html http://chrome.angrybirds.com/angrybirds/3C8E31D1DD3333197B71... http://chrome.angrybirds.com/angrybirds/0E4E6E6C7B52064E8C51988DA10DE399.cache.html http://chrome.angrybirds.com/angrybirds/0E4E6E6C7B52064E8C51... http://chrome.angrybirds.com/angrybirds/F94722960223E26D4BB6053F32532BD8.cache.html http://chrome.angrybirds.com/angrybirds/F94722960223E26D4BB6... http://chrome.angrybirds.com/angrybirds/09F8D37830DE81BA93CE98D1406F19AD.cache.html http://chrome.angrybirds.com/angrybirds/09F8D37830DE81BA93CE... http://chrome.angrybirds.com/angrybirds/0B93D95B5E595879D28EE9CA28E135D9.cache.html http://chrome.angrybirds.com/angrybirds/0B93D95B5E595879D28E... And all of the levels are listed out with the following pattern http://chrome.angrybirds.com/angrybirds/json/Level1.json 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_BIRDS_PIGS.png http://chrome.angrybirds.com/angrybirds/sprite_sheets/INGAME...

msy 16y ago
And we all laughed when RMS warned us about obfuscation in web apps.
mmastrac 16y ago
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/compile.html http://code.google.com/webtoolkit/doc/latest/tutorial/compil...

hamidp 16y ago

The really weird thing is that it runs BETTER on IE9 for me than on Chrome. Must be all the fishies swimming around.

megaman821 16y ago

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

megamark16 16y ago

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.

rflrob 16y ago

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 16y ago
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.

daimyoyo 16y ago

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)

drdaeman 16y ago

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