Well now I have the proof! A couple of weeks ago I was followed on Twitter by @canvasdemos. The Canvas Demos blog dedicates its time to tracking down and showcasing demos and tutorials for the HTML canvas element. Some of the examples they’ve uncovered are truly amazing and include games, 3D tests, music visualizers, etc. If you’re at all intrigued by the power of CSS Canvas, and are wondering how you can use it on your own site (or Web app), don’t hesitate to give their site a look!.

The image above is from Jacob Seidelin’s music visualizer. The demo creates an image of Thom Yorke to the music of Radiohead’s Idioteque. It’s worth checking out.

— Ryan

Part 6: Taming XML

Let’s look at a typical XMLHttpRequest again.

If the request succeeds without error, then we can use the xmlhttp object to access the contents of the loaded XML file. To understand how to work with an XMLHttpRequest object, let’s relate it to something a little more familiar to Web coders: the Javascript Document object.

document.getElementsByName('across') will return an array containing all of the elements on your Web page whose name attribute is “across.” For example, <div name="across">.

xmlhttp.responseXML.getElementsByTagName('across') will return an array containing all of the “across” XML nodes. For example, <across>Data</across>.

Nodes can have both attributes and values. Review Figure 2.

getElementsByTagName will always return an array. In the example above there is only one a1 node, therefore there’s no reason to keep an array of a1 nodes. Instead, using the code below, we can save only the first returned node (since that’s all that exists).

Now that we’ve captured the a1 node specifically, we can access its c attribute using this simple code: var c = a1.getAttribute('c');.

Accessing node attributes is easy, but accessing node values is a little more confusing. Figure 4 demonstrates how to access the value of the editor node.

The firstChild method returns the first child of a node, duh. But the editor node does not appear to have any children. Well, it apparently (or not so apparently) does. When attempting to access the value of a node, imagine the value text as being a node itself. Access the nodeValue of the “text node” and you’ll get the result you’re looking for. Or, in more simple terms, always use .firstChild.nodeValue to access the value of a node.

In the above example, all of the across child nodes are named differently, so it would be cumbersome to getElementsByTagName each one separately. Instead, take advantage of the childNodes collection to return an array of the nodes.

There is more to learn about XMLHttpRequest, but by simply knowing how to use the getElementsByTagName, getAttribute, firstChild and nodeValue methods and the childNodes collection, you’ll have an easy time retrieving all types of data from XML documents.

Before I close this lengthy post, there is one more thing I’d like to mention with regards to XML files. It appears that you can not use Javascript to access local XML files using XMLHttpRequest, you can only access files found on a domain. I am completely perplexed as to why this is and if anyone has knowledge of the reason, or knows a workaround, I’d love to hear from you.

— Ryan

Part 5: Importing From XML

Most programs, including games, require data. More often than not this data must be updated regularly so as to sustain the usefulness of the application. This type of data is usually stored externally (out of the application’s main code) since it makes very little sense to require the application’s user to download a new version of the program every day in order to receive the latest and greatest data. Therefore, with respect to our game, it makes a great deal of sense to store the data for each crossword puzzle in an external XML file. This way each puzzle can easily be loaded individually by referencing a different XML file.

To import data from an XML file, we use the XMLHttpRequest Javascript object as follows.

We’ll talk more about reading from XML files in the next update.

—Ryan

This part of the tutorial is actually not going to explain proper procedures for preloading images. There are a number of methods available, all of which can be found by doing a simple Google search for “preload images”. This article will instead concentrate on ways to reduce the necessity of preloading altogether by means of self-contained data and CSS Sprites.

I’ll start off by briefing explaining the importance of CSS Sprites (since Part 4 below will explain how to use self-contained data). An in-depth discussion of CSS Sprites can be read on A List Apart. In a nutshell, a sprite map is a collection of smaller images mapped onto one large image. By combining images, you will reduce server requests and speed up download times. CSS Sprites especially come in handy when dealing with hovers.

Without sprites, displaying a different image for the hover state of an element requires making an extra call to the server for the new asset. This results in another download (at the time of mouseover), which can take time and create jerky mouseover experiences (especially in Internet Explorer). If a sprite map is used instead, the sprite can be setup to contain images for both the default state as well as the hover state. The sprite is downloaded as the page loads (if the element which will use the sprite is initially embedded on the page), and voilá, the hover state is downloaded with it and ready for use.

I’ve used sprites a couple of times on this site. To demonstrate how easy they are to use, let’s take a look at the “press” button at the bottom of the page.

Figure 1. Example sprite image
 

The sprite is illustrated above. The actual image is a PNG and contains elements which would be hard to decipher on a light grey background. The turquoise box was added to make things more viewable. Using an anchor tag as a button, we can crop out the backgrounds we need for the default and hover states using the following CSS.

Background, width and height styles: Because we are cropping the button to a width and height of 50 pixels, it is not necessary to specify a background position for the default state. Why? The default background appears at the top of our sprite. So as long as we assign a width and height that are the exact dimensions of the default background, the remainder of the background will extended past the boundaries of the button and will not be seen.

Display style: By default, anchor tags display inline, so in order to represent the anchor as a button (and specify things like width and height), we need to force the anchor to display as a block element.

Text-indent and overflow styles: If, in your markup, you include text within the anchor tag (for example: <a id="press" href="javascript:void(0)" onclick="dropBlock()">Press</a>), you can hide the text by assigning a negative text indent and hiding overflow.

The hover state: Now, all we need to do in order to fire up the hover state of the button is offset the top background position of the background enough so that the hover image is used instead of the default image. In this case, we need to offset by 50 pixels. When a sprite map only includes two image states, the offset can be either positive or negative. Both will achieve the same result. When dealing with sprites with three or more states, I recommend strictly using negative values. You’ll understand why as you experiment more with sprites.

And that’s CSS Sprites in a nutshell. Now on to the actual Part 4 update where I’ll discuss self-contained data.

Part 4: ‘Preloading’ Commonly Used Game Assets

If you’ve ever used Dreamweaver, you’re probably familiar with the code that’s used to preload images:

Look at the highlighted line. In Javascript you can create Image objects. By doing so, you can store images in the DOM’s (Document Object Model) memory and quickly access them later. But preloading images in this fashion still requires an HTTP call out to the image so that it can be downloaded. When designing games for the iPhone, we want to limit the number of HTTP requests as much as possible. There’s actually a way to embed some of your images in your Javascript file so that there’s no need to download them.

If you’ve ever tried to open a GIF or JPEG in a text editor you’ll notice that the guts of the image are a bunch of letters, numbers and symbols. There’s a free program online, called the URI Kitchen that will read an image and print out the letter/number/symbol/gremlin guts for you.

To use the program, go to URI Kitchen, upload a file and then copy the resulting data from the address bar. Here’s the data I get when feeding the program a graphic of the number 5 (one of the numbers used to mark the crossword grid):

Pretty, huh? Now, take that data, and use it as follows:

I can now access five anytime I want to load that image in my game, and since it’s embedded in the code there’s no need to run off to the Internet to fetch it. I can draw the image to the canvas (at coordinate 100, 50) like this: ctx.drawImage(questionMark, 100, 50).

Now, you won’t want to use this approach for every image in your game. You’ll still have to elegantly handle load times for large images. But this approach works great for smaller, commonly used images. What are the most commonly used assets in a crossword puzzle? The numbers used to label the grid, and the letters that will spell out each word. And those are the exact images that we’ll “preload” into Javascript using this method.

And this has officially been the longest blog post I’ve ever written. I hope you’ve enjoyed it!

—Ryan