How to make a Complexe Shape HealthBar

[zerma3x2 (Happy_Boi)]

1. What do you want to achieve?
   im trying to get my complexe shaped health bar to size properly,

2. What is the issue?
   since its in a frame with UiClipDescanted turned on idk what or how im suppose to change size of it, to showcase the health

3. What solutions have you tried so far?
   i have found someone with the same issue and that they have fixed but there’s was for a level system and idk how to get to work for health system
   https://youtu.be/U9s_zSgqL2c

If any of you can help, that would be super appreciated!
here is a portion of the level script that i think does the size part:

local barGui = script.Parent:WaitForChild("LevelBarGui")
local barBG = barGui:WaitForChild("BarBackground")
local barContainer = barBG:WaitForChild("BarContainer")
local barClipping = barContainer:WaitForChild("Clipping"); barClipping.AnchorPoint = Vector2.new(0, 0.5); barClipping.Position = UDim2.new(0, 0, 0.5, 0)
local barBar = barClipping:WaitForChild("Bar"); barBar.AnchorPoint = Vector2.new(0, 0.5); barBar.Position = UDim2.new(0, 0, 0.5, 0)
local currentLevelText = barBG:WaitForChild("CurrentLevel")
local nextLevelText = barBG:WaitForChild("NextLevel")
local expText = barBG:WaitForChild("Exp")

local levelUpGui = script.Parent:WaitForChild("LevelUpGui"); levelUpGui.Enabled = false
local levelUpBG = levelUpGui:WaitForChild("Background")
local levelUpTitle = levelUpBG:WaitForChild("Title")
local levelUpText = levelUpBG:WaitForChild("Body")

local plr = game.Players.LocalPlayer
local plrStats = plr.STATS
local plrLVL = plrStats.Level
local plrEXP = plrStats.Exp

local replicatedModules = game.ReplicatedStorage:WaitForChild("ModuleScripts")
local CalculateStats = require(replicatedModules:WaitForChild("CalculateStats"))

local remoteEvents = game.ReplicatedStorage:WaitForChild("RemoteEvents")
local levelUpRE = remoteEvents:WaitForChild("OnLevelUp")

local tweenService = game:GetService("TweenService")

local prefix = "Lv. "


barClipping:GetPropertyChangedSignal("Size"):Connect(function()
	barBar.Size = UDim2.new(1/barClipping.Size.X.Scale, 0, 1, 0)
end)

function OnExpChanged()

	local previousExp = CalculateStats.FromLevel(plrLVL.Value)
	local nextExp = CalculateStats.FromLevel(plrLVL.Value + 1)

	local currentExpTotal = plrEXP.Value

	local currentExp = currentExpTotal - previousExp
	local neededExp = nextExp - previousExp

	local textToDisplay = currentExp .. "/" .. neededExp
	expText.Text = textToDisplay

	local scaleX = currentExp / neededExp
	local inverseScaleX = scaleX > 0 and 1/scaleX or 0

	local goalClipping = {Size = UDim2.new(scaleX, 0, 1, 0)}
	local goalBar = {Size = UDim2.new(inverseScaleX, 0, 1, 0)}

	local tweenDuration = math.clamp(math.abs(scaleX - barClipping.Size.X.Scale), 0, 0.7)
	local tweenInfo = TweenInfo.new(tweenDuration, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut)

	local tweenClipping = tweenService:Create(barClipping, tweenInfo, goalClipping)
	tweenClipping:Play()
end

if any of you guys know how to properly change the size of a image that is in frame with UiClipdescanted turned on, that would be appreciated!

[zerma3x2 (Happy_Boi)]

here is my full layout of my gui system, the frame called Clipping is the one with UiClipDescanted turned on and the imagelabel named bar in it is my health bar

[maxlamenace912 (ZoyKad)]

It’s probably not the best way but you could use a transparency UIGradient.

Offset

Use the offset property of the gradient which is probably way more simple

Keypoints

Here are the keypoints you need :

1. At the beginning of the health bear set to 0
2. At the target pourcentage - 0.01 set to 0
3. At the target pourcentage + 0.01 set to 1
4. At the end of the health bear set to 1

[zerma3x2 (Happy_Boi)]

big words but how would i make a script to move points