Part of our performance and memory optimization for ROBLOX Mobile was a transition from drawing graphic user interface (GUI) elements individually to in batches (read the details in this previous article). This change dramatically reduced the number of rendering commands sent from ROBLOX to your graphics chip, but in a small fraction of ROBLOX games it caused user-created menus to render in an undesired order. Today, Game Engineer Ben Tkacheff and Content Team Lead Deepak Chandrasekaran (Sorcus) help owners of existing games fix their menus, in the rare instance it’s necessary, and provide useful guidance and best practices for new GUI designers.
What changed?
In the past, we rendered user-created GUIs according to the hierarchy of individual elements in your ScreenGui object. It often worked out that the order you built each piece of your GUI was the same order ROBLOX rendered it, and your layers of buttons and text just fell into place.
However, since we no longer render each GUI element individually, you now need to take control of your GUI structure using the Z-index property. Z-indices are a standard in web design (via CSS) and you can think of them like layers: the higher the number, the closer to the top they are. There are 10 Z-indices available to you, and each one can have multiple GUI elements.
“The way I explain it is, each Z-index is a plane,” says Deepak. “There are 10 planes in front of you to layer GUIs on.” There are three rules worth noting:
- Objects on higher Z-indices will display over objects on lower Z-indices
- If you have a list of objects in a Z-index, the last one in that list will render on top
- If the last object on a Z-index is text (a TextLabel), it will always render on top
To set the Z-index in ROBLOX Studio, simply select a GUI element from the Explorer pane, then choose a number from one to 10 in the Property pane. See the circled area of the below screenshot for a reference.
Specify a Z-index for a GUI element in the Property pane. Click image to enlarge.
Best practices: GUI design
Design first, build second
Both Ben and Deepak agree that step one of creating a GUI for your game is to stop and think through a concept. Interface is often seen as an afterthought, but it is a big part of your players’ experience, especially when it’s integral to game play (e.g., players use it to select weapon loadouts, manage crucial survival statistics, etc.). Your concept should include the on-screen appearance (colors, size, etc.), placement of the GUI elements and a mental map of each element’s structure and purpose (when a player clicks it, what happens? Is it necessary?).
You can exit the ROBLOX Studio environment when thinking through your GUI. Ben suggests grabbing a pen and piece of paper or opening a graphics editor (Photoshop or free software like Paint.net), then mapping out your elements so they don’t impede game play. You do have to work around the standard desktop/mobile ROBLOX menus, but it’s easy to reference a screenshot at any point in the planning process.
Take advantage of percentages
When building a GUI, you configure the size of each element you place in your ScreenGui – it’s zero by default, so there’s no way around it. You can specify exact pixel dimensions, but Ben recommends users take advantage of the alternative option: percentages. This makes laying out a GUI more intuitive, as you can let Studio handle the math rather than manually calculating pixel dimensions, and has the added benefit of making your GUI adapt to a wider array of screen sizes.
Size is formatted as {X-percentage, X-pixels}, {Y-percentage, Y-pixels}. See the highlighted row in the above screenshot. You can set the X-percentage and the Y-percentage (both 0 to 1, where .5 is 50%) by changing the first number in each bracket. The percentages you choose are fractions of the total screen size.
This concept also applies to the position of the GUI element, except the percentage value is measuring distance from the top-left corner.
Consolidate layers
We give you 10 Z-indices on which to build your GUI. Considering each Z-index can contain many pieces, you have a lot of room for detail. But that doesn’t mean you should strive to use all 10; in fact, Deepak says if you’re using all 10, you’re probably not improving the player experience.
“There’s never a scenario where there are 10 things in the same space,” he says. “If you have 10 things in the same space, you’re making things more complicated than they need to be.”
Ben agrees. He describes his approach as using a single layer for all elements. If something does not display as desired, he manipulates its Z-index until it displays correctly. This minimizes the number of layers you’re using. He also determines whether any GUI elements always need to be on top, and sets their Z-index to 10 because they’re of utmost importance.
Hide, don’t push off screen
This is a granular detail, but one Ben stresses. If you want to stop showing a GUI element, you should set it to be hidden rather than push it off screen or put another object on top of it. This is more efficient and will improve your game performance.
If you’d like a step-by-step look at GUI creation, the ROBLOX Wiki is a good resource. Here are particularly relevant entries: