The Future of HTML5 Games

In this talk Rob will highlight the key technologies and events that are going to affect open Web game development in the near future. He will also demo some of these new technologies and show how easy it is to share your game and make money from it using the open and distributed Mozilla Labs Apps project.

Transcript

1. OPEN WEB GAMES
   Using HTML5 & JavaScript
   Rob Hawkes
   Hi, I’m Rob Hawkes and I’m here today to talk about creating games on the open Web using
   HTML5 and JavaScript.
   

   View Slide

2. I work at Mozilla, a non-profit fighting 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 extra
   Firefox goodness.
   It was made by my talented girlfriend and it was delicious.
   

   View Slide

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 the
   Web.
   And for those of you with no idea of what a rawket is, I made a multiplayer game called
   Rawkets in which players fly around in little rockets and shoot each other in the face with the
   latest Web technologies. It’s quite addictive!
   http://rawkets.com
   

   View Slide

4. 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 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.
   

   View Slide

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.
   They’re technologies that are intrinsically linked to each other by nature, but saying HTML5
   and JavaScript every single time makes my head hurt.
   So instead I’ll just be saying HTML5.
   Just bear in mind that whenever I mention HTML5 I’m also referring to JavaScript as well.
   

   View Slide

6. So let’s go back in time for a moment.
   Now I don’t actually remember when I first started playing computer games, although I know
   that I started with consoles.
   

   View Slide

7. My first experience was with the ZX Spectrum and its amazing noises and epic loading times,
   which I sorely miss…
   

   View Slide

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…
   

   View Slide

9. My parents replaced it with the Megadrive which, although not quite as awesome, was just as
   fun.
   From there it has been a constant stream of consoles, each smashing the performance and
   functionality of its predecessor.
   The N64, the Gamecube, the Dreamcast, the Playstation, the xBox.
   You get the idea…
   

   View Slide

10. And spread throughout that time I dabbled in PC gaming, starting with games like Sim City…
    

    View Slide

11. And Megarace.
    Who remembers this one?
    

    View Slide

12. 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 has
    been with a lot of other people as well.
    They’re fun to play, and they’re surprisingly fun to make.
    

    View Slide

13. The time is now
    Threshold of something cool
    Today we’re now on the threshold of something cool; being able to create awesome and
    addictive games with nothing more than the technologies that we normally use to make
    websites, namely HTML5 and JavaScript.
    Since I began developing on the Web I really can’t remember a time when so many people are
    working together to achieve something like this.
    

    View Slide

14. Notable events
    Important goings-on in HTML5 gaming
    Recently there have been some particularly notable events surrounding HTML5 gaming.
    

    View Slide

15. Acquisitions
    HTML5 game engines being bought up
    The acquisition of HTML5 gaming engines by large companies.
    Like Aves being bought by Zynga and Rocket Engine bought by Disney.
    

    View Slide

16. Recruitment
    HTML5 game developers are wanted
    The recent recruitment of HTML5 games developers for well-known gaming companies, like
    Crytek.
    http://crytek.com/career/offers/overview/frankfurt/programming-engineering/html5-
    game-dev
    

    View Slide

17. Funding
    Investing in the pioneers
    The huge amounts of funding being made available to games that help prove the Web as a
    gaming platform.
    Like the Game Lab from Bocoup and Atari’s general sponsorship of HTML5 games.
    http://gamelab.bocoup.com
    

    View Slide

18. Conferences
    Discussing the future of HTML5 games
    The two large-scale HTML5 gaming conferences last year; onGameStart in Poland and New
    Game in San Francisco.
    Each attended by hundreds of game and Web developers alike.
    And rooms like this at other events are becoming much more common.
    

    View Slide

19. Browser involvement
    Providing the tech for HTML5 games
    The investing of time and resources by Google, Mozilla and Opera into the creation of
    technologies and services for the benefit of gaming on the open Web.
    Some of which we’ll be looking at in a moment.
    

    View Slide

20. Facebook involvement
    Bettering performance
    The involvement of Facebook in HTML5 gaming performance.
    http://developers.facebook.com/blog/post/454/
    

    View Slide

