Open Web Games with HTML5 & JavaScript
7 likes3,057 views
Rob Hawkes gives a talk about creating games using HTML5 and JavaScript. He discusses technologies like Canvas, WebGL, WebSockets, and the Gamepad API. Hawkes shows examples of existing HTML5 games and demos the Gamepad API. He encourages the audience to try HTML5 game development and recommends game engines like Impact.js and Crafty.js. Hawkes concludes by sharing his contact information and projects.
![Gamepad state
function checkState() {
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 a variable or array.
Once you have reference to a gamepad you get the state by reading its buttons and axes
objects. These are both arrays that contain 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 been pulled.](https://image.slidesharecdn.com/openwebgameswithhtml5javascript-120324120811-phpapp02/85/Open-Web-Games-with-HTML5-JavaScript-41-320.jpg)
Open Web Games with HTML5 & JavaScript
- 1. ES M t A rip G B avaSc E W L5 & J es EN TM bH aw k OP ing H Ro s U Hi, I’m Rob Hawkes and I’m here today to talk about creating games on the open Web using HTML5 and JavaScript.
- 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.
- 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
- 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. I’ll put all the details up at the end.
- 5. 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.
- 6. My first experience was with the ZX Spectrum and its amazing noises and epic loading times, which I sorely miss…
- 7. 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…
- 8. 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…
- 9. And spread throughout that time I dabbled in PC gaming, starting with games like Sim City…
- 10. And Megarace. Who remembers this one?
- 11. 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.
- 12. ow is n e cool tim thing he om e T do fs ol resh Th 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.
- 13. es g a m ing ples ist exam Ex he be st ft eo Som The number of HTML5 games out there is growing every day. In any case I thought I’d show you a selection of my favourites, just a tiny amount of what’s out there.
- 14. Quake II Multiplayer Quake II remake with Google GWT (Google Web Toolkit). http://code.google.com/p/quake2-gwt-port/
- 15. 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.
- 16. Fieldrunners Fieldrunners was ported from iOS to HTML5 by Bocoup. Like Angry Birds, it also uses WebGL for accelerated 2D graphics.
- 17. Cut The Rope Cut The Rope was also ported from iOS to HTML5.
- 18. 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.
- 19. Command & Conquer Command & Conquer: Tiberium Alliances is a HTML5 game from EA that uses canvas for the graphics.
- 20. GT Racing GT Racing: Motor Academy by Gameloft and Mandreel. Using WebGL for accelerated 3D graphics. http://www.mandreel.com/?page_id=1312
- 21. Created by Phil Banks (@emirpprime) It’s clear that HTML5 is something that is really becoming a contender for games on the Web.
- 22. g y o lo chn es Te L5g am TM fH so cene s he dt hin Be There are a few key technologies that are involved in the development of HTML5 games. Here are some of my favourites.
- 23. vas an C tfo rm pla ics raph g 2D 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
- 24. Silk is a stunning example of what can be achieved by combining the simple drawing tools available in canvas. http://weavesilk.com
- 25. GL eb W form lat sp hic grap 3D WebGL brings the ability to provide advanced 3D graphics directly within the browser. https://developer.mozilla.org/en/WebGL
- 26. 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/
- 27. 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
- 28. 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
- 29. m e Fra on ps ati ati on loo nim d anim estA timise qu Op re requestAnimationFrame 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, requestAnimation frame puts the browser in control of things and keeps things running smoothly. Right now you can’t easily set a specific framerate when using requestAnimationFrame but so long as you use time-based updates (not frame-based) in your game then you’ll be fine.
- 30. d io a u L5 usic TM nd m H grou ck ba nd ctsa effe nd Sou 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
- 31. 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/
- 32. e ts ock bS ation e W omm un ic yerc ltipla Mu 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
- 33. P I A o ck ace L use no ne pl Mo rso ri cu he gt ockin L 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
- 34. P I d A p a eb me he W Ga et ot ol ns co he gt gin Brin 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 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 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
- 35. Gamepad API demo I’d like to show you a quick demo of the Gamepad API working in Firefox Nightly and Google Chrome. In this example I’ve connected my Logitech controller to my Mac, but I could also use a PS3 controller or practically any other USB controller.
- 36. This is another little demo that I put together to show off the Gamepad API implemented in my game Rawkets.
- 37. Connection function onGamepadConnected(e) { var controller = e.gamepad; console.log("Gamepad connected", controller.id); } window.addEventListener("MozGamepadConnected", onGamepadConnected); MozGamepadConnected It passes an event object that itself contains a gamepad object in reference to the connected gamepad.
- 38. Disconnection function onGamepadDisconnected(e) { var controller = e.gamepad; console.log("Gamepad disconnected", controller.id); } window.addEventListener("MozGamepadDisconnected", onGamepadDisconnected); MozGamepadDisconnected It passes an event object that itself contains a gamepad object in reference to the disconnected gamepad.
- 39. Button events function onGamepadButtonDown(e) { var button = e.button; console.log("Gamepad button pressed", button); } function onGamepadButtonUp(e) { var button = e.button; console.log("Gamepad button released", button); } window.addEventListener("MozGamepadButtonDown", onGamepadButtonDown); window.addEventListener("MozGamepadButtonUp", onGamepadButtonUp); MozGamepadButtonDown MozGamepadButtonUp Each pass an event object that contains a button property. The button property is the index number of the specific button, respective to the entire array of buttons on the gamepad.
- 40. Axis events function onGamepadAxisMove(e) { var axis = e.axis; var value = e.value; console.log("Gamepad axis move", axis, value); } window.addEventListener("MozGamepadAxisMove", onGamepadAxisMove); MozGamepadAxisMove is fired on movement of a joystick or analogue trigger. Passes an event object that contains axis and value properties. The axis property is the index number of the specific axis that was moved, respective to the entire array of axes on the gamepad. The value property is a -1.0 to 1.0 float. For example, an x-axis on a joystick when fully pressed to the left would have a -1.0 value.
- 41. Gamepad state function checkState() { 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 a variable or array. Once you have reference to a gamepad you get the state by reading its buttons and axes objects. These are both arrays that contain 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 been pulled.
- 42. We’ve brought along 6 Logitech gamepads for you to play with today. I’d love to see the kind of stuff that you can come up with that uses the Gamepad API, whether a game or something entirely different! I also have a USB stick with the custom Firefox build on, or you can download it yourself from the Mozilla wiki page for the Gamepad API – Google for “Mozilla Gamepad API” https://wiki.mozilla.org/GamepadAPI
- 43. n s tio plica bsite ap yw e eb ta fanc W ot jus N 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.
- 44. 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 https://developer.mozilla.org/en/OpenWebApps
- 45. nce erie exp scre en like ho me p- op or Ap eskt thed from ch un La Something that needs to be tackled with Web apps is how to make them feel like real applications rather than glorified 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.
- 46. 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.
- 47. e s gin e n ay e m game st od Ga ML5 HT te Crea 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.
- 48. 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. http://impactjs.com/
- 49. Crafty. Another 2D game engine. It’s a free engine and is doing much better than other free engines out there. http://craftyjs.com/
- 50. Isongenic Engine. A 2D to 2.5D game 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
- 51. Rob Hawkes @robhawkes Rawkes.com Personal website and blog RECENT PROJECTS MORE COOL STUFF Twitter sentiment analysis Rawket Scientist Delving into your soul Technical Evangelist at Mozilla Rawkets.com HTML5 & WebSockets game 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
- 52. U O r Y te K e la N m A rab TH ?G es wk es Ha wk ob ha R b ion @ro est Qu Thank you. If you have any questions feel free to grab me here, on Twitter (@robhawkes)