How would I have this Frame Tween within the Middle with another?

Help and Feedback Scripting Support
#1

Hi,
Although this Involves GUI and should be in
#help-and-feedback:art-design-support
or
#help-and-feedback:game-design-support ,
But It Involves Scripting so I’ll put it here.

I’m not sure how to Title this:

I am Trying to Have A UI bar to stay in the Middle of the UI, Like this:

Full Bar:

RobloxScreenShot20230108_102938046
RobloxScreenShot20230108_1029380461184×680 449 KB

Less than Half a Bar:
RobloxScreenShot20230108_102949508
RobloxScreenShot20230108_1029495081184×680 36 KB

My Issue is that I’m not sure how to Set this up Properly

Everything I tried would either:

  • Position the Frame nowhere near the BackgroundFrame

  • Size the Frame to Cover the entire Screen

With another Script I had, it would only Stay on the Left side or the Right Side of the Frame
And what I’m trying to achieve is to have it in the Middle,

You can maybe use 2 Frames to create this effect but I want to use 1 Frame, How would I do this with only 1 Frame?

#2

Can you explain it in more detail?

#3

GUI Changes

  • Add a “UiGridLayout” inside the black frame.
  • Put the blue frame inside the black frame.
  • Set the “UiGridLayout” properties like this:
    Capture

Here it is

ca.PNG
ca.PNG1920×1033 130 KB

Scripting

  • Change the bar size using the “UiGridLayout” > CellSize.X(scale)
    Example (local script inside the black frame):
local TS = game:GetService("TweenService")
local TI = TweenInfo.new(0.3)
local Goal = {}
local Layout = script.Parent.UIGridLayout

while wait(0.5)do
	Goal.CellSize = UDim2.new(0.35, 0 ,1, 0)
	local Tween = TS:Create(Layout, TI, Goal)
	Tween:Play()
	wait(0.5)
	Goal.CellSize = UDim2.new(1, 0 ,1, 0)
	local Tween = TS:Create(Layout, TI, Goal)
	Tween:Play()
end
#4

I just really dont understand what you are asking??

#5

You say you want the bar to be in the middle, but it already is based on the images you provided

unless the one you just sent a moment ago is actually yours, and the initial pictures were an example

if this is the case, I would suggest getting a plugin that positions gui for you, i.e. in middle of screen ill link one in a moment

#6

Those are Image of what I’m trying to achieve, and yes, they were an Example

#7

With UIGridLAyout, I’m not able to edit its Size or Position, i hope you realize that

#8

No

#9

why are you using grid layout? your frame isn’t a scrollingframe

#10

That’s what @Crygen54 is saying to do?

#11

Let’s read my awnser again i edited it ^^

#12

Still doesn’t work, it doesn’t even change the CellSize

#13

Nobody said that a Grid layout should be used only for scrolling frames or for listing multiple Ui… there is many ways to use it

#14

It work lol, you can test it by yourself:
Gui middle bar.rbxl (33,5 Ko)

#15

I’m dumb, I forgot to add the :Play() to the Tween

Code works now:

Hum:GetPropertyChangedSignal("Health"):Connect(function()
	TweenService:Create(HFrame.UIGridLayout,
		TweenInfo.new(.2),
		{CellSize = UDim2.fromScale(Hum.Health/Hum.MaxHealth,1)}):Play()
end)
#16

Ah ah no problem mate, hope you will enjoy it ! ^^

1 Like
#17

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.