Talk HTML5 Games with the Experts – Resources and Transcript

This morning we ran another in our series of Talk with the Experts live chat sessions. This time the subject was HTML5 Games, and the experts were GeekGames creator Mark Brown, and SitePoint developer Paul Annesley. It was a really interesting session, packed full of great resources for anyone that is interested in having a go at game creation.

When people talk about HTML5 games they’re talking about JavaScript games, although a definition could be any game that employs HTML5 technologies. Here is an awesome list of related resources that Mark put together to help anyone that is keen to get into game creation.

HTML5 & Javascript resources:

The best resource seems to me to be the MDN docs from Mozilla.
If you’re wanting to find something on an HTML5 feature just prefix your google search with mdn e.g. “mdn web sockets”

Web workers
Threading in the browser. Allows JavaScript to run as background processes which don’t lock up the browser.

Web sockets
The statelessness of the web means that the client has always needed to issue requests to get new data. Web sockets enables pushes to open connections from the server. Socket.iois a popular js framework for using web sockets today.

SVG is not technically a part of HTML5 but can be included in the umbrella of technologiesRaphael.js will simplify your work with SVG graphics.

Box2D is a JavaScript port of a popular physics engine used in many languages / frameworks so you can build your Angry birds clones.

We can’t really have a list like this without mentioning Node.js which is going gang-busters.
Node.js allows you to write the specifics of how a web server should respond to open connections, perfectly suited to Web Socket like pushes for mass multiplayer games.
There’s a really great blog post about building a multiplayer game of air hockey which is a great intro into some of the complexities involved with HTML5 games.

So I reckon we may as well kick off. @mb4 and @SitePoint_Paul, would you guys kick off by telling us about the kinds of things that you do re game developing?

YamilG

and, since you mentioned it before in the article, HTML5 are JS games, is that right?

mb4

@YamilG that’s right.

mb4

I’ve only made a handful of HTML5 games, using Canvas 2D and SVG specifically.

programm…

I’m trying to write some simple online games, but I’m not sure what I should use. Should I develop in HTML5/Javascript? What are its limitations?

markbrow…

@programmer The only alternative to using HTML/Javascript is plugins like flash.

Paul_Wil…

Is java another alternative?

programm…

Is it easier or harder than Flash?

SitePoin…

… and Flash wont get you far on mobile devices, neither will Java.

markbrow…

It’s still quite new and there aren’t great frameworks like Flash to make HTML5 development easy yet.

programm…

Flash is expensive.

markbrow…

So yes, it’s harder because you still need to do a lot of the heavy lifting yourself.

markbrow…

@programmer yes, HTML5 is quite cheap to develop for at $0.00

HAWK

@markbrown4 Haha

markbrow…

Though, some of the early game frameworks like impact.js are quite expensive at $99

programm…

I have an open source alternative that will create Flash, but the learning curve is steep.

YamilG

I was very impressed with the BrowserQuest project (http://browserquest.mozilla.org/) how hard is it to make a game like that? I mean, compare with traditional gamedev

Cuebit

So what about the limitations? Are HTML5/JS games limited to Pacman and Tetris, or will we be seeing more large-scale games?

markbrow…

@yamilG, looks awesome :) hadn’t seen that before.

markbrow…

@Cuebit you’ll definitely see more impressive looking games than that.

Paul_Wil…

With things such as Unity3D some quite fancy games can be made

SitePoin…

Cuebit: there will certainly be larger scale games than Pacman/Tetris. WebGL will help on the front for graphics.

diogo

how about canvas vs svg … should one starting now pay attention to svg, or just focus on canvas?

SitePoin…

Paul_Wilkins: as far as I know, Unity3D games can only run on the web using a plugin?

markbrow…

@YamilG It’s not super easy to create a game like browserQuest.

programm…

How well does it do sound?

markbrow…

You can get the basics of rendering setup fairly easy with a fast loop and canvas rendering objects at different positions, with different state

SitePoin…

