HTML5 & JavaScript Games

Introductions…

Hi, I’m Rob Hawkes and I’m here today so we can explore gaming with HTML5 and JavaScript.

For those who don’t know much about about me…

I’m a Technical Evangelist at Mozilla, which means that it’s my job to engage with developers
about cool new technologies on the Web.

1ST-CLASS HONOURS
Interactive Media Production

And as of 4am this morning (midday in the UK) I found out that I achieved a First-class
Honours in the university degree that I’ve been studying for the past three years.

Which has certainly helped make all the time and effort feel a little more worth while!

But I digress…

All of this means that I have a slight addiction to experimentation and mucking about with
code, particularly if it involves anything visual, or HTML5…

And for those of you who doubt my dedication to HTML5…

A while ago my girlfriend made me this chicken and leek pie with the HTML5 logo on top
(which was delicious).

It’s HTML… Pive… get it?

I don’t actually remember when I ﬁrst started playing games, although I know that I started
with consoles… ZX Spectrum…

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

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

THE TIME IS NOW
Threshold of something cool

And 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 used to make
websites with.

NOTABLE EVENTS
Recent events in HTML5 gaming

Funding for HTML5 games companies.

Acquisition of HTML5 gaming engines, like Aves by Zynga, and Rocket Engine by Disney.

First large-scale HTML5 gaming conference this September, onGameStart in Poland.

Another large gaming conference announced in the last few days for the San Francisco area
this November, it’s called New Game and it looks promising.

Facebook getting involved in HTML5 gaming performance.

* made by Phil Banks (@emirpprime)

So why is HTML5 gaming so cool?

Because we can now use the technologies within the browser to make fast and enjoyable
games.

And just to clarify, by HTML5 I'm referring to HTML5 and JavaScript.

WRITE ONCE
Use anywhere

Any device with a browser that supports HTML5 will run your game code, after all it’s just
JavaScript and HTML.

You may have to implement little differences for variations in controls, like touch on mobile
devices, but the majority of the code will remain the same.

NO COMPILATION
Save time with development and testing

Doesn't require compiling, so development and testing can be extremely rapid.

These technologies encourage a culture of hacking stuff together quickly to experiment, then
tidying things up later – or perhaps that's just me.

Either way, I like the rapid nature that JavaScript and HTML brings.

LIGHTWEIGHT
Text and image files take up little room

JavaScript and HTML are just text ﬁles and images, which don't take up much room.

OPEN DEVELOPMENT
Gives you a warm fuzzy feeling

It gives you a warm fuzzy feeling inside to be using open technologies

But it’s not all rosy with HTML5, why would you not want to use it?

Here are just two of the major issues that are ﬂoating around right now.

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 still isn’t supported by IE yet, nor is it supported in 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 current versions of IE, Safari,
and Opera.

NO DRM
These technologies aren’t made for it

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 – you can still crack into Flash.

You can still obfuscate and minify your code if you think it will help.

TECHNOLOGY
Some of the tech involved in Web gaming

So there are a variety of technologies that are involved in HTML5 game development.

In case I haven’t made it obvious by now, all of these technologies are related to HTML or
JavaScript.

CANVAS & WEBGL
2D and 3D graphics

Canvas for 2D graphics.

WebGL, which uses the canvas, for 3D graphics.

HTML5 AUDIO
Sound effects and background music

HTML5 audio for game sound effects and background music.

WEBSOCKETS
Multiplayer communication

WebSockets are used for bi-directional communication between a client (the player) and a
server.

By managing communication on the server you can create multiplayer games with relative
ease.

NODE.JS
JavaScript on the server

Node is only really applicable if you’re making multiplayer games, as you’ll need a server to
communicate with.

JavaScript on the server.

Asynchronous, event-based.

Great third-party modules, like Socket.IO for WebSockets.

LOCAL STORAGE
Storing data on the player device

Local Storage is 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.

MONGODB & REDIS
Storing data on the server

MongoDB and Redis are two examples of ways to store data remotely on the game server.

MongoDB is a document-oriented database, what’s often referred to as NoSQL.

