Angry Birds for Chrome in Canvas and WebGL | Hacker News Reader

Angry Birds for Chrome in Canvas and WebGL

chrome.google.com

234 pointspatrickaljord83 comments

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

You don't have to install it to use it: http://chrome.angrybirds.com/

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.

In Chrome it requires flash to play the sound (same as the plugin version). Everything else works fine without flash.

Why doesn't it just not play any sounds, then, instead of refusing to start the game? (FF4, no flash)

Given HTML5 Audio it makes you wonder whether a Flash requirement isn't partially a FU to Apple.

HTML5 audio sucks right now. It's a known problem (that might even be fixed in Chrome 13), but yeah, it's not ideal at all for the moment.

Further reading: http://www.phoboslab.org/log/2011/03/the-state-of-html5-audi...

That's a rather absurd theory, considering that making the free online version work well on iOS would reduce Apple's income from a very, very popular iOS game.

<audio> isn't meant for short, repetitive clips (which is what games do). There's a new API being built for this need, can't remember the name of it right now.

Firefox has the Audio Data API, Chrome has the Web Audio API.

People are reporting that it works fine in other browsers, too.

The Chrome store is just a front. Almost everything in it is actually a website, with the thing in the 'store' just being a pretty icon to it. And everything in the store will work just fine on other browsers, to my knowledge.

So while your point is valid, we actually aren't at a time when it's a problem... And I'm not convinced we'll get there. Tech has been changing quickly lately, and multiple browsers are now standards-compliant... That's pretty solid.

It works in FF4.

Because the ecosystem of web standards is very weak. Because each browser decides which standards to implement and, sometimes, how to do it. Because cross-platform testing web applications is very resource intensive even if you are using automation tools such as Selenium.

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.

Basically, cloud game saves then? It's entirely possible at this point, I'm implementing it in my game.

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

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.

Games on Steam do this

If you ignore the installation part, even Steam syncs your progress between computers.

Benefits to web app stores and installing apps:

- Automatic permissions granting. With a normal site, a bunch of prompts could appear; "Allow this website to track your location?" "Allow this website to use notifications?" "Allow this website to use unlimited storage?" "Allow this website to use the file system?" et cetera. With an app, the browser knows when the user installs it that they want those things.

- Discovery and monetization. Both suck for web apps right now. Discovery comes down to reading a tweet about an app, or Googling. Monetization is basically 99% advertising at this point, which isn't tenable for many industries.

- Knowledge that the browser installing the app supports a common set of standards. When I make an app for the Web Store, I know 99% of people are using the latest stable version of Chrome, and the remaining 1% is using a future version. I don't have to do IE6/7/8 hacks, or even worry about it.

Since you're a representative of Mozilla, I would also like to say I hope you guys don't give up on your "open" web store and app dashboard efforts. Eventually in an ideal world, the web app store model will be standardized and future browsers will be able to cross-install apps from each. Although there's nothing stopping Mozilla at this point from supporting .crx apps, Chromium is open source after all.

     Automatic permissions granting

That's an UI problem easily fixable by browsers.

     Discovery and monetization. Both suck 
     for web apps right now

Somehow products like Smugmug, GitHub, Basecamp haven't had this problem. There are easy ways for discovery, including Google, Facebook, Twitter and plain word-of-mouth. There's also an easy way for monetization -- it's called Paypal Websites Standard. I myself discovered this link by coming here, to HN.

That's the beauty of an open web.

     Knowledge that the browser installing 
     the app supports a common set of standards

Easily checkable by other means.

You're basically trying to redefine the problem to fit the solution.

It doesn't work like that - App Stores are only useful for the platform provider, keeping that provider as an intermediary between the developer and his customers, getting a share of the revenue. The Internet changed that and now platform providers (e.g. older like Apple, Microsoft and newer, like Amazon, Google) are now fighting back.

And the situation is exactly as in the old days of IExplorer - when devs developed for IE because they had consistency and it was the most popular browser anyway.

> That's an UI problem easily fixable by browsers.

Not as easily solved as using the app model.

> That's the beauty of an open web.

And that's never going away. But there's a reason devs are all over iOS and Android right now, and not making web apps that are much easier to make cross-platform.

