Throughout the development process of ROBLOX for the iPad, many people across a wide variety of disciplines have focused their efforts on a single goal: build a world-class mobile ROBLOX product that matches (and in the sense of being a tight, unified app exceeds) the quality of its desktop counterpart. We’ve heard about fast-loading in-app web pages, smart optimization of memory and performance and touch-friendly controls. Today, in the last entry of the ongoing Engineering ROBLOX for the iPad series, the Content Team talks about the importance of a high-quality and cohesive user interface (UI).

Some of the UI changes we’ve been developing have already rolled out to users. Regardless of the platform on which you’re playing, you’ll see refreshed versions of a couple of ROBLOX’s key UI elements: the toolbar, backpack and chat (with an updated playerlist and scrollable chat coming soon). While these elements already have a new look, the Content Team is continuing to work toward its ultimate vision for ROBLOX’s UI. You can see one of the mock-ups of the team’s vision below.

Things to note: scrollable chat and playerlist across devices; transparent, pervasive UIs; updated health bar

Why refresh the UI?

At the highest level, we want ROBLOX’s UI to have a top-quality, consistent look that stacks up against any other massively multiplayer game on the market. With expansion to devices where screen real estate is at a premium (i.e., tablets and smartphones) now imminent, we also want all the UI elements to be unobtrusive to the gameplay experience. For ROBLOX, a strong UI balances quality aesthetic with a light touch.

The Content Team was partly inspired by Steam, in which users can press Shift + F8 to bring up a complete but transparent overlay with the game running in the background, and the recent release of Windows 8, which has a consistent, high-quality look across multiple platforms.

“To me, that looks very impressive,” mentions Deepak.

Similarly, whether you’re playing ROBLOX on a PC, Mac, tablet or phone, the UI elements have a cohesive look, enabled by lightweight, unobtrusive UI elements. Think back just a few weeks and you’ll remember a much “heavier” interface: for instance, solid black toolbar buttons and chat text outlined in black. Our updated UI does away with much of the solid color in favor of transparency, meaning when UI elements use valuable screen real estate – even on mobile devices with smaller screens – they don’t impede gameplay.

The underlying logic is this: if something doesn’t need to be addressed at that very moment, it doesn’t need to totally block part of the screen. If you choose to leave a ROBLOX game, we’ll show an opaque menu because you need to choose whether to stay or leave right then. On the other hand, the playerlist always displays and transparency keeps it from obstructing your view of a level.

Transparency isn’t perfect. Text will occasionally fall on backgrounds that make it challenging to read. But having the same ability to observe the game world as users on other devices is a worthwhile tradeoff.

Specifics: Toolbar/backpack, chat and playerlist

The old toolbar (used to select equipment) and backpack (used to browse inventory and assign equipment to hotkeys) actually worked well on the iPad as they were, according to Deepak and Visual Artist Tara Byars. The biggest problem was difficulty switching between equipment quickly using the hotkeys on mobile devices. We increased the size of toolbar buttons to accommodate finger touches and, to offset the size increase, made the toolbar and buttons transparent. It’s now much easier to equip a different weapon or tool on the fly, and the functionality of both the toolbar and backpack remains the same.

While the chat UI has traditionally been embedded in the ROBLOX engine, we moved it to Lua and rebuilt it from the ground up. These moves are all about extensibility. Having the chat in Lua means we can be more nimble in the future – that is, we don’t have to tie updates to a new release of the ROBLOX client – and the rebuilding effort gives us flexibility to incorporate features like scrollable chat. If you’ve ever tried to maintain text communication while fighting a frantic battle or tried to report a player in a social game, you know it can be hard to keep up. We’ll be releasing a solution to this problem soon.

The playerlist has been streamlined and modernized. In addition to transparency, we’ve added subtle tweening to animate changes in player position and integrated sorting by a given statistic (e.g., knockouts). You can also use the playerlist to report abusive users. While this reporting feature is duplicated from the chat log, it’s important that players have a go-to resource for this action as the text chat updates quickly in busy games and this is an essential action for maintaining a safe environment for all users.

Future updates and functionality

We’ve already mentioned extensibility – development that takes into account future growth – as a high-level goal for ROBLOX’s UI. More specifically, we’re working to nail down a UI for devices with even smaller screen sizes than the iPad. It’s not enough to say a UI just doesn’t work at some screen resolutions (which would likely lead to undesirable bifurcation); it needs to be adaptable. This involves making tough decisions about what to show and what to hide. As an example, we’re thinking about showing four, rather than 10, items in the toolbar when ROBLOX is running on an iPhone.

We also want to streamline all elements of the UI and give players the power to control and manipulate pieces of it. While the base UI will look great and work intuitively for players and game developers, some game developers might want more control over their screen space. To this end, we are going to provide methods to “minimize” some of the UI elements, including playerlist and backpack. This factors into the Content Team’s overarching goal of creating functionality that works for their projects and for ROBLOX users.

We’ll be rolling out additional improvements to the ROBLOX UI over the next several weeks and months. For now, you can see some of the changes we’ve unveiled by playing ROBLOX on the device of your choice.