Hello Creators,
Today, we are announcing the Studio beta release of updated experience controls and the Roblox menu. This is the first step towards our goal of consistent and adaptive experience controls that make it easier for users to find their most frequently used actions.
The Studio beta includes early access to a new API that gives you the power to adapt your experience UI as you see fit, ensuring optimal spacing with the new controls. For this beta period, the new UI will only be visible in Roblox Studio - there will be no user-facing changes.
Why update experience controls?
As Roblox continues to improve with new features, like chat with voice and camera enabled avatar animation, our UI needs to evolve to support user controls. The current UI is not flexible enough to seamlessly support new features and controls. For example, when users enable their device’s microphone and/or camera, the mic and camera icons are currently placed above their avatar’s head, obstructing your experience. We believe that experience controls should be simple and minimalistic, so that developers have a stable space for creative innovation. This update will move the experience controls to a more consistent and reliable location at the top of the screen to avoid obstructing your experience.
What’s new in the Studio beta for experience controls?
Introduction of new experience controls
-
Collapsable Menu Features:
- Safety Icon: Triggers Abuse Report shortcut
- Self-View: Toggle camera (On/Off); drag for picture-in-picture view modes, see example
-
MRU (Most Recently Used) Slots:
- The slots are populated by the most recently used options from the 9-Dot menu
-
9-Dot Menu includes:
- Text Chat, Leaderboard, Emotes, Backpack
- And in the future, we have aspirations to enable you, our developers, to utilize this space to build and provide access to experience-specific features (e.g. an overlay Map UI for your game). While we have early ideas here, we welcome feedback and collaboration to make this a reality!
How Will This Impact You:
These updates are for mobile and desktop devices. Console and VR devices will come at a later date.
The updated experience controls are increasing the Roblox reserved space from a height of 36 pixels to 58 pixels. Please note that the Roblox reserve space may vary based on device and screen size. We understand that these new experience controls may conflict with the space that many developers already use for their experience UI. We look forward to hearing your feedback and finding ways to support you through this change.
The two notable questions we received so far are:
Why are the experience controls increasing from 36 to 58 pixels high?
- Usability: We adopted industry standards for better tap target usability making it easier for users to select the action they want.
- Consistency: The new height creates a uniform user experience that works better across all devices, sizes, and device orientations.
Why is the expanding experience control menu placed on the right?
- Division of Controls: Separating the entry points creates a clearer division between the Roblox menu (settings, support, etc.) and experience controls (chat, leaderboard, etc.)
- Ergonomic: It’s easier to access experience controls while your left thumb remains on the joystick.
- User Familiarity: The new experience controls take the same space as the familiar 3-dot navigation icon found in ~70% of our top 100 experiences.
We realize this upcoming change is significant, so we want to provide ample time for you to adjust and adopt the new API that enables you to avoid UI collisions. The beta is an important step for us to test, learn, and iterate experience controls before the full release.
What do you need to do?
Since this may impact your UI, we want to give you tools to adapt your experience UI to these changes:
New GuiService.TopbarInset Property - This property will allow you to observe the area between Roblox Menu and new experience controls in order to help position your UI that takes place outside of the Core UI Safe Area to avoid any collision with the new Roblox experience controls.
Instructions to access new API:
- Enable “Updated Roblox Controls” Beta Feature in Roblox Studio
- Use GuiService.TopbarInset and/or GuiService:GetPropertyChangedSignal(“TopbarInset”) to observe a Rect Data Type property describing the unobstructed area in the Top Bar
- Make updates, if necessary, to your UI if you’d like to avoid collisions based on the signals from these new APIs
Example of how the creator UI (in blue) can react to the experience controls changes:
Example snippet:
local GuiService = game:GetService("GuiService")
local Players = game:GetService("Players")
local screenGui = Instance.new("ScreenGui")
screenGui.IgnoreGuiInset = true
screenGui.Parent = Players.LocalPlayer.PlayerGui
local frame = Instance.new("Frame")
frame.BackgroundColor3 = Color3.fromRGB(0, 255, 0)
frame.Parent = screenGui
GuiService:GetPropertyChangedSignal("TopbarInset"):Connect(function()
local inset = GuiService.TopbarInset
frame.Size = UDim2.new(0, inset.Width, 0, inset.Height)
frame.Position = UDim2.new(0, inset.Min.X, 0, inset.Min.Y)
end)
Our modernized experience controls are expected to vastly improve the way users interact within your experiences. We’re excited to begin the beta for experience controls and look forward to receiving your feedback. Thank you for your continued support!
Frequently Asked Questions
Click here to view the FAQ!
When will the beta end?
The beta will continue until the public launch of experience controls on Roblox as this is an important step for us to test, learn, and iterate experience controls before the full release.
The updated experience controls overlap with my ScreenGui content. What should I do about it?
To avoid collisions with ScreenGui content, leverage the new API to make adjustments to your UI in preparation for the full release of experience controls.
Will these changes affect how my game looks to players?
For beta, all UI updates will only be visible within Roblox Studio. Any updates published after the public release of the new experience control UI will be visible to users.
When will updates for console and VR be available?
We’re currently focusing on mobile and desktop. Updates for console and VR will follow in the future
Can I customize the MRU slot?
Absolutely! Developers are able to still adjust what Default UI they want to disable
We’re working on features that will enable developers to further enhance the MRU slot, like integrating in-experience maps
How much space will the new experience controls occupy?
The best way to understand the space that the new experience controls will occupy is by using the API to provide detailed information on the experience controls footprint.
How wide will the Roblox reserve space be?
Experience controls will have various widths depending on the number of buttons displayed (collapsed vs expanded) and as a result, experience controls and the Roblox menu could occupy the entire width of the device screen.
