Default Gui elements shouldn't show in Offset

This is a really minor touch but I feel like having the default sizes of things like TextButtons (which are 200x50 pixels “Offset” size) is counter-intuitive. New developers trying these buttons out will try to make GUIs out of them then ask why they aren’t stretching with the screen size.

I propose that the default sizes of TextButtons (& other Gui elements) are set in Scale instead of Offset. This will not only help encourage new players to make scaling Guis, but it’ll help developers like me that are too lazy to set Offset to 0,0 each time I add a new element.

8 Likes

I use offset for size heaps! In fact, I use both heaps, for these reasons:

  • Scale is useless at being consistent (although I’ll admit that constraints have solved most of its problems – but not all) and is really great when used in three numbers (0, 0.5, 1).
  • Offset is really good at being consistent but can’t handle proportions.

I believe we just need a name change for now. I think the issue you described is more to do with people misunderstanding what the offset unit is. It makes (almost) no sense as a name.
I can see a variety of reasons for each unit to be given priority, so I don’t see the point in it being changed. If anything is done, make default properties customizable.

This is opinion, but I don’t think it’s a very good idea to be using scale for things like buttons, either. Usually you want to carefully synchronise things like text size, padding, image size (cause it means quality), etc.

After some thinking I’ve decided that it was probably called ‘offset’ because the position is based off of the distance from the corner of the screen. But that doesn’t make sense for size, and is just generally a bad way to describe something that is universally called ‘pixels’.

TL;DR Offset should become pixels.

I’ve never seen had any proper use for Offset except for when roblox fails to round scaled elements properly. Can I ask what you use it for?

1 Like

I use offset for:

  • Padding (combined with scale usually)
  • Base sizes of popup frames/buttons/images etc.
    • Coincides with text size and the padding between text and frames
    • Gives me consistent aspect rations
    • Ensuring images look the best possible (set their size to original image resolution)
    • This is just PC only and doesn’t include cross-platform – usually for other platforms I’ll just make specific GUIs or heavily modify the existing UI to fit specifically on that platform/control-set
    • I don’t tend to make menus (inventory, shop, etc.) that fill the screen entirely unless they need it

I only commonly use scale for filling the screen or anchoring to the end of the screen (number 1), or anchoring to the centre of the screen or filling half of the screen (number 0.5).

If I need to make any adjustments to these via script or whatever, often it’ll be in a scenario where would code be needed regardless of measurement unit.

1 Like

Using offset seems like a bad practice. Things like mobile will sometimes do weird stuff where they convert 1 pixel space into 3 (@Tiffblocks explained this to me earlier). The other issue with offset is 4k/720p displays can make it look rather weird.

1 Like

Yeah, that’s why when designing I make sure to look at how things work on different sizes.

Usually all of my 1080p UIs also work on 720p with no modifications, and I haven’t come across 4k enough to start considering it (I probably should). Half of it is also just me being lazy and avoiding having to upload lots of the same image in difference sizes for best appearances at different resolutions.

Mobile and console I consider to be completely separate where they have their own specific UI, so the PC UIs I make become obsolete and they instead use GUIs that work in their own common resolutions in offset.

That mobile thing is weird tho – is that an issue specifically with offset, or with rendering (affects scale too)?

1 Like

Please don’t spread myths. We specifically guarantee that offset sizing will remain readable across mobile and PC. All you have to worry about is the amount of screen real estate, not the density.

5 Likes

If you design a UI based entirely around scale sizing, then you’ll run into issues where the UI will be unreadably small on mobile because the display is smaller. You should build your UIs around building the “content” (images, text, etc.) at fixed offset sizes, and then reflow the top level UI to fit this content into the available space. This can mean overflowing into scrolling frames, or moving portions of the UI.

For example, text that’s 1% of the height of the screen might look fine on PC, but would be something like 3 pixels high on a mobile device.

Building your UI entirely around scale sizing has more problems as well:

  • Scale sizing is, by far, the easiest way to make a UI that will only work on your own computer. It’s way too easy to combine sizing values in a way that cause elements to be in the wrong position at different resolutions.
  • It’s hard to make UI that handles differing aspect ratios gracefully when using scale sizing, and the size constraint property is frequently misunderstood by developers. Especially consider portrait mode on mobile, where the aspect ratio is less than 1.
  • You’re forced to use TextScaled for sizing all of your text, which has no way to be consistent between multiple TextLabels. It looks absolutely awful when you have a tab bar and every entry is a different size. On top of that, TextScaled=true has 10x worse performance than TextScaled=false.

You should always test your UI in the device emulator. It will show you what I’ve described in an intuitive fashion, and let you find bugs in your UI.

Instead of rendering UIs tiny on mobile (which would happen if Offset values mapped 1:1 to “native” pixels), we render them larger but with more crisp text and images. If your image assets are larger resolution than your offset values (2x is a good value to shoot for), then they will just automatically look better on mobile. My hack week project this year was to bring this crispness of UI to PCs and laptops with high-density displays (such as 4k displays).

In case you still need further examples, you should look at all of the Roblox-designed UI such as the core UI, chat, humanoid name tags, and the Lua-based group chat function built into the iOS app. All of these are designed with fixed offset values. The topbar is always exactly 36 pixels high.

The one exception to all of this is Xbox. This device is exposed as having a 1080p resolution. In order for text to be readable on this device, text needs to be larger than would be considered small but readable for PC or mobile. If it had been up to me, I would have done the same type of scaling we do on mobile for Xbox.

13 Likes

Please don’t let your personal feelings take bias over what were trying to discuss here. From what I see you’re wrong. If the case is that I’m wrong, then you should help explain why rather than trying to put a punch in wherever you can. That’s not what the developer forums are for.

I believe the “myth” being referred to here is that somehow using offset in sizes would be bad practice, because the exact point of the post you link is that they do this scaling trick to make sure your UI stays readable on mobile devices that typically have higher dpi than PC screens.

Remember that tone carries badly over text and the intention of the post was not to throw punches, but rather to steer the discussion back on course and prevent bad advice from being circulated.

9 Likes

There’s no bias, it’s just how it is. You interpreted that statement in the complete opposite direction of what it was meant to say. The mobile resolution scaling is there specifically so that you can use offset without worrying about high-DPI devices. It guarantees that a pixel is mostly the same physical size across all devices. This means that you can use the same font size both on PC and mobile and it will be legible.

In Lua, you have no way to tell that any scaling is going on. The AbsoluteSize of the ScreenGui is what you get.

If it wasn’t for this, you would have ridiculously tiny UI on almost any modern phone if you used Offset at all and designed it for PC first. A real phone pixel is roughly 1/4th the size compared to that of the average PC monitor. This scaling means you don’t have to worry about that.

7 Likes

Thanks for clearing that up. I suppose it just comes down to communication skills. Something I frequently heard around the office when I interned was that it doesn’t matter what you intended to say, it was how people interpreted it that mattered. Either way I’m sorry if I offended you @Tiffblocks.