HTML5 Games - Not Just for Gamers

S
E mers
A M Ga
5 G for
ML Just aw
kes

HT Not Ro
bH

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.

I work at Mozilla, a non-proﬁt ﬁghting 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.

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.

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.

nt
orta
p ns
im y rea so
a re an
es form
am atter
G eym
Th

Now I think it’s safe to say that games are pretty important, for many reasons.

sa l
e r
n iv ne
u yo
a re for
ever
es am
e
am e is a g
G er
Th

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.

It’s memories from games like Paperboy on the ZX Spectrum and its amazing noises and epic
loading times.

I sorely miss those days.

And Bomberman on the SNES, which really got me addicted to gaming.

And Lylat Wars on the Nintendo 64. Star Fox for the non-European folk.

Do a barrel roll!

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.

And Red Alert, one of the ﬁrst 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.

fu n
n
m them
d a
a re ha
te
es )people
am ne
G No
(sa

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.

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 justiﬁes 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.

Trailer for Fruit Ninja - http://www.youtube.com/watch?v=UzsmDfKzk7M

ie s
a r
n d
o u wa
re

h b rh
ard
u s ste
s p tter, fa

me er,
be
Ga Bigg

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.

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.

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 Battleﬁeld 1942 and Battleﬁeld 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.

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 Battleﬁeld 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.

e b
r W
ette mance
a b rfor

ean e
tte
rp
be
s m sa
nd
e
m w atu
re
Ga Ne
fe

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.

e s
ga m
o re orw
ard

y m ovef

Pla We
bm
the
lping
he
re
ua
Yo

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!

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.

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.

I’d like to show you a selection of my favourites, just a tiny amount of what’s out there.

Quake II

Fully-functional multiplayer Quake II port.

http://code.google.com/p/quake2-gwt-port/

Cut The Rope

Cut The Rope, ported from iOS.

http://www.cuttherope.ie

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

Command & Conquer

Command & Conquer: Tiberium Alliances is a HTML5 game from EA that is part real-time
strategy, part Farmville.

http://alliances.commandandconquer.com

GT Racing

GT Racing: Motor Academy is a 3D racing game by Gameloft and Mandreel.

http://www.mandreel.com/?page_id=1312

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.org
https://github.com/mozilla/BrowserQuest
http://hacks.mozilla.org/2012/03/browserquest/

g y
o lo
chn ick
Te am
est
5g
ML
HT
akes
tm
ftha
stuf
The

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.

vas
an
C tfo
rm
pla
ics
raph
g
2D

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 ﬂy.

https://developer.mozilla.org/en/HTML/Canvas

Silk is a stunning example of what can be achieved by combining the simple drawing tools
available in canvas.

http://weavesilk.com

Close Pixelate is a canvas app that lets you manipulate images on–the-ﬂy to create a
pixelated effect.

http://desandro.com/resources/close-pixelate/

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/

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

Canvas

<canvas id='myCanvasElement' width='400' height='400'></canvas>

Using canvas is very straight forward.

The ﬁrst thing you need to do is add a canvas DOM element to your HTML page.

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 ﬁle somewhere. In this example, I’m assuming that you’ve already done that.

GL
eb
W form
lat
sp
hic
grap
3D

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

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/

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

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

Eve Online WebGL ship viewer.

http://www.eveonline.com/universe/spaceships/

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=1630790
http://maps.nokia.com/webgl/

Undulating monkey by Paul Lewis.

http://lab.aerotwist.com/webgl/undulating-monkey/

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/

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, requestAnimationFrame puts the browser in control of things and
keeps things running smoothly.

https://developer.mozilla.org/en/DOM/window.requestAnimationFrame

requestAnimationFrame

function update(timestamp) {
// DO SOMETHING

window.mozRequestAnimationFrame(update);
}

window.mozRequestAnimationFrame(update);

In this example, I’m only using the Mozilla preﬁxed 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/

d io
a u
L5 sic
TM nd
m u
H grou
ck
ba
nd
ctsa
effe
nd
Sou

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 ﬁne-grained control.

https://developer.mozilla.org/en/HTML/Element/audio
https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension

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/

Canvas.fm uses Soundcloud, the Audio Data API and canvas to render music as it plays.

http://canvas.fm

Audio

<audio id='myAudioElement' controls>
<source src='audiofile.ogg' type='audio/ogg'>
</audio>

Like canvas, using audio is also straight forward.

The ﬁrst thing you need to do is add an audio DOM element to your HTML page.

Audio

var audio = document.getElementById('myAudioElement');

audio.play();

audio.pause();

From there you can then access the audio element through JavaScript to control it.

ge
ra
to kies
cal s coo
Lo than
ore
gm
torin
S

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/Storage
https://developer.mozilla.org/en/Offline_resources_in_Firefox
https://developer.mozilla.org/en/IndexedDB

e ts
ock
bS ion
e
W omm un
icat

yerc
ltipla
Mu

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

GoSquared use WebSockets for real-time website analytics.

http://www.gosquared.com

WebSockets

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

e rs
ork
b W cript
e
W eaded Jav
aS

i-thr
Mult

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 beneﬁt 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

Web Workers

var worker = new Worker('my-worker.js');

worker.onmessage = function(event) {
console.log('Worker message: ' + event.data);
};

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 ﬁle.

You can then listen to the ‘onmessage’ event that will be ﬁred every time the worker script
sends data using a ‘postMessage’ method.

PI
n A
re e ul
Sc we
rf
ull et
po
F im
ple
,y
S

The Full Screen API allows you to expand any HTML element to ﬁll 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 ﬁll the entire screen.

Outside of games, this is useful for video elements and Web applications.

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

Full Screen API

var canvas = document.getElementById('myCanvasElement');

if (canvas.requestFullscreen) {
canvas.requestFullscreen();
} else if (canvas.mozRequestFullScreen) {
canvas.mozRequestFullScreen();
} else if (canvas.webkitRequestFullScreen) {
canvas.webkitRequestFullScreen();
}

The Full Screen API can be requested from any DOM element.

In this example you’re asking a canvas element to expand to ﬁll the screen.

One thing to note is that you can’t just make any element ﬁll the screen whenever you want.
Right now, the user has to click or press a key to initiate the Full Screen API.

P I
n A
a t io es
n t de
vic
ri e ob
ile
n O on
m

ree ha
ve
Sc M ust-

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=740188
http://dvcs.w3.org/hg/screen-orientation/raw-ﬁle/default/Overview.html

Screen Orientation API

if (screen.mozLockOrientation) {
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 Full Screen API for the orientation
lock to work.

e.js
od
N cation
uni
m
com
rk
etwo
dn
an
gic
ver lo
Ser

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

n s
tio
plica bsite
ap yw
e
eb fanc
W ot justa
N

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

nce
erie
exp scre
en

like ho
me
p- or
Ap esktop
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 gloriﬁed 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.

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

ing
ort e
& p bas
ion od
e-

vers sin
glec

on ing
a
C Us

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!

Emscripten

https://github.com/kripken/emscripten/wiki

PlayN and Google Web Toolkit

https://developers.google.com/playn/
https://developers.google.com/web-toolkit/

PhoneGap

http://phonegap.com

u p
g
in zon
eep ri
K e ho
th
ff on
tu
uchs
m
So

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.

Are We Fun Yet?

https://wiki.mozilla.org/Platform/AreWeFunYet

Are We Mobile Yet? and B2G

http://arewemobileyet.com
https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko

Firefox platform roadmap

https://wiki.mozilla.org/Platform/Roadmap

Firefox Aurora

“Get a ﬁrst look at the latest developer tools, security features and innovative HTML5 and
other Web technologies.”

http://www.mozilla.org/en-US/ﬁrefox/channel/#aurora

Firefox Nightly

Bleeding edge functionality.

Testing only.

http://nightly.mozilla.org

Foundation HTML5 Canvas

Out now

Paperback and digital formats

Become a canvas master

Learn how to animate

Make two cool space games

RAWKES.COM/FOUNDATIONCANVAS

Foundation HTML5 Canvas is out now on Amazon and other reputable book stores.

http://rawkes.com/foundationcanvas

HTML5 Games Most Wanted

Out now

Paperback and digital formats

Learn from the best

Various game-related tutorials

Other tips and tricks

APRESS.COM/9781430239789

HTML5 Games Most Wanted is out now on Amazon and other reputable book stores.

http://apress.com/9781430239789

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 Slides
HTML5 & WebSockets game slideshare.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

U
O r
Y te
K e la
N m
A rab
TH ?G es
wk es
Ha wk
ob ha
R b
ns @ro

stio
ue
Q

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.

HTML5 Games - Not Just for Gamers

More Related Content

Viewers also liked (20)

Similar to HTML5 Games - Not Just for Gamers (20)

More from Robin Hawkes (20)

Recently uploaded (20)

HTML5 Games - Not Just for Gamers