Graphics:GUI Design

From Post-Apocalyptic RPG wiki

Jump to: navigation, search

The following article covers all aspects of the graphical user interface of PARPG.

Contents

Discussions at the forums

There's more than one thread at the Forums now that deals with the PARPG GUI:

What's a GUI ?

A GUI, short for Graphical User Interface, is (in the case of PARPG and other computer games) a type of user interface which allows the players to interact with the game world. A GUI offers graphical icons, and visual indicators, as opposed to text-based interfaces, typed command labels or text navigation to fully represent the information and actions available to the player.

Just the important points to keep in mind when designing the GUI for PARPG

  • it should be kept simple - this has been pointed out at the Forums
  • avoid cluttering
  • it should not distract from the actual gameplay
  • optimally it should ADD to the actual gameplay by reinforcing the general "feel" of the game

Mouse

  • simple (metallic ?) cursor
    • click (AKA left click)
    • double-click
    • click and hold
    • right click
    • right click and hold
    • scroll wheel
  • Style A (coloured, red-green ?)
    • combat
    • heal
  • Style B (stylized/bold/thick/spinning animation ?)
    • screen scrolling NESW and corners (also trigger-able by using arrow keys)

mouse actions: (should there be custom cursors for various actions like talk-mouth, examine-eye etc ? if so then should come to agreement on what best suits the setting of game)

  • MOVE/WALK/RUN
  • EXAMINE/LOOK
  • COMBAT/BREAK (portals)/FORCE OPEN (locks on portals and containers)
  • TALK/INTERACT WITH/OPEN PORTALS AND CONTAINERS
  • STEAL-PICKPOCKET
  • PICK LOCK
  • TRADE (or is this triggered by a dialogue option ?)
  • HEAL/FIRST AID

notes:

left click would trigger WALK, double-click RUN; right click would automatically trigger EXAMINE, right click and hold would open a drop-down menu from which you pick other actions; TO USE ITEM on something drag from Inventory into game world and item replaces regular mouse icon.

"Screen-trees"

  • Game map screen (the one through which you point-and-click-navigate your character)
    • buttons to:
      • options/main menu/preferences (Esc/F1/O)
      • save/load screen
      • inventory (I)
      • character record/skills/customization/level-up screen (C)
      • rest/sleep (R)
      • diary/notebook/quest list screen
      • local map view (TAB, M)
    • indicators:
      • HP - Hit Points/Health bar
      • temperature
      • fatigue (?)
      • credits/money/gold pieces
      • AMMO left/max
      • AC - Armor Class
      • AP - Action Points ?
    • quickslots (should these be just for items from inventory or Arcanum-like and also for skills ?)
    • information screen/feedback window
  • save/load screen (quicksave: Ctrl+S/Cmd+S ?)
  • inventory/trade screen (I)
  • character record/skills/customization/level-up screen (C)
  • local map view screen (optional: possibility to view world map) (TAB, M)
  • world map + travel screen (walk to exit grid/manipulate portal or similar)
  • options/preferences/menu (Esc/F1/O)
    • buttons to:
      • save/load screen
      • settings-preferences
      • new game ?
      • quit game
  • diary/notebook/quest list screen (plus keychain ?) (D/N/Q)
  • dialogue screen
    • buttons to:
      • trade screen/steal (as in steal from a shopkeeper)
      • NPCs combat AI customization (Fallout-like ?)

Border's GUI concept

HUD Concept 02
Thread
Author: Border


Gaspard's GUI idea

It's cold and it's got snow or frost on it (but no icicles) The 'artsy' part would be kept to the minimum with the compass and some thermometre-type indicators, digits for the ammo and HP The rest would be pretty generic and simple. The texture of the base might vary. The rest of the GUIs like character screen and inventory would seamlessly fit into this 'frame':

  • 01 - this area would have the time scale and rest interface.
  • 02 - This area would contain all the buttons that lead to the character menu/inventory, the compass acts as a Hit Points indicator and the thermometres act as literally as what they are or show skill progression or your nutrition levels or could be removed/reduced. Info like Armor Class and Money are shown here.
  • 03 - Feedback screen in the centre, inventory quickslots on the sides, on top is a bar for for example the Action Points with weapon ammo/fuel digits on the side.

HUD Idea 1.1
Author: Gaspard

Inventory/Barter GUI proposal by Eleazzaar

I've previously expressed my dissatisfaction with the clumsy way many RPGs deal with one character's inventory. Often the GUI for exchanging things between party members and/or the store is really cumbersome too. Baldur's Gate, Neverwinter, and FallOut all get low marks in this area, in my book. Either there's not an easy way to exchange items between party members, and/or selling to stores & NPCs is an exchange that can only occur with one party member at a time. With limited capacity and money, you often want to switch things around between various party members and the store as one big transaction that doesn't rely on you memorizing the exact equipment of all party members. The following is the solution icelus and i came up with for Silver Tree, but is IMHO equally applicable for PARPG.
  • a characters inventory panel only takes up about half the screen, so two panels can be up at once
  • the rest is a portrait bar along the side or bottom of the screen that shows all party-members (and maybe a few other things).
  • when you are interacting with a store, half the screen is the store's panel, and the other half is a party member's inventory.
Thus you easily swap, examine and rearrange the gear from two party members, or drag it onto the portrait of a third member to give it to them. You can switch to different party member's inventory by clicking on the portrait in the bar. When shopping you can easily switch (using the portrait bar) between all party members and make sure that everyone has what you want them to have before finalizing the transaction.

Image:Eleazzaar_invgui_idea.jpg

What GUI designs other games have used

The first links were provided by User:Lamoot at the Forums, feel free to add your own with comments.

Hearts of iron

Hearts of iron 2

Commandos 2

World in Conflict

Earth 2150

Dawn of War

Sudden Strike

Blitzkrieg

Talvisota Icy Hell

Note: you might need to copy/paste the links to the address bar due referer link prevention.

  • http://www.talvisota.net/screens/shot0016.jpg
  • http://www.talvisota.net/screens/shot0093.jpg
  • http://www.talvisota.net/screens/train_guns.jpg
  • http://www.talvisota.net/screens/shot0102.jpg

Cuban missile crisis

Hammer & Sickle

Codename Panzers

Commandos 1

  • http://i10.tinypic.com/4opdykm.jpg
  • Has that eye icon in top-right corner and the items collection in bottom-right. This creates a more personalized feel, gets you more in the spirit of PARPG. Usually games have buttons, but here the buttons are camouflaged as actual items or represenations of actions, like crawl, stand up, that eye icon. I really like this, and wouldn't mind using the same approach. It doesn't make the scene any more cluttered or distract from the main game screen. - Lamoot

Commandos 2

Retrieved from "http://wiki.parpg.net/Graphics:GUI_Design"
Personal tools