My approach to dealing with UI consistency across all devices comes down to one thing. Add an ImageButton to your game (by itself, directly inside of a ScreenGui) and set the ImageButton’s size to {0, 42},{0, 42}. Now test that on your pc. It will be the same size as one of Roblox’s CoreGui buttons along the top left of the screen. Then test your game on your phone, and you will notice that the Roblox buttons and your buttons have shrunk, and they have remained the same size compared to one another! We seemed to have discovered how to adapt to different devices in the same way that Roblox is doing it! This seems like a solid foundation for doing things, in my opinion, so it is where I begin.
To be clear, offset values are these {0, XOffset},{0, YOffset}. And scale values are these {XScale, 0},{YScale, 0}.
-
I Use offset values for size. For position, it’s more of a case-by-case basis. Sometimes offset values are more useful, sometimes scale values are.
-
Using offset values to handle scaling takes care of 2/3 of the device types. Console still seems to not be perfect. It seems too small. So I double the size in those situations. I do that by adding a UIScale to the parent, and leaving its scale value at 1 (we’ll change that in code). Then create a module that looks for IsTenFootInterface() being true, and if it is, then you’re on one of the big screens, and therefore need to bump up the size. Do that by changing the scale property of the UIScale to 2 (get a reference to the specific UIScale object).
Besides that, there are some other things to be aware of:
-
Things you want to keep from warping out of shape, add a UIAspectRatioConstaint, and set it’s aspect ratio to the current dimensions of the object. You can get the aspect ratio by dividing the width by the height.
-
Things you want to display together as a group and want to make sure they never
overlap and always remain the same relative distance from one another, it’s probably easiest to make sure that they share a parent who has a UIAspectRatioConstraint.
-
Make sure your UI elements are inside of a ScreenGui that has IgnoreGuiInset turned on. This will make sure your calculations of the screen include the ENTIRE screen. Otherwise, a strip along the top will be ignored (the Roblox CoreGui button area).
-
Make sure you understand how AnchorPoints work. And I’d recommend getting in the habit of always dealing with AnchorPoints and Position as a group. AnchorPoints are where you are going to grab onto the object from and place it on the position you’ve decided.
Now, for your exact situation, you seem to not want to have your UI elements change size in the same way that the Roblox CoreGui buttons are changing size, and that’s fine. The way I showed you WILL mean that on a phone, which has a lot less screen space, buttons will appear to be a lot bigger, because there is a lot less empty space surrounding them. So, if you want your boxes to take up a consistent percentage of the screen, then you will have to use scale values:
-
I’d still suggest keeping your boxes in a parent frame, since the elements go together.
-
It looks like you want the boxes to take up about 2/3 of the right side of the screen? So try setting the parent frame’s size to {0.3, 0},{0.3, 0}. And add a UIAspectRatioConstraint to the frame, and leave its aspect ratio at 1.
-
You can adjust the numbers however you want, obviously, but inside of the parent frame, let’s say you want the top 45% to be one square, a 10% gap, and then the bottom 45% to be the other square.
-
Set the first square’s size to {0.45, 0},{0.45, 0}. Then set the AnchorPoint to (1, 0). Then set the position to maybe slightly away from the right side of the screen, like before: {1, -10},{0, 0}. This means, 100% of the parent frame’s width, minus 10 pixels. And 0% of the parent frame’s height - so, at the top.
-
Set the second square’s size to {0.45, 0},{0.45, 0}. The set the AnchorPoint to (1, 1). And set the position to {1, -10},{1, 0}.
-
Then put both of those squares inside of the parent frame.
Let me know how this turns out!
Oh, and as far as the lighting goes (I assume you read my other response), that’s something I have less experience in, and I’d simply recommend that you continue to test things outside of Studio as you’ve been doing. Don’t rely on how it looks in Studio. There are ways to make them match more closely I believe, but I haven’t tried them myself. Maybe try making a separate post about this and see what responses you get?
