I created this script that will resize UI Elements based on the X size of a screen. I used a script because I have more control over the UI environment. Please take a look at my code, although it works as intended, I just want thoughts on it.
function HomeScreen:ResizeContents(Size)
print(Size)
if Size.X < 660 then
print("Unsupported Screen Size")
elseif Size.X >= 660 and Size.X <= 730 then
print("Standard Phone")
elseif Size.X >= 730 and Size.X <= 960 then
print("Advanced Phone")
elseif Size.X >= 960 and Size.X <= 1020 then
print("Standard Tablet")
elseif Size.X >= 1020 and Size.X <= 1360 then
print("Advanced Tablet")
elseif Size.X >= 1360 and Size.X <= 1560 then
print("Standard Computer")
elseif Size.X >= 1560 and Size.X <= 1910 then
print("Standard Computer - Compatibility")
elseif Size.X >= 1910 then
print("Advanced Computer")
elseif Size.X > 1950 then
print("Unsupported Screen Size")
else
print("Screen type cannot be determined.")
end
end
I really recommend using the UI constraints. There’s little work in it for you, they will definitely perform better, and they support all resolutions, including non-standard, very well.
I’ve tried constraints and I was able to position them properly, but I just can’t wrap my head around the methods of resizing. I never got the results I expected (probably I wasnt using the constraints correctly)
@wevetments I would also recommend using UI constraints, as your current method seems like a hassle, and could be done much more efficiently by using tools provided ROBLOX.
Last week in response to a post regarding scaling and positioning UI’s I made a tutorial for people who are not quite sure on how its done:
I recommend reading it as it could provide a much easier method for you to go about making GUIs and positioning them.
Screen pixel count isn’t a good metric for how big your UI should be. My phone has more pixels than my laptop, but at less than half the size, so something that’s 100 pixels big would physically be bigger on my laptop than my phone. Screen density is the better metric, but afaik there isn’t an API to know the player’s screen density or physical size.
Stick to using UI constraints and the scale part of UDim where possible.
Portrait mode is a thing, and your code does not take this into account.
There are many phones, particularly lower end android, which fall below your “Unsupported” minimum.
Your “Tablet” sizes will capture many laptop PCs, such as my own XPS 13 9360 with default settings (3200x1800 with 250% DPI scale -> ScreenGui.AbsoluteSize = 1280x720).
Your “Unsupported” resolution will capture 2560x1440 screens, which are common with gamers. I have one at home.
While it is reasonable to adjust UI based on screen size, you shouldn’t assume anything like input methods or design language based on this. You shouldn’t refer to these UI sizes as “phone”/“tablet”/“computer”, you should think of them as “small”, “medium”, “large” display form factors.
Screen resolutions change easily (user resizing the window, etc), which means your code has to be able to run multiple times.
You’re making a ton of extra work for yourself for little gain, in this case. It’s better to make a UI that responds to the user’s display instead of making (counts) ten different UIs, effectively. You will have to author designs/sizes for each of these ten sizes and then test each and every one of them.
This is actually a common misconception about our UI system - our definition of a “pixel” is based on the screen’s DPI scale, and tends to stay around 100DPI for PC, and 160DPI for mobile devices. For example, the native resolution of the iPhone 5S is 640×1136, but if you check the resolution of a ScreenGui running on such a device, it will say 320x568, which is also what the Studio emulator lists as the resolution. Note that, on mobile, your UIs are not literally upscaled as a result of this. They are just rendered more “zoomed in”, so everything is still sharp.
Does this mean that when adding a custom device to the Studio emulator, you have to take that into account? I ran into a bug where the UI in emulator didn’t look like the UI on my phone when I entered the resolution and DPI for my phone.
As far as I know, the DPI value is only used for the “Fit to Physical Size” function in the emulator. The resolution entered is rendered with 1x DPI scaling regardless, so you have to divide by the DPI scale before entering the resolution into the emulator unfortunately.
Studio currently doesn’t support DPI scaling at all on Windows and is a relatively new addition on Mac, hopefully someday we can improve it to not just render at 1x.
I would first like to thank you all for pushing me to rely on UI Constraints, I just needed to take more time experimenting with them rather than just deciding that I’m not gonna work with them because of several failed attempts.
So I took the time to research and I was amazed that WOW it was 100% easier than what I did first. So now, I would like some feedback on the images above, are the buttons too small? Will the iPhone X users have a hard time swiping up? etc.
and I was amazed that WOW it was 100% easier than what I did first. So now, I would like some feedback on the images above, are the buttons too small? Will the iPhone X users have a hard time swiping up? etc.