This is a module I made for myself about a year ago designed to more effectively resize GUIs based off a device’s screen size. Size customization is completely controlled by the player, so they can see as much, or as little, of the GUI as they’d like.
The idea of it is based off window size customization from Windows 10. When the GUI is made resizable, it’ll be given a border which can be dragged around by players until they reach their desired size. I’ve tested this on mobile devices, laptops, and desktop computers, and it’s been working well so far.
I released this publicly last year when it was first developed, so you may have come across it before - however, I’ve never been able to showcase it on a large scale. I believe it’s worthy of a post here because I’ve personally found it to be very useful in my own development, so it may be something someone else can make use of.
Features:
Basics - GUIs can be resized by the players of your game to better match their desired size
Persistent - GUI size is saved automatically. When players rejoin the game later, the gui will automatically resize itself to their chosen size
Customizable - the borders of the window can be set however you’d like. They can be made smaller/larger, colors can be changed, and their entire visibility can be turned on & off.
Size Constraints - The module supports properties for maximum & minimum size of the GUI, so you can set size constraints for resizing.
Open Source - you can make any change you’d like to better adapt the module to your own games & your own needs.
Automatic Updates - By default, the module automatically updates to the latest release. This can be toggled on & off by a BoolValue located inside the AutoUpdate script.
Demo:
There is a demo of a resizable GUI available here:
Module Code
The module is linked below:
Providing Contributions
The code is available open source from the link above. If you’ve made an improvement to it, please feel free to PM me so I can add it to the main code!
I found a low-priority defect. If you make the anchor point anything other than 0,0 the resize will not work as intended. Not that big of a deal to be fair since I can just make the anchor point 0,0. And this seems to happen to other open-source resize modules so I’m sure it’s just a math logical defect.
Of course! But like I said it was a low priority defect, not necessarily a flaw in the module. So I was posting that for documentation purposes if anyone wants to mitigate it.
Wanna know something funny? I came back to this module and had no idea why it wasn’t working, I spent like 30 minutes debugging then I found my own comment. It’s a good thing I documented LOL.
Does this module still work? I tried using it for my chat ui:
local replStorage = game:GetService("ReplicatedStorage");
local Resizable = require (replStorage:WaitForChild ("Resizable"));
local player = game.Players.LocalPlayer
local gui = player:WaitForChild("PlayerGui"):WaitForChild("CustomChat");
local frame = gui:WaitForChild("Holder");
local resizing = Resizable.new (frame, {minimumSize = UDim2.new (0, 350, 0, 200)});
local resizing = Resizable.new (frame, {maximumSize = UDim2.new (0, 550, 0, 400)});
-- At this point, the DemoGui's MainFrame will be resizable.
It should still work, just tested with the tech demo and that one was working for me. I’ve open sourced it so you can take a look at that if you’re still needing it: Resizable GUI Tech Demo - Roblox
I don’t actually have any logic for dragging built into the module - that was all based off the GuiObject.Draggable property, but it looks like that’s been deprecated. Might be a good idea to get something implemented around it, as part of updating it to the modern day stuff, but depends on if I have time to do that
It does save automatically whenever you change it though. Then you can come back in and it’ll be at the same position + size from where you left it
Actually for #1 - can you show me the properties on those buttons?
I think you do need Scale, set Y to a scale of 1, and the X should always equal that. I think there’s an option to set it to have both axes based on the Y axis, then you can just set both to Scale = 1.
Googled it, what I’d do is:
Frame.SizeConstraint = SizeConstraint.RelativeYY
Frame.Scale = {1, 0}, {1, 0}
For #2, I’ll have to dig more into that. I think when I first designed this CanvasGroups weren’t a thing at all, so there’s probably something funky going on there that I’ll need to take a look at.
It’s weird it doesn’t work even if it’s just a frame though - but same thing, I’ll probably need to take a deeper look. I basically haven’t touched the module in five years so there’s probably gonna be a ton of those random bugs that I’ll need to fix up