diogo: Personally I find Canvas much better fitter to building games, but SVG can be useful as well for vector graphics. Ideally you should know what each one it good at, so you can pick the right tool.

YamilG

how about the Google port of Quake II, was is rewritten with web technologies or just some kind of “emulator” translating the original game to HTML5? what would you recommend?

programm…

I mean, if you want to play sound clips and also record the user’s voice, for example.

SitePoin…

YamilG: according to the page, “In the port, we use WebGL, the Canvas API, HTML 5 <audio> elements, the local storage API, and WebSockets to demonstrate the possibilities of pure web applications in modern browsers such as Safari and Chrome.” — http://code.google.com/p/quake2-gwt-port/

YamilG

now that we’re getting more devices with high ppi graphics (new MBP, or iPhone 4), will it be necessary to think in terms more of vector graphics (svg) instead of fixed dimensions pngs? are there other techniques to deal with this?

btw sorry for my bad english…

markbrow…

@programmer I haven’t done enough with the Audio API yet, it can definitely be done though.

@YamilG I’ve been doing a bit with retina lately

Not necessarily.

Canvas actually has a dpi-density property that you can double to render 4 times the pixels

SitePoin…

YamilG: high DPI certainly doesn’t make it _necessary_ to think in terms of vector / SVG graphics… but that will be one way to get things looking crisp.

markbrow…

Images you just need to create at 2x versions of as defaults and then scale to half the size when rendering.

SitePoin…

YamilG: but having graphics scaled up will be fine for many games, and Canvas can also be used to render high-DPI images, and programmatically generated shapes in canvas can also be at native resolution.

So you’ll need to monetize some other way like requiring sign up / login.

HAWK

I have a question @Markbrown4. I know that we had some real issues during GeekGames with people cheating. Is this a huge issue for game developers? Are there ways around it or is it just par for the course?

lnxwalt

So you recommend paid gamplay instead of in-game ads?

markbrow…

@HAWK, you can never secure anything that is client-side 100%.

YamilG

how about html5 games incorporation with the facebook platform?

programm…

How about interacting with a database?

markbrow…

Security 101 is never trust the client.

So to make a game secure you need to take specific input from the client and control the gameplay on the server.

SitePoin…

(and even then, people can use bots to do their clicking/aiming/keyboard input)

Balachan…

No restrictions on server side

markbrow…

It’s certainly possible to secure, but you need to be very specific on the server-side what you accept as valid input.

YamilG

key question: where to begin? and I mean, baby stepping

chrisser…

Any chance that a book about developing games will come out, from novice to ninja or something like that?

markbrow…

@YamilG facebook apps are basically an iframe that embeds your site inside facebook.

programm…

Let me try again. Say I have a database of info and I want to use that to drive a game. How can I do it?

markbrow…

There’s no real limitations that make adding games to a facebook app difficult.

SitePoin…

YamilG: “where to begin” depends entirely on what you hope to achieve. For me, I just started playing with the <canvas> API, and reading up on some really basic Linear algebra etc.

Paul_Wil…

Where to begin? You could start with drawing things to the screen, and then form a game loop which receives input (if any) and then updates the screen.

markbrow…

@programmer like any other web application would interact with the database.

SitePoin…

YamilG: If you’re more interested in creating actual game content and getting a final product out the door, then loko into the various frameworks and skip the hard stuff of building the game engine :)

markbrow…

But, because you don’t want to be using full page refreshes you need to use Ajax / socket.io to do the communication

Dealing with the database is still just handling input from requests server-side and making updates as needed.

And that’s the end of the official session everyone. Feel free to stick around and chat as long as you like, but I’m going to cut our experts free. Thanks very much to Paul and Mark for taking the time this morning and to the rest of you for coming along and taking part. I’ll be posting a transcript and list of resources up on SitePoint later today.

Formerly a developer in the corporate world, HAWK (known as Sarah by her mother) said goodbye to the code and succumbed to the lure of social media. Community Manager for the SitePoint network for several years now. If you're a member of our community you'll be familiar with ^hawk.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.