Hi all, we just turned on notch support for 95% of users on mobile phones! (iPhone X or later, and Android OS 9 or higher).
Please let us know if you hear about any new bugs/issues in your games! Thanks!
2 Likes
Hi, thanks for the feedback! We currently include the iOS home indicator as part of the landscape safe area due to the limited vertical real estate on mobile phones.
If we added an Enum.ScreenInsets option which did not include the home indicator area, would that work for your usecase?
Another option could be to add an ScreenGui.ExcludeOSOverlaysFromSafeArea boolean to make sure OS overlays like the home bar are not part of the safe area of all of the inset types?
1 Like
Iāve noticed a bug where the inventory is not properly putting the gears in the desired spot
1 Like
I recently noticed my ui getting messed up in my game without changing anything and after reading this I would assume this is the issue.
The red buttons, the minimap, and the Roblox buttons should be all the way to the left, now thereās just a weird gap between the buttons and the left side of the screen
Please read the details in the main post - there is a detailed description of how the UI insets work.
If the device has a notch or a camera cutout, the UI will be inset. What device did you use to capture that screenshot? Can you show what it looks like on the actual device?
Can you reach out directly to @stadium_parkour and I with example code that reproduces the issue? Thanks.
Thanks for the report, could you please share the place id where this is occurring?
This is the place ID 815405518
This issue also occurs in any game that has items that can be moved around with the Roblox inventory system.
This is image of my actual device IRL: iphone 11
The symmetrical inset is not good for my gameās side button UI.
The UI is supposed to be at border of screen to make user feel like they have space. In this before and after, āBeforeā is superior in design and placement.
It is about priorities for me. User experience is most important, more so than the small āuselessā space around the notch.
Please make setting to choose one or the other and allow developers to control how their screen gui appear on devices.
EDIT: I read you guys are planning on adding more settings like asymmetry. Hope these come soon.
6 Likes
Hi there, I used a iPhone 12 and the picture was just a screen shot, here is a picture showing the whole phone
I took the time to read the whole post and learnt that I wanted my ui to be āEdged Anchoredā
I prefer my ui to be all the way to the left side of the screen as I do not like the gap (I want it to take up as less space of the gameplay as possible), there is also a post above me explaining the same preference
Iāve tried messing around with the new inset options but I couldnāt find a way to make the ui work for my preference.
Edit : I also found out asymmetrical options might be added, hoping they will!
4 Likes
OK thanks! Yes it looks like a bug with the built-in backpack. Iāll let you know when I have an update on this!
2 Likes
Itās broken and makes it weird and unusual to press the guiās for some reaon.Oh and no options? Again?? Just straight forcing you into this 
1 Like
Sorry to hear that! Would you be able to share some screenshots/screen recordings of what is breaking? Thanks!
One of the problems i get is changing items order in games with default inventory hud. It seems like i need to drag and place the tools to the left instead of the center for them to be there.
And other thing is just that itās unusual and seems like i need to adapt all the time for such updates because there is sadly no option.
3 Likes
Why was this suddenly enabled for nearly all mobile players without any advance notice for developers?
This has been listed as a Studio Beta the whole time, and I had no idea this was going to be imminently released to the general public. I hadnāt started the conversion process because it was not clear whether this system was finalized or whether there were still going to be more changes to how this works. I wouldāve expected there to be some kind of advance notice/release date if these changes were locked in and set for full release - now our gamesā full-screen UIs are borked, and I only found out about this because a player reported it, so Iām suddenly gonna have to spend tonight fixing our UIs.
Anytime potentially breaking changes are introduced to the Roblox API, thereās always a very clear migration period communicated to us - it should be no different for these UI changes. Frustrating that this is being treated as something that can just be freely flipped on/off without any advance communication.
11 Likes
Thanks for reporting this (also reported here), the backpack offset bug should be fixed in the next release!
For most simple UIs, no manual work should be needed to have the UI work on notched displays (due to the automatic adaptation strategies listed here).
However, we added several properties to ScreenGui to allow you to customize safe area insets and automatic background expansion if you would like.
1 Like
The Studio emulator is bugged. I copied and pasted my unmodified UI onto a blank baseplate, and while Iām in edit mode (not running the game) Studio shows the UI automatically extending to fill the full screen, but when I actually play the game, it does not fill the screen.
The same is true if I just use a ScreenGui with one Frame in it (size 1, 0, 1, 0)
3 Likes
Hi, thanks for reporting this issue. This actually isnāt a bug but it is a usability issue when creating UI in a ScreenGui with IgnoreGuiInset=false. In edit mode, there is no Core UI top bar, so the top bar height is 0. However, in play mode, the top bar height is usually 36px.
In edit mode, since the Device Safe Area = Core UI Safe Area (because the top bar is 0 height), a frame with scale size (1, 1) will take up the entire Core UI Safe Area which also fills the entire Device Safe Area. So the Frame is background extended.
However in play mode, the Frame no longer takes up the entire Device Safe Area (since it doesnāt cover the top bar), so it isnāt background extended.
If your intention is to make a full-screen covering, we recommend you set ScreenGui.ScreenInsets=DeviceSafeInsets and SafeAreaCompatibility=FullscreenExtension, or set ScreenInsets=None.
For the first case, this will make a Frame with scale size (1, 1) take up the entire Device Safe Area, and then it will get background-extended to the Fullscreen Area.
For the second case, ScreenInsets=None will make a Frame with scale size (1, 1) take up the entire Fullscreen Area.
3 Likes
Thanks for raising this issue. We had an extended beta period so developers could ask questions, send feedback, test and adjust their UI if needed. However, you make a valid point and we can always do a better job with communicating timelines and important updates before they go out. I appreciate your feedback on this.
Let us know if you were able to adjust your UI based on the info provided (including the top bar area) and info on any additional issues you run into.
4 Likes
Thanks for taking this into account, really appreciate it!
I was able to get our UIs set up for notches pretty quickly. Was just caught off-guard by the sudden timing of the full release, but the conversion process itself went pretty smoothly.
The helper function for getting the safe area inset sizes was handy for properly converting certain parts of our UI, it would definitely be neat to have that as a built-in function.
2 Likes