As a Roblox developer, it is currently too hard to make UI elements that properly interact with screens that vary in both resolution and physical size.
There is just 1 thing missing from Roblox that currently prevents developers from making true cross-platform user interfaces. How big is the user’s screen?
Traditional approach
As of right now, there are only two ways to determine the scale (and position) of a UI object: as an absolute size in pixels or as a relative size. The latter is often used to scale UI elements as a fraction of the user’s screen size in pixels. This works okay if you are making a game for a specific platform where the rough dimensions of the user’s screen can be estimated and also if a desktop user would change their 1080p monitor for a 4k or 8k monitor, for example. Phones have roughly the same screen size, desktop screens are in the same physical order of magnitude as other desktop screens, etc. Relative sizes will usually suffice for devices within the same platform.
Problem
The big problem arises when you are developing UI that is supposed to work cross-platform.
For example, if you compare the physical screen size of a 12.9 inch iPad Pro (515 square cm) to that of a high-end ROG Phone 5s Pro (110 square cm), then you will notice that the tablet has 5 times the phone’s screen area. Yet, the horizontal resolution in landscape mode is about the same. There is no way to currently tell the difference. And therefore no way to control UI across different sized screens.
Alright, now you might say: You shouldn’t be using resolution, use relative size instead. Bigger screen, bigger button.
Okay, take a look at this example which is using the traditional approach of UI scaling based on the vertical size of the screen:
As you can see, the wide range of physical screen sizes currently makes it impossible to properly scale specific UI items. Especially for touch-enabled devices. As a dev, I might want to keep the physical dimensions of a button the same size, no matter the resolution or screen dimensions. So I can make this button fit my thumb comfortably. (My thumb already hurt trying to move back and forth on the 10cm Surface example joystick.)
Furthermore, if this feature request would be implemented, it would allow developers to more efficiently use the screen real-estate they have access to by giving them more control over it.
Solution / feature request
Give developers access to the pixel density or the physical size of a user’s screen. (With one, you can roughly work out the other.)
Perhaps something like GuiService:GetPPI() or GuiService:GetPhysicalScreenSize()?
Example use cases:
- (As explained) Scale and position UI elements based on physical sizes.
- Developers can customize the amount of content/elements shown on the screen at once based on PPI or physical screen size. A bigger screen could fit more content at once.
- Screen size might give a developer an educated guess at what kind of device a player is using. Small portable screen? Maybe skip certain aspects of your game or change UI to focus on quick interactions. Big television? Suggest the player try out your ‘party/family mode’ where other players could join in with their phones and see their scores on a leaderboard on the big screen.
- Analytics: Detect if the user is on a portable device (in combination with UserInputService). Is my game doing well? How does it compare to people using a bigger screen?
- More real-life interaction with the screen. In your fantasy spy game, your player on a tablet has to lay their hand on the screen to unlock a special fault. Your players on phone would be prompted to place their finger on the finger scanner, etc.
Side note
Of course, no one should only design UI based on a user’s physical screen size, but combined with current relative and offset sizes and positions, this would be another useful tool in a UI designer’s arsenal.