The files associated with this demo are located in the following locations:

• Apps/Kits/MMO/ - Contains C++ code for the MMO Kit demo executable.
• Bin/Data/AS3/Kits/MMO/ - Contains Flash assets and ActionScript code.
• Projects/Win32 /{Msvc11, or Msvc14}/Kits/MMO/ – Contains the demo projects for Visual Studio 2012/2015 on Windows.

A pre-built executable of the demo for Windows, MMOKit.exe, can be found in the Bin/Kits/MMO. It is also accessible via the start menu or the Scaleform SDK Browser.

On Windows, the Scaleform 4.6 Kits.sln file located in the Projects/Win32/Msvc11/Kits (or Msvc14/Kits) directory can be used to build and run this demo. Be certain that the “Working directory” for Debugging is set to the Bin/Data/AS3/Kits/MMO directory before running the demo from the solution.

The demo starts with the Nameplates, Inventory, Action Bars, Window Menu, and Chat Log loaded and displayed on-screen.

Figure 2: Player and Target Nameplates

The Player and Target Nameplates are at the top left of the user interface. The nameplate on the left displays the name, level, portrait, health, and mana (magical spell power) of the Player. The nameplate on the right displays the same information for the Player’s current target. The name and level information are bound to game data and will be updated automatically. The health and mana bars are not bound as they are currently not affected in the back-end simulation.

Figure 3: Inventory Bar

The Inventory Bar at the bottom right can be used to open and close the Player’s inventory. The inventory is divided into separate backpacks, each represented by a toggle button on the bar. When a bag is opened, a new inventory window is shown that displays the contents of the bag.

Each bag can be moved to another slot in the inventory bar. If a bag contains no items, it can be placed within another bag. If a bag is not empty and moved to an occupied slot on the Inventory Bar, the bags will swap slots. The right-most bag is the Backpack and cannot be moved from its slot.

Figure 4: Inventory Bag

Each bag has a predefined number of inventory slots available for items. If multiple bags are open at the same time, the Inventory will automatically reflow the positions of the bags’ windows so they are all visible simultaneously.

Items can be moved or dragged around the inventory, within a single bag or between bags. To move an item, left click or start a mouse drag (hold left mouse button down and move the mouse cursor) on the item’s icon. During the move, the icon will follow the mouse cursor. If the move was initiated by a left mouse click, left click on the target inventory slot to complete the move. If the move was initiated by a mouse drag, release the left mouse button over the target inventory slot to complete the move.

Certain items can be stacked on top of one another. Slots with stacked items will display a small number at the bottom right hand corner of the slot denoting how many items are in the slot’s stack. Examples of items that might be stacked are consumables like potions or food. In the MMO Kit, the health potions (red bottle icon) and mana potions (blue bottle icon) in the bags can be stacked on top of one another, which will increase the stack size.

If an item is placed in an already occupied inventory slot and it cannot be merged with the other item, the two items will swap inventory slots. Any item, like potions, can be dragged to an Action Bar slot for later use. This creates a direct link between the Action Bar slot and the inventory item. If an Action Bar item is created for a consumable item or stack, then that item will the total number of items of that type in the player’s inventory. Equippable items, like a sword or armor, can be dragged into the Paper Doll to be equipped.

Figure 5: Action Bars 1 and 2

Each Action Bar is made up of 12 Action Bar slots. Each slot acts as a drag and drop target (for changing the ability or item in the slot) as well as a button (for using said item or ability). There are three separate Action Bars by default: two horizontal bars at the bottom center of the interface and one vertical bar along the right edge of the screen. Left clicking on an icon in an Action Bar slot will attempt to use that skill or item.

The skills and items in the Action Bar slots can be moved or swapped by dragging an icon into a different slot. Skills or items can be removed from an Action Bar by dragging them off of the Action Bar and completing the move. This does not destroy the skill or item, rather it destroys the link. Skills can be added to the Action Bar by dragging them from the Spell Book into an Action Bar slot. Items can be added to the Action Bar by dragging them from the inventory into an Action Bar slot.

