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

Although this Involves GUI and should be in
#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:

Less than Half a Bar:

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?

Can you explain it in more detail?

GUI Changes

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

Here it is


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

while wait(0.5)do
	Goal.CellSize =, 0 ,1, 0)
	local Tween = TS:Create(Layout, TI, Goal)
	Goal.CellSize =, 0 ,1, 0)
	local Tween = TS:Create(Layout, TI, Goal)

I just really dont understand what you are asking??

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

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

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


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

That’s what @Crygen54 is saying to do?

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

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

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

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

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

Code works now:

		{CellSize = UDim2.fromScale(Hum.Health/Hum.MaxHealth,1)}):Play()

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

1 Like

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