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”
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 ![]() |
|
YamilG ![]() |
|
mb4 ![]() |
|
mb4 ![]() |
|
programm… ![]() |
|
markbrow… ![]() |
|
Paul_Wil… ![]() |
|
programm… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
programm… ![]() |
|
markbrow… ![]() |
|
markbrow… ![]() |
|
HAWK ![]() |
|
markbrow… ![]() |
|
programm… ![]() |
|
YamilG ![]() |
|
Cuebit ![]() |
|
markbrow… ![]() |
|
markbrow… ![]() |
|
Paul_Wil… ![]() |
|
SitePoin… ![]() |
|
diogo ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
programm… ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
YamilG ![]() |
|
programm… ![]() |
|
SitePoin… ![]() |
|
YamilG ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
YamilG ![]() |
|
markbrow… ![]() |
|
HAWK ![]() |
|
markbrow… ![]() |
|
YamilG ![]() |
|
SitePoin… ![]() |
|
SitePoin… ![]() |
|
YamilG ![]() |
|
programm… ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
YamilG ![]() |
|
markbrow… ![]() |
|
molona ![]() |
|
diogo ![]() |
|
markbrow… ![]() |
|
YamilG ![]() |
|
SitePoin… ![]() |
|
YamilG ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
HAWK ![]() |
|
lnxwalt ![]() |
|
markbrow… ![]() |
|
YamilG ![]() |
|
programm… ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
Balachan… ![]() |
|
markbrow… ![]() |
|
YamilG ![]() |
|
chrisser… ![]() |
|
markbrow… ![]() |
|
programm… ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
Paul_Wil… ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
chrisser… ![]() |
|
programm… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
diogo ![]() |
|
chrisser… ![]() |
|
markbrow… ![]() |
|
chrisser… ![]() |
|
HAWK ![]() |
|
markbrow… ![]() |
|
programm… ![]() |
|
SitePoin… ![]() |
|
chrisser… ![]() |
|
HAWK ![]() |
|
molona ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
molona ![]() |
|
markbrow… ![]() |
|
chrisser… ![]() |
|
markbrow… ![]() |
|
fhuel ![]() |
|
SitePoin… ![]() |
|
chrisser… ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
markbrow… ![]() |
|
yuukan ![]() |
|
fhuel ![]() |
|
markbrow… ![]() |
|
diogo ![]() |
|
molona ![]() |
|
SitePoin… ![]() |
|
fhuel ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
fhuel ![]() |
|
diogo ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
chrisser… ![]() |
|
SitePoin… ![]() |
|
fhuel ![]() |
|
HAWK ![]() |
|
badjem79 ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
diogo ![]() |
|
markbrow… ![]() |
|
markbrow… ![]() |
|
diogo ![]() |
|
SitePoin… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
diogo ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|
SitePoin… ![]() |
|
HAWK ![]() |
|
molona ![]() |
|
molona ![]() |
|
chrisser… ![]() |
|
programm… ![]() |
|
HAWK ![]() |
|
theoWire… ![]() |
|
diogo ![]() |
|
fhuel ![]() |
|
HAWK ![]() |
|
markbrow… ![]() |
|
theoWire… ![]() |
|
SitePoin… ![]() |
|
markbrow… ![]() |
|
SitePoin… ![]() |
|