Resizable interface with the mouse

Help and Feedback Scripting Support
,
#1

So is there any way to create a resizable interface like in the video? I would like to use it as a thing to do in my game when you get bored

Video:

thanks :smiley:

#2

To achieve this, you can get the mouseā€™s x and y position when the mouse is clicked and make a frame from there to the mouseā€™s current position.

Code sample:
Put the local script in a screen gui and make sure the gui has ā€œIgnoreGuiInsetā€ to true as shown below :

image
image271Ɨ563 25.2 KB

image
Also, create a text label for the interface and customize to your liking. I will be using a simple transparent black frame for demonstration
image
image

--Services
local Players = game:GetService("Players")
local UIS = game:GetService("UserInputService")
local RS = game:GetService("RunService")


--Path to gui 
local Gui = script.Parent
local Interface = Gui:WaitForChild("Interface") --Change to path of your interface label if needed

Interface.Visible = false
Interface.Size = UDim2.fromOffset(0,0)

--Variables to store where the initial click was
local startingX = nil
local startingY = nil

local IsClicking = false


UIS.InputBegan:Connect(function(Input:InputObject, GameProcessedEvent:boolean) --Event to detect when and input began (in our case its a mouse click or touch)
	if GameProcessedEvent then return end --the event was processed by the game so no need to go on further
	
	if Input.UserInputType == Enum.UserInputType.MouseButton1 or Input.UserInputType == Enum.UserInputType.Touch then  --Checking to see if it was a mouse click or a touch for a mobile device
	
		local MouseLocation = UIS:GetMouseLocation() --Gets the mouse location
		
		startingX,startingY = MouseLocation.X, MouseLocation.Y
		IsClicking = true
		Interface.Visible = true
		
	end
end)

UIS.InputEnded:Connect(function(Input:InputObject) --Event to detect when and input ended (in our case its a mouse click or touch)
	if Input.UserInputType == Enum.UserInputType.MouseButton1 or Input.UserInputType == Enum.UserInputType.Touch then
		IsClicking = false
		Interface.Visible = false
		Interface.Size = UDim2.fromOffset(0,0)
	end
end)

UIS.InputChanged:Connect(function(Input:InputObject) --Event to detect when the input changed (in out case its a mouse movement or touch)
	if not IsClicking then return end --Checking that the user is currently clicking
	
	if Input.UserInputType == Enum.UserInputType.MouseMovement or Input.UserInputType == Enum.UserInputType.Touch then
		local MouseLocation = UIS:GetMouseLocation() --Gets the mouse location
		
		local X,Y = MouseLocation.X, MouseLocation.Y
		
		local X1 = math.min(startingX, X)
		local Y1 = math.min(startingY, Y)
		
		local SizeX = math.abs(startingX - X)
		local SizeY = math.abs(startingY - Y)
		
		Interface.Size = UDim2.fromOffset(SizeX, SizeY)
		Interface.Position = UDim2.fromOffset(X1, Y1)
	end
end)

End results:

Tell me if it worked for you or if you experience any issue

Edit: made a quick edit to the code to make the size of the interface start at 0 to prevent the weird bug at the start
New result:

3 Likes
#3

A far simpler way of creating this effect:

local player = game:GetService("Players").LocalPlayer
local Mouse = player:GetMouse()

local Container = Instance.new("ScreenGui", player:WaitForChild("PlayerGui")) -- Or whatever ScreenGui you are using

local Resizable = Instance.new("Frame")
Resizable.Name = "Resizable"
Resizable.Size = UDim2.fromOffset(0, 0)
Resizable.Parent = Container

local buttonHeld = false
Mouse.Button1Down:Connect(function ()
	buttonHeld = true
	
	local clickedPos = Vector2.new(Mouse.X, Mouse.Y)
	Resizable.Position = UDim2.fromOffset(Mouse.X, Mouse.Y)
	
	task.spawn(function ()
		while buttonHeld do
			Resizable.Size = UDim2.fromOffset(Mouse.X - clickedPos.X, Mouse.Y - clickedPos.Y)
			task.wait(0.01)
		end
	end)
end)

Mouse.Button1Up:Connect(function ()
	buttonHeld = false
	Resizable.Size = UDim2.fromOffset(0, 0)
end)
#4

I was trying to avoid using any loops and also avoid using the Mouse object as Roblox advised against it but yours is definitely far more simple

image
image846Ɨ94 26.2 KB

1 Like
#5

the script works, I just noticed that when youā€™re near the edges the script crashes for a while

update: I solved it was a problem only in roblox studio

#6

Give me a sec, let me figure out the issue

Edit: nvm