21. Porting hit iOS games
    Showing HTML5 is more than capable
    And the recent port to HTML5 of massively successful iOS games like Angry Birds,
    Fieldrunners, and Cut The Rope.
    http://chrome.angrybirds.com
    http://fieldrunnershtml5.appspot.com
    http://www.cuttherope.ie
    

    View Slide

22. Existing games
    Some of the best examples
    Now there aren’t a huge amount of HTML5 games just yet, although that number is growing
    every 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.
    

    View Slide

23. Quake II
    Multiplayer Quake II remake with Google GWT (Google Web Toolkit).
    http://code.google.com/p/quake2-gwt-port/
    

    View Slide

24. Minecraftian worlds
    Minecraft map viewer, using WebGL.
    This isn’t really a game, but it’s not a long way from becoming a JavaScript port of Minecraft.
    http://alteredqualia.com/three/examples/geometry_minecraft_ao.html
    

    View Slide

25. Minecraftian worlds
    WebCraft is an attempt at a port of Minecraft Classic.
    https://github.com/Overv/WebCraft
    

    View Slide

26. Angry Birds
    There 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.
    

    View Slide

27. Fieldrunners
    Fieldrunners was ported from iOS to HTML5 by Bocoup.
    Like Angry Birds, it also uses WebGL for accelerated 2D graphics.
    

    View Slide

28. Cut The Rope
    Cut The Rope was also ported from iOS to HTML5.
    

    View Slide

29. Bejeweled
    Bejeweled is a massively popular game on a whole variety of platforms.
    Popcap recently released a purely HTML5 version that uses WebGL for accelerated 2D
    graphics.
    

    View Slide

30. Created by Phil Banks (@emirpprime)
    It’s clear that HTML5 is something that is really becoming a contender for games on the Web.
    

    View Slide

31. HTML5 & JavaScript
    What is all the fuss about?
    But why is it important?
    Well to put it simply, HTML5 & JavaScript are the underlying technologies behind everything
    related to the future of the Web.
    Pretty much every new technology that is coming out within the browser-space is connected
    to HTML5 and JavaScript in some way.
    And what’s great is that every major browser has invested in them, so they won’t be going
    anywhere any time soon.
    But there’s more to it than that.
    

    View Slide

32. Open technologies
    Anyone can view the source code
    They are open technologies.
    Anyone can get involved in their creation; through browser developers like Mozilla, or
    through standards organisations like the W3C.
    Not long ago I was in a W3C meeting to explore what is needed for making games with these
    technologies. What was cool was that anyone was allowed to take part; which included
    everyday developers, employees of major browsers, and games companies.
    Also, these technologies are open in that anyone can view the resulting code that is used
    within Web pages, which is a fantastic way of learning.
    

    View Slide

33. Free technologies
    Free to use. Free to develop with
    They are free technologies.
    Anyone can use these technologies without having to pay anything, both for using the
    technology and developing with it.
    This is unlike closed environments like Flash where you have to pay to use official code
    editors and production environments.
    

    View Slide

34. Plugin-less
    No more reliance on third-party software
    They 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 rich
    media.
    

    View Slide

35. No compilation
    Save time with development and testing
    HTML5 and JavaScript don't require compiling, so development and testing can be extremely
    rapid.
    These technologies allow for quickly hacking stuff together to experiment then tidying things
    up later.
    It’s this rapid nature of JavaScript and HTML5 that make them so fun to develop with.
    

    View Slide

36. Interoperable
    They are built to work across platforms
    These technologies are built to work across platforms; whether that’s desktop, mobile, TV, or
    anything else!
    This makes it great to develop this way because you can be sure that it will work on any
    platform that has support.
    

    View Slide

37. Cross-browser support
    Most major features are supported
    As with any technology on the Web it’s important that you can use it across all the major
    browsers.
    Fortunately the bigger features of HTML5 like video and audio are supported by all the major
    browsers, with some of the newer and smaller features getting better support as time goes
    on.
    The situation isn’t perfect but we’re definitely in a position where these technologies can now
    be used in production.
    There’s a fantastic website called Can I Use? which lets you know what browsers support each
    technology.
    http://caniuse.com
    

    View Slide

38. 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 floating around right now.
    

    View Slide