Redis is a key-value data store and is much less structured than MongoDB, but it stores data
in memory which makes it super fast.

EXISTING GAMES
Some of my favourite and best examples

There aren’t a huge amount of HTML5 games just yet, but I thought I’d show you a selection
of my favourites.

QUAKE II
Google port using Web technologies

Multiplayer Quake II remake with Google GWT (Google Web Toolkit)

Canvas & WebGL
HTML5 audio
WebSockets
Local Storage

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

MINECRAFT
We’ll see this fully working in JavaScript soon

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

WORD²
Massively multiplayer Scrabble

Word², massively multiplayer Scrabble.

Uses WebSockets for real-time communication.

http://wordsquared.com

I love the map view.

Every single pixel on this view is a Scrabble tile.

FREECIV
Open source clone of Civilisation

Freeciv, an open source clone of Civilisation that uses canvas and WebSockets.

3D WebGL version currently being worked on.

http://freeciv.net

RAWKETS
Because I made it and it’s addictive

Rawkets is a multiplayer space shooter that I created while at university to explore canvas
and WebSockets.

I’m now developing it a lot further as a proper game, and plan to use it to teach others how
to make multiplayer HTML5 games.

Still not even at a beta release level yet, hence the bugs you can see in this video.

http://rawkets.com

LOADS MORE
Games directories are everywhere

Game directories speciﬁcally focused on HTML5 are popping up all over the place.

Also, Kongregate now accept HTML5 games so long as they run in an iframe.

html5games.com

FUNDAMENTALS
Making games with HTML5

Here are a few fundamental aspects of a HTML5 game. It’s all pretty basic, but they’re useful
to cover.

Not all of these are required, it depends what kind of game you're working on…

GAME LOOP
The heart of the game

Most games will have a loop of some kind to manage all the logic and animation that needs
to happen.

This is the heart of the game and is where things happen on each frame.

PHYSICS UPDATE
Updating positions

The physics update is part of the game loop that deals with any kind of physics, or even just
simple movement.

GRAPHICS UPDATES
Making things visible

Graphics updates are another part of the game loop, but they deal with drawing all the game
assets onto the screen.

NETWORKING
Breaking out of single player

Network infrastructure will allow you to take your game multiplayer, perhaps even real-time
by using WebSockets.

CONTROLS AND UI
So important to get right

Controls and UI, so massively important to get right.

For Rawkets I hired a designer to do the UI for me so it was as good as possible.

Seb Lee-Delisle implemented some awesome JavaScript controls for iOS devices based on
some previous iOS games.

http://sebleedelisle.com/2011/04/multi-touch-game-controller-in-javascripthtml5-for-
ipad/
http://www.gamasutra.com/view/feature/6323/a_guide_to_ios_twin_stick_shooter_.php

PERFORMANCE
Keeping things running smoothly

Performance isn’t really a fundamental feature, but it’s deﬁnitely something that you need to
be keeping on top off through the development of a game with HTML5.

I’ll run through a couple of tips for performance in a moment.

GAME ENGINES
Making game development easy

You don't have to create an entire game infrastructure from scratch…

Impact.

I used this recently, and it’s really well made.

The documentation is great and the author is active and very helpful.

Will support WebSockets with a plugin, although you’ll still need to code the network logic
from scratch.

http://impactjs.com/

Crafty

Not my favourite engine, but it’s free and is doing much better than other free engines out
there.

http://craftyjs.com/

IsongenicEngine.

One of the most promising engines out there today.

Massively multiplayer networking built in
Uses Node and MongoDB
Canvas or DOM-based graphics

http://www.isogenicengine.com

ISOGENICENGINE
Iso City demo

Rob Evan’s, the creator of Isogenic, is putting together a little demo called Iso City to show
off the engine.

LIBRARIES & SERVICES
Saving you time in the long run

If you do want to build your own engine, then there are some libraries and external services
out there which might help you from having to create everything from scratch…

BOX2DWEB
JavaScript port of the Box2D physics engine

Box2DWeb allows you to add a physics engine into your game with little hassle.

