Talk HTML5 Games with the Experts – Resources and Transcript

Sarah Hawk

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

Another great resource are the weekly email digests:
HTML5 Weekly
Javascript Weekly

Another great way to learn is to follow industry leaders like @mrdoob@paul_irish@rauchg on twitter.

Technologies that will help you build games are:

Canvas for 2D raster graphics
The poster-child of HTML5, there’s some really impressive canvas demos available all around the web.

WebGL for 3D graphics
Three.js is a popular JavaScript library to simplify your work with WebGL. Check out this Minecraft simulation

Offline Cache
Cache HTML, CSS and JavaScript on the client.

Audio API
Play, generate and modify audio in JavaScript.

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

Resources from today’s session:

http://retinafy.me/ is a great little book on how to deal with retina screens.

http://createjs.com/ is a game dev framework that looks good. Inspired by flash.

http://kineticjs.com/ KineticJS is another framework.

Paul recommends having some knowledge of Linear Algebra if you’re looking at building a game engine. Here’s a great tutorial:http://blog.wolfire.com/2009/07/linear-algebra-for-game-developers-part-1/ and once you’ve read that, here’s a library to help with the vector mathematics: http://sylvester.jcoglan.com/

Here’s something that Paul is building without using any frameworks or game libraries: http://temporary-b82df421.s3-website-us-east-1.amazonaws.com/

And if you’re into unit testing — it can be done for game development too. Here are the tests for the above work-in-progress: http://temporary-b82df421.s3-website-us-east-1.amazonaws.com/test.html and the code: https://github.com/pda/bottom_up/tree/master/src/code/spec

http://www.html5canvastutorials.com/cookbook/ The HTML5 Canvas Cookbook is a great general resource

And a pretty amazing physics simulation library for JavaScript… Demo: http://dl.dropbox.com/u/2494815/demo/Joints.html Code:https://github.com/josephg/chipmunk-js

http://yellowshoe.com.au/super_fun/ is an example of a game board style game with multiple choice answers / dice driving the input.

For animating in HTML5, requestAnimationFrame is an important API, however it’s not standard yet. Here’s a nice polyfill script which provides it for all browsers: http://temporary-b82df421.s3-website-us-east-1.amazonaws.com/js/vendor/raf.js and a more official URL for the requestAnimationFrame polyfill: https://gist.github.com/1579671

For JavaScript, Jasmine is great for unit testing: http://pivotal.github.com/jasmine/ & for Ruby code, RSpec is great: http://pragprog.com/book/achbd/the-rspec-book

A few months ago, Mozilla posted about this minimal HTML5 game template: https://blog.mozilla.org/labs/2012/05/introducing-a-minimalist-html5-game-template/

If you’re interested in reading a full transcript of today’s session, it is posted below.

Our next session will be on UX with SitePoint author Jodie Moule. If you missed today’s session because you forgot about it, make sure you sign up for email reminders of future sessions. You can do that here https://www.facebook.com/sitepoint/app_115462065200508

 

