In addition to me explaining the history behind some of the projects I’ve been tinkering with over the years, I want this blog to serve as an educational tool for aspiring designers and developers. And so, without further ado, the first of (hopefully) many tutorials.

This tutorial was originally written in February 2008 (pre iPhone SDK days) and was featured on a now defunct iPhone blog. I will repost the original articles along with update notes, where appropriate.

Part 1: Things to Keep In Mind

There are a couple of things to keep in mind when considering iPhone game development. The most important is that iPhone developers currently do not have access to many of the usability features that make the iPhone great. Things like pinch, expand, slide, drag, drop, etc. That may change when the SDK is announced later this month, but for now all we can respond to is a single touch (click). (March 2009 note: The SDK obviously now provides tools for developers to create amazing native apps, all of which include features like pinch, expand, slide, drag and drop, etc. But iPhone web apps are still limited to responding to only one action: a single touch of the screen.)

Additionally, all of the applications must be built in Safari. Don’t get me wrong, I for one am more than happy to use Safari as my development environment. After all, HTML/Javascript development is what I know. It’s what I’ve spent the last 10 years working with. So I know how to do really amazing things with that medium. Still, Safari on the iPhone is less responsive than it is on your Mac or PC. (March 2009 note: Apple just released Safari 4 (beta), which includes the “Nitro JavaScript Engine,” said to execute JavaScript up to 6 times faster than Internet Explorer 8 and up to 4 times faster than Firefox 3.1. There are no known plans to upgrade the iPhone version of Safari to 4.0, but the potential JavaScript speed increases would be extremely welcomed. For an actual unbiased JavaScript speed comparison test, check out this article on MacRumors. ) For instance, there is a lag between when you press something on the page and when you can press something else on the page. The lag is only about a second, but it should be kept in mind when you begin thinking about the type of game that you want to create. Because of the lag, slower-paced games make more sense. Therefore developing a puzzle game for this tutorial was a no brainer. After all, there’s not much need to race your way through a crossword puzzle.

Figure 1. Crossword puzzle design, along with dimensions
 

Besides the fact that a crossword puzzle was a slower-paced game, this type of game also provided some interesting usability dilemmas, but we’ll get into those with the next update (we’ll also discuss design considerations then). For now, take a look at the near-finished design above. Though I’ve started some of the development of this game, there is much yet to still do so things may change over the next two weeks. (March 2009 note: My original design never was edited later in development. So the design you see is final.)

Since I originally got the idea to create a crossword puzzle while reading a daily edition of USA Today, it made sense to literally try and repurpose the online version of their game in an iPhone format. Come back for tomorrow’s update when we’ll take a look at some design considerations.

—Ryan