If you don’t already know, I work at Mozilla.Unsure about my devotion to Mozilla? This here is a beautiful chicken and leek pie with extraFirefox goodness.It was made by my talented girlfriend and it was delicious.
My official job title is Technical Evangelist, but I prefer what it says on my business card.Part of my job is to engage with developers like you and I about cool new technologies on theWeb.And for those of you with no idea of what a rawket is, I made a multiplayer game calledRawkets in which players ﬂy around in little rockets and shoot each other in the face with thelatest Web technologies. It’s quite addictive!http://rawkets.com
I’m not sure how much time we’ll have for questions at the end, but feel free to grab me inperson after the talk or on Twitter.These slides will go online after this talk and they’ll be available from my personal website.I’ll put all the details up at the end.
So let’s go back in time for a moment.Now I don’t actually remember when I ﬁrst started playing computer games, although I knowthat I started with consoles.
My ﬁrst experience was with the ZX Spectrum and its amazing noises and epic loading times,which I sorely miss…
Then there was the SNES, which really got me addicted to gaming.Although it turns out my SNES was stolen when I was a kid. I did wonder where it went…
My parents replaced it with the Megadrive which, although not quite as awesome, was just asfun.From there it has been a constant stream of consoles, each smashing the performance andfunctionality of its predecessor.The N64, the Gamecube, the Dreamcast, the Playstation, the xBox.You get the idea…
And spread throughout that time I dabbled in PC gaming, starting with games like Sim City…
And playing multiplayer Doom at my Dad’s Internet cafe.What I’m getting at here is that gaming has been a big part of my life growing up, as it hasbeen with a lot of other people as well.They’re fun to play, and they’re surprisingly fun to make.
n ts e ve ng ble am i ota L5g N HTM in s-on going nt rta po ImRecently there have been some particularly notable events surrounding HTML5 gaming.
ns itio uis up Acq g boug ht in be es gin e en am 5g TML HThe acquisition of HTML5 gaming engines by large companies.Like Aves being bought by Zynga and Rocket Engine bought by Disney.
n t e itm ted ecru an R arew ers velop e de am L5g HTMThe recent recruitment of HTML5 games developers for well-known gaming companies, likeCrytek.http://crytek.com/career/offers/overview/frankfurt/programming-engineering/html5-game-dev
in g nd Fu eers ion thep in sting InveThe huge amounts of funding being made available to games that help prove the Web as agaming platform.Like the Game Lab from Bocoup and Atari’s general sponsorship of HTML5 games.http://gamelab.bocoup.com
ce s n re mes nfe ga Co L5 HTM of ture fu the ssing cu DisThe two large-scale HTML5 gaming conferences in the last few months.onGameStart in Poland and New Game in San Francisco.Each attended by hundreds of game and Web developers alike.
n t e m es olve am v in HTML 5g ser for row e tech B th ing rovid PThe investing of time and resources by Google, Mozilla and Opera into the creation oftechnologies and services for the beneﬁt of gaming on the open Web.Some of which we’ll be looking at in a moment.
nt e m ce o lve an inv rfo rm ok ing pe bo tter ace Be FThe involvement of Facebook in HTML5 gaming performance.http://developers.facebook.com/blog/post/454/
e s g a m iO S ap ab le h it than c ing ore ort L 5ism P HTM wing ShoAnd the recent port to HTML5 of massively successful iOS games like Angry Birds andFieldrunners.http://chrome.angrybirds.comhttp://ﬁeldrunnershtml5.appspot.com
es g a m ing ples ist exam Ex he be st ft eo SomNow there aren’t a huge amount of HTML5 games just yet, although that number is growingevery day.In any case I thought I’d show you a selection of my favourites; some full blown games,others demos of the technologies available to us.
Quake IIMultiplayer Quake II remake with Google GWT (Google Web Toolkit).http://code.google.com/p/quake2-gwt-port/
FreecivFreeciv, an open source Civilisation-type game that uses HTML5 canvas and WebSockets.3D WebGL version currently being worked on.http://freeciv.net
RawketsRawkets is a multiplayer space shooter that I created while at university to explore HTML5canvas and WebSockets.http://rawkets.com
Angry BirdsThere isn’t much to say about Angry Birds really, most of you probably know about it.The HTML5 version uses WebGL for accelerated 2D graphics.
FieldrunnersFieldrunners was ported from iOS to HTML5 by Bocoup.Like Angry Birds, it also uses WebGL for accelerated 2D graphics.
Created by Phil Banks (@emirpprime)It’s clear that HTML5 is something that is really becoming a contender for games on the Web.
ies log n o de ch source te he co en t Op nv iew ca yone AnThey are open technologies.Anyone can get involved in their creation; through browser developers like Mozilla, orthrough standards organisations like the W3C.A few weeks ago I was in a W3C meeting to explore what is needed for making games withthese technologies. What was cool was that anyone was allowed to take part; which includedeveryday developers, employees of major browsers, and games companies.Also, these technologies are open in that anyone can view the resulting code that is usedwithin Web pages, which is a fantastic way of learning.
ie s lo g n o ith e c h lop w e t de ve Fre ree to se.F u to FreeThey are free technologies.Anyone can use these technologies without having to pay anything, both for using thetechnology and developing with it.This is unlike closed environments like Flash where you have to pay to use official codeeditors and production environments.
less - in ware lug P soft rty d-pa thir on ce elian orer NomThey are technologies baked directly into the browser, which means no more plugins!No longer do you have to rely on users having third-party software installed to use richmedia.
b le e ra s rop rm Inte ss pla tfo cro orka ttow buil are ey ThThese technologies are built to work across platforms; whether that’s desktop, mobile, TV, oranything else!This makes it great to develop this way because you can be sure that it will work on anyplatform that has support.
o rt p p s u ed se r up po rt ro w ares -b ures ross ajor feat C m ost MAs with any technology on the Web it’s important that you can use it across all the majorbrowsers.Fortunately the bigger features of HTML5 like video and audio are supported by all the majorbrowsers, with some of the newer and smaller features getting better support as time goeson.The situation isn’t perfect but we’re deﬁnitely in a position where these technologies can nowbe used in production.There’s a fantastic website called Can I Use? which lets you know what browsers support eachtechnology.http://caniuse.com
But it’s not all rosy with HTML5.Why might you not want to use it?Here are just two of the major issues that are ﬂoating around right now.
ility at ib m p ryt hing co ve ull pp orte F ers su rows ll b ta NoNot every browser supports every part of HTML5.For example, canvas isn’t supported out of the box by any IE below 9. Although, you can useExplorerCanvas to replicate canvas functionality, but it’s not ideal and as doesn’t perform aswell.WebSockets is only support in IE10, and it isn’t supported in Android. But again, you can fakethis by using Flash for the sockets, like with Socket.IO.WebGL also has patchy support with absolutely no support in IE, and Safari and Operarequiring a development build.
RM o D N ologies echn eset th st again goes ItIf you need DRM or have a burning desire to hide absolutely everything about your code.Remember, the code isn’t compiled, so where would the DRM go? The beauty of Webtechnologies is that they can be read as plain text by simply viewing the page source.However, DRM isnt bulletproof in itself and you can still crack into Flash.You can obfuscate and minify your code if you think it will help, but even this can be workedaround with relative ease.
g y o lo chn es Te L5g am TM fH so cene s he dt hin BeThere are a few key technologies that are involved in the development of HTML5 games.Here are some of my favourites.
Silk is a stunning example of what can be achieved by combining the simple drawing toolsavailable in canvas.http://weavesilk.com
GL eb W form lat sp hic grap 3DWebGL brings the ability to provide advanced 3D graphics directly within the browser.https://developer.mozilla.org/en/WebGL
HelloRacer is a little game that lets you drive a Formula One car around your browser. It’s abeautiful example of WebGL in action.http://helloracer.com/webgl/
Rome is a music video created with WebGL. It’s an amazing example of what the technologycan achieve in a real-world situation given a large team.http://ro.me
This is a rather freaky example of how interesting WebGL is.It’s a demo that shows just how realistic WebGL can render materials, like skin. This isn’tmuch unlike the quality of modern games consoles!http://www.everyday3d.com/j3d/demo/014_Head.html
d io a u L5 usic TM nd m H grou ck ba nd ctsa effe nd SouHTML5 audio allows for plugin-less game sound effects and background music.Audio data APIs implemented by Mozilla and Google allow for manipulation of audio andmuch more ﬁne-grained control.https://developer.mozilla.org/en/HTML/Element/audio
This is something I made especially for the ASSEMBLY 2011 event in Finland.It’s an audio visualiser that uses WebGL and the HTML5 Audio Data API.http://robhawkes.github.com/webgl-html5-audio-visualiser/
e ts ock bS ation e W omm un ic yerc ltipla MuWebSockets can be used for the real-time communication between a player and the gameserver.With WebSockets you can create multiplayer games with relative ease.https://developer.mozilla.org/en/WebSockets
e.js od N cation uni m com rk etwo dn an logic e GamNode is often used as a multiplayer game server, controlling the logic and handling theWebSockets connections to the players.It can be used for player authentication and the storage of data so gameplay can persist overmultiple game sessions.This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets,and others that handle Redis and MongoDB for storage, for example.http://nodejs.org
ge ra to vice cal s r de Lo pla ye he t on ta da ng StoriLocal storage is great for storing data locally on the player device.This way you can cache game data and allow the game to pick up where the player left off.https://developer.mozilla.org/en/DOM/Storage
PI n A re e ul Sc we rf ull et po F im ple ,y SThe Full Screen API allows you to expand any HTML element to ﬁll the users screen, even ifthe browser isn’t running full screen itself.The Mozilla implementation is not perfect yet because you can’t use the whole keyboard infull-screen mode, but it’s in the latest Nightly builds and works in all other respects.https://bugzilla.mozilla.org/show_bug.cgi?id=545812http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.htmlhttps://wiki.mozilla.org/Platform/Features/Full_Screen_APIs
P I d A p a eb me he W Ga et ot ol ns co he gt gin BrinThe Gamepad API is one of the major improvements to input that is coming.Both Mozilla and Google are working an an implementation of this and there is actually anexperimental build of Firefox available to the public that has it working.What I ﬁnd most interesting about the Gamepad API is that it might be just the thing we needto ﬁnally justify HTML5 gaming on a TV or console.Who wants to use a keyboard and mouse while sitting on the sofa?https://wiki.mozilla.org/GamepadAPI
This is a little demo that I put together to show off the Gamepad API.In this example I’ve connected my xBox 360 controller to my Mac, but I could also use a PS3controller or practically any other USB controller.
P I A o ck ace L use no ne pl Mo rso ri cu he gt ockin LThe Mouse Lock API is an attempt at improving the mouse as an input device.It would be used in situations like games and 3D visualisations where the mouse positionrotates or moves you around a 3D space.As it stands there’d still be a cursor moving around the screen causing all sorts of troublewhen you want to click on something in your game.With the new API you can lock your mouse position and stop it from getting in the way andbeing a nuisance.Both Google and Mozilla are working on an implementation of this right now.https://bugzilla.mozilla.org/show_bug.cgi?id=633602
n s tio plica bsite ap yw e eb ta fanc W ot jus NThe concept of Web apps is something that is gaining a lot of traction at the moment.HTML5 games are effectively gloriﬁed Web apps.It’s no doubt this this traction is as a result of the success of native applications and gameson the desktop and mobile, particularly with iOS and Android.
Google are spending a lot of time on Web apps with the Chrome platform.https://chrome.google.com/webstore
It’s something we’re also spending a lot of time on at Mozilla.Although we’re approaching things a little differently.We envisage Web apps to run on any device, any browser, and to be distributed through anystore or website.https://apps.mozillalabs.comhttps://developer.mozilla.org/en/OpenWebApps
nce erie exp scre en like ho me p- op or Ap eskt thed from RunSomething that needs to be tackled with Web apps is how to make them feel like realapplications rather than websites.One way that is being considered is completely removing the browser chrome and runningthe application in it’s own window.This will effectively mean that you have full control of the app UI and it won’t look like it’sbeing run in a browser.
This kind of approach isn’t anything new but it will be the ﬁrst time it will be baked intobrowsers themselves.For now you can use things like Fluid, which is a Mac app that lets you turn a website into anapp that you can run from an icon on the desktop.It uses a browser engine behind the scenes but it hides away all the unnecessary chrome so itlooks native.
I currently use this approach for music streaming websites like Grooveshark to turn them intoan app.That way I don’t have to remember which tab they’re open in my browser.
e s gin e n ay e m game st od Ga ML5 HT te CreaIf you haven’t already then I encourage you to give HTML5 game development a go.And you dont have to create an entire game infrastructure from scratch, you can use some ofthe existing engines that are proving popular.
Impact.I used this recently, and it’s really well made.The documentation is great and the author is active and very helpful.http://impactjs.com/
Crafty.It’s a free engine and is doing much better than other free engines out there.http://craftyjs.com/
Isongenic Engine.One of the most promising engines out there today.Massively multiplayer networking built in, uses Node and MongoDB, and has canvas or DOM-based graphics.http://www.isogenicengine.com
O U Y s? K tion N ues A yq TH An R b es wk es Ha wk ob ha ro @Thank you.If you have any questions feel free to grab me on Twitter (@robhawkes), or email@example.com