|Core HTML5 Canvas|
|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.|
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 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.