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.

If you don’t already know, I work at Mozilla.

Unsure about my devotion to 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.

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

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.

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.

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.

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

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…

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…

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

And Megarace.

Who remembers this one?

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.

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.

Notable events

Important goings-on in HTML5 gaming

Recently there have been some particularly notable events surrounding HTML5 gaming.

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.

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

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

Conferences

Discussing the future of HTML5 games

The two large-scale HTML5 gaming conferences in the last few months.

onGameStart in Poland and New Game in San Francisco.

Each attended by hundreds of game and Web developers alike.

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.

Facebook involvement

Bettering performance

The involvement of Facebook in HTML5 gaming performance.

http://developers.facebook.com/blog/post/454/

Porting hit iO

S games

Showing HTML5 is more than capable

And the recent port to HTML5 of massively successful iOS games like Angry Birds and Fieldrunners.

http://chrome.angrybirds.comhttp://fieldrunnershtml5.appspot.com

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.

Quake II

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

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

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

Freeciv

Freeciv, an open source Civilisation-type game that uses HTML5 canvas and WebSockets.

3D WebGL version currently being worked on.

http://freeciv.net

Rawkets

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

http://rawkets.com

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.

Fieldrunners

Fieldrunners was ported from iOS to HTML5 by Bocoup.

Like Angry Birds, it also uses WebGL for accelerated 2D graphics.

Created by Phil Banks (@emirpprime)

It’s clear that HTML5 is something that is really becoming a contender for games on the Web.

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.

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.

A few weeks 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.

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.

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.

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.

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.

Cross-browser support

Most major fe

atures 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

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.

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 it isn’t 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 IE, and Safari and Opera requiring a development build.

No DRM

It goes against th

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

You can obfuscate and minify your code if you think it will help, but even this can be worked around with relative ease.

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.

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

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

http://weavesilk.com

WebGL

3D graphics platform

WebGL brings the ability to provide advanced 3D graphics directly within the browser.

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

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

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

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/

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

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

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.

https://developer.mozilla.org/en/DOM/Storage

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, but it’s in the latest Nightly builds and works in all other respects.

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

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.

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

This is a little demo that I put together to show off the Gamepad API.

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.

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.

https://bugzilla.mozilla.org/show_bug.cgi?id=633602

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.

Google are spending a lot of time on Web apps with the Chrome platform.

https://chrome.google.com/webstore

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.comhttps://developer.mozilla.org/en/OpenWebApps

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

App-like experience

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

This kind of approach isn’t anything new but it will be the first time it will be baked into browsers themselves.

For now you can use things like Fluid, which is a Mac app that lets you turn a website into an app that you can run from an icon on the desktop.

It uses a browser engine behind the scenes but it hides away all the unnecessary chrome so it looks native.

I currently use this approach for music streaming websites like Grooveshark to turn them into an app.

That way I don’t have to remember which tab they’re open in my browser.

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.

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/

Crafty.

It’s a free engine and is doing much better than other free engines out there.

http://craftyjs.com/

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

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.

Rob Hawkes

Rawkets.comHTML5 & WebSockets game

Twitter sentiment analysisDelving into your soul

RECENT PROJECTS

Rawkes.comPersonal website and blog

MORE COOL STUFF

jsCraftMinecraft port to JavaScript

Rawket ScientistTechnical Evangelist at Mozilla

@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 analysis 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

I’m currently experimenting with WebGL to see how feasible a JavaScript port of Minecraft would be. The working title is jsCraft.

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