Catch up on stories from the past week (and beyond) at the Slashdot story archive

 


Forgot your password?
Close
typodupeerror
×
Books Graphics Book Reviews Games

Book Review: Core HTML5 Canvas 72

Posted by samzenpus from the read-all-about-it dept.
eldavojohn writes "Core HTML5 Canvas is a book that focuses on illuminating HTML5 game development for beginning and intermediate developers. While HTML and JavaScript have long been a decent platform for displaying text and images, Geary provides a great programming learning experience that facilitates the canvas element in HTML5. In addition, smatterings of physics engines, performance analysis and mobile platform development give the reader nods to deeper topics in game development." Read below for the rest of eldavojohn's review.
Core HTML5 Canvas
author David Geary
pages 723
publisher Prentice Hal
rating 9/10
reviewer eldavojohn
ISBN 9780132761611
summary An introduction to game development in HTML5's canvas that brings the developer all the way up to graphics, animation and basic game development.
This book is written with a small introduction to HTML and JavaScript. While Geary does a decent job of describing some of those foundational skill sets, I fear that a completely novice developer might have a hard time getting to the level required for this text. With that in mind, I would recommend this book for people who already have at least a little bit of HTML and JavaScript development in their background. This book may also be useful to veteran developers of an unrelated language who can spot software patterns easily and aren't afraid to pick up JavaScript along the way. You can read all of Chapter One of the book here if you want to get a feeling for the writing. Geary also has sample chapters available on his site for the book, corehtml5canvas.com and maintains the code examples on Github. If you already write games, this book is likely too remedial for you (especially the explanations of sprites and collision detection) and the most useful parts would be Geary's explanation of how to produce traditional game elements with the modern HTML5 standards.

I have very few negative things to say about this text – many of which may be attributed to personal preferences. This book is code heavy. It starts off with a sweet spot ratio for me. I found I spent about twenty to thirty percent of my time scanning over HTML and JavaScript snippets inserted occasionally into passages. However, by the last chapters, I found myself poring over lengthier and lengthier listings that made me feel like I was spending sixty to seventy percent of my time analyzing the JavaScript code. To be fair, the author does do a good job of simply referencing back to concepts learned in other chapters but I wouldn't mind a re-explanation of those topics or a more in depth analysis of how those concepts interoperate. I also feel that it is risky to put so much code into print as that greatly impacts the shelf life of an unchanging book. The book itself warns on page 51 that toBlob() was a new specification added to HTML5 between writing the book and the book being published. I feel like this would warrant much more English explaining what you're accomplishing and why so that the book does not age as much from being tightly coupled to a snapshot of the specifications.

The code listings in this book are wonderfully colored to indicate quickly to the eye what part of the JavaScript language each piece is. I'm not sure how many copies suffer from this but my book happened to have a problem on some of the pages whereby the comprising colors did not line up. Here is a good example and a bad example just a few pages apart.