39. Full compatibility
    Not all browsers support everything
    Not 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 use
    ExplorerCanvas to replicate canvas functionality, but it’s not ideal and as doesn’t perform as
    well.
    WebSockets is only support in IE10 and has poor support on Android. But again, you can fake
    this by using Flash for the sockets, like with Socket.IO.
    WebGL also has patchy support with absolutely no support in IE, and Safari and Opera
    requiring a development build.
    

    View Slide

40. No DRM
    It goes against these technologies
    If 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 Web
    technologies is that they can be read as plain text by simply viewing the page source.
    However, DRM isn't 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 worked
    around with relative ease.
    

    View Slide

41. Technology
    Behind the scenes of HTML5 games
    There are a few key technologies that are involved in the development of HTML5 games.
    Here are some of my favourites.
    

    View Slide

42. Canvas
    2D graphics platform
    Canvas is a 2D graphics platform that uses both HTML5 and JavaScript.
    It’s quite amazing what can be done with such simple drawing and image manipulation tools.
    https://developer.mozilla.org/en/HTML/Canvas
    

    View Slide

43. Silk is a stunning example of what can be achieved by combining the simple drawing tools
    available in canvas.
    http://weavesilk.com
    

    View Slide

44. WebGL
    3D graphics platform
    WebGL brings the ability to provide advanced 3D graphics directly within the browser.
    https://developer.mozilla.org/en/WebGL
    

    View Slide

45. HelloRacer is a little game that lets you drive a Formula One car around your browser. It’s a
    beautiful example of WebGL in action.
    http://helloracer.com/webgl/
    

    View Slide

46. Rome is a music video created with WebGL. It’s an amazing example of what the technology
    can achieve in a real-world situation given a large team.
    http://ro.me
    

    View Slide

47. 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’t
    much unlike the quality of modern games consoles!
    http://www.everyday3d.com/j3d/demo/014_Head.html
    

    View Slide

48. HTML5 audio
    Sound effects and background music
    HTML5 audio allows for plugin-less game sound effects and background music.
    Audio data APIs implemented by Mozilla and Google allow for manipulation of audio and
    much more fine-grained control.
    https://developer.mozilla.org/en/HTML/Element/audio
    

    View Slide

49. 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/
    

    View Slide

50. WebSockets
    Multiplayer communication
    WebSockets can be used for the real-time communication between a player and the game
    server.
    With WebSockets you can create multiplayer games with relative ease.
    https://developer.mozilla.org/en/WebSockets
    

    View Slide

51. Node.js
    Game logic and network communication
    Node is often used as a multiplayer game server, controlling the logic and handling the
    WebSockets connections to the 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 handle Redis and MongoDB for storage, for example.
    http://nodejs.org
    

    View Slide

52. Local storage
    Storing data on the player device
    Methods like the application cache, Local Storage, and IndexedDB are 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
    https://developer.mozilla.org/en/Offline_resources_in_Firefox
    https://developer.mozilla.org/en/IndexedDB
    

    View Slide

53. Full Screen API
    Simple, yet powerful
    The Full Screen API allows you to expand any HTML element to fill the users screen, even if
    the browser isn’t running full screen itself.
    The Mozilla implementation is not perfect yet because you can’t use the whole keyboard in
    full-screen mode without a message popping up, but it’s in the latest Nightly builds and
    works in all other respects.
    https://bugzilla.mozilla.org/show_bug.cgi?id=545812
    http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.html
    https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs
    

    View Slide

54. Gamepad API
    Bringing the console to the Web
    The 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 available to the public that has it working. The API is also in the
    Canary 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 on a TV or console.
    Who wants to use a keyboard and mouse while sitting on the sofa?
    https://wiki.mozilla.org/GamepadAPI
    http://www.gamepadjs.com
    https://github.com/jbuck/input.js
    

    View Slide

55. I’d like to show you a quick demo of the Gamepad API working in Firefox Nightly.
    In this example I’ve connected my xBox 360 controller to my Mac, but I could also use a PS3
    controller or practically any other USB controller.
    

    View Slide

56. This is another little demo that I put together to show off the Gamepad API implemented in
    my game Rawkets.
    

    View Slide

57. Mouse Lock API
    Locking the cursor in one place
    The 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 position
    rotates or moves you around a 3D space.
    As it stands there’d still be a cursor moving around the screen causing all sorts of trouble
    when 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 and
    being a nuisance.
    Both Google and Mozilla are working on an implementation of this right now, it’s available in
    a custom build of Firefox.
    https://bugzilla.mozilla.org/show_bug.cgi?id=633602
    

    View Slide

