Monday, May 11, 2015

[IndieDev/EonAltar] Handset vs. Central UI: We Aren't Phoning It In

Eon Altar is on Greenlight! Please vote YES if you haven't already, everything helps! Thanks! 




For Eon Altar, we have a bit of a unique scenario. Well, not ultra unique, given the Wii U, but when you have 4 players, and they all have their own screens, as well as shared screen, where do we put information where it'll have the biggest impact? Stephen Cleland, our UI developer, has done a fantastic job of putting together some awesome UI, and the team as a whole have been iterating on the design for a while. To be fair, we're still iterating, but let's talk a bit about the problem space, and some of our solutions.


Early UI on our Central Screen
When we first started out, we wanted to unclutter the central screen as much as possible. We had a handset, we could put a bunch of information there and leave the screen big, bold, and beautiful! And it was big, bold, and beautiful, but two major problems cropped up pretty quickly in play testing:
  1. People found it difficult to differentiate enemies from allies, and in some cases, from the environment without any visual cues.
  2. People would get fatigued/annoyed having to "bounce" too often between the handset and the central screen.
With early UI, about the only elements we had were the corner health bars, and your movement marker when you were actively moving it. It worked pretty well, but that was also well before we had textures, lighting effects, and props, and all sorts of other things that--while gorgeous--are technically visual noise when it comes to raw gameplay.

Screen capture from early November, 2014. Little to no UI. The only elements being some debug info, corner health bars, and our cake icons to denote interactables.
Who are you targeting? Who or what are your friends targeting? Who are your enemies? Allies? Hell, where are you on the screen? You could get most of this information by looking at your handset, but that ties into issue number 2, "bouncing". You don't want to have to keep glancing down to your handset every time you need basic information.

Once we realized these were major issues, we had to really double down on what kinds of information the handsets were to convey, and what information the central screen needed to show. To do this, you have to break down how people interact with the game.


Our core interaction loop is relatively simple. The stages can be defined as follows:
  • Thinking
    You're surveying the field visually, looking for what you want to do next. Attack a target? Help a friend? Grab some loot? Check out the shiny?
  • Targeting
    Using your movement marker, you want to select the thing you're interested in.
  • Deciding
    What is the precise action you want to take? Attack them with which power? Debuff them? Move closer?
  • Executing
    Once you've decided your action, execute it.
Any time you have an arrow, you have the potential for a "bounce", where the player will look at the central screen, down to their handset, and back to the central screen. That's a lot of physical movement, and every time the player switches contexts, they have to remember the other context.

Since the handset can provide a plethora of deep information, we decided that any time you want to drill down on a target, the handset is the way to go, which meant giving you enough information on the central screen to perform the other three stages without actually looking at your handset.

Still a work in progress, but we're getting closer!
A few things you can see in this screenshot, so let's break it down.
  • Your movement marker is always visible (when you can act)
    The ring around the feet of your character is what you control with the handset when you want to select something specifically. You can tell what other players are interested in, and when you're not actively looking around, it also shows where your character is on screen.
  • You can tell who you're targeting
    In the screenshot above, Silent Thorn is targeting herself. You can see her targeting flag above her head. We still have some polish left on this mechanic, but seeing in real-time who everyone is targeting has been a huge help to play testers.
  • Interactables are highlighted
    Some things are always sparkly and obvious, such as chests or barrels. Other things you need to search around for a bit. In the screenshot above, because movement markers are close enough to the glowing speech bubble icon on the ground, it became visible. Using your movement marker as a means of exploration without moving your character is a way to see the world.
Some things we're still working on, such as outline highlighting for enemies and other NPCs, a targeting line between you and your target to highlight it even more. We're also considering health bars, since often people will make snap decisions based on enemy health (who is the most injured?). We also use some on-screen UI to indicate "engagement" (when you're locked in melee with a specific enemy), and if you're in combat or out of it.

Also still in progress, but the power wheel in action.
We're getting closer to the ideal--where you really only look down at your handset when you want detailed information, or you want to perform a specific action. Information like, What powers do I have available to me? What's my chance to hit this target? How much damage will this attack do? What kinds of effects will this power cause? 

Really really early iteration of the Power Wheel, still with debug buttons. Late October, 2014.
We've killed all the debug buttons :)
Even as I type this up, we're still iterating on the UI. Play tests have allowed us to get some really good feedback on what works and what isn't helping (and things we're still missing, too!). Mark Hollier has been amping up our UI and transitions between dialogue, combat, and exploration with some sounds, which really helps direct your attention to the place it should be. Small things, like when the power wheel and movement marker show up, and when they disappear help provide context to players as to what they can do at any given moment in the game. #IndieDev, #EonAltar, #GameDesign

No comments:

Post a Comment