Notched Screen Support - FULL RELEASE

EmeraldSlash · December 9, 2022, 3:58am

Please do that. There should always be built-in ways to get dimensions of these sorts of things.

BillB1ox · December 9, 2022, 4:45am

Finally! more control over the notch!

I never really liked how Roblox handled the notch, and now game get to choose.

As a UI Designer, I am going to have so much fun with this control.

And will it be possible to determine via a script if players are using a notched device? ( UserInputService.IsNotched Maybe? )

SomeFedoraGuy · December 9, 2022, 5:37am

As shown above, the UIs have the same position with the same size. Will this also affect frames with size 1,0,1,0? Will the frame cover the whole screen (notch and all that, IgnoreGuiInset is set to true)?

cxmeels · December 9, 2022, 10:03am

Does this also allow for screens with rounded corners, but without notches, for example the Pixel 4? Occasionally I find games that have text anchored to the corners end up having important information clipped only partially legible (players’ stats for example).

TenBlocke · December 9, 2022, 10:12am

Have your ScreenGui have the ScreenInsets property to Enum.ScreenInsets.None to take up the fullscreen.

GamersInternational · December 9, 2022, 10:27am

Yeah, it’s quite annoying at times having to deal with rounded corners.

I assume though that if you don’t have a notch, you should be able to make the rounded corners less of an annoyance with this option, it’s not the best solution but it should work for now:

A punchhole cutout should work in most cases.

On some devices, this will mean that a notch is drawn on your screen at all times, doesn’t seem to happen for me though.

Hopefully this update does include support for rounded corners though.

TickoGrey · December 9, 2022, 10:45am

This is amazing! Hopefully in the future Roblox will add physical device testing like other game engines have, developing for alternative platforms is basically impossible without this.

Fluffmiceter · December 9, 2022, 2:58pm

That won’t work because then your content would be placed underneath the notch and you wouldn’t be able to easily prevent that without offsetting by some arbitrary (and possibly inconsistent) amount.

VegetationBush · December 9, 2022, 5:12pm

Personally, I’m a huge advocate for this update. Plenty are the times where I’m screen recording on my phone or taking a screenshot and I’m ending up with the dreaded black bar that I manually have to clip out. I am also quite pleased whenever all the screen estate is being used.

But, there’s one caveat…

Instead of scaling frames that are supposed to fill the entire screen (which I suspect can cause some issues), why not give us an option to specify whether the notched area is displayed or not? It feels more intuitive this way as older games can have notch rendering off and new places have it on by default.

Edit: just watch Ettlob’s video and it seems like Roblox isn’t keen on adding this option, which is fine. Hopefully the actual result works well.

Bry10022 · December 9, 2022, 10:44pm

I’m a bit skeptical about seeing what UI would look like on devices with irregular shapes (besides rounded or notched screens as they typically have safe areas)

stadium_parkour2 · December 10, 2022, 1:31am

Hi @dragonfrosting, I have tracked down the cause of the IgnoreGuiInset issue. TeamCreate mode is currently not supported for this beta feature (I have updated the announcement post above with this info).

Can you check if the placefile where you are seeing the issue has TeamCreate enabled? You can check this in the View>Team Create window in Studio.

stadium_parkour2 · December 10, 2022, 1:42am

Hi @Aeplexi, yes, notched screen support would use the full display on all Android phones!

stadium_parkour2 · December 10, 2022, 1:44am

Hi @PeZsmistic, thanks for pointing this out! This is a known issue that we hope to have fixed during the beta period of this feature.

stadium_parkour2 · December 10, 2022, 1:55am

Hi @OneEDM, thanks for your feedback!
We selected the new emulation devices so that they represent different screen cutout geometries (side/center holepunch, notch) that are common across many mobile phones.
The new emulation devices were also chosen because they include some of the most popular notched devices (by playtime) currently playing Roblox.

stadium_parkour2 · December 10, 2022, 2:04am

Hi @BillB1ox, thanks for the feedback!

You can detect if a player is using a notched device by checking the hardware safe area inset sizes. If the safe insets are zero, the user is using a non-notched (simple rectangle) screen.

Show code...

type inset4 = {left: number, top: number, right: number, bottom: number}

local function getHardwareSafeAreaInsets()
	local playerGui = game.Players.LocalPlayer.PlayerGui
	assert(playerGui)
	
	local fullscreenGui = playerGui:FindFirstChild("_FullscreenTestGui")
	if not fullscreenGui then
		fullscreenGui = Instance.new("ScreenGui")
		fullscreenGui.Name = "_FullscreenTestGui"
		fullscreenGui.Parent = playerGui
		fullscreenGui.ScreenInsets = Enum.ScreenInsets.None
	end
	
	local deviceGui = playerGui:FindFirstChild("_DeviceTestGui")
	if not deviceGui then
		deviceGui = Instance.new("ScreenGui")
		deviceGui.Name = "_DeviceTestGui"
		deviceGui.Parent = playerGui
		deviceGui.ScreenInsets = Enum.ScreenInsets.DeviceSafeInsets
	end
	
	local tlInset = deviceGui.AbsolutePosition - fullscreenGui.AbsolutePosition
	local brInset = fullscreenGui.AbsolutePosition + fullscreenGui.AbsoluteSize
                    - (deviceGui.AbsolutePosition + deviceGui.AbsoluteSize)
	local result: inset4 = {left = tlInset.X, top = tlInset.Y, right = brInset.X, bottom = brInset.Y}
	
	return result
end

Hexcede · December 10, 2022, 2:22am

In Team Create sessions this seems to be disabling IgnoreGuiInsets locally (it just keeps turning off!). This is only happening for me, no other people are experiencing it. I am in the beta channel, whereas they are not.

stadium_parkour2 · December 10, 2022, 3:02am

Thanks for reporting this! Yes, this is a known issue, currently TeamCreate does not work with this beta feature. I updated the announcement post above to reflect this.

stadium_parkour2 · December 10, 2022, 3:06am

Yes, that’s correct. If you have a Frame with Size={1, 0}, {1, 0} and it is in a ScreenGui with IgnoreGuiInset=true, then the frame’s background will be expanded to cover the full screen (assuming ScreenGui.SafeAreaCompatibility=FullscreenExtension, the default value).

Quenty · December 10, 2022, 7:36am

The UserInputService and mouse options definitely need to be supported, including with respect to Gui objects. We do this translation math all the time in respect to viewport units, and this math is pretty manual. Not having this be supported will break our games without having to instantiate new instances to keep everything working.

Additionally, it would be useful for the camera to potentially have a property for Camera.UnclippedViewportSize and also a way to query just the safe space from the camera too. In certain cases this could be the same (think Viewport). Besides that, I’m hoping my math continues to work, as long as FOV is with respect to the viewport space, I think we’ll be good.

Otherwise, I’m excited for the additional immersion.

Quenty · December 10, 2022, 7:38am

What if there is a UISizeConstraint inside of it? Right now we use a UISizeConstraint to float UI elements towards the middle for ultra-wide support.

github.com

Quenty/NevermoreEngine/blob/main/src/ultrawidecontainerutils/src/Client/UltrawideContainerUtils.lua

--[=[
	Creates a 1920x1080 scaling container to handle ultrawide monitors and screens
	in a reasonable way. This helps keep UI centered and available for ultrawide screens.

	@class UltrawideContainerUtils
]=]

local UltrawideContainerUtils = {}

function UltrawideContainerUtils.createContainer(parent)
	local frame = Instance.new("Frame")
	frame.Name = "UltrawideContainer"
	frame.AnchorPoint = Vector2.new(0.5, 0.5)
	frame.Position = UDim2.new(0.5, 0, 0.5, 0)
	frame.BorderSizePixel = 0
	frame.Transparency = 1
	frame.Size = UDim2.new(1, 0, 1, 0)

	local uiSizeConstraint = Instance.new("UISizeConstraint")
	uiSizeConstraint.MaxSize = Vector2.new(1920, 1080)

This file has been truncated. show original