HAWK HAWK
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 YamilG
and, since you mentioned it before in the article, HTML5 are JS games, is that right?
mb4 mb4
@YamilG that’s right.
mb4 mb4
I’ve only made a handful of HTML5 games, using Canvas 2D and SVG specifically.
programm… programmer
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… markbrown4
@programmer The only alternative to using HTML/Javascript is plugins like flash.
Paul_Wil… Paul_Wilkins
Is java another alternative?
programm… programmer
Is it easier or harder than Flash?
SitePoin… SitePoint_Paul
… and Flash wont get you far on mobile devices, neither will Java.
markbrow… markbrown4
It’s still quite new and there aren’t great frameworks like Flash to make HTML5 development easy yet.
programm… programmer
Flash is expensive.
markbrow… markbrown4
So yes, it’s harder because you still need to do a lot of the heavy lifting yourself.
markbrow… markbrown4
@programmer yes, HTML5 is quite cheap to develop for at $0.00
HAWK HAWK
@markbrown4 Haha
markbrow… markbrown4
Though, some of the early game frameworks like impact.js are quite expensive at $99
programm… programmer
I have an open source alternative that will create Flash, but the learning curve is steep.
YamilG 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 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… markbrown4
@yamilG, looks awesome :) hadn’t seen that before.
markbrow… markbrown4
@Cuebit you’ll definitely see more impressive looking games than that.
Paul_Wil… Paul_Wilkins
With things such as Unity3D some quite fancy games can be made
SitePoin… SitePoint_Paul
Cuebit: there will certainly be larger scale games than Pacman/Tetris. WebGL will help on the front for graphics.
diogo diogo
how about canvas vs svg … should one starting now pay attention to svg, or just focus on canvas?
SitePoin… SitePoint_Paul
Paul_Wilkins: as far as I know, Unity3D games can only run on the web using a plugin?
markbrow… markbrown4
@YamilG It’s not super easy to create a game like browserQuest.
programm… programmer
How well does it do sound?
markbrow… markbrown4
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… SitePoint_Paul
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 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… programmer
I mean, if you want to play sound clips and also record the user’s voice, for example.
SitePoin… SitePoint_Paul
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 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… markbrown4
@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… SitePoint_Paul
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… markbrown4
Images you just need to create at 2x versions of as defaults and then scale to half the size when rendering.
SitePoin… SitePoint_Paul
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.
YamilG YamilG
markbrow… markbrown4
http://retinafy.me/ is a great little book on how to deal with retina screens
HAWK HAWK
Hi to those of you that have just joined us. I’m Community Manager for SitePoint and am moderating this session. Feel free to jump in at any time with questions.
markbrow… markbrown4
http://createjs.com/ is another game dev framework that looks good. Inspired by flash.
YamilG YamilG
nice! I didn’t know about create.js, looks good
thanks mark
SitePoin… SitePoint_Paul
I’ve been keeping an eye on KineticJS too: http://kineticjs.com/
SitePoin… SitePoint_Paul
I haven’t used KineticJS yet, but I’ve borrowed some ideas from it, particularly the multi-layer canvas for more efficient rendering.
YamilG YamilG
w3c is working in a api for connecting joypads I think
programm… programmer
these frameworks look promising!
markbrow… markbrown4
yeah, there’s demos available for the GamepadAPI out already.
SitePoin… SitePoint_Paul
In Chrome you can enable support for Gamepad API at chrome://flags/
YamilG YamilG
I would like to see a book explaining how to create a game engine with HTML5, that would be nice to have (sitepoint..:)
markbrow… markbrown4
@YamilG I’d buy it too :)
There’s quite a few of the engines that are out there on github though
molona molona
well, @markbrown4… what are you waiting for? start writing now :D
diogo diogo
does it make sense to use more than one frameworks on the same development?
markbrow… markbrown4
You just need to do some digging, trial and error, reading the docs
diogo, depends on the framework / library i suppose
YamilG YamilG
didn’t know chrome was already shipping gamepadapi support! :O
SitePoin… SitePoint_Paul
If you’re looking at building a game engine, having some knowledge of Linear Algebra is really useful. Here’s a great tutorial:http://blog.wolfire.com/2009/07/linear-algebra-for-game-developers-part-1/
YamilG YamilG
a random question, are you guys living out of gamedev, if so, any advise on how to become a full time game developer?
markbrow… markbrown4
@YamilG no, my job is a web developer, so sites / applications / games on the side.
SitePoin… SitePoint_Paul
@YamilG: Likewise, I build web applications for a living, not games. I believe it’s a difficult industry to get into at this stage. Early days yet, though.
markbrow… markbrown4
@YamilG I think there’s definitely the possibility of doing HTML5 game dev full time, but there’s nothing quite like an app store that will help you monetize
SitePoin… SitePoint_Paul
Once you’ve read that Linear Algebra tutorial, here’s a nice looking library to help with the vector mathematics: http://sylvester.jcoglan.com/
markbrow… markbrown4
So you’ll need to monetize some other way like requiring sign up / login.
HAWK 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 lnxwalt
So you recommend paid gamplay instead of in-game ads?
markbrow… markbrown4
@HAWK, you can never secure anything that is client-side 100%.
YamilG YamilG
how about html5 games incorporation with the facebook platform?
programm… programmer
How about interacting with a database?
markbrow… markbrown4
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… SitePoint_Paul
(and even then, people can use bots to do their clicking/aiming/keyboard input)
Balachan… Balachandra
No restrictions on server side
markbrow… markbrown4
It’s certainly possible to secure, but you need to be very specific on the server-side what you accept as valid input.
YamilG YamilG
key question: where to begin? and I mean, baby stepping
chrisser… chrissergent
Any chance that a book about developing games will come out, from novice to ninja or something like that?
markbrow… markbrown4
@YamilG facebook apps are basically an iframe that embeds your site inside facebook.
programm… programmer
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… markbrown4
There’s no real limitations that make adding games to a facebook app difficult.
SitePoin… SitePoint_Paul
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… Paul_Wilkins
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… markbrown4
@programmer like any other web application would interact with the database.
SitePoin… SitePoint_Paul
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… markbrown4
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.
chrisser… chrissergent
Any thoughts on where to start on creating an HTML5 game like Risk?
programm… programmer
@markbrown4 Okay, so learn Ajax then?
SitePoin… SitePoint_Paul
Here’s something I’ve been playing with… I’m building it without using any frameworks or game libraries: http://temporary-b82df421.s3-website-us-east-1.amazonaws.com/
(There’s currently no point to the game, but you can click around, and see how various aspects of pathfinding etc work)
If you’re interested, I can push the source code to GitHub…?
markbrow… markbrown4
Well, 90% of the game will be client-side, if you need to save state during gameplay then you’ll need something like Ajax.
diogo diogo
@chrissergent a friend of mine told me about HTML5-Canvas-Cookbook
chrisser… chrissergent
@diogo thanks. I found it and I am saving the link.
markbrow… markbrown4
@chrissergent I haven’t actually played risk, but from the screenshots it looks like it would be fairly easy to make.
depending on what you’re wanting you may not need HTML5 either.
A lot of the screen elements could be built with HTML / CSS
chrisser… chrissergent
@markbrown4 I would actually like to make a game more like Axis & Allies, but I thought more people are familiar with Risk.
HAWK HAWK
I’m just dropping this link in so that it’s in the transcript http://www.html5canvastutorials.com/cookbook/
markbrow… markbrown4
Sorry, don’t know that one either :)
programm… programmer
My browser crashed! Must be all the HTML5 ha ha!
SitePoin… SitePoint_Paul
Here’s a pretty amazing physics simulation library for JavaScript… Demo: http://dl.dropbox.com/u/2494815/demo/Joints.html Code:https://github.com/josephg/chipmunk-js
chrisser… chrissergent
@hAWK I like that page. Thanks.
HAWK HAWK
@chrissergent np
molona molona
@sitePoint_Paul I assume that you used that basic linear algebra that you mentioned to create your game… does that include the physics (let’s say not trespassing the wall?
markbrow… markbrown4
@chrissergent board game style games are one of the easier types of games to build so something like Axis & Allies.
SitePoin… SitePoint_Paul
molona: yep, what you’re referring to is Collision Detection, which is surprisingly difficult.
markbrow… markbrown4
http://yellowshoe.com.au/super_fun/ is an example of a game board style game with multiple choice answers / dice driving the input.
molona molona
@sitePoint_Paul. Yes, I think that’s the term :)
markbrow… markbrown4
Similar inputs to what those games use I believe.
chrisser… chrissergent
@markbrown4 I just haven’t done one and thought it would be fun; but where to start; I wish there was a walkthrough for something simple.
markbrow… markbrown4
Start with what you know. If you feel comfortable with HTML & CSS build the screens using those technologies.
Most of that super_fun game is just HTML/CSS with javascript changing the state and pages.
fhuel fhuel
Ehi guys, what is in your opinion the most complete html5 framework for game design… I’m looking at lime.js, what do you think about it ?
SitePoin… SitePoint_Paul
@molona: You can see a lot of the line intersection code here: https://github.com/pda/bottom_up/blob/master/src/code/line.coffee
chrisser… chrissergent
@markbrown4 I wouldn’t mind a walkthrough of the Super game. That could get me started for the logic of a turn based war game.
markbrow… markbrown4
From what I’ve seen Impact.js is the most complete but it comes at a price.
SitePoin… SitePoint_Paul
@molona: And also the collision detection here: https://github.com/pda/bottom_up/blob/master/src/code/box_collider.coffee
markbrow… markbrown4
@fhuel lime.js does look good, but I haven’t used it yet.
markbrow… markbrown4
@fhuel most of the game engines you can tell are good by the games outputted.
yuukan yuukan
what do you think of appmobi?
fhuel fhuel
right, thank you @markbrown4
markbrow… markbrown4
The lime.js example games feel smooth and fast and it seems to be gaining popularity. Looks like a good option.
diogo diogo
@sitePoint_Paul your ‘game’ hosted at amazonaws.com, is there a particular reason for choosing amazonaws?
molona molona
@sitePoint_Paul thanks!!!
SitePoin… SitePoint_Paul
@diogo: because hosting on AWS is cheap and easy, and I use it for other home and work projects.
@diogo: most or all of SitePoint is hosted on Amazon AWS one way or another.
what I’m using there is just a simple Amazon S3 bucket.
fhuel fhuel
AWS is just for static website, isn’t it ?
markbrow… markbrown4
@chrissergent I can send you a walkthrough to that game. shoot me your email at markbrown4@gmail.com
SitePoin… SitePoint_Paul
@fhuel S3 is just for static content, but AWS is made up of lots of services, including EC2 which is their virtual computing platform.
For animating in HTML5, requestAnimationFrame is an important API, however it’s not standard yet. Here’s a nice polyfill script which provides it for all browsers: http://temporary-b82df421.s3-website-us-east-1.amazonaws.com/js/vendor/raf.js
fhuel fhuel
ok, probably it just seems a lot more complex that a “regular” hosting… at least to me :)
diogo diogo
does it make sense to obfuscate your js code?
SitePoin… SitePoint_Paul
More official URL for the requestAnimationFrame polyfill: https://gist.github.com/1579671
markbrow… markbrown4
@diogo that won’t prevent someone really intent on taking the code.
chrisser… chrissergent
@markbrown4 I sent it.
SitePoin… SitePoint_Paul
@fhuel It’s probably more complex until you work with it for a while :)
fhuel fhuel
eheheh right
HAWK HAWK
Ok, we have just over 5 minutes left in the session, so if you have any questions that you’ve been sitting on, now would be the time to ask them.
badjem79 badjem79
hi, any suggestion for a framework for creating a collecting card game, i plan to write my own using jquery as client and node.js/redis as back-end
SitePoin… SitePoint_Paul
If you’re into unit testing — it can be done for game development too. Here’s the tests for my work-in-progress: http://temporary-b82df421.s3-website-us-east-1.amazonaws.com/test.html and the code: https://github.com/pda/bottom_up/tree/master/src/code/spec
markbrow… markbrown4
@diogo I’d still use uglify.js to compress and minify the scripts but only for speef, not to secure them.
diogo diogo
@markbrown4 great answer :)
markbrow… markbrown4
@badjem79 it depends on the UX involved I suppose.
markbrow… markbrown4
@badjem79 no immediate recommendations, only to keep it simple as possible. if HTML/CSS can achieve what you want there’s no reason to put everything in a <canvas>.
diogo diogo
@sitePoint_Paul could you share any references/links on unit testing?
SitePoin… SitePoint_Paul
@diogo: for JavaScript, Jasmine is great for unit testing: http://pivotal.github.com/jasmine/
SitePoin… SitePoint_Paul
For Ruby code, RSpec is great: http://pragprog.com/book/achbd/the-rspec-book
markbrow… markbrown4
Node.js helps if you have a lot of traffic or want to support socket.io like communication.
diogo diogo
thanx, I was going to had unit testing for javascript :)
markbrow… markbrown4
A card collecting game could use socket.io to share with others who are online at the time for example.
SitePoin… SitePoint_Paul
A few months ago, Mozilla posted about this minimal HTML5 game template: https://blog.mozilla.org/labs/2012/05/introducing-a-minimalist-html5-game-template/
SitePoin… SitePoint_Paul
worth reading if you want a collection of tools to get started.
HAWK HAWK
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.
If you’d like to sign up for email reminders of future sessions, you can do so here https://www.facebook.com/sitepoint/app_115462065200508
molona molona
@sitePoint_Paul and @markbrown4
molona molona
thanks
chrisser… chrissergent
thanks
programm… programmer
thank you
HAWK HAWK
The next session is Sept 12 and the subject is UX with SitePoint author Jodie Moule.
theoWire… theoWirebox
doh missed it lol
diogo diogo
thank you!
fhuel fhuel
thank you
HAWK HAWK
@theoWirebox Check out the transcript later today :)
markbrow… markbrown4
no problemo.
theoWire… theoWirebox
ok cool thanks
SitePoin… SitePoint_Paul
No worries – glad you all made it.
Also, if you remember Command & Conquer from the 90′s, check this out: http://www.adityaravishankar.com/projects/games/command-and-conquer/
markbrow… markbrown4
Feel free to tweet at me at @markbrown4 if you have questions. Would like to see what you guys are making :)
SitePoin… SitePoint_Paul
Likewise – I’m @pda on Twitter: http://twitter.com/pda

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.