So I’ve been working on making a custom GUI to replace every core GUI excluding the chat but I cannot get my head around how I can make the GUIs fit on very small phone screens. It feels too compact with only a couple guis on-screen, what do you guys think I should do?
Should I use offset instead for core guis like the backpack since the spacing in the scrolling frame is very random? I’m trying to make it kind of similar to the default backpack.
Also is using a separate GUI for each device bad practice? I think most of the script would have to be remade for console because it may need to be laid out differently.
Please also give criticism on what you think should be changed or let me know if you have any resources for how I should make this work.
Creating separate GUIs for each device is a bad practice, this is too time consuming and you will have to work more just for a simple job. The only script related function you should be doing is how many hotbar slots will a device have based on it’s screen length (you can’t have more than 3-5 hotbar slots on mobile). You could also script some functions to change the gui scale, but this is only for additional and rare cases that you scaling would absolutely not work.
Offset is what most if not all the the default core GUIs you’ve replaced uses, but I think you should consider using scale instead of offset, but it depends on what works best with your setup.
Your current scales for GUIs seem fine, except for the inventory on mobile, you’d really have to scale it smaller if you want it to look better and the hotbar for computers is waaaay too small, I can already hear the screams of people on 4k displays (not exactly but I’d go for a bigger hotbar)
Use a combination of offset and scale. This way the UI object doesn’t appear too big or small for particular devices. For example, a size of (0.2, 0, 0.5, 0) would be huge and obstructive on computer, whereas tiny in comparison on mobile. Here’s an example of a custom playerlist I made which utilises this:
Use UISizeConstraint. This allows you to set a minimum and maximum size for the UI to scale to. This may be quicker and easier to implement over the former.
Work in purely scale, but adapt the size via scripting. This gives you more control over the exact sizes of UI objects, however also requires understanding of programming and can be more time consuming. By rule of thumb, I often do:
Computer = Y * 0.6
Tablet = Y * 0.8
Phone= Y * 1.0
While @wevetments makes a good point (use same UI, reduce data redundancy) there are some scenarios where this has to differ. For example, on computer and tablet it’s fine to display shop, inventory, etc buttons all at once as their screen is large enough. On the other hand, you wouldn’t want to do the same for mobile as it would take up the already limited screen space, or you’d have to make the buttons small enough to the point where they’re difficult to press.
For example, some games have a separate toggle only on phone to hide/show the main interface:
Good point, UISizeConstraints would work great for that too. I personally prefer the former as it gives me more control over the UI object, however that’s definitely a preferable method for most people. I’ll add that to the list for future readers.
