Wednesday, February 13, 2008 @ 2:08 AM

Earlier today news of an imminent Flash upgrade from the iPhone was flooding the Internet, though no concrete dates were specified. When a Flash plug-in is released it will open the doors for a lot of game programmers who are unfamiliar with coding using Javascript and the HTML DOM. But for now, this is all that's available. So, let's continue with our tutorial...

When designing games for the iPhone keep in mind that although the screen's resolution is 320x480 pixels, some of the vertical pixels are lost to the status bar, address bar and lower toolbar... 64 pixels are lost, to be exact. So, if you want your entire game to display "above the fold," design it to be 320x416 pixels. (Above the fold is a reference web designers throw around a lot to appear cool. It refers to the topmost part of a Web page -- the area that is initially viewable. The content that shows up as you scroll down the page is "below the fold.")


If you look at a printed crossword puzzle you'll notice that the game consists of two main parts: 1) the grid, and 2) the "across" and "down" clues. Both take up a lot of real estate. So how do we fit everything onto the iPhone screen?

First let's discuss the grid (or board, whatever you'd like to call it). The squares that make up the grid need to be small enough so that a 15x15 matrix will fit within the design. They also need to be large enough so that even a person with fat fingers -- *cough* Scott *cough -- can press a single square. After mocking up a number of grid sizes I realized that although I could theoretically size each individual square at 19x19 pixels and still fit all 225 (15 rows x 15 columns) on the screen, I didn't have much room for anything else. So I settled on 17x17. This means that we loose 271x271 pixels to the grid.

Since a title is required for each puzzle, very little room is left for the clues. It will be impossible to display them all at once, so instead let's display relevant clues when the user clicks on a particular row/column. We'll talk about how this is going to work later.

That's all for today. Coding goodies will come tomorrow.

// Ryan Jennings

Labels: crossword, design, game, how to, iphone development