Designing Tilt the first motion game for the iPhone at iPhone Dev Camp.
by Nicole Lazzaro, President of XEODesign, Inc.

I get many requests for stories on how I design emotions and fun so I thought I'd share one on designing Tilt. In my book design is a group process so first here's the team that developed Tilt: Nicole Lazzaro (Game Design), Joe Hewitt (Code), Colin Toomey (Art), Kent Bye, and Felipe Ortiz.

On Friday night I arrived at the iPhone Dev Camp iPhone in hand, and ready for anything! This was my first Bar Camp and I had no idea what to expect. I was excited about my new iPhone, and I was looking forward to geeking out for a whole weekend. The end result was Tilt, a game in 1.5 dimensions.

The first hint that Tilt was on it's way happened while chatting with Dori Smith (author of JavaScript for the WWW: Visual QuickStart Guide, 5th edition) about casual game ideas I had for PCs. Based on this conversation I decided that if I worked on a game this weekend it should take advantage of the iPhone and deliver an iPhone experience. To be frank, I love the gestures on the iPhone. I am tired at poking at my PC's mouse and keyboard. It feels like word processing with a club.

You see the week before I purchased an iPhone. And while standing in line I chatted with people about why they would spend all day to buy one. These conversations gave me a strong sense of the emotion profile for Apple and the iPhone. I posted a few of these iPhone Line interviews on YouTube. The iPhone has a strong emotion profile and the player experience (PX) for an iPhone game must deliver this. To deliver an iPhone PX these emotions had to be built into the game mechanic. I sketched out a vision of what it would take for a game to deliver the emotions in an iPhone PX.

At Bar Camp Dori and I brainstormed on what gestures we liked the most about the iPhone UI. The most fun user interaction for me on the iPhone are rotating it from portrait to landscape in iTunes and flipping through the album covers with the stroke of a finger tip. Until the iPhone I had never "stroked" a computer before. I also liked rotating and pinch zooming through my photos. We thought of number puzzles and 4 directional tilt maze games where you have to get the marble into the hole or get several BB's to rest in tiny dents.

I really liked pinch zooming and flipping through photos and its opportunities for People Fun. Bernt Wahl showed me photos on his iPhone a few days earlier and I noticed how friendly, open, and sharing this gesture was. One person holds the iPhone and the viewer uses their finger tip to browse through the images as fast or as slow as they want to. The relaxed and natural body posture makes these gestures very shared. Similar to a handshake it created for me a sense of connection, through touch. Both people have a strong sense of each other. This is one of the first mass-market multiplayer interaction where both people touch the same device. Reminded me of the Wii. Lots of social emotions and opportunities for People Fun here. Can't wait to try a game that uses this interaction to create an emotion!

Back at iPhone Dev Camp I took questions and game ideas to Christopher Allen, the key organizer of the event, who advised me that web games could sense rotation of the phone, but pinch zooming and flicking were unhacked at the moment. This left me with tap, two finger scroll, and rotate for my iPhone game. Web pages can pinch zoom, no one has hacks to use these as inputs to drive game events (yet!).

Inspired by my talk with Dori, and sobered by a talk with Christopher I found a table and started prototyping on paper. I created more maze ideas, sliding puzzles, and Tetris spin-offs.

Early Maze Prototype

I walked people through the paper prototypes and drawings as they stopped by. I really enjoy it when people getting inspired and come up with new ideas.

Christopher brought Joe Hewitt (of Firebug fame) to my table. Joe's the very same person who created that navigation hack to sense rotation in Safari. Needless to say, I was extremely pleased! Joe is an amazing coder, an awesome collaborator, and liked my vision for the game all important traits if we were going to build it in less than 48 hours.

Together, Joe and I explored the Tilt prototype I made and the limitations of the phone to identify the big design constraints. The phone could only be upright in portrait mode or rotate into landscape left or right. Safari does nothing if the phone is upside down. The phone also had to be held vertically for the motion sensors to talk to Safari. Rotating an iPhone resting a phone on table top won't cause a change in the browser. A big usability issue, but we can help with that in design by making it a game that you want to cradle in your hands to play.

The marble maze idea and sliding block ideas were out. We only had one degree of rotation (portrait and landscape), didn't have access to all 4 directions, and worse we couldn't tell the difference between rotating the phone to the left or to the right. We only could tell if Safari was in portrait or landscape. I prototyped more, testing out ideas on the small crowd that had gathered.

To get the game designed and built in less than 2 days we needed something simple. A Tetris or Missile Command style game showed the most promise. Falling objects communicate "computer game" which would quickly set expectation about what the player is supposed to do. A retro art style would remind players of these classics and help them understand the goal sooner. We had to keep the sprites small to minimize redraw issues, especially during rotation. Changing the screen orientation during play would add a new twist.

