I have done numerous courses online, from college courses with proctored exams, to continuing education online (e.g., ed2go), to the free Aquent Gymnasium courses (which are very well done), to courses I paid for that were not so good.  I generally find that online courses provide a convenient means of receiving instruction, while enforcing a structured approach to your learning, if they are done well.

So I was quite pleased to take on the opportunity to review the Packt Publishing video course HTML5 Game Development  by Makzan.  Though I have developed a Windows 8 game with HTML5, I don’t consider myself  a game developer and I very much looked forward to finding out what I could learn from this course.  (As a disclaimer, I received the course for free from Packt in return for this review).

The course, which as of this writing can be downloaded for $33.99 from the Packt website, comes in the form of an archive that contains two more zip files.  The first zip file contains the video files–40 in total which make up 8 lessons of 5 sections each–as well as a brief user guide (9 pages, pdf format) which explains the contents of the course and how to navigate it, a briefer pdf (1 page) that explains how to provide feedback to Packt, and some web pages that allow you to browse the course.  The second zip file contains the source code in the state it should be after each video (i.e., 40 folders of source code).

 

With other courses I’ve taken, I’ve found those courses that deal with a specific technology are less likely to become dated quickly than those that deal with a number of technologies and have dependencies on others, such as browsers. This course would fall into the latter.

And of course it goes without saying you get out of a course what you put into it.  It takes effort, and a good course will motivate you to make that effort.

So, to start, let’s deal with some of the up front claims in the marketing literature, and set realistic expectations.  If you read the Packt download page or the course overview that comes with the course, you will see the claim “Build two HTML5 games in two hours with these fast-paced beginner-friendly videos.”  The 40 videos themselves have a total running time of two hours, so it is more accurate to say you can watch someone explain how they built two games over two hours.  I coded along with the course and I found that each of the 8 individual sections easily took me over two hours a piece to complete, and depending on issues I came across, it could be twice that or longer.  The five individual videos that make up each section tended to be in the 2 to 3 minute range each (with a few over 4 minutes and some under 2 minutes), which are nice little chunks to work on at any one time.  The Packt website does provide a sample video (Section 5, Video 4) that is a fair representation of what you can expect from the videos that make up the course:

And in terms of “beginner-friendly” I suppose it depends on what you are a “beginner” of.  If you read further on in the overview it states “Some basic knowledge of HTML, JavaScript, and CSS would be useful.”  Personally, I think you probably need more than some basic knowledge of these technologies to get something substantive from the course, or else I suspect you’d be just copying quite a bit of code without any real understanding as to what is going on.  At a minimum, I would recommend you have a good understanding of CSS specificity, the box model and positioning; as well as an understanding of the JavaScript module pattern and prototypal inheritance. Understanding how to use your browser’s dev tools–especially the debugger and console–will also prove extremely helpful in debugging the inevitable typos and errors you introduce into your code.  And at one point I even had to use the profiling tools to determine the origin of a memory leak, but hopefully you’ll be spared that.  So, I would say, if you have solid web dev skills and are a “beginner” to HTML5 game development, then you could find this course “friendly.”

In terms of HTML5 game development, the focus of this course is developing games on the canvas element using the EaselJS library.  In the video, the IDE you see being used is Sublime Text 2, and the browser is Safari on a Mac.  If you want to keep things simple and run into as few problems as possible, then I recommend you use Safari and version 0.5.0 of EaselJS (you can find this in the source code folders that come with the course).

If you are more adventurous, like I was, then you may want to download the latest version of EaselJS (0.7.1 at the time of this writing) and use the browser of your choice, which I suspect would be Chrome for many of you.  Now be forewarned, some of the EaselJS code written in the videos no longer works with the latest version of EaselJS. So if you are adventurous, make the EaselJS documentation your friend.  Also, I came across some cases where code that works in Safari has some slightly different results, or in one case doesn’t work, in other browsers.  More on that later.

To deal with issues like these, one thing I’ve seen useful for students in the ed2go and Aquent Gymnasium courses are discussion areas focused on each lesson, where students help one another work their way through the inevitable pain points. If Packt were to provide such discussion boards I believe they may find it enhances the learning experience for their customers.

The course, itself, teaches by example by showing the development of a couple games: in the first three sections you develop a simple card game where you win by clicking randomly placed cards in numbered order, and in sections four through eight you develop a more adventurous 1980’s arcade-style game in which you jump from platform to platform collecting coins while avoiding rotating saws.  Any guesses as to which one is cooler?

You are not provided any additional exercises, reading material, quizzes, or exams to reinforce your learning.

You can see the full course syllabus, here: http://www.packtpub.com/html5-game-development/video (click on “Course Contents”).

