I’ve been working on a rough layout of my RPG’s Inventory in inkscape.
I decided to start translating the design into an actual gui in roblox. So far I’ve got this.
But when I resize the screen on the X axis, this happens.
This isn’t a problem with screens that have a similar resolution to mine ( phones are alright ). But anyone with a square monitor is gonna have a bad time. Is there any way I can fix this? I’ve used a RatioConstraint in the far Left Image Frame in the bottom black bar, and one in the frame that the middle Image Frames are housed in.
I’m still tryna learn how to utilise ratio’s and stuff, I could just be doing it horribly and creating this problem myself.
What do you actually want to happen in this case? Should the middle bar shift over to the right? Should the text word wrap? Once you know what you want the UI to do as it changes sizes, you can think about how the different UI components interact. If you want the text to word wrap for example, you can size the left hand side so that the bar will be just short of the middle thing (which you may need to do some UDim2 math to figure out), and then you can enable text wrapping on the text label.
You may want to have a second version of your design made for portrait mode, and then try to make your UI morph (or hard transition) between them as the aspect ratio changes.
Edit: For note, the smallest screen that Roblox officially supports is the iPhone 4S, which shows up as 480x320 resolution. You can use the mobile emulator to see what your UI looks like on this device. Note that you shouldn’t just use scale sizing for everything, as this will easily make your UI unreadably small. This device has a screen that’s something like 3.5 inches across. You should make sure all of the text in your UI is at least size 10, ideally more like size 18 or size 20. As long as your text size is this large, we try to guarantee it will be readable on any platform except ten foot interfaces (xbox).
