Canvas vs. DOM Recently I've been researching HTML5 Canvas vs. DOM Manipulation speed for developing web games and I ran across Angry Birds for Chrome! Naturally curious, I went looking through the javascript to see what Rovio decided was the best option. Obviously, the script was obfuscated but after a little work and a lot of 'find and replaces', I discovered that the scripts are created using the Google Web Toolkit. The script is a bootstrap loader that loads the correct javascript file based on the browser. Using the built-in Chrome developer tools, I was able to figure out how the bootstrapping sequence worked and view the loaded javascript (obfuscated again). Google Web Toolkit Next, I went looking into the Google Web Toolkit (GWT). Did you know you can write client/server side programs in Java and generate highly optimized client-side javascript code? Sorry, write and DEBUG client side programs in java and compile to javascript (JS)! The java servlets assume you're using Google App Engine (GAE). However, the GWT RPC uses JSON as the wire format so I'm sure you could write the server side code in PHP/Python/whatever. (GAE has a Python Environment). When you're debugging, you're running the client side code in Java and Eclipse will let you set breakpoints and step through the code. GWT spawns a local server (two actually, one serving the HTML and another running the GAE sandbox for the server side code). GWT comes with full DOM manipulation support including Canvas, HTML5 and CSS3! Angry Birds GWT isn't new. But Angry Birds Chrome is (less than a week). Load Angry Birds in Chrome, click on the wrench and select "Tools->Developer Tools." From there you can browse all the assets, the local store, the javascript (obfuscated by GWT) and execute commands in the console. Looking at the resources you can find texture atlases. These could easily be CSS Sprite sheets, but I noticed that the sizes are pow2. i.e. optimized for OpenGLES loading on embedded devices. I'm 95% sure that the game uses canvas. Also, I think the background sound track is a hidden Flash window. Thoughts... What do Java developers think of generating JS/HTML5 applications? Do you think Angry Birds will provide the weight to tip in favor of HTML5/Canvas games? The generated Javascript(s) are optimized for each browser and heavily obfuscated. GWT also has documentation on Security practices (for server/client communication). How Many people are worried about their code being stolen or hacked by being written in JS? Does the GWT generated code alleviate your worries?
It actually seem to use WebGL. Which is basically OpenGL in <canvas>. Here are some nice examples: http://www.ibiblio.org/e-notes/webgl/webgl.htm
I'm 5 months into my HTML5 game, with about 4/5 months left before it'll be finished. I've been checking the web periodically for new HTML5 games that might compete with my own, and I've definitely noticed a huge increase in the frequency of new games, even over that short period of time. New releases are of a much higher quality than they were, too. It's got me a little worried - 5 months ago my game would have stood head and shoulders above the rest; in 5 months it might be little more than mediocre. Code theft isn't an issue. The web is about sharing anyway - no-one will be able to reproduce my game from the code they can see (much of it is server-side), and I have no problem if they delve into it in order to inform their own programming choices (as you have with Angry Birds). In fact, I think that programming on the web is the easiest way to beat the pirates.
All of the sounds are played with Flash. Did you see this? http://www.youtube.com/watch?v=F_sbusEUz5w
Angry Birds is using WebGL and not the Canvas Object : http://www.google.co.uk/search?q=angry+birds+webgl
Very cool indeed. After learning of WebGL in Angry birds, I found the following bindings: http://code.google.com/p/gwtgl/ http://code.google.com/p/forplay/ Thanks, guys. Great links!