Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The State of HTML5 Games - Fluent JS


Published on

  • Be the first to comment

The State of HTML5 Games - Fluent JS

  1. 1. N T M E OP EL es EV L5 gam E D M HT Ha wk es AM te of Rob G e sta ThHi, I’m Rob Hawkes and I’m here today to talk about the state of HTML5 game development.
  2. 2. I work at Mozilla, a non-profit fighting for a better Web. The same guys who make Firefox.I’m pretty fond of Mozilla. So much so that my girlfriend made me a chicken and leek pie with extra Firefoxgoodness.It was delicious.
  3. 3. I’m not sure how much time we’ll have for questions at the end, but feel free to grab me in person after the talk or onTwitter.These slides will go online after this talk, they include links to more information on the technologies covered.I’ll put all the details up at the end.
  4. 4. nt rta po asons im ny re a re r ma es r fo am y ma tte G he TNow I think it’s safe to say that games are pretty important, for many reasons.
  5. 5. rsal ive un ryo ne a re e for ev e es am am re is ag G he TOne of those reasons is that they are universal.There are games out there to suit all walks of life; whether that’s a board game, card game, or computer game. It’sall the same.Over the years, I’ve played all sorts of games that each meant something different to me at that point in life.
  6. 6. It’s memories from games like Paperboy on the ZX Spectrum and its amazing noises and epic loading times.I sorely miss those days.
  7. 7. And Bomberman on the SNES, which really got me addicted to gaming.
  8. 8. And Lylat Wars on the Nintendo 64. Star Fox for the non-European folk.Do a barrel roll!
  9. 9. And the original Sim City.I don’t bare think about the hours I lost to that game, building a city on what I’ve only just noticed was an incrediblymuddy landscape.
  10. 10. And Red Alert, one of the first games I owned that let me play with others over the Internet. It was great fun!And probably one of my all-time favourites, along with the original Command and Conquer.Plus, it had an awesome soundtrack.
  11. 11. fun n d am te them a re ople ha es e) pe am (san G NoAnother reason is that they are incredibly fun to play.This is probably because they tap in to to our addictive, competitive personalities.I don’t know anyone who hates games.
  12. 12. However, I do know people who hate fruit. A lot.One of my favourite games at the moment is Fruit Ninja on the Kinect.It pretty much justifies the Kinect’s existence.I had a few friends over the other week and we all ended the weekend with Fruit Ninja-related injuries.It was worth it though.
  13. 13. Trailer for Fruit Ninja -
  14. 14. ries d a u n are b o ardw s h ste rh pu er, fa es r, b ett am Big ge GAside from being universal and fun, games are important because they push the boundaries of what’s possible withtoday’s technology.Games are one of the only things that deliberately use every ounce of your computer’s capabilities; from graphics, toprocessing power, to RAM, even to disk space.As computers constantly get better, games improve to use up the new improvements in speed and power.And computer hardware is improved, in part, because of the desire to create faster and more realistic games.
  15. 15. 2011 2002For example, this is Battlefield 3. It’s one of the most powerful and ‘realistic’ games out to date.It came out in 2011.Compare that to Battlefield 1942, which came out back in 2002.Notice the difference? There’s barely 9 years between them and yet it’s quite clear that Battlefield 3 is far superior, atleast visually.
  16. 16. Minimum specs 2400 2000 500 512 128 32 Processor (Mhz) Graphics (MB) RAM (MB) Battlefield 1942 (2002) Battlefield 3 (2011)Just take a look at the minimum hardware specs of Battlefield 1942 and Battlefield 3.In just 9 years we’ve pushed computers so far that the minimum requirement for a game today is way beyond whatwas even possible back in 2002.
  17. 17. Recommended specs 4000 2400 2400 2000 1024 500 512 32 128 Processor (Mhz) Graphics (MB) RAM (MB) Battlefield 1942 (2002) Battlefield 3 (2011) Battlefield 3 - Recommended (2011)And the minimum specs don’t even produce anything near the quality that you saw on the previous slide.For that you need even more powerful hardware.These are the recommended specs for Battlefield 3. Aside from processor speed, they are at least double everythingelse.We’re talking state of the art technology here, and even this still won’t run the game at its full potential.
  18. 18. e b r W ette mance a b erfor ea n ett er p db s m res an e tu Gam New feaWe now have more and faster processors than ever before, we have insanely powerful graphics cards, and so muchRAM we don’t know what to do with it.The improvements that games help bring about in computer hardware mean that we can now do some really coolstuff on the Web.Without games, there would be little need to continue pushing Web technologies; like faster JavaScript, or hardwareaccelerated CSS and multimedia rendering.
  19. 19. es gam rd o r e for wa y m b move Pla he We gt lpin he re ua YoSo in a rather long-winded way, my point here is that you need to play more games.You’re making the Web better and having fun at the same time. Win win!
  20. 20. Let’s shift our focus to HTML5 games.
  21. 21. es gam les ng mp sti xa Exi theb este e of SomThe number of HTML5 games out there is growing every day.I’d like to show you a selection of my favourites, just a tiny amount of what’s out there.
  22. 22. Quake IIFully-functional multiplayer Quake II port.
  23. 23. Cut The RopeCut The Rope, ported from iOS.
  24. 24. BejeweledBejeweled is a massively popular game on a whole variety of platforms.Popcap recently released a purely HTML5 version.
  25. 25. Command & ConquerCommand & Conquer: Tiberium Alliances is a HTML5 game from EA that is part real-time strategy, part Farmville.
  26. 26. GT RacingGT Racing: Motor Academy is a 3D racing game by Gameloft and Mandreel.
  27. 27. BrowserQuestBrowserQuest is a massively-multiplayer RPG that Mozilla recently launched to the public.It works great on mobile and desktop devices but what’s even better is that, aside from being an addictive game, theentire source code is on GitHub.http://browserquest.mozilla.org
  28. 28. logy no ech st ick T me ga L5 HTM akes tm ff tha stu TheThere are key technologies that are involved in the development of HTML5 games like the ones you just saw.
  29. 29. vas an C tfo rm pla ics ph gra 2DCanvas is a 2D bitmap graphics platform.It’s quite amazing what can be done with such simple drawing and image manipulation tools.In games this is used to do things like drawing sprites and performing image manipulation on the fly.
  30. 30. Silk is a stunning example of what can be achieved by combining the simple drawing tools available in canvas.
  31. 31. Close Pixelate is a canvas app that lets you manipulate images on–the-fly to create a pixelated effect.
  32. 32. You can even use canvas just for simple effects on a standard Web page.David Desandro uses canvas to draw curved lines on his portfolio that indicate areas of focus. Before canvas you’dhave had to have used static images or complex techniques to achieve this.
  33. 33. Last year I helped HTML5 Doctor implement a canvas-based rollover effect on their element index.With canvas, we were able to create custom-shaped rollovers that were entirely dynamic.We also cached these canvas-generated images so they didn’t need to be created on every page load.
  34. 34. Canvas <canvas id=myCanvasElement width=400 height=400></canvas>Using canvas is very straight forward.The first thing you need to do is add a canvas DOM element to your HTML page.
  35. 35. Canvas var canvas = document.getElementById(myCanvasElement);   var ctx = canvas.getContext(2d); ctx.fillStyle = "rgb(200,0,0)";   ctx.fillRect(10, 10, 55, 50);      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";   ctx.fillRect(30, 30, 55, 50);From there you can then access the canvas through JavaScript to draw on it and do other cool stuff.This is small canvas demo that draws a solid red square underneath a blue one with half transparency.‘myCanvasElement’ refers to a HTML <canvas> element that you’ll need to place in your HTML file somewhere. In thisexample, I’m assuming that you’ve already done that.
  36. 36. GL eb W tform pla ics ph gra 3DWebGL brings the ability to provide advanced hardware-accelerated graphics directly within the browser.Games use this to create immersive 3D worlds and models, or for accelerated 2D graphics.
  37. 37. HelloRacer is a little game that lets you drive a Formula One car around your browser. It’s a beautiful example ofWebGL in action.
  38. 38. Tinkercad is probably the best use of WebGL that I’ve seen in a production situation.It’s a Web app that allows you to create 3D objects in your browser using WebGL, then get them printed and sent toyour doorstep in just a few simple clicks. It’s seriously awesome.
  39. 39. Eve Online WebGL ship viewer.
  40. 40. Both Google Maps and Nokia have recently added support for WebGL. The Nokia version is particularly impressivebecause they fully render and texture 3D shapes of buildings.
  41. 41. Undulating monkey by Paul Lewis.
  42. 42. I’m not going to lie, WebGL isn’t the easiest thing to learn. Then again, no raw 3D code is that simple.Instead, I recommend checking out a library called three.js which abstracts WebGL and makes it much easier toimplement.
  43. 43. m e Fra on ps ati ation loo nim ed anim estA ptimis qu O rerequestAnimationFrame is the new, better way of managing animation in JavaScript.Instead of constantly running a setTimeout or setInterval function, which lack performance and spike CPU usage,requestAnimationFrame puts the browser in control of things and keeps things running smoothly.
  44. 44. requestAnimationFrame function update(timestamp) {   // Do something   window.mozRequestAnimationFrame(this);   } window.mozRequestAnimationFrame(update);In this example, I’m only using the Mozilla prefixed version of requestAnimationFrame. In reality, there’s a reallygood shim by Paul Irish that handles cross-browser requestAnimationFrame.
  45. 45. dio a u L5 usic TM ound m H gr ck ba nd ctsa effe nd SouHTML5 audio allows for plugin-less audio.For games, this would be used for sound effects and background music.Audio data APIs implemented by Mozilla and Google allow for manipulation of audio and much more fine-grainedcontrol.
  46. 46. 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.
  47. 47. rage ls to kies oca nc oo L oret ha gm rin StoMethods like the application cache, Local Storage, and IndexedDB are great for storing relatively large quantities ofdata locally.This way you can cache data and allow the website to pick up where the user left off.
  48. 48. ke ts Soc tion eb ica W comm un er lay ltip MuWebSockets can be used for the real-time communication between a browser client and server.For games, this would be used for fast-paced multiplayer functionality.
  49. 49. BrowserQuestThe BrowserQuest game that I showed earlier uses WebSockets to provide real-time multiplayer.Pretty much every character in the game is actually another person playing the game, with their movementstransmitted to you in real-time via WebSockets.
  50. 50. GoSquared use WebSockets for real-time website analytics.
  51. 51. WebSockets var ws = new WebSocket(; ws.send(This message is sent to the WebSocket server); ws.onmessage = function (event) {     console.log(;   }WebSockets are created entirely from JavaScript without the need to add elements to the HTML page.A new WebSocket connection can be opened by calling the ‘new WebSocket’ constructor and passing it the URL to theWebSocket server.From there you can call the ‘send’ method to push data to the server.Or listen for the ‘onmessage’ event to handle data pushed to you from the server.
  52. 52. ke rs o r W vaScr ipt eb ed Ja W read lti-th MuWeb Workers allow you to run JavaScript in separate background threads.This allows you to offload computationally-heavy tasks with a single worker, or tackle large quantities of data in afraction of the time by spreading tasks over multiple workers.Another benefit of doing this is that you don’t lock up the browser during heavy tasks, meaning a user can stillinteract with things and get stuff done.
  53. 53. Web Workers var worker = new Worker(my-worker.js); worker.onmessage = function(event) {    console.log(Worker message: +;   };Web Workers, like WebSockets, are created entirely through JavaScript.You create a new worker by calling the ‘new Worker’ constructor and passing it the path to a JavaScript file.You can then listen to the ‘onmessage’ event that will be fired every time the worker script sends data using a‘postMessage’ method.
  54. 54. P I n A e e ful llscr ow er u tp F , ye ple im SThe Fullscreen API allows you to expand any HTML element to fill the users screen, even if the browser isn’t runningfull screen itself.For games, this is great because you can make the small canvas element fill the entire screen.Outside of games, this is useful for video elements and Web applications.
  55. 55. Fullscreen API var canvas = document.getElementById(myCanvasElement); // Wait for user input canvas.mozRequestFullScreen();The Fullscreen API can be requested from any DOM element.In this example you’re asking a canvas element to expand to fill the screen.One thing to note is that you can’t just make any element fill the screen whenever you want. Right now, the user hasto click or press a key to initiate the Full Screen API.
  56. 56. PI A ck ace Lo ne pl ter r in o oin rso P e cu th ing LockThe Pointer 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 position rotates or moves you around a 3Dspace.As it stands there’d still be a cursor moving around the screen causing all sorts of trouble when you want to click on somethingin your game.With the new API you can lock your mouse position and stop it from getting in the way and being a nuisance.
  57. 57. Pointer Lock API var canvas = document.getElementById(myCanvasElement); // Go fullscreen canvas.mozRequestPointerLock();The Pointer Lock API can be requested from any DOM element that is already in full screen.
  58. 58. P I d A p a eb e m e to th eW Ga 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 an experimental build of Firefox availableto the public that has it working. The API is also in the dev build of Chrome.What I find most interesting about the Gamepad API is that it might be just the thing we need to finally justify HTML5 gaming ona TV or console.Who wants to use a keyboard and mouse while sitting on the sofa?
  59. 59. Gamepad API demoI’d like to show you a quick demo of the Gamepad API.In this example I’ve connected my Logitech controller to my Mac, but I could also use a PS3 controller or practically any other USBcontroller.
  60. 60. This is another little demo that I put together to show off the Gamepad API implemented in my game Rawkets.
  61. 61. Gamepad API function onGamepadConnected(e) { var controller = e.gamepad; console.log("Gamepad connected",; } window.addEventListener("MozGamepadConnected", onGamepadConnected);MozGamepadConnectedIt passes an event object that itself contains a gamepad object in reference to the connected gamepad.
  62. 62. Gamepad API function checkState(controller) { for (var i = 0; i < controller.buttons.length; i++) { console.log("Button state", i, controller.buttons[i]); } for (var j = 0; j < controller.axes.length; j++) { console.log("Axis state", j, controller.axes[j]); } }If you don’t want to use events you can also poll the entire gamepad state whenever you want.The only pre-requisite is that a gamepad is already connected and you’ve stored a reference to it somewhere, perhaps in avariable or array.Once you have reference to a gamepad you get the state by reading its buttons and axes objects. These are both arrays thatcontain data about every single button and axis available.The value of each button in the buttons array is a boolean that tells you whether the button is pressed down (true) or not (false).The value of each axis in the axes array is a -1.0 to 1.0 float that tell you exactly where a joystick is or how far a trigger has beenpulled.
  63. 63. P I n A a tio ces t vi rien mobile de n O on ree st- ha ve Sc MuThe Screen Orientation API allows you to do things like changing and locking, you guessed it, the orientation of thescreen.Before now, it’s been incredibly difficult to lock orientation on a website or game using nothing but JavaScript.
  64. 64. Screen Orientation API // Go fullscreen screen.mozLockOrientation(landscape);The Screen Orientation API is another relatively simple one.It just landed in Firefox Nightly on mobile.All you need to do is call the ‘lockOrientation’ method of the screen object and pass it a orientation string.It’s important to note that you also need to be using the Fullscreen API for the orientation lock to work.
  65. 65. e.js od ion N icat un comm rk etwo dn an gic r lo rve SeNode is often used as a multiplayer game server, controlling the logic and handling the WebSockets connections tothe players.It can be used for player authentication and the storage of data so gameplay can persist over multiple game sessions.This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets, and others that handleRedis and MongoDB for storage, for example.
  66. 66. ns io at site plic web ap fancy eb just a W NotThe concept of Web apps is something that is gaining a lot of traction at the moment.It’s no doubt this this traction is as a result of the success of native applications and games on the desktop andmobile, particularly with iOS and Android.
  67. 67. It’s something we’re spending a lot of time on at Mozilla.We envisage Web apps to run on any device, any browser, and to be distributed through any store or website.https://apps.mozillalabs.com
  68. 68. nce ie er creen exp es ike om p-l kto po rh Ap ed es th from ch un LaSomething that needs to be tackled with Web apps is how to make them feel like real applications rather thanglorified websites.One way that is being considered is completely removing the browser chrome and running the application in it’s ownwindow.This will effectively mean that you have full control of the app UI and it won’t look like it’s being run in a browser.
  69. 69. At Mozilla we call this WebRT, which stands for Web Run-Time.By using WebRT you can install a Web app directly into the OS just like you would a native application.The WebRT app will look and feel like a native application when launched but will actually be running a browserrendering engine behind the scenes.This is an example of the game Sinuous running as a WebRT app with the Firefox rendering engine. Notice the lack ofbrowser UI.
  70. 70. in es g e en today am am es G TM L5g ateH CreIf 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 of the existing engines that areproving popular.
  71. 71. Impact. A 2D game engine.I used this recently, and it’s really well made and has a good level editor and development tools.The documentation is great and the author is active and very helpful.
  72. 72. Crafty. Another 2D game engine.It’s a free engine and is doing much better than other free engines out there.
  73. 73. Construct 2 by Scirra.Windows only for now.
  74. 74. Gladius is a 3D game engine that we’re working on at Mozilla.
  75. 75. ing ort e & p -bas ion code rs g ve Usin a sin gle on CA lot of game developers want to target browsers but don’t want to rewrite their existing games in JavaScript.To help this process, various methods of converting an existing code-base to JavaScript are starting to appear.However, these methods also apply to non-games. Many people are now converting utility scripts from nativelanguages over to JavaScript. Things like SQLite, even Ruby!
  76. 76. Emscripten
  77. 77. BananaBreadBananaBread Cube 2 port via Emscripten
  78. 78. PlayN and Google Web Toolkit
  79. 79. PhoneGap
  80. 80. up g in zon p ee he hori K nt tuff o uchs SomI’ve really only touched the tip of the iceberg here.There is much more coming in the near future.Here are a few ways to keep up with things and get yourself prepared, particularly the things happening at Mozilla.
  81. 81. Are We Fun Yet? on the Mozilla Wiki
  82. 82. WebNFC WebVibration Battery API WebSMS Geolocation WebContacts Full Screen API WebTelephony Settings API WebUSB Multitouch WebGL Camera WebBluetoothAre We Mobile Yet? and B2Ghttp://arewemobileyet.com
  83. 83. Firefox Aurora“Get a first look at the latest developer tools, security features and innovative HTML5 and other Web technologies.”
  84. 84. Firefox NightlyBleeding edge functionality.Testing only.
  85. 85. h ts ug o th r in m ind inal ea F ing st ob th me SoBefore I finish, I’d like to talk about some things I’d like you to bear in mind regarding HTML5 game development.
  86. 86. a g ic t m ing no yth 5 is ever do L ot HTM It cannThere seems to be a lot of buzz around HTML5 in that it is seen as *the* technology to create absolutely everythingwith.This thinking is wrong.Just because games can be made with HTML5 & JavaScript, it doesnt mean that all types of games should be madewith those technologies.It can be the case that HTML5 & JavaScript might not be the best platform for your game. That isn’t a bad thing.We need to be realistic.
  87. 87. e b e W r th for ms s fo rp lat e m licating othe ga eate ep Sto pr CrRight now, we tend to be looking at games on the Web by comparing them to other platforms, usually by portingsuccessful titles to HTML5 from another platform, like iOS.By doing this were setting things up to fail, because the Web isnt the same as other platforms, and nor should it tryto replicate them.This fails because we just end up comparing the Web port of the game to the version from the native platform, whichis unfair and will usually always leave the Web version looking inferior.This isnt because the Web cant replicate the performance of native platforms, it is really because the game wasnever created for the Web.The other thing is that you’re actively limiting the capabilities of your game by replicating the experience from a iOS,PC or console game.The Web is inherently different and doesn’t require you to think about games in the same way.For example, the game doesn’t have to be stuck within an embedded box, it can be spread across a page, or evenspread across the Web.We need to think differently.
  88. 88. n s io at nce m it e li expe rie e v ic iffere nt e d me .D rac ga b me Sa EmJust because HTML5 is supported cross-platform doesn’t mean that a HTML5 game should work the same way cross-platform.
  89. 89. Say you had a multiplayer Battlefield 3-type game running on the desktop using rich high-resolution WebGL graphicsand WebSockets for real-time multiplayer.
  90. 90. Should it even be playable on other platforms, like mobile? And if so, should it look and feel the same as it does onthe desktop?My opinion is that it should work on other platforms, where necessary, but not look and feel the same.This is purely down to hardware performance, input methods, and general experience. It would be crazy to think thata bleeding-edge desktop HTML5 game would perform at the same level on mobile hardware – we dont expect thisfrom other platforms, so why HTML5?And even if it could run at the same performance, things like screen size and input methods would make the gameunplayable – everything would be too small and your thumbs would be in the way.
  91. 91. So imagine youre playing the HTML5 BF3 on your desktop, you have a fullscreen, immersive first-person experiencewith complex mouse and keyboard controls, like any other native desktop shooter.Your friends are also playing in the game via WebSockets and you can see them running around in the game world.Now imagine you need to leave the house for a while (god forbid) and you dont want to stop playing the game.So on your way out of the door you open up HTML5 BF3 on your mobile phone, but instead of trying to replicate thatepic immersive experience from your desktop you now jump into a mobile-optimised version of the game.
  92. 92. In this version youre still using WebSockets to connect to the same game that youre friends are still playing in, butinstead of the intense 3D WebGL graphics and complex control system you get a 2D birds-eye view of the gameworld.In this view you can see little green dots that represent your mates, and little red dots that represent the enemies.From here you can basically act as the commander of the team in the same game you were in previously, whileplaying to the strengths of the device that youre currently on.By clicking on each teammate you can send them a message that will show up on their HUD on the desktop, or byclicking on enemy players they will be highlighted in the 3D world that your friends are still playing in, or call in aairstrike by dragging out a target area on the map.The point here is that youre still able to take part in the same game world that you were playing in previously whilekeeping a realistic and enjoyable experience by adapting to the device that youre using.
  93. 93. es gam e a ke esom m ture is aw nd h a he fu fort T GoSo I hope that I’ve managed to peak your interest in HTML5 games enough for you to go out and play more withthese technologies.Even if you don’t want to make a full game, I encourage you to experiment with some of the individual technologiesthat we covered.The future is very bright for games on the Web.I’m really excited to see what comes in the following months and years.
  94. 94. Rob Hawkes @robhawkes Personal website and blog RECENT PROJECTS MORE COOL STUFF Twitter sentiment analysis Rawket Scientist Delving into your soul Technical Evangelist at Mozilla Slides HTML5 & WebSockets game in touch with me on Twitter: @robhawkesFollow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://rawkes.comI’ve recently worked on a project that analyses sentiment on Twitter: is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.comThese slides are online at