Gauntlets of Recursion (+3)

Times, trials, and turbulence.

Deep in the depths of Lobby UI.

Enter: The Lobby

User interface design and programming offer lots of interesting challenges to the hardy UI developer.

First of all, let it be said that I’m not an expert in UI design or development. Certainly not a guru. Perhaps “proficient” could be applied without too much wincing on my behalf. πŸ™‚

UI design and development is probably the main area that I’ve put the least effort into in my previous game projects. I’ve almost always opted for highly streamlined UIs that are low on flexibility and focus entirely on just providing the bare essential functionality to the user. I won’t claim that Skirmish is leaps and bounds ahead of that, but I’ve certainly put in a lot of thought and effort into making a much more comprehensive user interface for the players to use. This is partly because of guilt for lackluster UIs in previous projects, and partly because, simply put, Skirmish requires a lot of interaction with a UI from the player.

The “Lobby System” represents the one of the most UI-intensive portions of the game, with the others being the map editor (Battleforge) and the one-day-to-come Equipment Shop. The lobby is the nexus point for the entire game, where players can manage their characters, list and join games, host games, and configure their local settings/options. There’s a lot that can be done, so my goal has been to make it as painless as possible on the user, while trying to avoid the necessity of large overhauls on my GUI engine.

skirm_ui1.png

Note: All screenshots in this entry are UI only, without logic or content yet implemented. Any illusions of content are just hard-coded data for example purposes. πŸ™‚

I’ve opted for a Pane-based system for the lobby, with the Character List being fixed on the left, and the larger pane being able to flip through three other panes that allow the player to access the major components of the lobby system.

Both of the shown windows are fairly streamlined to fulfill their purposes with relative ease: The Character Window allows for creation, deletion, and info-display of the characters associated with one’s account. It’s not implemented yet, but a mouse-over on a character in the list will present a pop-up info sheet of that character’s stats and information. The Join Game pane presents a list of active games in-progress, and the options to join, refresh the list, and retrieve more detailed information. The reason that I chose not to have a mouse-over feature for this as well is because the client will need to literally query the server for more detailed game information over the internet, which is far less than instantaneous. Still, this might change yet.

skirm_ui2.png

The Host Game pane is the one I’m the least happy with. Overall I felt very constrained for space in the tiny pane I gave myself, but I remained steadfast in my decision to keep the Character List present on the left side. I really didn’t want a separate “Characters” pane that would require the player to select a character from that pane to decide what character to join/host a game as, first. My own GUI engine has limited me insofar that EditBoxes don’t support horizontal scrolling text or word-wrap across lines, so the grossly long “Info Text” component was necessary.

Again, not implemented yet, will be a pop-up similar to the one described for the Character List that will appear when the player places the mouse over a map listed in the “Map List” ListBox, which will display map information, and a thumbnail image of the map itself.

skirm_ui3.png skirm_ui4.png

Last is the User Configuration pane, which allows the player to customize local settings. This includes visual/mouse/interface options and key bindings for either the keyboard or mouse. Plans exist for gamepad support one day down the road. πŸ™‚

This set of panes seemed like the simplest to design. I modeled the Key Bindings pane after just about any AAA FPS published in the last 10 years, and used a simple table to handle the keys. The Options pane still feels pretty empty because of the early stage in development the game is still at; it will fill up as progress continues.

Advertisements

3 responses to “Deep in the depths of Lobby UI.

  1. The Visible Man April 20, 2008 at 11:07 am

    Looks nice! I agree, the host pane is a bit… awkward to look at, but the rest look great! They’ll definitely give Skirmish a professional and consistent feel.

    Any plans for a chatroom-ish feature for the lobby? It would be cool to be able to plan games and wait for people. Low priority, of course, but maybe if things are ever slow over there (not likely :P), it would be a nice feature. Also, will old Skirmish maps transfer over, or will they need to be manually remade?

    I tried to see if I could reorganize the Host Game pane to balance it:

    It’s still missing something, though.

  2. Stephen April 20, 2008 at 1:37 pm

    Thanks for the comment, TVM! I really like your mock-up for the Host pane — both in arrangement and the phrasing change of “Maximum # of Players” to “Player Limit”. I’ll see if I can clean it up on my end, now. πŸ™‚

    Maps from “Old Skirmish” are in a totally different format, but I’d really like to save some of the great maps that were made for it. At some point (likely after the game is actually playable online and somewhat stable) I’d like to write a map converter utility.

    I’m undecided on whether a chatroom feature is necessary for the lobby. If I do implement one, it will very likely just be an interface to an IRC channel, to save on bandwidth.

  3. Jon April 26, 2008 at 2:03 am

    I’m not entirely sold on the look and feel of this (the texturing and color choice), but the element layout for the most part is solid and intuitive, and it looks like you’ve got all the major features already in there.

    That all said, functionality is what counts at this stage of the game, and it’s much more important for you to get this all working first, and then you can come back later to polish up the LNF of this all.

    Keep up the good work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: