TL;DR:
If you fancy diving into HTML5, and all that it offers for game development, but don't know one end of a sprite from the other then this course provides an excellent, concentrated and practical introduction to the topic.
Introduction
Just about a year ago Pluralsight acquired design orientated Digital-Tutors in a nicely synergistic takeover. While I really love Pluralsight I couldn't quite see how the new courses would benefit me and so didn't explore further.
Fast-forward a year and that's still largely the case; I'm not about to start animating bugs or creating photo-realistic illustrations. I do, however, fancy creating a browser based game as a side-project and it turns out that Digital-Tutors supply a bunch of tutorials for helping me do just that.
A little digging around turned up Creating a Responsive Multiplayer Action Web Game in HTML5 and I jumped right in; even if the course turned out to be a bust I'd only have wasted 2h12m of my life! As it turns out James Simpson has pieced together an effective tutorial that demonstrates how to build a multiplayer action game from scratch using open-source libraries. I'm still no expert but that's not James' fault!
Contents
In total the course consists of 14 videos, covering the discrete steps required to build the sample project from the ground up, and these I've roughly grouped into six topics:
Getting off the ground
James kicks off by discussing tools that can be used for web development and how to set up an environment. It turns out that Sublime Text is a favourite and for a very good reason; it's a powerful editor and James provides plentiful tips for getting the best out of it. For example a great time-saver is the ability to set multiple, simultaneous cursors for applying the same edit in several places at once:
The downside with Sublime Text is that it's somewhat expensive, if you want to avoid the intermittent nagging. As a result a number of open-source alternatives have sprouted up and one that I've taken a liking to is Brackets; it's designed for web development, is continuously evolving and draws energy from an involved community.
Draw something and get it moving
Seeing as how this is an HTML5 course I expected the bulk of the content to revolve around drawing to the canvas and manipulating objects in this space but James side-steps this by reaching for the Pixi.js library. This is a 2D rendering engine, that abstracts drawing constructs, but I'm doing the package a disservice - it's really a high-performance, cross-platform engine that just works. This means that it's very easy to put together a shape, add it to a stage and render it to the canvas:
var shipGraphics = new PIXI.Graphics();
shipGraphics.beginFill(0x20d3fe);
shipGraphics.moveTo(26, 0);
shipGraphics.lineTo(0, 60);
shipGraphics.lineTo(52, 60);
shipGraphics.endFill();
Of course it's a bit pointless drawing sprites which don't go anywhere and that's where the Mousetrap library comes in. This lightweight assembly makes it very easy to bind all types of keyboard events without unnecessary drama and all you need to care about is the logic within the event:
Mousetrap.bind('w', function() {
this.ship.rotation = 0;
this.moveShip('n');
}.bind(this));
Throw in some physics
Something that has always put me off writing a game, apart from having good ideas, is the sense that I'd have to model some sort of physical reality - even one that applies only in the game domain. It's not the equations that bother me so much as the not knowing where to begin; it looks like an elephant-sized problem! Fortunately p2.js is an elegant solution to this dilemma and it feels pretty revolutionary when James introduces it. All you have to do is set up a world, create a body with some properties and dimensions and the engine does the heavy lifting (that's almost a joke!):
this.ship = new p2.Body({
mass: 1,
angularVelocity: 0,
damping: 0,
angularDamping: 0,
position: [Math.round(this._width / 2), Math.round(this._height / 2)]
});
this.shipShape = new p2.Rectangle(52, 69);
this.ship.addShape(this.shipShape);
this.world.addBody(this.ship);
This, however, isn't the best bit; it's when you realise that these physical bodies are moving and interacting independently of your graphical representation. So this all happens under the surface, with p2.js updating the bodies on every tick of the game clock, and you get to choose which graphical manifestations of these bodies you wish to synchronise. If there's one aspect of this course that I truly like it's this practical demonstration of separating physical and visual models within a game.
Where are the wacky sounds?
When your game doesn't have any sound effects it feels a little weird, to say the least, and yet it's surprising how few noises you can get away; which is fortunate as sound files of any quality tend to be on the large side. In the course James self-referentially brings in the Howler library that he wrote, to support multiple browsers, and it works very nicely. An aspect that I hadn't appreciated is that rather than load each file individually it's better practice to combine audio sprites into a single file and then reference them based on timestamps:
this.sounds = new Howl({
urls: ['sounds.mp3', 'sounds.ogg'],
sprite: {
boom1: [0, 2342],
boom2: [3000, 638],
boom3: [4500, 3031]
}
})
There's no doubt that this takes rather more effort to set-up but James spends a reasonable amount of time demonstrating exactly how to achieve this using Audacity; with a little bit of trial and error I managed to replicate the approach and triggering the sounds couldn't be easier. The only real problem is that the course relies on royalty-free audio from Freesound and while it's a fine resource the background music sample has been deleted; so the reference to this in the course notes is out of date and you have to dig around for an alternate space soundtrack yourself.
Deal with the lack of performance
With the mechanics of the game out of the way James switches his attention to performance and how to get the best out of the Chrome Developer Tools. If you've done any web development recently you'll be familiar with hitting F12, opening up the DevTools window and perhaps setting a breakpoint or checking a variable. That's barely scratching the surface though and in the course we see how to log performance in the browser, identifying areas of the code that are processor-intensive, and pick up any memory leaks (the bane of a browser application). There's no doubt that these skills are useful beyond the scope of game development, too, since both of these issues slow the browser down and make any application unstable.
Ship it!
The wrap up of the course covers some interesting ground rather rapidly; it's a tasting menu for going multi-player, becoming responsive and effectively deploying to distributed users. The initial section on making the game responsive to different screen sizes is a nice touch as it makes the finished article appear much more professional and very little code is required:
this.bgRenderer.view.style.height = '100%';
this.renderer.view.style.height = '100%';
this.bgRenderer.view.style.width = 'auto';
this.renderer.view.style.width = 'auto';
In contrast adding multi-player functionality requires installing Node.js and Socket.io as a means to send messages between different player sessions. James makes it look easy and illustrates how messaging can be, in essence, very straightforward as regards emitting and catching events. For maximum simplicity you do, however, need to ensure that Socket.io is installed in the local, game directory and that Node.js is running the server script (e.g. 'node server.js').
Absolutely finally the very last video covers deployment details such as minifying your javascript, into a single file, and using HTML5 Application Cache functionality to store files locally in a bid to improve performance on the client. The former tactic of reducing the size of code files, and obfuscating them, is familiar to me but the ability to cache (and allow for off-line execution) is both new and exciting!
Summary
If you're familiar with developing for the browser, and know your way around a Javascript file, then this course is an excellent way to get up to speed with game programming. Before working through the videos I knew about layers, sprites and performance in an abstract way but having now typed in the code, and used the libraries, my understanding is more concrete. No longer does the idea of creating a game, even a simple one, feel impossibly daunting.
Swinging back to the coding though I like to type in code right alongside the videos and while this is straightforward I did have to spend some time pausing the videos and trying to capture all of the lines required. As it turns out starter files are available for download (definitely worth doing) and these are useful for code comparison - but nothing beats accessing the library APIs with your own hands and making your own bugs!
So does the course live up to the claim made in its introduction: By the end of this tutorial, you'll have a solid understanding of advanced HTML5 game development topics and workflows, as well as a fully functioning game that will scale to fit any screen size? Actually yes it does; James Simpson covers a lot of ground in this tutorial but the order is pretty logical and the pace of learning acceptable. Without its help I imagine that I'd still be trying to hack out a basic implementation, from scratch, rather than be looking to move onto bigger and better projects with my eyes firmly opened. This is a good outcome.