The challenge was that we couldn't move Flip (our little game character) left or right very well using phone rotation alone. We didn't have any accelerometers. Many, many, many people suggested adding buttons to move Flip left or right. This didn't match my vision of a single control game. Sometimes the wisdom of the crowds must be resisted.

Another difficulty with buttons was that in watching people rotate the iPhone I saw that their hands were all over the glass, which would press buttons by accident. They also struggled to get a new grip each time the phone changed position. As the game designer I didn't want players looking at their hands each time they tilted. I wanted the controls to feel fluid to increase immersion. Invisible buttons would be pressed by accident. Also, any button on the screen screams to the player "Hi! I'm how you play the game." I was concerned that players would forget to rotate. To be an iPhone experience we had to focus and choose the one mechanic that was the most "iPhone."

The falling blocks idea held the most promise. It was iconic and from a code perspective easy to communicate and execute. My big question was if we rotated the screen to play and Flip always caught the blocks what would make the game fun? The Easy Fun of a tilt game was clear to me, moving Flip by rotating the phone would create curiosity and surprise. The Hard Fun especially for level progression needed the most work. For Hard Fun increasing the challenge means more than giving players less time to defeat more monsters. Players want strategy and to feel like their choices matter. I wanted bouncing blocks and a few other features to structure the PX providing goals and more strategy, but we put those aside due to time constraints. There was a lot of work to be done to hide the navigation bar and get the rotation to look as smooth as possible. Joe left to start coding, and I went back to prototyping.

On Saturday morning Joe had Flip rotating. Kent Bye created the first electronic version of Flip seen here in Miriam Olsson's photo on CNET. We changed the squares and triangles to squares and circles based on Kent's art.

As awesome as Joe's hack is, the browser redraws created a visual distraction during rotation. My idea of creating the illusion of Flip being in the center of the screen and the world rotating around him would be too hard for a weekend project. What I enjoyed about the motion was the way Flip felt like a little spider in a glass jar. Because of redraw artifacts Flip seemed to scamper from one side of the iPhone to the other. In the spirit of hacking we went with it and changed the game design. Kent and Felipe Ortiz explored animation scripting alternatives while Joe continued coding. It was now well into Saturday afternoon and we were ready for an artist.

Christopher introduced me to Colin Toomey who agreed to do art for Tilt. This had to be a pick up and play game. The art had to tell players how to play and be fun. I tested the first art prototype with other iPhone Dev Camp participants. It took too long to understand the goal and the difference between Portrait Flip (square mouth green) and Landscape Flip (round mouth blue). The difference between the two shapes had to be clearer. We changed Flip's color to match the targets and made Flip's round mouths more round to match the falling blue circles. The blue color was a bit dark for some. I got lots of suggestions for buttons and ways to make the game more complicated, which I filed. Other suggestions that kept it a simple game and increased the challenge I thought about how to integrate.

The next round of art tested better. Flip's mouths were more clear making the controls more usable. Still I wasn't satisfied with the game's PX. The catching animation felt flat. The objects just disappeared and the wrong matches simply lost points. I loved the way Pac Man feels to play and decided to make this an eating game as opposed to a shooting or matching game. Together Colin and I pantomimed the gestures we wanted for Flip, simplified the shape so it read on the small screen, and made three states (hungry, full, and ouch!). Soon Joe and Colin had Flip eating and flashing a red "ouch" to provide feedback to the player.

I hate floating numbers and scores. I find them distracting. They are also very un-iPhone. Joe made a vertical score bar with one of the icons on the top. I fell in love with it's simplicity. So I canceled plans for multiple score bars, one for each target type, to keep the visual display clean.

I'm working to expand Tilt's PX now and adding more player emotions that match or enhance the iPhone's emotion profile. The Tilt PX has the Hard Fun of catching and avoiding the wrong colored shapes, the Easy Fun of using the new motion, some Serious Fun from repetition, rhythm, and eating animations. Our People Fun features are in the works. Speaking of People Fun, check out Pool it's a multiplayer experience for the iPhone.

This was my first Bar Camp and I really enjoyed the hands on and get things done nature of the experience. It reminded me of when I used to teach Interface Design and Director at San Francisco State. There is an amazing energy to be working in the same room with hundreds of people in quiet intense collaboration. It was awesome to be a part of.

A big thanks to Christopher Allen, the organizers of the iPhone Dev Camp, and to Adobe for letting us come over for the weekend and play. Joe, Colin, Kent, Felipe, and I are looking forward to finishing Tilt and getting the game out!

Come hear Nicole talk about the design of Tilt at Casual Connect. Can't make the conference? Read the coder's story here on Joe Hewitt's Blog.

Got iPhone? Play the Tilt demo on your iPhone here no keyboard required!

Flip wants your feedback! Share your thoughts and help make Tilt better!