Circular Hole Gui Problems

[Fwyes (Fries)]

Heya! My name is Beast and firstly I’d like to thank you for reading this. Recently, a few of my friends and I had started making a game, which is going great! We’re on the verge of releasing Beta version and are excited to see what people think!. We’ve run into one problem though…

What’s The Problem?

A few days ago, our scripter, @PainfulSupercool started the scripting sector of our game, and it is almost ready to launch. As he is our scripter, and also knows how to do some sorts of GUI designs, something that was required for the game was something that Pain didn’t know how to do. We are trying to make a GUI that opens when you touch a block. Not a usual if touched then visibility = true GUI, but a proper design, tweened, shaped, and all.

The GUI would start off by when you touch the piece, it will close in from all sides towards the centre until it is all black. Then a few seconds would go by, and it would reverse.

We have tried almost everything that our minds can think of, but nothing has seemed to work. This is why we have come to our #1 Info Giver of the DevForum for help.

I am not the scripter myself, so I wouldn’t really understand terms used in that category, so please, if you can, keep it simple!

Since no scripts seem to work, we don’t really have a script to give. All we’re asking for is some direction to lead us on the way to completing this task.

As this is one of the last things for our game to have, it is a priority to get this done! Thanks for reading and I hope you can help us with our struggles!

[lemonlama_Pro (lemon)]

So… You mean that touch script doesn’t work? Or tweening doesn’t work?

[Fwyes (Fries)]

Nothing is working. We’ve checked the script output multiple times and i’m not sure why but nothing is coming out as an error. All scripts that we’ve tried have failed.

[3rdhoan123 (FutureNoob)]

As simple as I can put it:

Get a frame, insert “UICorner” into frame, set “UICorner” “Scale” to 1.

Set frame size to fill entire screen via frame size.

Tween size of frame to be 0,0,0,0 then hide visibilty.

[lemonlama_Pro (lemon)]

As for the touch script, add a remotevent to the replicatedstorage, and add a script on the brick. The script will be

local RemoteEvent = game.ReplicatedStorage.SHOWGui--name of the remotevent

script.Parent.Touched:Connect(function(p)
	if p.Parent:FindFirstChild("Humanoid") then
		if game.Players:GetPlayerFromCharacter(p.Parent) then
			game.ReplicatedStorage.DELETEGui:FireClient(game.Players:GetPlayerFromCharacter(p.Parent))
		end
	end
end)

-- In a localscript, The parent is the screengui
game.ReplicatedStorage.ShowGUI.OnClientEvent:Connect(function() 
	script.Parent.Frame.Visible = true -- change this to whatever you want to make it visible
end)

[Xx_FROSTBITExX (The123)]

The question you asked is not that difficult, it just requires a bit of logic.

I assume your scripter knows how to do the “touched script” so I’ll leave that aside.

Essentially, you’ll need your GuiObjects in this case your frames or ImageLabels, ect.
You also need them to be rounded, using Roundify or UICorner which easily get’s the job done.

Here’s a setup:

Frame is the main frame which has a black background.
StartCircle is a circular frame, that sized and positioned equally on each side of Frame. This is how the circle should look like from the start. To get it equally on all sides, I inserted the Frame inside the main Frame and scaled it from there, until It matched the exact size. Then I used the UICorner and set it to max.

EndCircle is the another circular frame that is used to represent how the circle should look like when it gets small. Same thing applies from above. I When to the frame’s property and chose symmetrical numbers for Size on the X & Y properties. The numbers were: {0,25},{0,25}. Then positioned it in the center by dragging my mouse – You should get the Green lines indicating it’s equal on all sides.

So now we have our setups, we have to start coding. The method I used is really simple and straightforward. Basically the concept is having two seprate guis and having them tween to match one another. If we have a huge frame, we tween it to match a smaller frame and vice verca.

Size is the only thing that’s changing to {0,0}, {0,0}. Position is the postion of the end frame.

local StartCircle = script.Parent.StartCircle -- Getting the Start Circle