This was infrequent but quite distracting as the code became more and more predominant. Lastly, Geary briefly introduces the reader to amazing performance tools (jsPerf in Chapter 1 and again Browserscope in Chapter 4) early on and demonstrates how to effectively exercise it on small pieces of JavaScript. In the particular example he shows how subtle differences in handling image data can affect the performance inside different browsers (even different versions of the same browser as I'm sure the JavaScript engines are repeatedly tweaked). Since games are always resource intensive, I wondered why the author didn't take these examples to the next level and show the reader how to write unit tests (not really covered in the book). That way each of these functions could be extracted to a common interface where it would be selectively chosen based on browser identification. While this might be unnecessary for images, it would be a nod toward addressing the long pole in the tent when you look to squeeze cycles out of your code. Oddly, as more concepts are established and combined, these performance exercises disappear. I understand this book was an introduction to these side quests with a focus on game development but this was one logical step I wish had been taken further (especially in Chapter 9: The Ungame).

About a year ago, I started a hobby project to develop a framework for playing cards in the browser on all platforms. The canvas element would be the obvious tool of choice for accomplishing this goal. Unfortunately I began development using a very HTML4 attitude with (what I now recognize) was laughable resource management. This book really helped me further along in getting that hobby project to a more useable state.

The first chapter of the book introduces the reader to the basics of HTML5 and the canvas element. The author covers things like using clientX and clientY for mouse events instead of x and y. A simple clock is built and shows how to correctly use the basic drawing parts of the HTML5 specification. For readers unfamiliar with graphics applications, a lot of ground is covered on how you programmatically start by constructing an invisible path that will not be visually rendered until stroke() or fill() is called. The chapter also covers the basic event/listener paradigm employed by almost anything accepting user input. Geary explains how to properly save and restore the surface instead of trying to graphically undo what was just done.

An important theme through this book is how to use HTML elements alongside a canvas. This was one of the first follies of my "everything goes in canvas" attitude. If you want a control box in your application, don't reinvent the partially transparent box with paths and fills followed by mouse event handling over your canvas (actually covered in Chapter 10) – simply use an HTML div and CSS to position it over your canvas. Geary shows how to do this and would have saved me a lot of time. Geary discusses and shows how to manage off-screen canvases (invisible canvases) in the browser which comes in mighty handy when boosting performance in HTML5. The final parts of Chapter One focus on remedial math and how to correctly handle units of measure when working in the browser.

Chapter Two shows the reader how to build a rudimentary paint application with basic capabilities. It does a great job of showing how to expand on the basic functions provided by HTML5 and covers a little bit of the logic behind the behavior. Geary goes so far as to show the reader how to extend some of the core components of HTML5 like CanvasRenderingContext2D with an additional function. He also cautions that this can lead to pitfalls in JavaScript. This chapter does an excellent job of exploiting and enumerating core drawing functionality to achieve the next level in using these lines and objects for a desired user effect. Prior to reading this chapter, I hadn't viewed clip() in the correct light and Geary demonstrates the beginnings of its importance in building graphics. In Chapter Three, text gets the same extensive treatment that the basic drawing elements did in Chapter Two. In reading this chapter, it became apparent hat HTML5 has a lot of tips and tricks (perhaps that comes with the territory of what it's trying to achieve) like you have to replace the entire canvas to erase text. Being a novice, I'm not sure if the author covered all of such things but I was certainly appreciative for those included.

Chapter Four was an eye opener on images, video and their manipulation in canvas. The first revelation was that drawImage() can also render another canvas or even a video frame into the current canvas. The API name was not indicative to me but after reading this chapter, it became apparent that if I sat down and created a layout of my game's surface, I could render groups of images into one off-screen canvas and then continually insert that canvas into view with drawImage(). This saved me from considerable rerendering calls. The author also included some drag and drop sugar in this chapter. The book helped me understand that sometimes there are both legacy calls to old ways of doing things and also multiple new ways to accomplish the same goal. When you're trying to develop something as heavy as a game, there are a lot of pitfalls.

Chapter Five concentrates on animations in HTML5 and first and foremost identifies a problem I had struggled with in writing a game: don't use setInterval() or setTimeout() for animations. These are imprecise and instead the book guides the reader with instructions on letting the browser select the frame rate. Being a novice, the underlying concepts of requestAnimationFrame() had eluded me prior to reading this book. Geary's treatment of discussing each browser's nuances with this method may someday be dated text but helped me understand why the API call is so vital. It also helps you build workarounds for each browser if you need them. Blitting was also a new concept to me as was the tactic of double buffering (which the browser already does to canvas). This chapter is heavy on the hidden caveats to animation in the browser and builds on these to implement parallax and a stopwatch. The end of this chapter has a number of particularly useful "best practices" that I now see as crucial in HTML5 game development.

Chapter Six details sprites and sprite sheets. Here the author gives us a brief introduction to design patterns (notably Strategy, Command and Flyweight) but it's curious that this isn't persisted throughout the text. This chapter covers painters in good detail and again how to implement motion and timed animation via sprites with requestNextAnimationFrame(). This chapter does a great job of showing how to quickly animate a spritesheet.

