New Game Highlights

Last week I attended New Game Con­fer­ence, the sec­ond con­fer­ence in exis­tence tar­get­ing HTML5 game devel­op­ment. It was a blast. Con­sid­er­ing how fan­tas­tic it was I wanted to share some of the really cool bits I learned while there.


(from Debug­ging and Opti­miz­ing WebGL Appli­ca­tions by Ben Vanik and Ken Rus­sell of Google)

WebGL-Inspector is a great browser based tool for debug­ging and opti­miz­ing WebGL. It was pre­sented in an appro­pri­ately titled talk that gave a lot of use­ful tips such as remov­ing redun­dant WebGL calls. You can view infor­ma­tion about tex­tures, buffers, shader pro­grams, and state. By cap­tur­ing a frame with the tool you can view the order of WebGL calls, affect­ing the usage of tex­tures and buffers and so on. Once you have a cap­ture, it can inform you of redun­dant WebGL calls that can be removed to help opti­mize an application.

Remov­ing these redun­dant WebGL calls has vary­ing speed ben­e­fits. Some calls are rel­a­tively cheap, such as changes to shader pro­gram uni­forms, but they can add up. Other calls can be expen­sive, such as state changes like whether the GPU should blend results.

WebGL Inspec­tor Embed­ded Demo

Slides and Examples

Sound Sprites (Jukebox)

(from the sec­ond keynote by Paul Bakaus of Zynga)

The HTML Audio tag has proven dif­fi­cult to use for games for many devel­op­ers, but a tech­nique referred to as sound sprites solves some of the issues. In short, a sound sprite is one audio file con­tain­ing a num­ber of sounds with small padding in-between. The padding is impor­tant to keep one sound from lead­ing into another, sim­i­lar to bleed­ing in WebGL sprite sheets, as the Audio tag does not present a time-responsive fash­ion to pause a sound. While it may be tempt­ing to imple­ment this idea your­self, there are some work­ing imple­men­ta­tions out there like Zynga’s Juke­box.

While speak­ing with Mark Fen­nell of Soap Cre­ative he men­tioned that they used Data URIs for their sounds in World’s Biggest Pac­man. From a cur­sory search I found an old stack over­flow ques­tion that cov­ers the idea.

Can­vas Opti­miza­tion Variability

(from Div­ing Deep into Can­vas by Grant Skin­ner of

Most games at some point in their devel­op­ment receive a pass at opti­miz­ing the graph­ics to run faster. In his talk, Grant pre­sented how opti­miz­ing the can­vas tag’s 2D con­text can be dif­fi­cult. This dif­fi­culty arises from the vari­abil­ity of per­for­mance across browser, oper­at­ing sys­tem, and whether that com­puter sup­ports the browser’s hard­ware acceleration.

One exam­ple that stuck with me was caching related draws into an off­screen buffer using an can­vas object. In the demo pre­sented, this greatly enhanced speed for some 2000 objects made from mul­ti­ple draws in a soft­ware ren­der­ing browser. But in a hard­ware ren­der­ing browser this caused a sig­nif­i­cant slowdown.


(from Port­ing Ember­wind to HTML5 by Erik Moller of Opera Software)

Two things blew my mind at New Game: the first was the WebGL-Inspector demo, and the sec­ond was Erik’s Odin demo. The demo isn’t any­thing like a game but demon­strates a detailed WebGL scene with a high fidelity ani­mat­ing char­ac­ter which was fan­tas­tic to see since demos like this have been few in num­ber. I do not believe I have seen one with graph­i­cal art of this quality.

New Game had a lot of great mate­r­ial cov­er­ing a lot of bases. A lot of this may vary in usage from one devel­oper to the next due to tech­nol­ogy choices. How­ever, see­ing all these pos­si­bil­i­ties of what can be done now with browsers is really impres­sive. The tech­nol­ogy is ready. Some holes are actively being filled, like opti­mal sound play­back for games, but game devel­op­ment has always occured in con­straints that can be cre­atively worked around. HTML5 (open web tech­nolo­gies) def­i­nitely has the stuff right now for game development.

Z God­dard

Z, a fan of hats and danc­ing to bad music, devel­ops games and code in Unity3D and WebGL. Always look­ing at new tech­nolo­gies for games, he has big dreams for Go.

More PostsTwit­ter

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>