58. Web applications
    Not just a fancy website
    The concept of Web apps is something that is gaining a lot of traction at the moment.
    HTML5 games are effectively glorified Web apps.
    It’s no doubt this this traction is as a result of the success of native applications and games
    on the desktop and mobile, particularly with iOS and Android.
    

    View Slide

59. Google are spending a lot of time on Web apps with the Chrome platform.
    https://chrome.google.com/webstore
    

    View Slide

60. 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 any
    store or website.
    https://apps.mozillalabs.com
    https://developer.mozilla.org/en/OpenWebApps
    

    View Slide

61. Offline assets
    Who needs the Internet anyway
    One of the main differences between Web apps and native apps is that native apps can be run
    offline.
    New technologies like the application cache allow for a website or Web app to cache
    necessary assets to that it can still run while offline.
    This includes things like JavaScript files, CSS and images.
    Combining this technique with intelligent use of things like local storage will allow your game
    to continue working even if the Internet connection goes down. You just sync up all the
    changes when it gets connected again.
    https://developer.mozilla.org/en/Offline_resources_in_Firefox
    

    View Slide

62. App-like experience
    Launch from
    the desktop or home screen
    Something that needs to be tackled with Web apps is how to make them feel like real
    applications rather than websites.
    One way that is being considered is completely removing the browser chrome and running
    the 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’s
    being run in a browser.
    

    View Slide

63. 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 browser rendering engine behind the scenes.
    This is an example of Rawkets running as a WebRT app with the Firefox rendering engine.
    Notice the lack of browser UI.
    

    View Slide

64. Game engines
    Create HTML5 games today
    If you haven’t already then I encourage you to give HTML5 game development a go.
    And you don't have to create an entire game infrastructure from scratch, you can use some of
    the existing engines that are proving popular.
    

    View Slide

65. 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/
    

    View Slide

66. Crafty.
    It’s a free engine and is doing much better than other free engines out there.
    http://craftyjs.com/
    

    View Slide

67. 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
    

    View Slide

68. The future
    This is just the beginning
    It’s still early days with HTML5 games.
    There are a few things that I’d like to see in the near future that will help.
    Need better ways to benchmark browser performance, network connections and operating
    systems specifically for games.
    Better HTML5 audio. Right now things can be a little tricky, the ideal situation would be to
    have consistent support across browsers.
    Hardware accelerated canvas on Mac and mobile devices. This is a small ask but one that I
    feel will make all the difference.
    Better documentation for game development in JavaScript. This is something I’m working on
    with Mozilla, but more documentation is needed in general. I’d love to see more game
    developers sharing their solutions to problems that they encountered during the creation of
    their games.
    

    View Slide

69. Rob Hawkes
    Rawkets.com
    HTML5 & WebSockets game
    Twitter sentiment analysis
    Delving into your soul
    RECENT PROJECTS
    Rawkes.com
    Personal website and blog
    MORE COOL STUFF
    Rawket Scientist
    Technical Evangelist at Mozilla
    @robhawkes
    ExplicitWeb.co.uk
    Web development podcast
    Get in touch with me on Twitter: @robhawkes
    Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://
    rawkes.com
    I’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/
    blog/2011/05/05/people-love-a-good-smooch-on-a-balcony
    Rawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com
    

    View Slide

70. Hand-picked experts
    @ASKMDN & #ASKMDN ON TWITTER
    Coming back this year
    Web development topics
    Great discussions
    Ask MDN
    ASKMDN
    And lastly, I’d like to quickly mention Ask MDN which is a project that I’m working on at
    Mozilla.
    The concept is simple; every so often we gather a bunch of experts to answer your questions
    about a particular topic.
    We’ve had a whole bunch of sessions to date and it’s going down really well. If you follow
    @AskMDN on Twitter you’ll be sure not to miss the next one when it starts again this year.
    http://twitter.com/AskMDN
    

    View Slide

71. THANK YOU
    Any questions?
    Rob Hawkes
    @robhawkes
    Thank you.
    If you have any questions feel free to grab me on Twitter (@robhawkes), or email
    rob@rawkes.com
    

    View Slide