Review: Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

I own a lot of O’Reilly books.  It may not even be exaggerating to say that I own most recent O’Reilly releases – my eBook purchases from the past couple of years top three figures.  So, it’s honestly a bit shocking to find a book that was published in August of 2011, and of interest to me, which I’ve not already snapped up in the intervening period.  In this case, it took the attendance of the intriguingly-named webcast Applying Old Video Game Performance Techniques to Modern Web-based Games for me to discover Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript.  I was so enthralled by the concepts that presenter/author Mario Andres Pagella shared in his short lecture that I not only purchased his book, but devoured its 156 pages over the next few days!

I grew up during the microcomputer revolution and spent many a happy hour during my childhood typing listings from the back of magazines into BBC Micros, and even writing my own game using MODE 7 block graphics.  Growing up as home computing grew up, I watched games evolve from low-resolution monochrome affairs into multi-million dollar productions.  I am continually fascinated by the extreme techniques used by developers of early games, like Geoff Crammond’s use of “sky pixels” to store additional code in Revs, and thus found Andres’ webinar, which related techniques used in early hardware-constrained game development to modern resource and performance-constrained (chiefly mobile) web game development.

To clarify the topic, isometric games use parallel projection to simulate three dimensions on a 2D display; the example game in this book, Tourist Resort, uses dimetric projection, which facilitates game development by using a 2:1 pixel x:y ratio vs. using anti-aliasing to achieve true isometric 30 degree angles.  I really like the trajectory taken in this book, from canvas basics to working game mechanics complete with PHP/MySQL back end, as opposed to one trivial example after another to the constant refrain of anything remotely realistic or interesting being “beyond the scope this book” (though, I was bummed to see grid memory paging left as an “exercise for the reader”!)  The chapters and examples (which are available on GitHub) proceed like real development – continually enhancing the product, exploring problems and experimenting with different solutions (for example comparing FPS achieved between different approaches).  They are laden too with very specific techniques, caveats, etc. – the direct translation of the author’s obviously extensive hands-on experience with these topics.

In addition to the expected “old school” techniques like Adaptive Tile Refresh (ATR) and sprite sheets (as well as their audio cousin, sound sheets), the book contains cutting-edge techniques such as the use of Web Workers to solve path finding via A* (click two points on the example and watch what happens!).  I was disappointed to have reached the end – in fact, the end is rather abrupt – after what feels like somewhat of an afterthought on Facebook integration, we’re presented with the About the Author page – no closing thoughts, where to go from here, etc.  Despite the jarring conclusion, Andres provides additional fodder via his personal blog, where he posts regular, in-depth articles on HTML5 game development.  Andres also recently launched his own independent game studio, Warsteed Studios, where I’m hoping to see more of his discoveries and techniques on display!

Product Details

Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript
By Mario Andres Pagella
Publisher: O’Reilly Media
Released: August 2011
Pages: 156
Print ISBN: 978-1-4493-0475-1
eBook ISBN: 978-1-4493-0474-4

2 Responses to Review: Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript
  1. Aditya Ravi Shankar Reply

    I started reading this book too.. An amazing gold mine of information…

    Just thought I’d introduce you to another book that you might (or might not like)…

    I recently wrote a book (Pro HTML5 Games) with the beginner-intermediate game developer in mind.
    Some details here (http://www.adityaravishankar.com/pro-html5-games/)….

    My goal with this book was to prove that you don’t need to be a large game company to build amazing looking games.

    The book teaches people how to make an angry birds clone and a real time strategy game from scratch…

    Would love to hear your thoughts….

    Oh, and check out my game demo here:

    Command & Conquer – Tiberian Dawn recreated in HTML5, with multiplayer :) (http://www.adityaravishankar.com/projects/games/command-and-conquer/)

    • ishotjr Reply

      Nice! If you’d like to send me a copy (ePub or PDF), I’d love to read and review it! :)

Leave a Reply to ishotjr Cancel reply

Your email address will not be published. Please enter your name, email and a comment.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>