How would I make a non-cubic frame that can be filled by percentage?

Help and Feedback Scripting Support
#1

After playing a lot of raid and clan games, I noticed that The Nighthawk Imperium has a cool capture timer here:
image

Every second, they update and the shapes get filled accordingly.

From searches on the devforum and google, no one has requested this, and this would help me greatly. I was wondering how you could be able to do this.

Thanks for reading,
bryancololee

#2

I first learned about the following method from this post by @Elttob, but I modified it to tween position rather than size since it appeared jittery.

Here’s a model file containing everything I used if you get lost.
FillShape.rbxm (4.4 KB)

Hierarchy

image

Components

  • Base will be your background; the size does not matter. In the example you provided, this would just be the outlined hexagon.
  • Frame defines the area that Overlay will be visible in.
    • BackgroundTransparency: 1
    • Position: {0, 0},{1, 0} (Assuming you want it to move from bottom to top)
    • Size: {1, 0},{1, 0}
    • ClipDescendants: true
  • Overlay is the actual shape you want to fill. Set the image properties as you see fit.
    • Position: {0, 0},{-1, 0} (Negative position of Frame)
    • Size: {1, 0},{1, 0}

Code Example

-- LocalScript located under ScreenGui
local TweenService = game:GetService("TweenService") -- Use TweenPosition() if you'd like
local TweenData = TweenInfo.new(0.1, Enum.EasingStyle.Linear)

local Base = script.Parent.Base
	local Frame = Base.Frame
		local Overlay = Frame.Overlay

local function Update(Alpha)
	local Pos = UDim2.fromScale(0, 1 - Alpha)
	TweenService:Create(Frame, TweenData, {Position = Pos}):Play()
	TweenService:Create(Overlay, TweenData, {Position = -Pos}):Play()
end

Update(0.3) -- Fill 30% of the shape
3 Likes
#3

It worked perfectly, thanks for the help! I’m still a bit confused how this works though, could you explane please? Thanks!

#4

Since ClipDescendants is true for Frame, the shape will only be visible wherever the two components overlap. In order to show more area, we have to bring them closer together and, conversely, pull them apart to show less. Base acts as a container so that we can use scale to adjust the proportion of the shape visible. Feel free to ask for specifics if that doesn’t answer all of your questions.

1 Like