It is a sunny (for once), beautiful summer in the Pacific Northwest and, as usual since you went indie, you are sitting at home working. Any other day you would be cranky at this hour of the day, jealously looking out the window at the joggers running around the park. They are all slender and happy, their long hair moves in slow-motion, their immaculate iPods probably playing something from the Mamas and the Papas; you can see they are enjoying themselves. There is not even one of the Jell-o wobbly ones left; those all gave up last month and by now are probably eating s’mores, sitting in the shade of their RV in some beautiful locale. Oh, how you hate them all.
But not today. Today you are so smug you are fogging the windows, because an hour ago your email pinged and you were happy to read that ‘Your Application is now In Review’. So happy indeed that you had to make sexy Fiona, Lion’s Scottish Standard English voice (and the only girl you have talked with for weeks), read the whole damn thing, including the legal text, 2 or 3 times. How long has this latest endeavor taken anyway? It was an update after all, not even a whole new game!
Casey’s Contraptions came out for iPad only in May. Since then, you and your partner in crime have been working on making it run on the iPhone. That’s 3 months for those of you counting. So what has taken this long? Wasn’t it a straight port? Lots of shared code? Just shrink the images and go? Well…
Reducing the Number of Choices
People nowadays are not that much into reading, and to tell the truth, I had to create a whole support group just to get myself in the mood of writing, so let’s just cut to the chase and show you some graphic examples (click on the iPad screens to see them at full resolution):
Casey’s Contraptions Main Menu from the iPad, reduced to iPhone size.
So that’s not looking so bad… oh wait, I forgot to show you the finger. Sorry about that.
Oops. And that’s a small hand right there.
So not so great. The thing is on the iPad screen there are plenty of actions that the user can take, but they are all big, spread out, and graphically different enough, that they don’t compete with each other (too much) for the user’s attention. Let’s count how many actions are possible in this screen. The user can:
- Play the Classroom tutorial levels.
- Play the Backyard levels.
- Play the Bedroom levels.
- Play the new Tree House levels.
- Go to the Sandbox.
- Scroll the locations to have better access to the Sandbox, Tree House, and beyond.
- Open the credits screen.
- Check the game news.
- Or open the game settings.
When we cram all that info into a smaller space, we are changing the mood from a relaxed exploration of possibilities, to a much more stressful one of trying to identify what is what. But really, how do we get rid of options here? Everything seems pretty much necessary, unless we rearrange screens and put access to the credits in some other place. Guess what? Doing that we will just be cramming some other screen, and I can tell you they are already as busy as the main menu.
There is one thing we can do though. The normal action for a user on this screen is to continue playing where he left. If he is playing the Classroom levels, that’s the button that should be more prominent, in the middle of the screen. You should still be able to scroll to the other locations, and with a paged scroll view they can all snap to the middle of the screen as you do it. We just converted those five first actions in our list to only one. The result:
An iPad’s screen is 1024×768 pixels, or a ratio of 4:3. An iPhone 3GS is 480×320, and an iPhone 4 is double that or 960×640. That’s a screen ratio of 3:2. So to make the iPad game area fit the iPhone screen we needed to either fit it vertically and have vertical bands on the sides, or horizontally and crop top and/or bottom. Luckily for us not all the screen is used in the game when the simulation is running; there is a nice chunk underneath the floor level that is just decorative.
The red line represents what we can show in the iPhone when fitting the location background to the width of the screen.
That was convenient… but what goes there on the iPad again? Ah yes, the toolbox with all the items you get to solve each level!
Noel already wrote about all the details that went into implementing a retractable toolbox, something that seems easy enough until you try to use it and implement it. The result looks like this:
What happens when you get an object, let’s say the soccer ball, out of the toolbox? The toolbox not only closes so you have access to the bottom of the screen, all the buttons fade out while you drag the object so you have a clear view of the whole play area.
Too many fingers
On the iPad we use gestures that feel pretty natural for interacting with the objects. You can drag them, double-tap to flip them, and rotate them with 2 fingers. Rotating was the gesture that gave us the most trouble on the iPad; we went through many refinements to take into account how different people put the fingers on the screen. On the iPhone, as Noel has said more than once before, you need to make your game playable with just your thumbs, even only with one hand. But unless you have evolved more fingers than the average person, holding the phone and rotating with 2 fingers of the same hand is going to be tricky.
As a staunch supporter of direct manipulation in games I was totally against selection widgets, those things with buttons that appear around an object and that you tap or drag to interact with it indirectly, on the iPad. Rotation on the iPhone was a different beast though, so this is what happens when you either tap, or finish dragging an object.
By touching anywhere in the blue arrows (that rock back and forth in the game) you can rotate the object with only one finger. Does that mean we got rid of all 2-finger gestures? No, we needed one that everybody is going to try when they see how small the 8-balls are on that screen!
Just like a Mazda Miata.
We put lots of effort into having the iPhone version of Casey be as feature-full as the iPad one. One of the things we talked about removing from the very beginning was the level editor, but as you can see in the screenshots above that finally made it! Yes, is nicer on the bigger screen of the iPad; but you will be surprised how well the editor works even in the small screen.
The only feature that didn’t actually made the cut was another case of too many options in the screen. Take a look:
The multiple player profiles were one of the most requested features from families with kids (mind you, not because the kids wanted it, but because the parents didn’t wanted to play through the already unlocked levels of their mentally superior offspring. But when trying to pack all this info into the iPhone it became apparent we would need to divide it into multiple screens and create some kind of navigation between them. Then we realized iPhones and iPods are a more personal item. Is far more common for a family to have only one iPad, and multiple iPods, than to share an iPhone between everybody. So we got rid of it, and the result is a simplified Settings screen.
Many other screens had to be divided in two though, and I was not too happy about that at first. Take a look at the sandbox menu, for example:
But at the end it helped make things more clear. Again, less options on each screen means less confusion. And the nice sliding animations between them help know what’s going on.
Anyway, I am sure you are sick of reading all the ridiculous details, so that’s it. It took 3 months, but we are sure the result will shine. Look for it on the App Store in a couple weeks!