Hello everyone! I’m uiuxartist, a Designer on the Engine UI team. Creating a UI that works and scales across different screen sizes and platforms can be pretty challenging at first, so this post is intended to introduce some of the main concepts used to achieve cross platform UI.
This content is ideally for beginners and non-coding UI artists who are somewhat new to developing on the platform. It leans more on solutions that do not require code, but there are also some general best practices that could be useful even for the seasoned Roblox developer. This also is not an article that will teach you how to design UI or script UI interactions, but rather introduce some of the core concepts that will enable you to implement UI that looks appropriate across different platforms. For a a deeper dive on UI for Roblox, check out our User Interface documentation.
See the following directory of what we’re going to cover:
- Tip 1: Use the Emulator
- Tip 2: Use Scale Instead of Offset
- Tip 3: Understanding Anchor Points and Position
- Tip 4: When to use Offset
- Tip 5: Where to place your UI on the Screen
- Final notes and Additional Resources
Tip 1: Use the Emulator
The best way to test for different screen sizes before publishing is to use the Device Emulator. To enable the Emulator, go to the Test tab and click Device.
Here you’ll be able to choose from a number of preset devices like the iPhone Pro or an Xbox, or you can add your own custom preset. If you are supporting mobile, I recommend designing your UI for mobile first. This is because mobile devices have the least amount of screen space and you’ll want to make sure all your UI fits there first. Once you know it can fit on a phone, your UI will most likely fit on any larger screen.
If using a mobile emulator you can also change the device orientation if you are supporting portrait orientation.
Tip 2: Use Scale instead of Offset for Size
When designing in a 3rd party tool like Photoshop or Figma, you typically work in pixels. For example, if you’re designing your UI in Photoshop at 1920x1080, all of your UI elements are designed to look good for that one specific size with a hard-coded offset, or spacing, between elements. This is fine if your experience only supports one platform, like PC. But if you want to reach more players and take advantage of Roblox’s native multi-platform support, you’ll ultimately need to support more dimensions and screen sizes. This is where you’ll want to start thinking of size in scale, instead of offset.
In Studio, offset sizing is equivalent to pixels while scale is the percentage of area that it takes within its parent.
For example, take a look at a Frame object with an offset size of {0, 100},{0, 100}, which is similar to 100 x 100 pixels. Using the emulator, this shows the same pink Frame on 3 different screen sizes: the iPhone Pro, iPad and HD 1080. Notice how the frame size looks different on each screen and much smaller on the HD 1080? The Frame objects are exactly the same size, but since the screen sizes are different, they display completely differently.
Using offset when designing for multiple screen sizes can produce unexpected results. There are techniques to use Offset + a UIScale modifier to adjust to different screen sizes, but that requires code to check what screen size someone is on, then adjust the scale appropriately. To ensure your UI looks the appropriate size for the screen without code, use scale plus a combination of UI constraints like UIAspectRatioConstraint or UISizeConstraint if needed instead.
So let’s make this pink Frame stay the same relative size regardless of the screen dimensions.
First add a UIAspectRatioConstraint to ensure the square dimensions stay equal. By default it uses the AspectRatio of 1, which is square and doesn’t require adjustment for this example. But if you are using this for non-uniform dimensions, adjust the AspectRatio property as needed.
Next change the Size property of the Frame to use 0.257 scale on both the X and Y property. This is the scale that translates to a 100 x 100 offset.
Note: Instead of manually playing with numbers to find the right scale, there are a number of community made plugins that can help you convert Offset to Scale quickly including AutoScaleLite.
Scale is also helpful with rounded edges. Using scale instead of offset on UI modifiers like a UICorner also ensures that your corner radius retains the same look across different screens.
For an example using offset, look at this Frame with a UICorner that has a CornerRadius using an Offset value of 20, the Corner Radius looks drastically different between devices.
This next example uses scale, where the UICorner is set to a 0.2 scale value. Now the Corner Radius looks much more consistent across devices.
Note: UIStroke does not currently support scale, only offset. So if you choose to use that, you may need to choose a stroke offset size that generally looks good on all screen sizes.
Tip 3: Understanding the AnchorPoint and Position properties
Now that we understand a bit about using scale for size, two more important concepts to understand are AnchorPoint and Position properties. Setting proper AnchorPoint and Position properties ensures that your UI always displays as designed across different screen sizes.
Anchor Point
The AnchorPoint property is the origin point of a GuiObject. It’s a multi-dimensional value that represents the X and Y coordinates of the AnchorPoint from 0 to 1.
The default AnchorPoint value is 0, 0, which is top left. Bottom right is 1, 1 and centered is 0.5, 0.5.
AnchorPoint positions affect how the object reacts when resized, for example:
A object with a centered AnchorPoint (0.5, 0.5) grows larger from the center:
An object with a default anchor point in the top left (0, 0) expands to the right and bottom:
Position
Position is the location of the GuiObject relative to its parent. If the GuiObject does not have a parent, then it is relative to the Screen Size. Combining Position and AnchorPoint determines where the GuiObject originates on the parent element and how it reacts when its parent size changes. Depending where you want your UI to be positioned when the screen size changes, you need to ensure that your AnchorPoint and Position are set properly.
Similar to using Scale over Offset, you’ll also want to use Scale for Position to ensure your UI is positioned correctly across all your devices. Take a look at the different property settings to position this square inside another square.
For example if you want your GuiObject to always be positioned in the center with any screen size, you’d set its AnchorPoint to (0.5, 0.5) and its Position to {0.5, 0} , {0.5, 0}.
If you’d like it to be positioned on the bottom right, you’d set its AnchorPoint to (1, 1) and its Position to {1, 0} , {1, 0}.
Tip 4: When to use Offset instead of Scale
While designing with scale is the ideal way to ensure your UI will always work across different screen sizes, there are a few reasons to use offset when designing UI:
- When you need the pixel precision in your UI design to be consistent across platforms.
- When working with icons or small graphics that require a specific resolution and may look stretched or distorted otherwise.
- When working with UI or game engine elements that don’t support natively support scale, such as UIStroke
Tip 5: Where to place your UI on the Screen
Game UI Patterns
How you design and place your UI is completely up to you, but to ensure that your players have some common familiarity with where to look for specific information, here are a few examples of common Game UI patterns:
- The Heads Up Display (HUD) - UI that’s placed around the edge of the screen that’s always available during game play. It’s either used to display important information or to enable quick access for functionality like an avatar customization screen. Examples of this include Experience or Health Bars, Store Icons, or Scores.
- Popup or Modal Dialogs - Dialogs that only take up a portion of the screen, are usually overlaid on top of gameplay, and are typically intended for quick decision points. An example of this is a purchase dialog or confirmation prompt, such as a warning that you are leaving a specific area.
- Full Screen Dialogs - Immersive dialogs usually cover and stop gameplay to manage specific and important aspects of your game. An example of this is a character customization screen, or a skill tree selection.
- Alerts/Toasts - Small notifications used to message information to a player without interfering with their game play. They typically display for a limited time, then disappear. An example of this would be a quest progress message, achievements, or an event notice.
If you’re looking for additional inspiration or examples of existing Game UI or UX patterns, check out the Game UI Database, which is the ultimate resource for Game UI examples.
Keep in mind that, along with consistent UI, players rely on consistent input patterns to intuitively interact within an experience. For information on common input layouts as well as additional input device configurations, see Roblox’s Input documentation.
Roblox Platform UI
When dealing with HUD UI on Roblox, it’s important to know that the Roblox platform has a default UI that takes up specific areas on your screen. When designing UI for your game, you should be aware of these areas so that your experience’s UI is not obstructed.
The Roblox top bar
The Roblox top bar is the area at the top of every experience with quick access to features like chat and self view. This is an offset height size of 36 and expands as needed to access system features. Roblox automatically pushes your UI down under the top bar during play mode unless you change this in the ScreenGui properties.
Chat and Leaderboard
Chat and leaderboard are both universal features of the Roblox platform that can be expanded or minimized by the user at any time. As a developer you can turn these both off. But if you do intend to use them, be aware of the areas where they display.
Mobile Specific UI
If you are supporting Mobile, there are additional factors to consider with UI placement.
Virtual Controls
Roblox provides mobile touch controls for moving and jumping. For more information on the default mobile controls, see Roblox’s Mobile Input documentation.
The Notch/Dynamic Island & ScreenInsets
Modern phones, like the iPhone X, take advantage of the entire screen. This creates a more immersive experience, but also can be difficult to design around. The iPhone 14 Pro and later have the Dynamic Island, which is where the device’s camera is located and floats on the edge of a user’s device. It can either be on the left or right depending on how the user is holding their phone.
To ensure that all interactable UI is unobstructed and can be accessed easily, devices have defined something called a Safe Area. This is where you can put all your UI without worrying about if it will be blocked or cropped by a device.
Roblox provides the ScreenInsets property enum on ScreenGui’s to ensure your UI stays in the Safe Area. But if you choose to turn it off, you should be aware that your UI may be blocked by the Dynamic Island or may otherwise be hard to interact with.
Conclusion
Hopefully, these tips can help you create UI that not only looks great but also functions well across all platforms. By following these best practices, you’ll be able to design experiences that are both user-friendly and visually appealing. As you continue to develop your UI skills, you’ll find that these concepts become second nature and you’ll be able to create even more complex and sophisticated interfaces.
For additional resources, check out our documentation on the following: