NY HTML5 - Game Development with HTML5 & JavaScript

  • View

  • Download

Embed Size (px)


In this talk I will bring you up to speed with using HTML5 tools and techniques for game development. I will discuss some basic and advanced techniques and highlight the key lessons that I've learnt, as well as the technologies and game engines that you should be aware of.

Text of NY HTML5 - Game Development with HTML5 & JavaScript

  • 1. NT MEP O ript EL EV JavaScE5D & awkes M HTMA ingL RobH Gs UHi, Im Rob Hawkes and Im here today to talk about creating games on the open Web usingHTML5 and JavaScript.

2. I work at Mozilla, a non-prot ghting for a better Web. The guys who make Firefox.Unsure about how much I like Mozilla? This here is a beautiful chicken and leek pie with extraFirefox goodness.It was made by my talented girlfriend and it was delicious. 3. 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. Its quite addictive!http://rawkets.com 4. Im not sure how much time well 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.Ill put all the details up at the end. 5. Before we move on I just have a quick disclaimer.This whole talk is about HTML5 and JavaScript as technologies for the creation of games.Theyre technologies that are intrinsically linked to each other by nature, but saying HTML5and JavaScript every single time makes my head hurt.So instead Ill just be saying HTML5.Just bear in mind that whenever I mention HTML5 Im also referring to JavaScript as well. 6. So lets go back in time for a moment.Now I dont actually remember when I rst started playing computer games, although I knowthat I started with consoles. 7. My rst experience was with the ZX Spectrum and its amazing noises and epic loading times,which I sorely miss 8. 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 9. 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 10. And spread throughout that time I dabbled in PC gaming, starting with games like Sim City 11. And Megarace.Who remembers this one? 12. And playing multiplayer Doom at my Dads Internet cafe.What Im 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.Theyre fun to play, and theyre surprisingly fun to make. 13. owis ne cool timthinghe om e T do fs ol resh ThToday were now on the threshold of something cool; being able to create awesome andaddictive games with nothing more than the technologies that we normally use to makewebsites, namely HTML5 and JavaScript.Since I began developing on the Web I really cant remember a time when so many people areworking together to achieve something like this. 14. n tse ve ngble am i ota L5gN HTMin s-ongoing ntrtapoImRecently there have been some particularly notable events surrounding HTML5 gaming. 15. nsitiouis up Acq g bought inbe esgine enam5g TMLHThe acquisition of HTML5 gaming engines by large companies.Like Aves being bought by Zynga and Rocket Engine bought by Disney. 16. n t e itm ted ecruanR arewersvelope deam L5gHTMThe recent recruitment of HTML5 games developers for well-known gaming companies, likeCrytek.http://crytek.com/career/offers/overview/frankfurt/programming-engineering/html5-game-dev 17. in gndFueers ion thepinstingInveThe huge amounts of funding being made available to games that help prove the Web as agaming platform.Like the Game Lab from Bocoup and Ataris general sponsorship of HTML5 games.http://gamelab.bocoup.com 18. ce sn re mesnfe gaCo L5HTM ofturefuthessingcu DisThe two large-scale HTML5 gaming conferences last year; onGameStart in Poland and NewGame in San Francisco. As well as a whole bunch of HTML5-related sessions at GDC this year.Each attended by hundreds of game and Web developers alike. 19. n t em es olve amvin HTML5gserfor row e techBthing rovidPThe investing of time and resources by Google, Mozilla and Opera into the creation oftechnologies and services for the benet of gaming on the open Web.Some of which well be looking at in a moment. 20. ling too r te ceable rate etB a notiatovingprImGame engines and tooling for HTML5 development have been improving at a noticeable rate.Ill cover some of these game engines further on in the talk. 21. e s ga miO Sapable h it than c ingoreort L 5ism P HTM wingShoAnd the recent port to HTML5 of massively successful iOS games like Angry Birds,Fieldrunners, and Cut The Rope.http://chrome.angrybirds.comhttp://eldrunnershtml5.appspot.comhttp://www.cuttherope.ie 22. es g a mingples ist exam Exhebest ft eoSomThe number of HTML5 games out there is growing every day.In any case I thought Id show you a selection of my favourites, just a tiny amount of whatsout there. 23. Quake IIMultiplayer Quake II remake with Google GWT (Google Web Toolkit).http://code.google.com/p/quake2-gwt-port/ 24. Angry BirdsThere isnt much to say about Angry Birds really, most of you probably know about it.The HTML5 version uses WebGL for accelerated 2D graphics. 25. FieldrunnersFieldrunners was ported from iOS to HTML5 by Bocoup.Like Angry Birds, it also uses WebGL for accelerated 2D graphics. 26. Cut The RopeCut The Rope was also ported from iOS to HTML5. 27. BejeweledBejeweled is a massively popular game on a whole variety of platforms.Popcap recently released a purely HTML5 version that uses WebGL for accelerated 2Dgraphics. 28. Command & ConquerCommand & Conquer: Tiberium Alliances is a HTML5 game from EA that uses canvas for thegraphics. 29. GT RacingGT Racing: Motor Academy by Gameloft and Mandreel. Using WebGL for accelerated 3Dgraphics.http://www.mandreel.com/?page_id=1312 30. BrowserQuestBrowserQuest is a massively-multiplayer RPG that Mozilla recently launched to the public.It was created by Little Workshop in France and uses HTML5 canvas for the graphics,WebSockets for real-time communication, and a whole range of other tech to handle save-game data and other things.It works great on mobile and desktop devices but whats even better is that, aside from beingan addictive game, the entire source code is on GitHub.http://browserquest.mozilla.orghttps://github.com/mozilla/BrowserQuesthttp://hacks.mozilla.org/2012/03/browserquest/ 31. Its clear that HTML5 is something that is really becoming a contender for games on the Web.Its an open technology stack that is pluginless, doesnt require compilation, and works thesame across devices and platforms. 32. But just because HTML5 is the trendy thing doesnt mean that you need to use it.So why might you not want to use it? 33. ilitya tib rep m everywhell co tedFu pp or tsurenga hin etSomNot every browser supports every part of HTML5.For example, canvas isnt supported out of the box by any IE below 9. Although, you can useExplorerCanvas to replicate canvas functionality, but its not ideal and as doesnt perform aswell.WebSockets is only support in IE10 and has poor support on 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.There is no denying that the cross-browser situation is by no means perfect for somefunctionality. 34. RMo D Nologies echn eset thst againgoes ItIf you need DRM or have a burning desire to hide absolutely everything about your code.Remember, the code isnt 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 things like Flash.You can obfuscate and minify your code if you think it will help, but even this can be workedaround with relative ease. 35. ns t ioita thingy lim every logdo no ed to Tech er prom is nevL5 HTMIt is wrong to see HTML5 as a one-size-ts-all solution.There are things that its meant to do, and things that its not meant to do.Comparing HTML5 to other technologies always results in, but HTML5 doesnt to this, orthat.In cases like that, perhaps HTML5 isnt the right technology for you. 36. g y o lochn esTeL5g am TMfHsocene s he dthinBeThere are a few key technologies that are involved in the development of HTML5 games.Here are some of my favourites. 37. vas anCtformplaicsraph g2DCanvas is a 2D graphics platform that uses both HTML5 and JavaScript.Its quite amazing what can be done with such simple drawing and image manipulation tools.https://developer.mozilla.org/en/HTML/Canvas 38. Silk is a stunning example of what can be achieved by combining the simple drawing toolsavailable in canvas.http://weavesilk.com 39. GLeb W form lat sphicgrap 3DWebGL brings the ability to provide advanced 3D graphics directly within the browser.https://developer.mozilla.org/en/WebGL 40. HelloRacer is a little game that lets you drive a Formula One car around your browser. Its abeautiful example of WebGL in action.http://helloracer.com/webgl/ 41. Rome is a music video created with WebGL. Its an amazing example of what the technologycan achieve in a real-world situation given a large team.http://ro.me 42. This is a rather freaky example of how interesting WebGL is.Its a demo that shows just how realistic WebGL can render materials, like skin. This isntmuch unlike the quality of modern games consoles!http://www.everyday3d.com/j3d/demo/014_Head.html 43. m eFraon ps atiati onloo nim d anim estA timise quOp rerequestAnimationFrame is the new, better way of managing animation in JavaScript.Instead of constantly running a setTimeout or setInterval function, which lack performanceand spike CPU usage, requestAnimation frame puts the browser i