It’s a port of the Box2D physics engine, which is the same one that Angry Birds uses.

http://code.google.com/p/box2dweb/

MOTION.JS
Solving client-side prediction issues

Motion.js is a new library that attempts to solve the client-side prediction issues with
multiplayer gaming, some of the most difficult issues to overcome.

The library doesn’t do much yet, but it’s a great idea and something to keep an eye on.

https://github.com/tmpvar/motionjs

Joyent’s Node cloud servers

Provides a remotely hosted Node server that allows you to quickly get a multiplayer game up
and running.

It supports WebSockets, which a lot of other hosted Node services doesn’t allow.

Pusher is for real-time communication and uses WebSockets.

Remotely hosted.

This is the service that Word² uses, the game that I highlighted earlier.

Kaazing.

Self-hosted WebSockets communication platform.

http://kaazing.com/

There’s also Electroserver5.

Self-hosted communication platform (not WebSockets) and game server for logic.

http://www.electrotank.com/es5.html

KEY LESSONS
What I’ve learnt so far

Over the last few years I’ve learnt a lot of lessons about game development.

Here are just a few of the most important ones.

CUT DOWN LOOPS
Less is more

The less loops you can get away with the faster your game will be.

Do as little as possible, no more.

NO TIMEOUTS
Use requestAnimationFrame instead

Another simple lesson is to stop using JavaScript timeouts and to use requestAnimationFrame
instead.

requestAnimationFrame puts the browser in control of when an animation should happen and
generally increases performance. It also doesn’t run in an inactive browser tab, saving you
more precious resources.

Paul Irish has made a shim that allows you to use the requestAnimationFrame API in browsers
that don’t support it. It won’t have the cool browser-controlled animations, but it means that
you don’t need to change your code.

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

NETWORK TRICKS
Cutting down on communication

Be very aware about how much data you’re sending back and forth when creating a
multiplayer game.

MESSAGES IN MESSAGES OUT

1 1
1 1

Having only one player in the game is easy, you have one message coming in to the server,
saying the player has moved, for example, and one message coming back out, updating the
player with details from the server.


2 4
1 2

2 1

So say we now have two players, there is still only 1 message in from each player, but now
each player receives 2 messages back from the server; one for them, and one for the other
player.

This isn’t too bad, but notice how the server is having to send 4 messages – 2 for each
player.


4 16
1 4

4 1

1 4

4 1

4 players now, look how the server is having to send 16 messages, yet it only receives 4.

If you haven’t already noticed, the messages out from the server are the square of the
number of players.

But 16 messages out is alright, it’s hardly going to tax the server.


30 900
1 30

30 1

1 30

30 1

So imagine if we now move into properly multiplayer territory.

30 players in the game would mean 30 messages coming in to the server, and 900 – NINE
HUNDRED – messages going out, every update. That’s a silly amount of data for just 30
people.

But let’s go further still…


100 10000
1 100

100 1

1 100

100 1

Say we go massively multiplayer and have 100 players in the game at one time.

It’s not so bad for each individual player, they send one message in and get 100 back – that’s
bearable.

But check out the server, it’s getting 100 messages in and is having to send out 10,000 back,
every update. That’s just a mentally stupid number that’s going to cause a lot of grief.

Fortunately there is a way around this that cuts down the amount of messages sent from the
server; you just need to send data only for players visible to another player, in essence
ﬁltering out game data that doesn't affect the current player. It’s such a simple solution, but
it’s one that I never even considered at ﬁrst.

CHEATERS
You can’t avoid them completely

Your code is going to be visible to anyone who wants to look at the source.

It’s mainly an issue with multiplayer gaming, as cheating in a single player game would only
affect one player.

I experienced this early on in the development of Rawkets. The solution is to make the server
authoritative, which means that you prevent manipulation of the player’s code from doing
any damage.

DOM OR CANVAS
Which one should you use?

How do you decide whether you go with the DOM or canvas for rendering?

This is something that I’ve been thinking about a lot lately.

In my opinion DOM has some performance beneﬁts, but canvas is the right tool and is going
in a better direction.

