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.
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.
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.
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.