Our new running game is in the iTunes store now, Run, Jump, Fall. (Get Back Up), and I wanted to take a moment to talk about our design for the game.
The game has a top-down view of a road that you run along. We decided early on that a man in a sombrero was a fun idea for the player character: When he runs all you see are his hands moving back and forth underneath the giant hat. The top-down view ended up inspiring the game’s design in a way we didn’t anticipate.
I threw together a prototype of the game featuring running and turning along a road, and shared it with Chris Noble to see what his thoughts were. The whole time I had been playing the game I held the iPhone vertically, so that the player-character ran up. When I handed it to Chris, he immediately turned the iPhone sideways so that our little Charro was running to the right. This was a eureka moment for us, as we both realized the game worked just as well in any orientation of the phone, since there was nothing on-screen prompting the user to hold the phone in a specific way and the near-symmetrical design of the player and road looked just as interesting vertically or horizontally.
Since we had the idea early on in the game’s development, we decided to design the rest of the game to work in the same ‘orientation-agnostic’ way. Nothing on-screen during gameplay contains critical text or any other elements that suggest a way to hold the phone while playing. The score-meter and pause button are both symmetrical and placed in a corner of the screen. We consciously avoided other options such as an actual number which would have suggested a screen orientation to the user. This made the game playable while holding the phone any which way, but gameplay was only part of the puzzle. There were still menus, death screens, help screens, options screens…how were we ever going to be able to carry forward this orientation-agnostic idea to the entire game presentation?
For any spot in the game that had text (including the pause menu, options menu, etc) we decided to create a single window that would fit on the screen in any orientation. As the user rotates their phone, we spin the window around so that the text is always readable. To design this window we had to look at the iPhone’s screen size.
The iPhone’s screen is 320 pixels wide and 480 pixels high. If you want to create a window on the iPhone’s screen that fits both horizontally and vertically, it can be at most 320×320 pixels: Any wider, and it will go off the screen when held vertically; any taller and it will go off the screen when held horizontally. We added OpenFeint integration as well as advertisements on the menus and pause screens (it’s a free game, don’t hate us for the ads! They never show up during gameplay, we promise). OpenFeint notifications take 50 pixels from the top of the screen, and ads take 50 pixels from the bottom. The size of our window was set, then, at 220×220 pixels to leave enough room for OF & ads.
This left us with the main menu. I had the idea that we could create an ambiguous image of the Charro: If viewed vertically, it appears he is leaning against a wall; if viewed horizontally, it appears that he is lying on the ground. Unfortunately, I didn’t know what to do with this ambiguous image idea. I talked it over with Kendrick, who did all the art for the game and has a very good head for art & design, and he suggested the design that would become the main menu: The ambiguous Charro image at the bottom/left of the screen, with a rotating main background and buttons. We added some fancy animations so that the menu looks interesting when you rotate the phone, with the Charro sliding out of the screen and back in while the background rotates in place.
The only downside of designing our game to work well from any orientation is that the phone is usually held in a vertical orientation unless the user is given a reason to rotate it. We mentioned in the store description and the game’s help that the game can be rotated and comfortably played however the user wants to hold it, but it’s hard to overcome that ‘default’ way of holding the phone without actually forcing the user to rotate it.
Our ultimate goal with the game’s orientation-agnostic design is that some users will pick up the game and play it in a specific orientation that we never played at (the Charro running to the left, really?) and think that the game was designed to work that way all along. We’ve already seen some people who playtested the game immediately rotate the phone without thinking about it. If the game is comfortable for the average user, and seen as an interesting design by a few others who look at it from all angles, then we will be confident that our design was successful.