html5 games - not just for gamers
DESCRIPTION
In this talk I highlight the game-related features that HTML5 and JavaScript bring to the table and show you why they are also useful to non-gamers.TRANSCRIPT
![Page 1: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/1.jpg)
HTML5 GAMES
Not Just fo
r Gamers
Rob Hawkes
Hi, I’m Rob Hawkes and I’m here today to talk about the technologies behind HTML5 and JavaScript games.
I’m also here to show you why these technologies aren’t just for games and how they can be useful in day-to-day Web development.
![Page 2: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/2.jpg)
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 Firefox goodness.
It was delicious.
![Page 3: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/3.jpg)
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, they include links to more information on the technologies covered.
I’ll put all the details up at the end.
![Page 4: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/4.jpg)
Before we move on I just have a quick disclaimer.
This whole talk is about HTML5 and JavaScript as technologies used in 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.
![Page 5: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/5.jpg)
Games are important
They matter for m
any reasons
Now I think it’s safe to say that games are pretty important, for many reasons.
![Page 6: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/6.jpg)
Games are universal
There is a game for everyone
One 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’s all the same.
Over the years, I’ve played all sorts of games that each meant something different to me at that point in life.
![Page 7: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/7.jpg)
It’s memories from games like Paperboy on the ZX Spectrum and its amazing noises and epic loading times.
I sorely miss those days.
![Page 8: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/8.jpg)
And Bomberman on the SNES, which really got me addicted to gaming.
![Page 9: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/9.jpg)
And Lylat Wars on the Nintendo 64. Star Fox for the non-European folk.
Do a barrel roll!
![Page 10: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/10.jpg)
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 incredibly muddy landscape.
![Page 11: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/11.jpg)
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.
![Page 12: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/12.jpg)
Games are damn fun
No (sane) people hate them
Another 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.
![Page 13: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/13.jpg)
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.
![Page 14: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/14.jpg)
Trailer for Fruit Ninja - http://www.youtube.com/watch?v=UzsmDfKzk7M
![Page 15: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/15.jpg)
Games push boundaries
Bigger, better, faster hardware
Aside from being universal and fun, games are important because they push the boundaries of what’s possible with today’s technology.
Games are one of the only things that deliberately use every ounce of your computer’s capabilities; from graphics, to processing 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.
![Page 16: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/16.jpg)
2011
2002
For 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, at least visually.
![Page 17: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/17.jpg)
Processor (Mhz) Graphics (MB) RAM (MB)
2000
512
2400
12832
500
Battlefield 1942 (2002) Battlefield 3 (2011)
Minimum specs
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 what was even possible back in 2002.
![Page 18: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/18.jpg)
Processor (Mhz) Graphics (MB) RAM (MB)
4000
1024
2400
2000
512
2400
12832
500
Battlefield 1942 (2002) Battlefield 3 (2011) Battlefield 3 - Recommended (2011)
Recommended specs
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 everything else.
We’re talking state of the art technology here, and even this still won’t run the game at its full potential.
![Page 19: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/19.jpg)
Games mean a better Web
New features and better performance
We now have more and faster processors than ever before, we have insanely powerful graphics cards, and so much RAM 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 cool stuff on the Web.
Without games, there would be little need to continue pushing Web technologies; like faster JavaScript, or hardware accelerated CSS and multimedia rendering.
![Page 20: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/20.jpg)
Play more games
You are helping the Web move forward
So 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!
![Page 21: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/21.jpg)
Now you’re probably thinking, “Who is this dude, and why is he waffling on about games? I want to hear about HTML5, damnit!”
Let’s make that happen.
![Page 22: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/22.jpg)
Existing games
Some of the best examples
The 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.
![Page 23: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/23.jpg)
Quake II
Fully-functional multiplayer Quake II port.
http://code.google.com/p/quake2-gwt-port/
![Page 24: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/24.jpg)
Cut The Rope
Cut The Rope, ported from iOS.
http://www.cuttherope.ie
![Page 25: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/25.jpg)
Bejeweled
Bejeweled is a massively popular game on a whole variety of platforms.
Popcap recently released a purely HTML5 version.
http://bejeweled.popcap.com/html5
![Page 26: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/26.jpg)
Command & Conquer
Command & Conquer: Tiberium Alliances is a HTML5 game from EA that is part real-time strategy, part Farmville.
http://alliances.commandandconquer.com
![Page 27: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/27.jpg)
GT Racing
GT Racing: Motor Academy is a 3D racing game by Gameloft and Mandreel.
http://www.mandreel.com/?page_id=1312
![Page 28: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/28.jpg)
BrowserQuest
BrowserQuest 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, the entire source code is on GitHub.
http://browserquest.mozilla.orghttps://github.com/mozilla/BrowserQuesthttp://hacks.mozilla.org/2012/03/browserquest/
![Page 29: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/29.jpg)
Technology
The stuff that m
akes HTML5 games tick
There are key technologies that are involved in the development of HTML5 games like the ones you just saw.
I’m going highlight a few of the ones that also translate well into the realm of standard Web development.
![Page 30: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/30.jpg)
Canvas
2D graphics platform
Canvas 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.
https://developer.mozilla.org/en/HTML/Canvas
![Page 31: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/31.jpg)
Silk is a stunning example of what can be achieved by combining the simple drawing tools available in canvas.
http://weavesilk.com
![Page 32: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/32.jpg)
Close Pixelate is a canvas app that lets you manipulate images on–the-fly to create a pixelated effect.
http://desandro.com/resources/close-pixelate/
![Page 33: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/33.jpg)
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’d have had to have used static images or complex techniques to achieve this.
http://desandro.com/portfolio/
![Page 34: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/34.jpg)
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.
http://html5doctor.com
![Page 35: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/35.jpg)
<canvas id='myCanvasElement' width='400' height='400'></canvas>
Canvas
Using canvas is very straight forward.
The first thing you need to do is add a canvas DOM element to your HTML page.
![Page 36: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/36.jpg)
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);
Canvas
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 this example, I’m assuming that you’ve already done that.
![Page 37: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/37.jpg)
WebGL
3D graphics platform
WebGL brings the ability to provide advanced 3D graphics directly within the browser.
Games use this to create immersive 3D worlds and models, or for accelerated 2D graphics.
https://developer.mozilla.org/en/WebGL
![Page 38: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/38.jpg)
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/
![Page 39: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/39.jpg)
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
![Page 40: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/40.jpg)
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 to your doorstep in just a few simple clicks. It’s seriously awesome.
https://tinkercad.com
![Page 41: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/41.jpg)
Eve Online WebGL ship viewer.
http://www.eveonline.com/universe/spaceships/
![Page 42: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/42.jpg)
Both Google Maps and Nokia have recently added support for WebGL. The Nokia version is particularly impressive because they fully render and texture 3D shapes of buildings.
http://support.google.com/maps/bin/answer.py?hl=en&answer=1630790http://maps.nokia.com/webgl/
![Page 43: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/43.jpg)
Undulating monkey by Paul Lewis.
http://lab.aerotwist.com/webgl/undulating-monkey/
![Page 44: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/44.jpg)
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 to implement.
https://github.com/mrdoob/three.js/
![Page 45: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/45.jpg)
requestAnimationFrame
Optimised animation loops
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, requestAnimationFrame puts the browser in control of things and keeps things running smoothly.
https://developer.mozilla.org/en/DOM/window.requestAnimationFrame
![Page 46: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/46.jpg)
function�update(timestamp)�{��
// DO SOMETHING
��window.mozRequestAnimationFrame(update);��
}
�
window.mozRequestAnimationFrame(update);
requestAnimationFrame
In this example, I’m only using the Mozilla prefixed version of requestAnimationFrame. In reality, there’s a really good shim by Paul Irish that handles cross-browser requestAnimationFrame.
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
![Page 47: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/47.jpg)
HTML5 audio
Sound effects and background music
HTML5 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-grained control.
https://developer.mozilla.org/en/HTML/Element/audiohttps://developer.mozilla.org/en/Introducing_the_Audio_API_Extension
![Page 48: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/48.jpg)
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/
![Page 49: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/49.jpg)
Canvas.fm uses Soundcloud, the Audio Data API and canvas to render music as it plays.
http://canvas.fm
![Page 50: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/50.jpg)
<audio id='myAudioElement' controls>
��<source�src='audiofile.ogg'�type='audio/ogg'>
</audio>
Audio
Like canvas, using audio is also straight forward.
The first thing you need to do is add an audio DOM element to your HTML page.
![Page 51: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/51.jpg)
var�audio�=�document.getElementById('myAudioElement');
audio.play();
audio.pause();
Audio
From there you can then access the audio element through JavaScript to control it.
![Page 52: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/52.jpg)
Local storage
Storing more than cookies
Methods like the application cache, Local Storage, and IndexedDB are great for storing relatively large quantities of data locally.
This way you can cache data and allow the website to pick up where the user left off.
https://developer.mozilla.org/en/DOM/Storagehttps://developer.mozilla.org/en/Offline_resources_in_Firefoxhttps://developer.mozilla.org/en/IndexedDB
![Page 53: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/53.jpg)
WebSockets
Multiplayer communication
WebSockets 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.
https://developer.mozilla.org/en/WebSockets
![Page 54: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/54.jpg)
GoSquared use WebSockets for real-time website analytics.
http://www.gosquared.com
![Page 55: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/55.jpg)
var ws = new WebSocket('http://example.com/socketserver');
ws.send('This message is sent to the WebSocket server');
ws.onmessage�=�function�(event)�{��
��console.log(event.data);��
}
WebSockets
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 the WebSocket 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.
![Page 56: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/56.jpg)
Web Workers
Multi-threaded JavaScript
Web 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 a fraction 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 still interact with things and get stuff done.
https://developer.mozilla.org/En/Using_web_workers
![Page 57: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/57.jpg)
var�worker�=�new�Worker('my-worker.js');
worker.onmessage�=�function(event)�{��
�console.log('Worker message: ' + event.data);��
};
Web Workers
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.
![Page 58: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/58.jpg)
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.
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.
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
![Page 59: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/59.jpg)
var�canvas�=�document.getElementById('myCanvasElement');
if (canvas.requestFullscreen) {
����canvas.requestFullscreen();
} else if (canvas.mozRequestFullScreen) {
����canvas.mozRequestFullScreen();
} else if (canvas.webkitRequestFullScreen) {
����canvas.webkitRequestFullScreen();
}
Full Screen API
The Full Screen 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 has to click or press a key to initiate the Full Screen API.
![Page 60: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/60.jpg)
Screen Orientation API
Must-have on mobile devices
The Screen Orientation API allows you to do things like changing and locking, you guessed it, the orientation of the screen.
Before now, it’s been incredibly difficult to lock orientation on a website or game using nothing but JavaScript.
https://bugzilla.mozilla.org/show_bug.cgi?id=740188http://dvcs.w3.org/hg/screen-orientation/raw-file/default/Overview.html
![Page 61: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/61.jpg)
if (screen.mozLockOrientation) {
screen.mozLockOrientation('landscape');
}
Screen Orientation API
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 Full Screen API for the orientation lock to work.
![Page 62: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/62.jpg)
Node.js
Server 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
![Page 63: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/63.jpg)
Web applications
Not just a fancy website
The 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 and mobile, particularly with iOS and Android.
https://developer.mozilla.org/en/Apps
![Page 64: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/64.jpg)
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 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.
![Page 65: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/65.jpg)
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 my game Rawkets running as a WebRT app with the Firefox rendering engine. Notice the lack of browser UI.
https://developer.mozilla.org/en/Apps/Apps_architecture#Web_runtime
![Page 66: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/66.jpg)
Conversion & porting
Using a single code-base
A 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 native languages over to JavaScript. Things like SQLite, even Ruby!
![Page 67: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/67.jpg)
Emscripten
https://github.com/kripken/emscripten/wiki
![Page 68: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/68.jpg)
PlayN and Google Web Toolkit
https://developers.google.com/playn/https://developers.google.com/web-toolkit/
![Page 69: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/69.jpg)
PhoneGap
http://phonegap.com
![Page 70: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/70.jpg)
Keeping up
So much stuff on the horizon
I’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.
![Page 71: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/71.jpg)
Are We Fun Yet?
https://wiki.mozilla.org/Platform/AreWeFunYet
![Page 72: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/72.jpg)
Are We Mobile Yet? and B2G
http://arewemobileyet.comhttps://developer.mozilla.org/en/Mozilla/Boot_to_Gecko
![Page 73: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/73.jpg)
Firefox platform roadmap
https://wiki.mozilla.org/Platform/Roadmap
![Page 74: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/74.jpg)
Firefox Aurora
“Get a first look at the latest developer tools, security features and innovative HTML5 and other Web technologies.”
http://www.mozilla.org/en-US/firefox/channel/#aurora
![Page 75: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/75.jpg)
Firefox Nightly
Bleeding edge functionality.
Testing only.
http://nightly.mozilla.org
![Page 76: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/76.jpg)
Become a canvas master
RAWKES.COM/FOUNDATIONCANVAS
Out now
Paperback and digital formats
Learn how to animate
Make two cool space games
Foundation HTML5 Canvas
Foundation HTML5 Canvas is out now on Amazon and other reputable book stores.
http://rawkes.com/foundationcanvas
![Page 77: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/77.jpg)
Learn from the best
APRESS.COM/9781430239789
Out now
Paperback and digital formats
Various game-related tutorials
Other tips and tricks
HTML5 Games Most Wanted
HTML5 Games Most Wanted is out now on Amazon and other reputable book stores.
http://apress.com/9781430239789
![Page 78: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/78.jpg)
Rob Hawkes
Rawkets.comHTML5 & WebSockets game
Twitter sentiment analysisDelving into your soul
RECENT PROJECTS
Rawkes.comPersonal website and blog
MORE COOL STUFF
Rawket ScientistTechnical Evangelist at Mozilla
@robhawkes
Slidesslideshare.net/robhawkes
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
These slides are online at slideshare.net/robhawkes
![Page 79: HTML5 Games - Not Just for Gamers](https://reader033.vdocuments.site/reader033/viewer/2022051400/54c677b64a7959b6298b45bc/html5/thumbnails/79.jpg)
THANK YOU
Questions? Grab me later
Rob Hawkes
@robhawkes
Thank you.
If you have any questions feel free to grab me, or bug me on Twitter (@robhawkes).
I’m a friendly chap and I’ll be happy to help.