iPhone game to iPad – User interface considerations

I recently began porting my iPhone game SpringFling to iPad. The most time consuming part so far has been working with the art assets to make them work on the new screen size. I had stupidly designed most of the UI for the game at native resolution (480 x 320 px) which forces me to now re-do much of the art at 1024×768. Instead of just re-creating the exact menus at a higher resolution, I’m taking this chance to re-design certain areas of the menus.

I’ve noticed an issue with some iPad games that have been ported from the iPhone version. It seems the developer, in an attempt to reuse the same art assets, keeps HUD and UI elements the same size but ends up with huge areas of empty space and useless padding. Contexts with very little info end up taking the whole screen, making the overall composition feel lonely and awkward, like sparsely placed townspeople in a model train set.

By forcing myself to re-design certain areas, it will (hopefully) help ensure a smooth and appropriate user experience on the iPad.

Here is my progress so far:

And no, I haven’t gotten around to fixing the in-game HUD imagery yet. I’ll get to it soon, nagging Nancy.

5 Comments
Posted by Alex Schwartz

  1. Dan, on May 9, 10 Said:

    Nice info. I myself am working on porting a game to iPad and More than the the resolution change between the iPhone and iPad I find the biggest pain is the change in aspect ratio. Making a UI that fits on the iPad after making fit perfectly on the iPhone proves to be a little more work than I would have hoped.

  2. MrT3D, on May 9, 10 Said:

    Hey Alex Thanks for sharing! I interested in how SpringFling translates to iPad. No Doubt it will be awesome.

    I’m extra interested because we at VTDA are porting our fist iPhone app to iPad before we release. The port hasn’t been that difficult but things like aspect ratio, fonts, graphics resolution…have all required rethinking.

    Best luck man. Can’t wait to beta your game ;)

    You can test on my iPad in a few days if you want. Can even hit up @kanooska sooner because he has my iPad now testing our game Alpha Roller HD down the street.

    -E

  3. Alex Schwartz, on May 10, 10 Said:

    Thanks doods. A good point Dan, when the aspect ratio changes, design is turned up-side down in many cases.

    Re-doing the UI for SpringFling will definitely prompt me to think about my next UI design a bit more before starting to code it. Maybe I’ll think about resolution independence instead of massive hard-coding :D

  4. Will Gifford, on May 24, 10 Said:

    Is Spring Fling done in Unity? If so, did you do your GUI using the Unity GUI API?

  5. Alex Schwartz, on May 24, 10 Said:

    SpringFling is in fact done in Unity. I did my GUI using a combination of textures on planes and Unity’s built in primitive system of GUITextures and GUITexts. The new UnityGUI system is not as lightweight, and therefore isn’t a great choice for iPhone UIs. Read more in my Unity UI article: http://gtproductions.net/blog/wrangling-guis-with-unity-iphone/

Name (required)

Mail (will not be published) (required)

Website

Comment

-Home