Behold! Auro: The Golden Prince (mockup)

Above is a screenshot of Auro: The Golden Prince!  By the way, this isn’t actually a screenshot.  The alpha build is coming along, but what you’re looking at here is actually a mockup.  However, these are all – for now – real in-game assets that we plan on using.  We may touch them up a bit, but this is pretty close to what you might see in the final release.  The thing that will almost certainly change the most is the HUD, because only by playtesting the hell out of a user interface can you really ever be sure how good it really is.

What you see here is the product of weeks of fighting between myself and our lead artist (and star of our beloved Art Barn column) Blake Reynolds.  I realized after putting this together that after this, and the long, long production of 100 Rogues (in which we went through probably 20 different UI designs), we probably have a lot of advice to give anyone currently designing a game for iPhone, iPod Touch or Android phones.  Specifically, any small-screened touch-screen device that you have to control by touching it with your finger.

Before I start, a few general UI design tips, that don’t necessarily apply just to such devices.  The first point is to start from scratch – I assume that the game you’re making is original, and not a clone of something.  Therefore, you should really start from scratch with it and not base it directly on anyone else’s approach.  Even if your game is a Tower Defense clone or another puzzle platformer, I think it’s good advice to start without any assumptions about how the game will control.

The second is to not commit early on – This goes for everything in game development, but probably even more so in UI design.  Start out simple – a basic solid-color mockup of the UI, with large solid colored buttons that you make in Photoshop in five minutes.  Play with the game like this for awhile and see how it feels.  Make notes, redesign, reimplement, repeat.  If you make expensive, time consuming art too early, you won’t want to change it even when you know it should.

I probably don’t need to harp on much about UI design and how incredibly important it is.  The UI is the controller for your game.  Have you ever tried to play Super Mario World with the controller upside-down?  It doesn’t matter how good your game is – if the control is terrible, the game is terrible.

Finally – please, please don’t ruin your game’s visual look with a cheap-looking UI, either.  I can’t tell you how many games I’ve seen with thoroughly competent art, but then the entire look is ruined by some bright-red (like, RGB values of 255,0,0) Arial or Comic Sans fonts or single-pixel-thick UI borders.  You should be choosing fonts and colors that express something about your game.  Here’s a handy guide for font-selection in your UI:  don’t use any of the fonts that were bundled with Windows ’95, and when in doubt, shoot for bolder, thicker fonts over thin fonts.  Obviously, graphic design is a whole field of its own, and if you have no skills in this area whatsoever, hire someone who does – it’s worth it.  Anyway, I’m not formally trained in graphic design, but anyone can learn to at least start paying attention to things like fonts, and realizing that they matter.  Edit:  There are tons of resources online to find free fonts.  I would recommend www.dafont.com;  it allows you to sort by different categories and filter only fonts that are entirely free to use.

Behold! Fieldrunners. A good looking game, but a pure-white Arial font was just kinda thrown in there carelessly. That sends a distinctly different signal than the rest of the art and production, and would have taken minutes to change.

Now, onto Dinofarm’s Official UI Tips for iOS & Android Developers

Tip #1 – Fingers make a better door than a window.  This is an old cliche that my dad used to yell at me when I would stand in front of the football game as a kid.  What it means is that fingers are not transparent, sadly.  This tip actually is a bit of a meta-tip, informing several of the other tips below.  However, it’s tremendously important to consider at every level of your UI design.  Observe how your players play your game.  Is their finger often up near the top-left of the screen?  If they’re a righty (which most of us are), that will mean that half of their screen is covered up by their hand during those times.  Just keep in mind that when you’re asking a player to click on something, they will not be able to see that area (and much of the area below it) at the time when they click it.

Tip #2 – Important information (especially text) goes on the top.  This and Tip #3 are the two most important and useful tips in this article, I’d say.  Generally, a player’s finger is coming from the bottom, so the top of the screen is going to be the most visibly available part of your screen.  I recommend putting health bars, text, and other information that helps the player play the game on the top of the screen.  We put our health bar on the top left in Auro, since most players are righties and so there will be at least a slight bias in terms of screen coverage.

Tip #3 – Buttons and other interactable items goes on the bottom.  Same idea as the above one, but inverse.  Your fingers are coming from the bottom (unless you are some kind of freak who holds his phone all weird), so you cover up the smallest amount of the screen when you press something that’s near the bottom.  This is the reason that Apple’s single button is on the bottom of the device, not the top.  Further, it’s a little bit easier to press something on the bottom of the phone;  not much easier, but tiny amounts of easy-ness add up when you’re talking about a game that you’ll be playing for months or even years.

Tip #4 – Never rely on precision.  This is sort of one of those “design your game for the platform” issues.  We had one issue like this in 100 Rogues, with ranged combat and some targeting spells.  Essentially, we allowed you to target specific monsters with these… or at least, we wanted you to be able to do that.  It was – and still is, despite many, many attempts to resolve it – error prone.  Misclicking (I use “click”, I’m not going to switch to “touch”, ever – sorry)  is extremely annoying, and if it happens often enough, it can break your game.  I recommend that you keep the “click-spots” as large as possible.  It’s also worth noting that if you’re asking a player to click on an animated graphic, you might make the player even more likely to mis-click, as the outer shape of the graphic may be changing dynamically, whereas the click hitbox is not.

Sometimes some of these tips overlap, as do Tip 3 & 4 in the case of monsters in Auro.  Knowing what monsters are incoming is important information, but you also have to click in the direction of (which means near) monsters in order to attack them.  This means that they’re both important information, and they’re interactable.  For this reason, we orient the path of the levels randomly.  If monsters were, say, only important information and not interactable, we might have oriented the levels only going upwards, so that the monsters come from above.  Consider if your game has something like this that you can take into account for the best playability possibility.

I hope that this was helpful for some of you working on your own iOS or Android games.  I should quickly note:  some of you may be noticing that we’re not completely following our own advice with Auro’s UI.  Again, it’s an early draft, and we have a long way to go before there’s anything final.  So we welcome your additions (and subtractions) to our tips.

Stay tuned, our next announcement’s a big one!

PS:  Just a small, somewhat off-topic (although not entirely) point I’d like to make to those of you developing games for these platforms.  Please make turn-based games.  Even when your game is turn-based (as 100 Rogues and Auro are), these control issues are extremely difficult to deal with.  When you involve a dexterity/timing aspect, you’re just asking for trouble.  This is partially my personal opinion, but I really think that turn-based games will control a thousand times better on these devices, and so I’ve always been shocked that there haven’t been more of them.  I feel that it’s due to an unfair bias against turn based games in our digital gaming culture, but what do you think?