sorry if there are any errors I am on mobile.
So… I am not the best with UI. I am trying to design a UI for upcoming game me and my friend are trying to develop. I have made some images to act as buttons. One of them is 500x1000px, but because some screens are different resolutions I need to use that thing that does 0.4, etc (please also tell me what this os!)
Is there an inbuilt feature to convert the pixels ({0,500},{0,1000}) to something like the scaling thing with 0.1, etc?
If not I’ll have to do some math if I can.
Third and last question l, any tips for UI design? This is not full time for me I am just learning so I can get some games done without spending money!
Cheers!
Instead of doing the math I always use this plugin to do it for me.
For UI design tips, I create what looks good to me and then I spend a lot of time on finishing touches to make it look nice to everyone.
1 Like
The decimals (0.4, 0.1, etc.) are called scale. They are the first and the third values in the size property (i.e. {this, 0, this, 0}). Scale is basically a decimal representation of the percentage of the screen. So, if you set a TextLabel’s size to {0.4, 0, 0.1, 0}, it will be 40% the width of the screen and 10% of the height of the screen. It’s recommended to use scale over offset (offset being pixels which are the second and the fourth values) because scale will easily…scale your UI to fit any screen size.
Yes, you can use what @vw_er suggested. That plugin’s awesome by the way. But, just for your information, an easy way to convert offset to scale is by diving offset by the total width of the screen (in pixels):
--[[2 ways to get width/height of screen: camera.ViewportSize or mouse.ViewSizeX
and mouse.ViewSizeY]]
--way 1
local mouse = game.Players.LocalPlayer:GetMouse()
local x, y = mouse.ViewSizeX, mouse.ViewSizeY
--ways 2
local cam = workspace.CurrentCamera
local x, y = cam.ViewportSize.X, cam.ViewportSize.Y
--convert
local scaleX, scaleY = 500 / x, 1000 / y
There you have it!
There are quite a few in my pot of tips, but I made a tutorial once on positioning and scaling them. Feel free to check it out:
Hope that helps!
1 Like
Thank you I tried this and it helped so much