How to get started with making a game like Angry Birds on Chrome

Question

http://chrome.angrybirds.com/

The browser based app is said to be done using Canvas 2D or Web GL.

I tried to view source using chrome by using "Inspect Element" button, but my chrome crashes each time.

I am just trying to find out how one can begin to develop such awesome games. Looking for pointers to online resources,books, and specific tips for beginners.

Answer 1

If you want a book, Foundation HTML5 Canvas: For Games and Entertainment just came out. It is fairly basic but will be useful to you if you are completely new to JavaScript and Canvas.

A faster-paced introduction would be the Mozilla Canvas tutorial, which is very clear.

To get a grasp on going from drawing things to being able to interact with them, I'd suggest my own tutorials on the matter, here.

For a general book on Javascript (regardless of your prior experience), it is probably worth reading Javascript: The Good Parts

As for general advice, I give you the words of Ira Glass:

Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you. A lot of people never get past this phase, they quit. Most people I know who do interesting, creative work went through years of this. We know our work doesn’t have this special thing that we want it to have. We all go through this. And if you are just starting out or you are still in this phase, you gotta know its normal and the most important thing you can do is do a lot of work. Put yourself on a deadline so that every week you will finish one story. It is only by going through a volume of work that you will close that gap, and your work will be as good as your ambitions. And I took longer to figure out how to do this than anyone I’ve ever met. It’s gonna take awhile. It’s normal to take awhile. You’ve just gotta fight your way through.

Answer 2

When you "view source" (as opposed to using "Inspect Element"), the first meta tag says

name="gwt:property" content="html.renderer=webgl"

So I would conclude that WebGL is indeed being used. (WebGL in fact uses the canvas element, so the answer is technically "Canvas and Web GL" rather than "Canvas or Web GL". But I'm guessing it doesn't use the javascript canvas 2D API.)

When I use Ctrl+Shift+I and click 'Elements', the DOM tree shows that the <div> whose id is "forplay-root" has a child <canvas> element. But I don't know how to verify if it is being used for WebGL or more conventional canvas 2D calls.

A very nice site for learning WebGL is Learning WebGL. In particular, take a look at The Lessons.

I don't know why the page crashes your Chrome page. Are you using a brand-new version of Chrome? The release version didn't support WebGL till fairly recently. (But that wouldn't explain the crash... you just wouldn't see the action.) You may need to submit a bug report for Chrome.

Answer 3

The Angry Birds port was done using the GWT ForPlay library http://code.google.com/p/forplay/

The fancy thing about it is that you can write your game in Java and compile it for Android, WebGL and Flash from the same source. Which is pretty awesome. Check out the Google I/O 2011 presentation on ForPlay for more details http://www.youtube.com/watch?v=F_sbusEUz5w