TransformGUI, a simple, easy to use module for creating draggable and resizeable GUIs

Resources Community Resources
#1

TransformGUI

Documentation • Repository • Test Place

A simple, easy to use module for creating draggable and resizeable GUIs

Get Started

To start, insert this module into your game, I recommend putting it in ReplicatedStorage.

Create a ScreenGui inside StarterGui with a Frame inside. Create a LocalScript and add the following code:

local TransformGui = require(game.ReplicatedStorage.TransformGui)
local tGui = TransformGui.new(script.Parent.Frame, false)
tGui:makeDraggable()

The code should make the GUI draggable with your mouse.

If this works, then you’re all set to go.

17 Likes
How to make smooth dragging
#2

About time someone made this lol. One thing I would say isn’t good about it is that there aren’t specific buttons to resize the gui, just the edges.

1 Like
#3

I’ll start working on that now.

#4

Tested it and it seems to work well. Thank you for sharing this.

A few suggestions for expanding upon this would be to be able to define frames as ‘Drop Zones’. You could then have different events that trigger when you have dragged something over a Drop Zone or when you ‘drop’ something into a Drop Zone. This could be useful when you want an inventory system and drag items to specific equipment slots, like boots, helmet, weapon etc.

Useful events could also be things like Drag started / ended so you could hook into that and in this example highlight the correct slot the item is supposed to go into.
These things can of course be used beyond just an inventory system.

#5

Like the selectors in the realism plugin? That would be cool.

1 Like
#6

I’ve just released a new version with 4 events

  • onResizeBegin
  • onResizeEnded
  • onDragBegin
  • onDragEnded

Thanks, for the suggestion!

1 Like
#7

On documentation it says this is make resizeable:

TransformGui.makeDraggable()

Edit: will buttons for the resizing/moving be added soon?
Edit 2: having corner buttons (making the x and y both change at the same time) would be nice.
Edit 3: IK this prob would be complicated but: having a minimum/maximum size for resize.

#8

How do we call those events? I have never used module events.

#9

TransformGui.onResizeBegin:Connect()

#10

Thanks for pointing that out, I’ll fix it now.

Buttons for resizing/moving will be added soon hopefully.
Corner buttons are a plan, so they will come soon too.
Minimum/max size is something that I’d like so that will definitely come soon.

1 Like
#11

It is saying attempt to index nil with Connect

local TransformGui = require(game.ReplicatedStorage:FindFirstChild("TransformGui"))

local Frame = script.Parent:WaitForChild("Frame")
local Frame1 =  script.Parent:WaitForChild("Frame1")

local transformableGui = TransformGui.new(script.Parent.Frame, true)
transformableGui:makeDraggable()
transformableGui:makeResizeable()

local transformableGui1 = TransformGui.new(Frame1, true)
transformableGui1:makeDraggable()

function CheckOverlap()
	local a1 = Frame.AbsolutePosition.Y
	local b1 = Frame1.AbsolutePosition.Y

	local a2 = a1 + Frame1.AbsoluteSize.Y
	local b2 = b1 + Frame1.AbsoluteSize.Y

	if (b1 <= a1 and b2 <= a1) or (a2 <= b1 and a2 <= b2) then
		return false
	else
		return true
	end
end

function Snap()
	if CheckOverlap() == true then
		transformableGui1.Position = transformableGui.Position
	end
end

transformableGui1.OnDragEnded:Connect(Snap)
#12

change “OnDragEnded” to “onDragEnded”

#13

Did you mean to reply to @MasterFrigophobia?

#14

Looks really nice. I would suggest for players to be able to resize UI elements by the corners like if they click on the bottom/top corners it would size on the X and Y-axis.

#15

Published new update with changed events.
Check the docs for more details.

#16

A corner resize system has been added in the latest pre-release thanks to a contributer

1 Like