Notched Screen Support - FULL RELEASE

To clarify: as a result of this forced change, there is now EXTRA padding added to the screen? Can we opt out of this? I don’t want to use the space near the notch and I want to be able to anchor UI to the side of the screen. I can no longer do that.

Was not aware this feature was shipping and all of our UI is messed up now. This is a nightmare for compatibility.

Edit: Also no way to reliably check for the notch on each side because ScreenOrientation is not always accurate

6 Likes

Hi, thank you for your feedback on this!

Unfortunately, the current decision is to not provide built-in support for asymmetrical landscape safe insets. The reason is that we want to make it easy for developers to build UI that follows industry-standard design principles found in many mobile games. One of those is that generally, symmetrical insets are applied for UI on notched screens in landscape mode. Here are some examples of games that inset their UI on both left and right, even though there is only a screen cutout on one side of the screen:

However, if you still would like to use asymmetrical safe area insets in your game, it is possible to create custom safe area insets using these methods:

  • One option is to use PlayerGui.CurrentScreenOrientation to detect LandscapeLeft/LandscapeRight orientations and assume that the notch (if any) is on the “top” side of the screen. Then, you could create a ScreenGui with ScreenInsets=None, and add a UIPadding to it in order to only add padding on the physical “bottom” side of the screen (which would be left or right).

  • Another solution would be to lock orientation to LandscapeLeft only, so you know the “bottom” side of the screen is always to the left. This could be done by setting PlayerGui.ScreenOrientation=LandscapeLeft instead of LandscapeSensor. Then you could use a ScreenGui ScreenInsets=None, and a UIPadding that only adds a right-side padding using a script that measures the current right safe inset size using this code.

Just checking, are you querying PlayerGui.CurrentScreenOrientation? Please note that CurrentScreenOrientation is the current screen orientation, while PlayerGui.ScreenOrientation sets what the supported orientations are for your game.

6 Likes

strangely, while the entire scene is now stretched to the full screen size now, the ui does not create safe areas for my device.


please reply if you need more information

Thanks for reporting! Can you please DM me this info:

  • Device model/manufacturer
  • OS (Android/iOS) and version
  • Roblox version

This is what we’ve since setup

CurrentScreenOrientation is what we are reading from - it doesn’t always return the correct value. I’ll provide a repro when I get one

Repro: Turn on Screen Lock. Join a game, and the notch is stuck on the left side. CurrentScreenOrientation returns the opposite value. This is a pretty serious bug and we’re releasing our game in a week so we need it fixed otherwise we’ll have to move all UI closer to the middle of the screen.

Edit: after further testing, it appears to read incorrectly on join regardless of Screen Lock being enabled. Screen Lock just makes it permanent.

i dont have a problem with this update personally but i see why others do. it feels a lot more polished and immersive when playing games now to me. the insets dont bother me either but:

it would be nice to have the option to fill the dead zones and push certain buttons all the way to the edge. the industry standard may be dead zones but the goal should be to do the best and to innovate and make things better, not follow the industry standard

Here is a work around if you need it:

local UserInputService = game:GetService("UserInputService")
local Players = game:GetService("Players")

local player = Players.LocalPlayer
local playerGui = player.PlayerGui

local hasGyroscope = UserInputService.GyroscopeEnabled

local function initializeScreenOrientation()
	if hasGyroscope then
		local gravity = UserInputService:GetDeviceGravity().Position
		if gravity.X > 0 then
	        playerGui.ScreenOrientation = Enum.ScreenOrientation.LandscapeLeft			
        else
            playerGui.ScreenOrientation = Enum.ScreenOrientation.LandscapeRight
        end
        task.spawn(function()
            task.wait(1)
            playerGui.ScreenOrientation = Enum.ScreenOrientation.LandscapeSensor
        end)
	end
end

initializeScreenOrientation()

the wait is because changing it to sensor while the screen rotation animation is playing seems to mess with the current screen value which may also have something to do with the bug

1 Like

Thank you! just saved our mobile UI before launch lol

3 Likes

OK thanks for reporting! I filed a bug ticket for this. Do you know if you are seeing this on Android or iOS specifically?

There is a bug fix for CurrentScreenOrientation on Android in v604 that might fix this issue.

1 Like

Have only testing iOS. Have not tried android.

Workaround @reddiamondshield suggested worked

2 Likes

Using input.Position with a SurfaceGui.Frame.InputBegan(input) makes the input.Position.X offset by the notch’s x size (so the position is off)

My phone had this problem, but i didn’t find it as a BIG problem, but still it would be great seeing it fixed!

Hey there we are having some major issues and inconsistencies with this new update. Some of our UI is completely wrecked.
Some pics of some minor issues:



Ui is being randomly squished in and out. (Yes those buttons are under the same screen gui)

1 Like

Hey there, is there anyway to disable this completely until we can adjust the UI to work with notched screens?

1 Like

Just set all your ScreenGui’s ScreenInsets property to “None”.

2 Likes

Hi, the inventory/backpack item dragging bug should be fixed now! Please let us know if it isn’t fixed for you or you see some other bugs. Thanks!

3 Likes

Hi, thanks for reporting this! I have made a ticket for this issue and will update you when it’s fixed!

1 Like

2023 dec and roblox still hasnt fixed 2d objects AbsolutePosition property to addapt to the topbar area, and now it adds tons of extra complexity for devs to try to guess what the added offset should be.

I see no way to get the size of the topbar area or the size of the lateral areas to fix my elements positions

1 Like

Hi, thanks for reporting your concern with AbsolutePosition! Would you be able to share a specific usecase where AbsolutePosition isn’t working as you would expect it to?

It also sounds like you are trying to get the size/position of the Roblox top bar in order to adapt your UI to it. We actually have added a new API currently in beta, GuiService.TopbarInset which exposes a Rect datatype of the “safe area” within the top bar that is unoccupied by Roblox buttons:

1fb411b872082fda9361a65070ab3daf23cb59c0

So this “TopbarInset” area could be used to position custom buttons at the top of the screen.

You can also set ScreenGui.ScreenInsets=TopbarSafeInsets (currently in beta) to create a ScreenGui where the contents are the safe area of the top bar. (Documentation here).

With regards to the left/right safe area insets due to screen cutouts, our goal is to make it easy to anchor UI to the device safe area edges, shown in purple here:

You can achieve this by adding GuiObjects in a ScreenGui with ScreenGui.ScreenInsets=DeviceSafeInsets. The GuiObject’s Position property then sets its position relative to the safe area boundaries.

So, for the simple usecase described here, the GuiBase2d.AbsolutePosition property isn’t actually used.

Just for some more background on the AbsolutePosition property, we recently updated the behavior of GuiBase2d.AbsolutePosition on notched devices in order to preserve backwards-compatibility with existing lua scripts. Here is a diagram showing the changes:

So the AbsolutePosition coordinate system origin is at the bottom-left of the top bar.

For advanced users who would like to measure the left/right sizes of the safe area, you can use the code provided in the original post here.

5 Likes