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
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
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.