Seth Ladd's Blog

This weekend I built a simple Chrome Extension which adds the Google +1 button to twitter.com.  The "Tweets +1" extension lets you +1 tweets from directly inside Twitter (well, New Twitter to be specific).  You can now +1 a tweet without ever leaving Twitter, plus see how many other people have +1'd a tweet. I nstall the Tweets +1 extension and let me know your thoughts .  Of course, it's open source thanks to GitHub . Tim Bray does a good job explaining what the +1 button is and why we should care. How it works This Chrome Extension uses a " content script " which is a fancy way of saying "inject some JavaScript from the extension into an existing web app or web page". The extension manifest declares which script to embed into the host page, and what pages should use the extension: The first bit of JavaScript needed to scan through the page and look for tweets inside of the HTML.  Luckily, thanks to querySelectorAll and matche...

Google IO 2011 is a wrap!  My first Google IO experience was great, thanks to the team for putting on a professional and fun show.  Many thanks to all of our attendees, you made it awesome. I've collected the slides, the video, and the source code for Super Browser 2 Turbo HD Remix: An Introduction to HTML5 Game Development . Session Description: HTML5 provides the foundation for rich and interactive experiences. Which is great, but we really want to build and play games! Learn the basics of building an HTML5 game and explore the related technologies. We'll write a simple game and give you the tools and techniques to create your own worlds and fun. Video: Slides: The slides for Super Browser 2 Turbo HD Remix: An Intro to HTML5 Game Development are of course written with HTML5. :) Source Code: Source code for the demo game, Bad Aliens Feedback: If you have 30 seconds, please do leave session feedback so I can improve for next time. Thanks everyone!

(disclaimer: I haven't seen every talk at Google IO this year, there might very well be other huge talks. This is what I've seen and want you to see, too.) These five talks are going to be huge.  If you are an HTML5 web developer you won't want to miss them.  And don't worry, these talks will be live streamed. HTML5 and What's Next by Alex Russell and Ian Fette will introduce, well, I don't want to spoil it.  Don't miss it. Super Browser 2 Turbo HD Remix : Intro to HTML5 Game Development by Seth Ladd will walk you though, from start to finish, how to build a simple HTML5 game.  Also, we'll blow up aliens. HTML5 Showcase for Web Developers : The Wow and How by Eric Bidelman and Arne Roomann-Kurrik has extremely high production value, awesome demos, and will open your eyes to what's possible in HTML5 now and soon. Mobile Web Development: From Zero to Hero by Michael Mahemoff and Paul Kinlan take a pragmatic approach as they walk you throu...

Whether you are new to HTML5 game development or an experienced practitioner, these blogs are publishing some great posts recently. I recommend following these HTML5 game development blogs to keep your finger on the pulse and learn some new HTML5 tips and tricks. Hiive Blog - porting Creatures and Castles to HTML5 Gopherwood Studios Blog - creators of Entanglement and working on something cool Game Closure Blog - building a multi-player HTML5 game development toolkit These blogs are active now and highly recommended. What are your favorite HTML5 game development blogs?

Due to the wide array of CPUs, graphics cards, and hardware acceleration options, HTML5 games need to deal with varying performance conditions.  This implies that HTML5 games need to track their internal game times to ensure everything happens in a predictable and deterministic manner. An "internal game time" is a clock that the game maintains, independent of the system's clock.  The internal game time can start at zero when the game starts and tick itself forward as the game progresses. To illustrate why the internal game time is important, consider the case of requestAnimationFrame .  Both Chrome and Mozilla have implemented requestAnimationFrame , a mechanism to hand off the animation frequency and sync to the browser.  This is A Good Thing, because the browser reduces or eliminates tearing effects because requestAnimationFrame is called when the browser is ready to paint the screen. requestAnimationFrame is also very smart, as the browser will not run anim...

An HTML5 game is classified as a game that: runs in a modern web browser is written in JavaScript uses Canvas or WebGL for graphics While there is a large and growing collection of HTML5 Game Engines and Frameworks , who out there has actually written a non-trivial, professional HTML5 game?  Here's my quick list: Lost Decade Games made Onslaught Impact made Biolab Disaster Gopherwood Studios made Entanglement EA made Poppit Pagoda Software made Wordico Grant Skinner made Pirates Love Daisies Massively Fun made Word Squared Hakim El Hattab made Sinuous Bocoup builds some serious JavaScript apps and demos, but haven't produced a straight up game (yet) Subsonic Games made Sonar Who did I miss?   What are some of your favorite HTML5 Game Developers?

Update: Ilmari Heikkinen has written a helpful Browser Rendering Loop blog entry. Everything you know is a lie. OK, not everything.  But everything you know about measuring the FPS for your HTML5 game is probably wrong.  Turns out that measuring the frame rate, or FPS, for an HTML5 game written in Canvas or WebGL is surprisingly difficult. http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html  will tell you that trying to measure framerate by counting how often your setTimeout runs is not accurate. The browser can run your Timeout callback multiple times between screen paints.  All you're probably doing is measuring how often your game loop runs, which is not FPS. Turns out Mozilla has a window.mozPaintCount  available, which should provide an accurate FPS. However, this only works for Mozilla. There's an open issue for a clone of window.mozPaintCount for Chrome , but doesn't look like there's much traction there. A manual way to check f...