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?
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.
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! (Updated on October 6, 2023)
What happens if the entire reserved space is used by experience controls?
In this scenario, there won’t be additional space within the TopbarSafeInsets to accommodate game-specific UI elements. We recommend listening to changes to AbsoluteSize on your TopbarSafeInsets ScreenGui to detect and handle this accordingly as needed.
Will the new TopbarSafeInsets affect my game’s existing UI?
The new inset API is now available across both Roblox Client and Studio. These tools ensure adaptability, irrespective of whether you’re working with new or old experience UIs. However, If you’ve designed your UI without considering new TopbarSafeInsets or sĂgnal API, it could lead to overlaps in the reserved space.
Will we be able to disable experience controls using CoreGuiType?
CoreGuiType is a property that determines which parts of Roblox’s built-in UI are visible. We’ve opted not to include it in the new experience controls to ensure a consistent and safe user behavior across all experiences. We believe this decision enhances the universality and predictability of access on our platform.
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.
From 36 to 58. You gotta be kidding me. Why change it? It basically ruins a lot of current UI and everyone would be forced to change it. Not the first time Roblox has done something like this.
Aside from that, I like this new design. I hope this completely removes the bubble above your head for VC and camera users so that it isn’t in the way.
I do like this change quite a bit. The inset change may be a headache at first, but looking at the big picture, I love seeing Roblox adding support for more flexible UI (especially if developers can add to it).
Also, seeing the voice chat bubble go away will be amazing. I’ve personally disliked this thing ever since it came out. Good riddance!
As mentioned in a previous reply, can we please see a desktop example? Mobile is a big deal due to sizing constraints, but a desktop picture would also be nice.
Besides that, this is great, especially for the fact that the mic and camera controls can finally not annoyingly cover the screen. Looks way cleaner. I guess this explains the questionable UI change that recently happened with the mic and camera icon
This is gonna cause a lot of issues for sure, with games that have UI on the top of the screen. Is there a limit to how big the menu can be? Like it can only fill 25% of the X axis, or something.
Also, if you are doing this for consistency, why did core UI change color with this update again? The chat and backpack remains with the same color, but the leaderboard is now pure black, as well as the pause menu. Which one is it supposed to be!!!
Also also, is there even a reason why the buttons have padding on the left and right side?
The only real change is the top bar inset from 36 to 58. I understand it can be a bit annoying, but first, using GuiService.TopbarInset should have been a better idea, and 2nd, it’s not especially hard to modify that…
New UI looks slick and fresh, good to see. Please give backpack and the mobile buttons created through context action service some love to bring them up to the same design standards.
I’m not looking forward to fixing my topbar buttons for the forth time though. Please tell me this is the last damn time.
I do agree with the above comment that it seems like a nuisance to UI developers. But I do understand the need.
Concerning the snippet, is there a reason UI objects aren’t [temporarily] moved automatically? Say, while the object obstructs the Core UI Safe Area with its root’s SafeInsets set to CoreUISafeInsets? Removing the need for us to do it manually under all circumstances if desired.
(I totally understand being given so much control with how complex some UIs can be. I’m just curious about at least one of the three inset options being automatic, or an option to set, as to not have to worry about it.)
Great to see the UI finally getting a refresh. One question tho - when is this update expected to hit live?
I’m operating a few live ops games and it’d be a great thing for us to know when we should focus on resizing the UI to fit the new sizes as soon as it goes live.
When clicking on the 9 dots to open further menu, in the backround the squares of the playerlist still stay just without the names which makes it look quite weird.
And with multiple users it looks just as weird:
I think it should just disappear instead of becoming slightly transparent
something that does confuse me with roblox is their odd updating schedule, they literally gave me the new ui, but now after this has been pushed out i dont have it, its genuinely odd.
This takes up more space than the previous UI! This is damning for my experience that previously relied on using StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, false) to disable the top-right button entirely and allow me to place my own buttons up there. I really liked the ability to simply disable all CoreUI (except the Roblox icon) and am devasted to see this ability go. (as anything outside MRU appears to be required)
