A few weeks ago, I wrote admir­ingly about the ground­break­ing, orientation-independent inter­face of my favorite iPhone game, Dizzy Bee.

I shared my admi­ra­tion with the folks at Igloo Games, and got a response from Nathan, the designer and devel­oper behind Dizzy Bee, the company’s first prod­uct. He agreed to answer a few ques­tions for me, shar­ing some of the process behind this inno­v­a­tive game and UI.

Scott: How many oth­ers did you work with to cre­ate the final product?

Nathan: Three total. I did all of the pro­gram­ming and design. Art was han­dled by my good friend, and the sounds were con­tracted out.

How did the con­cept for the game orig­i­nate? Can you describe your process for evolv­ing the con­cept and new ideas?

The game started as a twist on a labyrinth game. I felt there would be a lot of accelerometer-based flat games, so I decided to try a ver­ti­cal ver­sion. (Many peo­ple seem to pre­fer to play it flat, though.) I’m a big fan of character-based action, so I like to put eyes on just about every­thing — rather than balls and holes, I wanted to have good guys and bad guys. I felt like con­trol­ling mul­ti­ple good guys would be really com­pelling, so I started with that. It wasn’t clear what was going on, who the main char­ac­ter was, and what you were try­ing to do, so I decided we’d have a main char­ac­ter to draw your focus, and we would build toward con­trol­ling mul­ti­ple friends — that’s were the cages were born. Then we put in the basic bad guy that moves almost the same as you, and we knew we had a game. After that, it was just play­ing with dif­fer­ent physics aspects to make unique char­ac­ters. The birds just have a max­i­mum speed that they go, so they kind of fall slowly. The big guy is much larger and heav­ier than you, so he doesn’t fit in cer­tain places. I tried tons of dif­fer­ent enemies/objects out. The ones I could make a cool stage out of stayed, and the rest were tossed.

Once you had the idea for the game play UI (which uses only the accelerom­e­ter as input), how did you start think­ing about the UI ele­ments that appear between stages?

I often have to make tem­po­rary art while I’m pro­to­typ­ing things. I felt I could draw a blob and call it an island, so that’s where the island/sea con­cept came from. I had orig­i­nally gone for a more novel approach for unlock­ing stages. I had wanted each island to have a theme and a port city. After you com­plete the port city (kind of an intro­duc­tion to that island), you could play any level on that island. So after beat­ing the first island you would have 3 new port cities, and if you beat those right away you would have 12 new lev­els to try. I still like the idea, but the dif­fi­culty ramp­ing wasn’t work­ing. People would find a stage that was way too dif­fi­cult, and the unlock­ing of islands wasn’t really a reward at all, so I changed it to a more tra­di­tional progression.

As for the Results Screen, I wanted good replay value, so I decided on 3 things to grade peo­ple on. [The three scales that deter­mine one’s score are: fruits saved, flow­ers col­lected, and per­cent­age of fruits that exited the level in a chain — mean­ing, they were saved at the same time. See screen­shot above.] I wanted those to be very promi­nent. Also, if the fruits lived or not and if they chained or not are very impor­tant, so I wanted that to be visu­ally rep­re­sented as well. The rest I just left up to my artist, and what you see is what he came up with.

How would you describe the Dizzy Bee UI?

It’s an up-less spinny UI. As I was mak­ing the game, I took care to make sure that noth­ing after the splash/loading screen had an “up”. The dia­log boxes orig­i­nally could be rotated 360 degrees as well, but unfor­tu­nately I couldn’t get the refresh going fast enough to make them smooth, so I had to set­tle for 90-degree increments.

Another thing I like to do with UIs is take one theme and apply it to every­thing. For exam­ple, I made a level edi­tor in Mario vs Donkey Kong 2, and in that there were lots of things that would scale up and down with an elas­tic type effect, finally set­tling on the cor­rect size. In Dizzy Bee, all of the UI ele­ments are like a spin­ner on a nail with a weight at the bot­tom, so they like to keep some momen­tum and even­tu­ally set­tle in the right spot. Also, each weight is a lit­tle dif­fer­ent, so each indi­vid­ual ele­ment moves slightly differently.

What ter­mi­nol­ogy did you use inter­nally to describe all these ele­ments? I tend to use “UI” to refer to more tra­di­tional inter­face ele­ments, like the text and tap-able but­tons that appear out­side of the stages.

I use UI very broadly to mean any­thing that’s not the in-game action. There are a few terms to spec­ify which part more closely. I use front end to describe any title screens/credits/file selec­tors. Level select is the island/sea sec­tion screen. HUD is any­thing that is shown while play­ing the game, such as play­ers’ lives or health. (Incidentally, Dizzy Bee has no HUD.) Pause menu for… well, you know. Lots of com­pa­nies use these same terms in dif­fer­ent ways, which has caused me some con­fu­sion in the past.

I’ve called it an “orientation-independent” UI. Were you or oth­ers on the Igloo team think­ing in those terms, or did you use other lan­guage to describe what you were building?

I was just think­ing in terms of Dizzy Bee is an “up-less” game, but I looked back at an old e-mail, and I also used the term “ori­en­ta­tion inde­pen­dent”. There are a lot of things I do dur­ing devel­op­ment that I ques­tion if any­one will even notice. Thanks for rec­og­niz­ing it, and point­ing it out.

If only I had taken my early antic­i­pa­tion project, extended it into the third dimen­sion, and thought to make it more game-like, I might have ended up with some­thing like Coign of Vantage.

A new game called Trism is in devel­op­ment. It looks like Bejeweled, only the col­or­ful blocks are tri­an­gles, and the UI more inter­est­ing because it uses touch-dragging and direc­tional tilt­ing of the device to manip­u­late the game. So as you match up blocks and they dis­ap­pear, new blocks slide “down,” depend­ing on which way “down” is in real life. (Sort of like Connect Four, except that in Connect Four, there is only one “down.”) So you can rotate the iPhone around in order to affect how new blocks slide into the game. Take a look at the video. It’s an inno­v­a­tive new UI.

iPhone-related bonus link: iPhone Stopwatch Hits 1,000 Hours, the geeki­est video I have seen in a long time. Maybe ever.