Overview of Shops in Allacrost
Before I get to the layout, let me bring everyone up to speed on the basic design principles of our shop interface, as it is quite a bit different from other games. I'm going to refer to buyable/sellable items/weapons/armor/etc as "wares" from here on.
* The player may take three primary actions while in shop mode:
- Buy - player can select to buy any quantity of any ware
- Sell - player can select to sell any quantity of any ware in their inventory
- Trade - allows player to buy a new weapon/armor and equip it over their old weapon/armor, which will be automatically sold
* We want financial information available and up-to-date at all times. This includes the current funds that the player has, the total cost of all selected "buys/trades", the total revenue of all selected "sells/trades", and what the new total will be in the player's funds with the current selection.
* Shops have some special properties in Allacrost. For example, they have a few different levels for their buy and sell prices. They may charge a lot more than the "standard rate" in their buys, or be a lot more generous in their sells than the average price. Shops also have a limited number of items in stock. You can't go to a shop and expect to be able to buy 100 potions if it sells potions. It may only have 12 in stock (stock regenerates over time).
There are several screens we'll need to discuss in shop mode. We'll do them one by one to keep the discussion from getting too confusing. The first screen interface we're going to discuss is the root interface. As you may have guessed, this is the highest level interface in shop mode. This is what the user sees when they first arrive at a shop screen. It is also visible whenever the player does not have the buy/sell/trade or other sub-interface menus opened.
First notice the white border region surrounding the menu. In the game, this area will be filled with a screen shot just prior to entering the shop (usually it will be a map area in a town). The total size of the menu is 800x600, the same size as the character/inventory menu interface in the game. I'm trying to keep the shop mode interface consistent with other interfaces in the game. The yellow number text is -not- a part of the draft (ie won't be in the game), but is merely there to help us discuss the different aspects of this layout without confusing them.
01: This is the action selection menu. Normally there will be a cursor here, but I neglected to add the cursor image into this draft. As you can see, there are five actions the player can choose to take from the root interface.
02: This area contains the all-important and omni-present financial information. "D" stands for Drunes, the player's current amount of funds. "P" is purchases, "S" is sales, and "T" is total.
03: This text contains the title/name of the shop that the player is in.
04: This is a short greeting from the shop keeper. In the future we may even find a reason to update it dynamically while we're in the shop (ie to say "thank you" after a purchase has been made)
05: Title text indicating that everything below details the properties about the shop
06: A list of all the categories that a shop deals in. In this draft all 7 categories are shown, but most shops will only have perhaps half that number. Categories which are not available in a shop will be either grayed out or missing entirely.
07: This indicates the buy/sell prices of the shop. The better the buy price, the less wares cost at this shop. The better the sell price, the greater the sell value of each ware is.
08: This entire window I actually plan not to include on this screen (its here because other shop interface screens will use this window, and I was too lazy to remove it). In here for the heck of it, I put example text of our Libertine (title/menu) and Junicode (standard text) fonts. We discussed that these two fonts will be the ones used in Allacrost before. Libertine is actually planned to be done in all caps, but I can't find the proper way to do that in GIMP at the moment.
I'll say right now that I'm not too fond of this first draft, but I was having difficulty figuring out the best way to arrange this information. Here are some questions to throw around:
A) Does any information on this screen need to be added? Removed?
(I've thought about duplicating the financial text in the bottom right area of the big window to make it more clear what D/S/P/T mean by writing it out)
B) Is the action menu (01) acceptable? Should it cover the entire width of the menu instead of 2/3drs of it?
(In the current code, the financial text and icon is located below the action menu and the action menu covers the entire width of the shop menu.)
C) Is the shop name and shop keeper text necessary? Does it add or detract from the shop interface?
D) Is there a better way to convey buy/sell price text in 07? For example, colored text, images, or maybe something like a "star" rating?
(I just thought of the star rating idea this very moment, and I really like it)
E) Perhaps the window containing 08 can stay, and instead moved to the space below the windows 01 and 02, and can contain the text 03 and 04 and let the larger window contain the text and images for 05, 06, and 07? This would make a cleaner seperation of 03 & 04 (shop text) from 05/06/07 (shop stats).
Keep in mind that the top window sections, containing 01 and 02, is going to be omnipresent for all shop interfaces. Its always going to be there, always visible. So its imperative that we get this right.
That's all I have for now. I look forward to hearing everyone's opinions and thoughts on this.