I’m knee deep in a 2D action platformer, which some of the design research will be the basis of this post. I will announce the game in the near future, but this will track the culmination of design choices made to get to that point. That said:

On-Screen Controls

Just like data or utility applications, games need to have some kind of persistent, readable, and accessible HUD of controls at all time that the player is using to control things, and need to balance effectiveness and obtrusiveness to gameplay.

Some examples of platforming games now:

Assassin’s Creed does a pretty clean job of displaying their new d-pad and buttons. The transparency and positions work well, but the icons don’t follow easy to read pictogram style , and definitely don’t fit the medieval game world. A little random looking, in the end, but works.

Abuse has a super basic appearance that doesn’t hinder visuals, even if totally uninspired and dull looking. The left directional controls are a little tight, however, and doesn’t help the games already terrible movement on the iPhone. Sprucing the controls up even for a remake would have been a good idea.

Earthworm Jim controls great, but the D-pad and controls, as seen, take up just a whole lot space visually. The D-pad isn’t hugging that bottom left corner, and everything is huge, loud and obtrusive. Despite their quirky symbols, they fit the game world terrificly.

Blade Angel has a HUD system that works great that I love the look of, despite how much space it takes up. It presents an authentic retro video game feel despite the new age control scheme. The buttons and joystick are a little large looking though.

My Experience

These previous examples beg the question if in-game control schemes should fit the style of the game world, or should resemble nothing but their actual actions. Abuse does the later, but doesn’t follow the iPhone UI handbook with visuals. My process below.

Concept 1:

It looked pretty neat, and visually appropriate with the rest of the menus and game. Each directional key was 50/50 pixels, and the D-pad, despite what I think is pretty nice presentation, looked a little dead in the middle:

The button size for them was great, but that was a noticeable issue with the way it looked. Actually putting some kind of center piece in made the pad look much more obtrusive in the game. The visuals were neat though, each button would glow when you touched it!

Alas, this didn’t look right, and I began questioning if all the imagery was even necessary. I messed around with the sizes of the buttons, but they always became too cramped, as seen above in Abuse. The size was fine, I decided, just the fact it took up so much screen real estate in that corner needed fixing. So concept 2 came around with this idea:

The center of the D-Pad image is the only constant one, which would be a little translucent when not being touched. And when one does touch around the center of the D-pad:

The corresponding direction arrows appear and glow around the center piece, which also glows! I enjoyed the visual feedback that this provided when using the D-pad, but again, it all wasn’t really necessary. My thumb was usually in the way from seeing the effect, and it did spike the memory usage up a little. Seeing the center of the D-pad worked really well though, and you can instinctually know where the different directions are on it.

Thats when I got to thinking that one doesn’t really need to be told where left and right is on a control pad, they already know where it is. So I discarded the arrow keys completely to come up with this:

The A & B buttons had a 60/60 pixel space around them to activate, and the now invisible arrow keys were 58/48 for the non-angled ones, and 58/58 for the angled. The center piece would glow when touching any of them, and the A & B buttons would also glow when pressed anywhere in their radius:

The size was great, and with the large keys around the center, one had the option of keeping their thumb movement pretty tight around the center, or extend out a little bit if they’re more comfortable with a larger space. This took up almost no memory, and looked pretty minimal compared to previous versions.

Design wise, you’re seeing the aftermath of a slew or different versions. The industrial look and glowing areas were present in other HUD-like pick-ups and displays in the game, and it appeared consistent. At the same time, It didn’t necessarily appear “translucent” when playing the game. There were always these lavish buttons floating around. I wasn’t satisfied.

I looked through iPhone GUI designs and tried to assemble buttons and a d-pad out of them with mixed results (usually terrible):

However, with the actual A & B buttons, I was able to make buttons that didn’t actually read on the screen. It had a super clean and non distracting iPhone UI. It looked terrific, and I went though a few of the light-colored basic key buttons on the iPhone keyboard (horizontal), and ended up darkening them until I found the version I liked:

Throwing these on the bottom left of the screen looked supert. The D-Pad ended up going through some more transitions, it was difficult to keep the iPhone UI style …

Until eventually I forced myself to stop adding features and create a symbol for it instead, to match the buttons:

Quite happy with the layout now; I ended up using the more lavish designs for some of the in-game devices you can interact with, which fit the game world more than the rest of the HUD features. Overall I decided it was better to keep the UI in a state that resembled the OS, rather than the gameplay. It made it familiar and not distracting to the art style of the game. Maybe that’s not the best choice for all games, though. As seen below in visual conclusion:

Controls for a g4ame called Blow Geese Up. Type the word geese and a missile blows up any geese on screen. On-Screen controls can look like iPhone GUI inspired (in this case literally iPhone GUI):

Or game world inspired:

Both work in their own creative style; and maybe this isn’t the best example considering you need a crap load of on-screen controls, but the difference can be seen with most all application for the iPhone. The native UI is already gorgeous, and creative tweaks to it always seem to turn out great. Complete creative control leaves the visual consistency up to the developer and style of the game, which seems to work terrificly or is a total miss. You can tell there are a lot of Windows developers and teams without a strong artistic direction making applications and games on the iPhone. Best advice I can give is knowing the iPhone GUI is a great place to start outlines for things, rather than booting up MS Paint or photoshop and going crazy.

Thanks for reading! Hope some of these observations and ideas were useful!