Designing an MMO UI

Desining an MMO UI

By Prasad Silva

Scaleform principal engineer Prasad Silva offers a guide on designing MMO UIs

The user interface can sometimes make or break a game. With MMOs, this is especially true for a number of reasons.
First, there is a significant amount of information that must be presented to the user, making the UI graphically intensive. A large number of interface elements and a lot of animation at once may slow down the overall game experience. The many different components of the MMO UI can also easily gobble up screen real estate, if not carefully managed.
Second, gamers spend hundreds of hours playing MMOs, so usability and personalisation is extremely important. Third, while most UIs remain constant after a game is released, UIs for MMOs can continue to be developed by both the developers and mod communities.
These factors create specific challenges for MMO UIs. Designers and artists need to determine how to present the game data with the best visual fidelity and user interactivity, while trying to avoid affecting overall game performance. Customisable and moddable UIs require frameworks and tools for creating new and editing existing content. To achieve this, such UIs require complete decoupling from the game client using an efficient bi-directional communication layer.
Because of these unique challenges, there are certain things that should be considered when developing a UI for an MMO.

Enabling Rapid Iteration

The design of an MMO UI must take into account look and feel, usability, and performance. For look and feel, and usability, a great WYSIWYG tool for layout and animation can provide significant value. It is quite difficult for artists to iterate and optimise UI design without visual tools. The ability to add and test UI behaviors independently from the client increases overall productivity of both the UI and game programming teams. Also, having a robust framework for reusable components and widgets provides a great foundation for developing and testing user interaction before integrating the UI into the client.
Autodesk Scaleform provides a tight iteration loop with a full suite of UI development tools and components: artists can design in Flash Studio, quickly launch assets in the Scaleform Player to see the final result, and use the Scaleform AMP profiler to keep a tight grip on performance and memory. Flash ActionScript provides a flexible scripting language for rapid prototyping and iteration, and can be used to develop extensive component frameworks such as Scaleform CLIK (Common Lightweight Interface Kit). CLIK provides over 15 different customisable controls that are easy to ‘skin’ and simple to extend to introduce new behavior.

Decoupling the UI and the Client

Separating the UI from the backend code is a good practice which supports parallel development of the UI and game client and is also necessary for providing comprehensive modding support. Scripting languages allow for the modding community to create custom UI behavior and layout. Through public scripting APIs and data binding mechanisms ― a process for efficiently and automatically updating UI elements to reflect the current state of the client ― the UI is able to communicate with the client.
Scaleform offers good separation between the client state and the UI because it is a standalone runtime which is integrated on top of the underlying game engine. This runtime is used throughout the life cycle of the game, from UI design to development to customising and modding. Several mechanisms exist in the Flash standard for enabling communication between the backend and the UI. In addition, Scaleform provides the Direct Access API which allows direct control over UI objects in C++ and allows developers to create high performance public APIs.

Optimising Performance

A graphics renderer with an efficient resource batching system is key to reducing the number of draw primitives sent to the GPU. Images can be automatically packed into a texture atlas as a pre-process or at runtime, to maximize batching. This approach is a definite plus, as it allows an optimised data format to be generated for the rendering engine without actively disrupting the artists’ pipeline. To reduce overdraw, care must be taken when using transparency and blending effects in order to minimize the depth complexity at each pixel.
The Scaleform 4.0 renderer provides a novel batching solution and the Scaleform AMP profiling tool makes it easier for artists and programmers to optimize content, and identify inefficiencies and hot spots. AMP monitors CPU usage, graphics rendering, ActionScript code execution and memory allocation in real-time. Using its frame-based history graphs, developers can quickly spot problem areas, then drill down to determine their exact cause.

Proof of Concept

The Autodesk Scaleform team works closely with our customers to overcome the challenges they face in UI development, including those outlined above. As a proof of concept we created a sample MMO kit, now available with Autodesk Scaleform 4.0. Developers can use the kit as a game ready solution with minimal customisation, or simply as a best practices guide when designing an MMO UI from the ground-up.