> Easily checkable by other means.

Not as easily, though. Nor as intuitively.

> You're basically trying to redefine the problem to fit the solution.

Me? I'm not working on the Web Store team.

The solution is much-needed and is several years late. Google Maps and Gmail basically launched the web app wave, only for all the innovation to happen in mobile operating systems. It's time to bring those innovations to the browsers and make browsers the preeminent platform once again, which is what the web app and app store model seeks to accomplish.

IMHO, I think the reason for devs liking iOS is because iOS represents a distribution channel for shitty/low-budget apps, with low customers expectations, customers that also have credit cards.

But the gold-rush is going to end at some point, when the Top 50 chart is going to be dominated by the likes of EA Games and Blizzard.

"Devs like it because there's money in it."

Well, yes. It should be the goal of every platform to have a healthy developer ecosystem, so that the largest amount of devs can make some money. Just like in a country's economy, the goal should be to push the average quality of life higher.

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?

FWIW, this is not the model that the Mozilla "app store" proposes. You will be able to buy apps from any store, and then use them from any browser irrespective of which browser you originally bought it on. Part of Mozilla's OpenWebApps work is to define the auth flows in order to make this possible.

I have no problem with app stores existing. I am yet unsure whether app stores piggybacking on the web is bad for the web or just benign tunneling.

There is a key difference between this and IE's play for control of the web a decade ago. MS was trying to deliver native Windows code over the web and keep people locked in to their OS. Chrome apps are implicitly encouraged to use web standards and couple to Chrome only when necessary. I don't think Google is trying to hijack the web, I think they are just trying to expand its scope.

Do you think that apps using NaCl will be more deserving of being treated as something different than a website? As browser technologies get more advanced it becomes increasingly possible to make things that seem more like a traditional desktop application than a webapp. That said, I don't think that we're there yet and most of the offerings (even from Google) in the store seem like nothing more than a link to a page.

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/10C85AF6734FAE7AFB4C...

http://chrome.angrybirds.com/angrybirds/3C8E31D1DD3333197B71...

http://chrome.angrybirds.com/angrybirds/0E4E6E6C7B52064E8C51...

http://chrome.angrybirds.com/angrybirds/F94722960223E26D4BB6...

http://chrome.angrybirds.com/angrybirds/09F8D37830DE81BA93CE...

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

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

And we all laughed when RMS warned us about obfuscation in web apps.

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

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.

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

http://www.google.com/events/io/2011/sessions/kick-ass-game-...

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

The levels look like a straight translation of the Lua level data into JSON, which is kind of cool.

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

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.

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

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

https://chrome.google.com/webstore/detail/fjekppbejaekboiooi...

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.

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

Very very interesting. A level editor is where Angry Birds has been heading since Day 1. Hopefully we'll see one soon :)

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

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

Ah thanks for that insight - I was wondering why it asked for Flash on an iPad.

I don't think the iPad browser supports WebGL anyway.

If WebGL isn't available, angry birds will fall back to Canvas drawing.

Interestingly, it actually falls back to a DOM based renderer. Inspect it using Safari and you will see what i mean.

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

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

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?

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.

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

Me too.

Just tried it out on Chrome(11.0.696.65) on my macbook pro, it worked well for me.

works on UZBL as well

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.

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

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

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.

I was pleasantly surprised that it worked in Opera.

With a 2006 MBP, it works in FF4, but not in Chrome 11 (just a blank screen). Any idea what I'm doing wrong?

There appears to be a bug in recent versions of Chrome that erroneously disables hardware acceleration on machines running OSX with ATI video cards. It seems that they decided to blacklist multisampling on these machines because of a driver bug but ended up disabling all hardware acceleration.

http://code.google.com/p/chromium/issues/detail?id=82104

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

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.

http://news.cnet.com/8301-30686_3-20061878-266.html

CNET Confirms

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)

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.

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.

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

(Macbook Pro with VGA and 8gb RAM)

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

You probably do not have GPU enabled. about:gpu might tell you why.

No problem in Safari 5, on a 2010 15" macbook

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

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

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

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

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

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

Does Safari 5 have WebGL implemented?

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

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

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

Working fine on 4.0.1 for me ;)

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.

Reply on news.ycombinator.com