Packt Publishing recently invited me to review the recently released video HTML5 Game Development by Makzan (http://makzan.net/). I hesitated initially to accept this offer because I've typically preferred reading text (books, blogs, and articles) over watching videos and podcasts for learning new technical concepts. However, after viewing the HTML5 Game Development video, I'm glad that I accepted that offer.
The HTML5 Game Development video, once downloaded, can be viewed in a web browser via the Packt Video player. The next screen snapshot demonstrates this for the first section of the video.
The HTML5 Game Development video is a series of short video clips ranging from a little shorter than 2 minutes to a little longer than 4 minutes each. These videos are categorized by "section" (sections are referenced as "chapters" in navigation buttons) and the next screen snapshot shows the first, second, and last (eighth) sections. The one in the middle (Section 1 in this case) is the Section whose video snippets would be viewed when the "Browse Videos" button is clicked.
When a Section (or Chapter) is selected, multiple short videos are made available. An example of this is shown in the next screen snapshot. Click on "Watch Video" allows one to start watching the specific video.
I have taken the time in this post to depict this presentation of the short video snippets because there are some advantages to the HTML5 Game Development video being available in this format. The short videos allow easily digestible amounts of information to be seen in just a few minutes. Objectives for each video snippet are outlined before the video snippet and then are addressed in the video snippet. With such short video snippets available and with clear objectives outlined before each video, it is easy to pick and choose which portions to watch more than once. An effective way of viewing this overall video might be to first watch the video snippets once through and then return to those of most interest are those that need to be seen again.
The overall video length is advertised as just under 2 hours. This is divided into eight chapters/sections ranging from 12+ minutes each to 17+ minutes each. With each chapter/section having 5 videos, these videos range from 1 minute to 4 minutes each. The Packt HTML5 Game Development Video Table of Contents outlines the eight chapters/sections, the five videos per chapter/section, and the total duration of each chapter/section. The O'Reilly page for this video breaks down each of the five videos in each of the eight chapters/sections by their individual durations (to minutes granularity).
Through the course of the 40 video snippets, HTML5 Game Development uses audio and video presentation to demonstrate creation of two simple HTML5-based game applications that work in web browsers on desktops and laptops and work on mobile devices. Along the way, the presentation covers HTML, CSS, JavaScript, and the EaselJS/CreateJS libraries. Seeing the code being edited in the Sublime text editor while the action being taken is narrated makes it easy to quickly see and learn how this all works together. I also liked that the video introduced many specific syntax features of HTML5 (such as local storage), JavaScript built-in functionality (such as use of JSON.stringify and JSON.parse), and CSS styling techniques.
HTML5 Game Development depicts application of several interesting products. Its use of Sublime Text makes it easy to read the code thanks to color coded syntax on a dark background, line numbers, code completion, and keyword matching capabilities. The video also uses Sloppy and the iOS Simulator to help demonstrate adjusting the developed games to run on mobile devices. The video also demonstrates using free tools available online to secure fonts and make them presentable on the web. Another example is the video's demonstration of using Zoë to covert Flash animation to sprite sheets (.png and .json files) and then applying those with EaselJS Sprite Sheet Animations.
The Packt page describing HTML5 Game Development includes a section with the header "Who this video course is for" that succinctly (and correctly in my opinion) summarizes the audience for this series of video snippets: "HTML5 Game Development is ideal for anyone who wants to get started with the fundamentals of game development in HTML5. Some basic knowledge of HTML, JavaScript, and CSS would be useful." The narration in the videos includes several nice references to best practices and reasons why certain things are coded the way they are and having basic familiarity with HTML, CSS, and JavaScript made it much easier to appreciate these points.
The videos demonstrate quite a bit in the two hours. The narration is quick and the code editing in Sublime Text is quick thanks to significant copying-and-pasting that occurs in synchronization with the narration. I enjoyed the relatively fast pace because I didn't have a chance to lose interest or get bored. However, I was glad that I had used HTML5 technologies previously because a lot of content was covered so rapidly. For viewers with less experience with these technologies, the short videos provide the opportunity to easily re-watch parts that need more than one viewing and possibly mix viewing of those parts with reading other more introductory resources.
One of the things I most enjoyed about the HTML5 Game Development video snippets was the real-time development and refactoring that was demonstrated. Other than the JavaScript libraries being used, both simple games were built from nothing in front of the viewer. Although this often meant copying and pasting of code obviously written earlier, it was done as if it was being typed in (but thankfully pasting is much quicker than most peoples' typing). The narration describes what is happening in each case and Sublime Text features are used to highlight portions being discussed. The best presentations at conferences or in videos are those in which significant upfront time has been invested in writing and generating the presentation. It is clear to me that this investment was made in preparing HTML5 Game Development. The coordination of audio and video is generally very good and is very conducive to quick learning.
I learned several things specific to game development from this video. For example, it was interesting to see discussion and implementation of the Sliding Door Effect. It was also interesting to see how common JavaScript functions and calculations could be used to model the game dynamics.
There are a few things to note to get the most out of "HTML5 Game Development." Although video 6.2 is called "Applying Gravity to the Hero", it actually talks about running hero and moving camera instead of falling hero. On the other hand, video 6.3 is called "Making the Hero Run" but talks about making the hero stop falling on the platform rather than falling through it. These videos, at least in my download, were switched in order.
To see full screen (which is particularly important with the code editing video), click on the square to the right of the video progress bar and volume control when mouse cursor is over video in the Packt Video Player.
The audio in HTML5 Game Development is clear and the woman narrating the video speaks in a clear manner and enunciates well (and I liked the accent).
HTML5 Game Development is a great resource for anyone with basic familiarity with HTML, JavaScript, and CSS to expand that knowledge into learning key principles that can be applied to generate HTML5 games and other interactive applications. For developers in that position, I highly recommend the HTML5 Game Development video.
No comments:
Post a Comment