local EndCircle = script.Parent.EndCircle -- Getting the End Circle
-- Size and Position on all UI objects have X & Y --

local SizeX = StartCircle.Size.X -- Getting the X property of Size from SC

local SizeY = StartCircle.Size.Y -- Getting the Y propery of Size from SC

local PositionX = StartCircle.Position.X -- X property of Position from SC

local PositionY = StartCircle.Position.Y - Y propery of Position from SC
-- Pretty simple tweening using :TweenSizeAndPosition --

StartCircle:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0), UDim2.new(EndCircle.Position.X, EndCircle.Position.Y), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 5) 
-- Start Circle tweens until it's size and position matches its destination. 
-- Usually you use Udim.new and have your 4 values in the (), however since we already have our values defined above, we can just plug it in, except for size
-- The values are Size.X, Size.Y, Position.X, Position.Y

wait(3) 

-- Once SC is tweened to match the smaller frame, we need to tween it back.

StartCircle:TweenSizeAndPosition(UDim2.new(SizeX, SizeY), UDim2.new(PositionX, PositionY), Enum.EasingDirection.In, Enum.EasingStyle.Sine, 5)

Result: For simplicity I used this but there are other ways to go-about.
https://gyazo.com/6cbd7d8c852a4b938260fdddd942011c – Recording got a bit cut off at the start

You might also want to experiment with AnchorPoint

Edit: The code provided tweens the larger frame until it’s size is 0, and then tweens it back. Hopefully this is helpful

[Fwyes (Fries)]

Eeeeeee i should have made the images easier to understand. The White circle is the game screen. Imagine your character and the background in that white circle. The Black border is what i’m aiming for, not the circle in the center.

[mrjacksonsapien (MrJackson)]

I tried a little experiment concerning this. I know this post has been made a long time ago but for now the best work around solution I got is using the RunService.RenderStepped to generate a certain framerate simulation effect. I’ll try to make it simple. I have a small png image with a hole in the middle which is transparent and around it is black. I created 4 frames around the screen (PlayerGui) that will constantly be updated and resized through the RenderStepped (aka every frame) to always stick to the png image of the hole that will constantly change size. I made a basic script with a few comments to guide you through the thing. Here are a few pictures to help you better understand how it works too.

local Hole = script.Parent.Hole
local Top = script.Parent.TopFrame
local Bottom = script.Parent.BottomFrame
local Left = script.Parent.LeftFrame
local Right = script.Parent.RightFrame

local Scale

function DrawBounds()
	Top.Size = UDim2.new(1, 0, 0.5 - Hole.Size.Y.Scale / 2, 0)
	Bottom.Size = UDim2.new(1, 0, -0.5 + Hole.Size.Y.Scale / 2, 0)
	Left.Size = UDim2.new(0.5 - Hole.Size.X.Scale / 2, 0, 1, 0)
	Right.Size = UDim2.new(-0.5 + Hole.Size.X.Scale / 2, 0, 1, 0)
end

function scaleUpHole()
	if Hole.Size.X.Scale < 1.5 and Hole.Size.Y.Scale < 3.285 then
		Hole.Size = Hole.Size + UDim2.new(0.01, 0, 0.0219, 0)
	end
end

function scaleDownHole()
	if Hole.Size.X.Scale > 0 and Hole.Size.Y.Scale > 0 then
		Hole.Size = Hole.Size - UDim2.new(0.01, 0, 0.0219, 0)
	end
end

-- Initialize for first time
DrawBounds()

-- Loops that simulates framerate system

Scale = game["Run Service"].RenderStepped:Connect(function()
	scaleDownHole()
	DrawBounds()
end)

wait(5)

-- Stop the loop
Scale:Disconnect()

-- Reconnect with new functions
Scale = game["Run Service"].RenderStepped:Connect(function()
	scaleUpHole()
	DrawBounds()
end)

Here is the hole png image I used with an aspect ratio of 1 : 2.19 on the studio

Here are some pictures of what I’m doing in the studio so you can visualize a bit more what’s going on