Development Diaries, Volume 11
Posted by Alex Jordan on
I've been working on the Heads Up Display (HUD) for Around The World, not to mention some of the selection effects. Take a peek:
The HUD currently consists of the following components: the Selector (which has always been around), the Pie Wheel that shows Xbox 360 controller face buttons, and the selection effect (i.e. "the bullseye").
In working on the HUD, I've had to prioritize ease of use and aesthetics when it comes to the overall look and design of the game. Nobody wants a HUD that's hard to read, and nobody wants a user interface that's unintuitive. Hence the Pie Wheel, which will display corresponding location names above, below, to the left, and to the right of the appropriate Xbox face button. Placement on the screen will go hand in hand with placement on the controller, making it easier for the player to match locations and hit the correct button without having to think too hard about which button they're hitting. That way, they can focus on answering the geography question correctly instead of figuring out the controls.
However, the single most important issue of HUD/user interface design is not ease of use and aesthetics. Those are important, to be sure, but the single most important thing is making sure all the important stuff on-screen stays in the Title Safe Area.
Which is obnoxious.
It turns out a great deal of both standard definition and high definition TVs have overscan issues, where the corners of the TV chop off a portion of the borders of whatever it's displaying. As such, Microsoft's policy is that all developers should put crucial information inside the inner 80% of the screen so that this information isn't obscured by overscan issues. Well, it turns out the sacrificing 20% of your screen is a real pain in the ass. Moreso than I anticipated.
I've known about overscan and Title Safe Areas for a while now. All games place their HUD icons slightly inset from the corners of the screen to avoid this kind of stuff. Unfortunately, most of my experience with HUD design stems from first person shooters, where the most important action occurs in the dead center of the screen, where your crosshairs are. Placement of HUD icons is an ancillary concern.
Not so with Around The World. Since it's a geography game, placement of HUD icons, in a way, is the game. It ceases to be a playable game if any of the location names are obscured because of overscan. Worse still, none of the map can be obscured at all, because every last corner of the map is also essential to the game. In a first person shooter, if you can't see something, you just reposition your crosshair and move the first-person camera. But for my game, the player (a) has to see the entire world map, and (b) has to see the locations that pop up on the screen. At the same time.
Fitting everything snugly onto the screen is now not only an aesthetic challenge, but also a major design challenge. It's further complicated by the fact that the world map has a very, very specific shape: it's world-shaped! Very wide and not too high, as world map projections are wont to be. This means I have to adapt screen placement to a decidedly unwieldy shape. Widescreen HDTVs will be easier to work with, but I'll also have to set up contingencies for standard def, 4:3 aspect ratio TVs that don't have widescreen. Which means I'll need to have my game dynamically set up screen placement and screen size issues based on TV size. Like I said, I anticipated it, but I don't think I've properly appreciated just how aggravating this would prove.
Stay tuned for more of my misery!