Basically, it’s like learning with pair programming, except your partner won’t respond to any questions.  And she does a lot of pasting of code chunks.  (Where did she copy those from?  We never do find out).  Though you can make her repeat her statements at will via rewind, and pause the video to take the time to read those pasted code chunks.

You can see the two games I built with my paired video partner here and here.  If you want to be motivated, focus a bit more on the second game, which I admit was a cool experience to build.

So yes, I did manage to successfully build the games taught in the course in spite of all I noted I ran into.  And please don’t get me wrong, I did get a lot out of this course.  I feel it was worth my while and I’m pleased with what I got out of the effort I put into the course.  Though, and I repeat, you will have to put effort into the course to get a lot out of it.

What do I feel good about that I learned?

• the pre-loading graphics pattern shown
• the structure taught for modeling objects for a game
• collisions and gravity were introduced
• how running and a “camera” that follows the runner is implemented was cool to learn
• what’s involved in building sprite sheets for animations
• building a progress bar for pre-loading the games resources

There are also many topics just briefly touched on that the course did not go into a lot of depth.  For example, getting your first game ready for mobile only really involved quickly coding the meta viewport tag, which is fine if this is all you find you have to do to make your game mobile ready (sorry to say not all mobile devices are going to have the same aspect ratio).  At least you have a starting place from which to investigate more.

Later on in the course we are shown how to create sprite sheets from a Flash animation (swf) by utilizing the Zoë tool.  Unfortunately, the course does not include the swf files, so we cannot try creating the sprite sheets, ourselves.

Some gotchas I’ll also warn you about, in case you do decide to do the course, so you have less to work through than I did (this is beyond the differences between EaselJS o.5.0 and 0.7.1):

• in section two, one line of code sets the “innerText” of an element.  Of course, this doesn’t work in Firefox.  You’ll be fine if you stick with “innerHTML”.
• in section 3, the call to createjs.Bitmap() will result in a same origin security issue if you are developing with Chrome and not hosting your work on a web server.  I got around this by restarting Chrome with that protection disabled.
• I also found in section 3 with Chrome, Firefox and IE I could not get the background images for the tiles to display reliably when then the game first loads.  They would appear when I clicked on the first tile, though the issue went away once I put the game on a web server (except for mobile IE, where I still see it).
• again in section 3, I downloaded a font from the exact same location done in the video.  And tried to convert it into a web font on fontsquirrel, as was done in the video.  And fontsquirrel complained the font file was corrupted.  I ended up finding a similar font, elsewhere on the web, that fontsquirrel didn’t complain about.
• in section 4, video 3, there is a line of code that is needed that is not shown in the video for method updateView().  If you go to the code for the course, you’ll find it (or you can probably figure it out with the debugger, as I did).
• also, in section 4, when the code is shown in the video for building the platform, you will see that p.GameObject_initialize is not called in the definition of p.initialize (see below screen shot).   Do this and you’re in for an ugly surprise come section 6.  In section 6, the game code is written to loop back to the beginning once your player dies.  After a few loops you will notice the game starting to get sluggish.  This is even more pronouncedwithEaselJS version 0.5.0 than with the versionofEaselJS I used.  I did a quick heap allocation profile and saw the allocation of objects increasing over time with noticeable jumps when the game restarted.  Memory leak!  It took a bit of investigation for me to nail down just what was causing this.  (I’ll save what I did during that investigation for the subject matter of another blog post).
  

  Do you see p.GameObject_initialize() being called in p.initialize()?

Beyond that, there are a number of differences between the current version of EaselJS and the version used in this course.  I’d be happy to share my notes on these differences with anyone interested in those.

So, how should I summarize all this?  I would say if you are someone who has solid knowledge/experience with web technologies, especially JavaScript and CSS, and little experience developing games for the canvas element, and you are willing to put in some effort, you will get your money’s worth from this course.  You won’t pick this stuff up in a couple hours, short of having mastered osmosis.  If you have basic JavaScript and CSS abilities, my suspicions are you will pick up some knowledge, but for a lot of the stuff you code you won’t really understand what is going on, and you may get very frustrated if you miss a line of code or make a typo and your debugging skills are not up to snuff.  Or even if you do pinpoint the origin of the error, will you understand the issue?  Or, I suppose if you are really motivated, you could learn how to use the dev tools, and dig into these technologies, in parallel with the course.  Obviously some extra effort, but you got to learn that stuff at some point.

As for the issues I ran into, well, I can assure you that you will run into these issues in other courses that involve multiple interdependent technologies that are changing rapidly.  That is where things like discussions boards and folks helping one another out come in handy, and would make a fine compliment for Packt to offer with their courses.

On the Amazon scale: 4 out of 5 stars