Archive:GUI development

This page is under construction

A GUI here stands for 'how a program allows you to access it's data and functions'. In The Mana World this is not the main screen, there where all the action takes place, but all the windows such as inventory and stats. However, the damage done to you during combat, showing in the main screen, is part of the GUI, as is right-clicking to activate something, and how moving is done and fighting initiated. This's how the word GUI is used in this text.

GUI types

Playing many games one comes across many different ideas of how to implement an interface. Most interfaces are unique and specific to a game because of its features.

There are however many RPG games, and many different RPG GUIs. Here follows some notably different GUI, or GUI elements, and the games that (as far as I know) uses them.

• 6 key managment GUI (final fantasy series, and many other console games). The 6 keys are the 4 directional keys, an 'accept' key, and an 'cancel/back' key. Usualy the managment screen/GUI itself is called with a 7 key (the start key on game-controlers)
• Player Doll System (many diverse games). Rather than just showing slots with iconic items that are equiped in them, they are put on a big representation of your character, a representation that, typically, would be seen if the stats of that player are looked at, and looks very spiffy. Yes, GUI's are like dishes: good presentation is half the art of a good GUI (the other half is how useful/easy to use it is)
• Some GUIs only use the mouse, but some also have the ability to use a keyboard-shortcut (usually shown through a highlighted letter or underlined letter in the name of the action/menu)

But this text isn't about all the GUI's that exist...

Goal of a GUI

The goal of this article is to find, and determin what a good GUI for TMW would be, and what features it should have (from a GUI perspective). It is for now just one idea on how to do this, a very elaborate idea, none the less.

The goal is a GUI that:

• Is fully usable with the keyboard only.
• Is fully usable with a modern mouse (3 buttons, one of which is a scroll button, giving you 4+1 keys and 2 directions) only.
• Functions well using a mix of both.
• Has keybindings definitions. (allowing players to decide what keys to use), including mouse-keybindings --I only remember one game that allows you to rebind your mouse keys: quake, a sorely missed feature in many games.)
• Functions instinctively for mouse usage, or mix. (keyboard is not so instinctive, except for things like i for inventory)
• Is well documented.
• Can be changed (change of position of windows, resizing, ordering of items (alphabetically and by type), give different colour, or use different layouts/skins.
• Has automation functions (like the targeting of monsters using shift-ctrl or shift-rightclick)

(NOTE: maybe other features are needed for a good GUI?)

Options, Options, Options.

Short draft version for now.--Momotaro 09:46, 28 Jun 2005 (PDT)

There's always the default choice, and the default is rarely perfect, nor does it anticipate types of players. A flexible GUI could have a large number of options. However having many options quickly becomes difficult to navigate. To solve this one could sort the options by hierarchy, depending on how much change an option would imply.

3 GUI Top-Layers:

• Layer 1: Choice of GUI type. (allowing totally different looks for the end result)
• Layer 2: GUI type tweaks. Options may differ per type (and include things like colour, text font, text size)
• Layer 3: Minor tweaks: Positioning (if mobile), resizing and locking of windows.

Many functions of layer 2 and layer 3 apply to more then one particular GUI-type. These functions, such as changing colour or transparancy, are shared. Thus installing a second GUI type might only imply loading a different configuration of already present plug-in-functions.

Reverse reasoning:

• The layer 3 functions are first level of interaction: such as opening and closing window, keeping them open, and resizing them.
• The layer 2 functions give the ability to change aspects of windows more than in the default way. Colour change, make it drop-down or pop-up.
• The layer 1 functions radically change the look and usage of the GUI. Keyboard only GUI (giving layer2:keymapping), Mouse only GUI (with drag and drop interface as well as point and click), and also defining weather there's a menu-bar at the top, as well as setting wich higher level functionality functions can be used.

Note, all these layers change nothing to the functionallity of the game, just how this functionallity is accessed.

Typically there would be a Keyboard_Module, Mouse_Module and Window_Modules of different types. (the current (0.0.13) windows are one type, the windows as used in the proposed GUI a different one, though they are similar.

Two concepts arise: Skin and module:

A module is particular type of basic functioning that can be permuted with other functions(modules) of the same type. (eg: 2 keyboard_modules: one for a normal keyboard usage, and one to mimic console games; and 2 or 3 window_modules)

A skin is a choice of modules that gives full access to all game functionality, and is playable.

(you could make your own skin from modules, that's part of the idea, thus adding more ways of interfacing with the game.)

Examples of a General GUI layout

Default general GUI layout

This heading is about the GUI layout that will be used for default. Things go under this heading after having been an example, and having been discussed with staff members.

There is yet no agreed upon design for the GUI layout, except that there's already an existing (shabby) one.

Momotaro's Example

For now just the concept picture:

Proposed global GUI design

Note how I forgot to mention the radar map. It should probably go in the Player info window, compacting the info inthere somwhat.

Player Doll could be made as an expansion of Player info (ie click (somewhere) in player info to transform player info into player doll, with stats). Then again, that could be left for a second GUI type.

--Momotaro 09:46, 28 Jun 2005 (PDT)

Development of Specific GUI elements

New buy dialog

New buy dialog proposal

Buying items is cumbersome at the moment and only possible with the mouse. When you have a lot of money, it can be impossible to buy a single item. Also, each time you buy something, the dialog closes and you have to start over to buy another thing. Key differences between the new buy dialog and the current buy dialog are:

• No amount slider. The selection of amount is done using a quantity dialog that pops up after you have selected which item you'd like to buy. The dialog shows the total amount of money it'll cost and allows you to change the amount of items conveniently with both keyboard and mouse.

• Integration of talk dialog with choosing whether to buy or sell.' This allows the shopkeeper to make remarks as part of showing the player the option to buy or sell. Also the shopkeeper could have additional options available, for example maybe he has some quests for you. It is also part of more generic system to allow the player to make choices during dialogs.

• No buttons. The OK and Cancel buttons were removed. Selecting an item could be done by clicking it, while getting information could be done by hovering over it. There is no need to first click it and then click OK. The same goes for selecting the BUY or SELL option. Right clicking the dialog would cancel.

• Type ahead find/search filter. This is actually meant to be global functionality in any list. Especially when the list contains a large amount of items and the user knowns the name of the item he's looking for, this can significantly reduce search time.

• Item information in separate window. This separate window can easily show detailed information about an item and grow as necessary. Better compared to the name and description currently shown in the buy dialog which often do not fit and that's too little information anyway.

• Return to item selection after buying items. This allows you to easily continue your buying session to buy more stuff.

• Shows item icons and aligned item cost. The cost of each item is aligned to the right, and showing the icons will help in recognizing the items.

The new Action-menu dialog

Unsure for now which type is best, see this article for a description of several options.

GUI development relating to controls

Redesigning for better keyboard input

The point of these redesigns is mostly to allow for much better keyboard input, because at the moment keyboard GUI input is severely lacking or in some cases completely absent. They are also meant to reduce the complexity of the dialogs and to simplify mouse input at the same time. For keyboard input, the GUI is based around the following (prerably configurable) set of keys:

• Select - A key to select options / confirm actions (default: ENTER or CTRL)
• Cancel - A key to cancel actions / close dialogs (default: ESC or ALT)
• Mode/Switch - A key to change mode, for example whether items are shown in a list or a grid.
• 0-9 - Number keys, can in some cases be used directly to change amounts, together with backspace.
• A-Z - Alphabet, can be used for a type-ahead find or search filter.