Trying to layout custom brick color UI

3bizq7iq2n2z

RobloxScreenShot20180825_200622177

The problem I am having is trying to position them. I want there to be no gaps between them, but when I use different emulators (phone, tablet, console) it might add a gap to one side but not the other. I’m basically positioning them off of 0.5, then going left and right certain amounts. But even if the 2 next to 0.5 are the same distant away from, it one side will still get 1 pixel moved across when changing screen sizes. This becomes obvious when I look at absoluteposition. I am using scaling for EVERYTHING TO! no offset



As you can see, button 3 is 0.42, button 4 is 0.5 and button 5 is 0.58. So buttons 3 and 5 are the same distance away from the centre, yet button 3 has a gap and button 5 doesn’t

Your problem is that you’re using scaling.

Pixels are the smallest unit of information on a screen, you cannot have half a pixel. When you try to scale the color cells, there will be cases where half a pixel is required for the correct placement of a cell, which isn’t possible. This results in that cell being off by a pixel.

I’d suggest having different UI for different devices in this case.

I disagree with this suggestion. Making UI for different devices is an endless rabbit hole and you won’t win. Especially in this case, it might look good on your iPhone 1337 but then look horrible on your smaller Samsung 9000.

What I would do is use a UI aspect ratio constraint to force them to scale at a certain aspect ratio. That way they won’t stretch or anything weird. Additionally, maybe adding some space between them wouldn’t be too bad. It would make this less noticeable.

Otherwise I just deal with it. It’s not that big of a problem to players and they probably won’t care.

5 Likes

Thanks for the suggestions, I managed to get it right in the end :smiley:
palette

2 Likes