Note that the Action Bar slots support global and individual “cooldowns”, time periods during which the ability within cannot be used. Cooldowns are represented by a radial swipe over the slot that progresses from a full tinted square to nothing as it moves clockwise starting from the top center of the slot.

Figure 6: Cast Bar

The Cast Bar shows the user the name of the skill being used and the remaining “cast time”, the time until the action is actually performed, as both a number and as a progress bar. It is displayed when the player uses an ability which will not be immediately performed. When the cast time is complete and the action is performed, the Cast Bar will fade out and remain hidden until the next action is performed.

Figure 7: Tooltip

In most MMORPGs, all items and abilities have data associated with them that is relevant to the user but requires more real estate to display than a small icon can provide. For example, a sword item that the player can equip may have internal data about its speed, damage, and weight that the player needs to determine if they can use it. A common method of presenting this information to the user is to display a tooltip when the user mouses over the item. When the user’s mouse leaves the item/ability’s space, the tooltip will be hidden.

The MMO Kit’s tooltip is populated with data from the backend and is customized on a per item/ability basis. Tooltips primarily present colored text and images via HTML, but can be further customized based on the needs of the game. By default, the tooltip will be displayed at the top left of the icon; however, if the tooltip is set to be displayed partially off-screen due to the location of the icon, its position will be adjusted to ensure it is displayed in visible space.

Figure 8: Window Menu

The Window Menu at the bottom left is designed to provide users a way to toggle the various widgets that are not always on-screen (e.g. Paper Doll, Spell / Ability Book, etc…) without using keyboard shortcuts. The Window Menu is made up of a set of toggle buttons, each with a unique icon to represent the screen that the button opens.

In the MMO Kit, the Window Menu can be used to open and close the Paper Doll and Spell Book. Although the other buttons are currently disabled, they can be easily enabled and hooked up to toggle new widgets created by the user.

Figure 9: Paper Doll

The Paper Doll, or Equipment Manager, shows the player detailed information about his character and his currently equipped weapons and armor. It allows the player to equip or remove items from his inventory. The Paper Doll is made up of three sections: a ScrollingList on the left side allows you to toggle the information displayed in the center panel; an equipment manager with a set of Paper Doll’s slots for managing equipped items (this panel is displayed by default, although this panel would change depending on the user’s selection on the left); and a ScrollingList on the right side that displays a series of boxes that contain HTML TextFields for displaying pertinent data about the player’s character. Note that the player statistics are currently not bound to the data in the backend.

The Paper Doll’s slots also allow the developer to limit the subset of items that may be equipped. For example, because there is only one “Head” slot for the player, the “Helm of Redemption”, a “Head” slot type item, is the only equipment that the player may equip in that slot. Should the user try to equip a sword in the helm slot, no change will occur and the sword will be returned to its previous slot.

The Paper Doll’s slots also support smart swapping functionality. For example, if the player has a one-handed sword equipped in his left hand and shield equipped in his right hand and then equips a two handed sword, the one-handed sword and shield will be placed in the user's inventory and the two-handed sword will take up the left and the right hand slots. This functionality can be further extended to meet the needs of the game.

Figure 10: Spell / Ability Book

The Spell / Ability Book is a list of spells and abilities available to the player. These abilities can be dragged from the Spell Book on to the Action Bars for convenient use. Clicking on ability in the Spell Book will cause said ability to be used.

The abilities are grouped by type using a ScrollingList on the left side of the window. Selecting a group will open a new page of abilities and each group may have multiple pages. Each ability has an icon, a name, and a rank which are populated by the backend data. Depending on the player’s level, certain abilities may not be available and therefore are disabled from dragging or use.

Figure 11: Chat Log

The MMO Kit’s Chat Log is a fully functional interface and log for player communication, populated by server data. The log supports multiple chat channels which can be divided and organized into separate chat tabs. The Chat Log’s input field also supports sending text to particular channels by using the following prefixes: /s (Say), /1 (World), /p (Party), /g (Guild). Messages targeted to other players can be send via the following syntax: /t .

The Chat Log displays a history of all chat messages. The length and size of the history is determined by the application.