The situations reminds me a little of the way tables were used for layout before CSS was
adopted. Using DOM content elements for animation feels hacky, in a bad way.

I don’t have an easy solution that will make canvas perform as well, but I think it’s important
that we try and make and use canvas better rather than turning our backs on it and clinging
onto the DOM.

Now I'm being a bit dramatic, but I really think developers need to think long and hard before
turning away from the ideal technologies like JavaScript, canvas and SVG.

This is something that I hope to look into a lot more in the near future.

THE FUTURE
What HTML5 gaming still needs

HTML5 gaming is still at an early stage and there are still plenty of things that can be
improved.

DOCUMENTATION
Specific to HTML5 game development

More documentation and teaching materials on the complex areas of game development in
JavaScript.

We need something like Glen Fiedler’s Gaffer on Games website, but dedicated to HTML5
instead.

WEBGL SUPPORT
Support is shocking right now

Wider support for WebGL.

MORE ENGINES
Not many decent ones around right now

Better game engines that really solve all the major issues, particularly with multiplayer
games.

IMPROVED AUDIO
More reliable looping

Improved HTML5 audio support, with proper looping.

POWERFUL MOBILE
Better hardware acceleration

More powerful mobile devices, with better hardware acceleration for canvas.

BETTER CONTROLS
Break away from the keyboard and mouse

Better more console-like systems for control, like Seb Lee-Delisles iOS controller.

Brass Monkey turns a smart phone into a controller, which I had the luxury of seeing demoed
recently and I must say that it’s pretty damn cool.

http://brassmonkeysdk.com/

MONETISATION
Making profit from games

Better monetisation options for developers.

Right now there aren't (m)any games making a proﬁt out of these new technologies.

How do you monetise a game where the code is open for all to see?

ROB HAWKES
@robhawkes

Rawkes.com
Personal website and blog

RECENT PROJECTS MORE COOL STUFF

Twitter sentiment analysis Mozilla Technical Evangelist
Delving into your soul. My job

Rawkets.com ExplicitWeb.co.uk
HTML5 & WebSockets game. Web development podcast.

Twitter - @robhawkes
Rawkes - http://rawkes.com

FOUNDATION HTML5 CANVAS
My amazing book on canvas, animation, and making games.

Out now

Paperback and digital formats

Become a canvas master

Learn how to animate

Make two cool space games

RAWKES.COM/FOUNDATIONCANVAS

Book - available on Amazon right now

COFFEE FWD
Mozilla Web FWD get together

Friday July 15th

Red Rock Cafe, Mountain View

Innovation acceleration

Meet some great people

Show off your stuff

FRI JULY 15TH @ RED ROCK CAFE, MV

Just a quick one to let you know about an event Mozilla are putting on this Friday in Mountain
View.

It’s called Coffee FWD and it’s a get together related to the Web FWD Innovation Accelerator
for the open Web.

It’s a chance for us to work with you to help push the Web forward, so if you’re working on
something cool then you should deﬁnitely come down and say hi.

http://coffeefwd.eventbrite.com/
https://www.webfwd.org

DEV DERBY
Experimenting with the latest Web technologies

Every month

This month is HTML5 video

Manipulate video with canvas

Win prizes (like an Android)

Next month is all about touch

DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY

Also, you deﬁnitely take part in the Dev Derby, which is a monthly competition run by the
Mozilla Developer Network to see what can be done with the latest Web technologies.

This month the focus is on HTML5 video, which is pretty interesting considering that you can
manipulate it using the canvas.

The winners get cool prizes, like an Android phone. It’s a great excuse to play around with
these technologies.

https://developer.mozilla.org/en-US/demos/devderby

Thanks for listening, and I hope you enjoy the rest of your day.

I believe we have some time set aside for questions…

HTML5 & JavaScript Games

Recommended

More Related Content

What's hot (11)

Viewers also liked (20)

Similar to HTML5 & JavaScript Games (20)

More from Robin Hawkes (20)

Recently uploaded (20)

HTML5 & JavaScript Games