Chapter Seven gives the user a brief introduction to implementing simple physics in a game engine like gravity and friction. It's actually just enough to move forward with the upcoming games but the most useful section of this chapter to me was how to warp time. While this motion looks intuitive, it was refreshing to see the math behind ease-in or ease-out effects. These simple touches look beautiful in canvas applications and critical, of course, in modeling realistic motion.

Naturally the next thing needed for a game is collision detection and Chapter Eight scratches the surface just enough to build our simple games. A lot of fundamental concepts are discussed like collision detection before or after the collision happens. Geary does a nice job of biting off just enough to chew from the strategies of ray casting, the separating axis theorem (SAT) and minimum translation vector algorithms for detecting collisions. Being a novice to collision detection, SAT was a new concept to me and I enjoyed Geary's illustrations of the lines perpendicular to the normal vectors on polygons. This chapter did a great job of visualizing what the code was achieving. The last thing this chapter tackles is how to react or bounce off during a collision. It provided enough for the games but it seemed like an afterthought to collision detection. Isn't there a possibility of spin on the object that could influence a bounce? These sort of questions didn't appear in the text.

And Chapter Nine gets to the main focus of this book: writing the actual game with all our prior accumulated knowledge. Geary calls this light game engine "the ungame" and adds things like multitrack sound, keyboard event handling and how to implement a heads-up display to our repertoire. This chapter is very code heavy and it confuses me why Geary prints comments inlined in the code when he has a full book format to publish his words in. The ungame was called as such because it put together a lot of elements of the game but it was still sort of missing the basic play elements. Geary then starts in on implementing a pinball game. It may sound overly complicated for a learning text but as each piece of the puzzle is broken down, the author manages to describe and explain it fairly concisely. While this section could use more description, it is basically just bringing together and applying our prior concepts like emulating physics and implementing realistic motion. The pinball board is merely polygons and our code there to detect collisions with the circle that is the ball. It was surprisingly how quickly a pinball game came together.

Chapter Ten takes a look at making custom controls (as mentioned earlier about trying to use HTML when possible). From progress bars to image panners, this chapter was interesting and I really enjoyed the way the author showed how to componentize and reuse these controls and their parts. There's really not a lot to say about this chapter, as you may imagine a lot of already covered components are implemented in achieving these controls and effects.

Geary recognizes HTML5's alluring potential of being a common platform for developing applications and games across desktops and mobile devices. In the final chapter of the book, he covers briefly the ins and outs of developing for mobile — hopefully without having to force your users to a completely different experience. I did not realize that native looking apps could be achieved on mobile devices with HTML5 but even with that trick up its sleeve, it's hard to imagine it becoming the de facto standard for all applications. Geary appears to be hopeful and does a good job of getting the developer thinking about the viewport and how the components of their canvas are going to be viewed from each device. Most importantly, it's discussed how to handle different kinds of input or even display a touch keyboard above your game for alphabetic input.

This was a delightful book that will help readers understand the finer points of developing games in HTML5's canvas element. While it doesn't get you to the point of developing three dimensional blockbuster games inside the browser, it does bite off a very manageable chunk for most readers. And, if you're a developer looking to get into HTML5 game design, I heavily recommend this text as an introduction.

You can purchase Core HTML5 Canvas from amazon.com. Slashdot welcomes readers' book reviews (sci-fi included) -- to see your own review here, read the book review guidelines, then visit the submission page.
This discussion has been archived. No new comments can be posted.

Book Review: Core HTML5 Canvas More

Book Review: Core HTML5 Canvas

Comments Filter:

  • I have a very clear idea of what this book is about and what it covers, and in what level of detail. It does indeed seem like a good introduction to the subject. Thank you for writing this, and of course for your other reviews.

  • Cool to see HTML5 becoming almost complete for game dev.

    How people handling pseudo-realtime TCP/UDP packets (networking) in HTML5 ?

Slashdot Top Deals

The truth of a proposition has nothing to do with its credibility. And vice versa.

Close