Need help with Viewport Health Bar

I made this code for a viewport healthbar I’m trying to currently create, but how can I use the :Resize method for a tween?

Because without using the :Resize method on the green part, it won’t be smooth at all when you take damage.

Here’s a graph showing what I’m looking for and what I’m not.

I want to only resize one axis part (the positive one), but I’m not sure how to tween that to.

image

local player = game.Players.LocalPlayer
local viewport = script.Parent
local character = player.Character or player.CharacterAdded:Wait()

local GreenBar = viewport:WaitForChild("Health_Green")

local cam = Instance.new("Camera")
viewport.CurrentCamera = cam
cam.Parent = viewport

-- POS = -24.784, 0.965, 37.515

cam.CFrame = CFrame.new(Vector3.new(-24.784, 0.965, 37.515)) * CFrame.Angles(math.rad(3.307), math.rad(-23.772), math.rad(0))

local Part = Instance.new("Part"):Resize(Enum.NormalId.Left, -1)

character:WaitForChild("Humanoid").HealthChanged:Connect(function()
	local sizeX = (character:WaitForChild("Humanoid").Health / character:WaitForChild("Humanoid").MaxHealth) * 7
	local tween = game:GetService("TweenService"):Create(GreenBar, TweenInfo.new(.25, Enum.EasingStyle.Linear, Enum.EasingDirection.In, 0, false, 0), {Size = Vector3.new(sizeX, GreenBar.Size.Y, GreenBar.Size.Z)})
	
	tween:Play()
end)
1 Like

For my own curiosity’s sake, may I ask why you are making a healthbar using a viewport?

1 Like

To use the :Resize method with a tween, you can create a new vector that specifies the new size for the positive axis of the health bar. Here’s an example:

character:WaitForChild("Humanoid").HealthChanged:Connect(function()
	local sizeX = (character:WaitForChild("Humanoid").Health / character:WaitForChild("Humanoid").MaxHealth) * 7
	local tween = game:GetService("TweenService"):Create(GreenBar, TweenInfo.new(.25, Enum.EasingStyle.Linear, Enum.EasingDirection.In, 0, false, 0), {
		Size = Vector3.new(sizeX, GreenBar.Size.Y, GreenBar.Size.Z) -- tween the Size property
	})
	
	-- create a new vector with the resized positive axis
	local newVector = Vector3.new(-sizeX/2, GreenBar.Size.Y/2, GreenBar.Size.Z/2)
	newVector:Resize(Enum.NormalId.Left, -1) -- resize only the positive axis
	
	-- tween the CFrame property of the Part to move the positive axis of the health bar
	local partTween = game:GetService("TweenService"):Create(Part, TweenInfo.new(.25, Enum.EasingStyle.Linear, Enum.EasingDirection.In, 0, false, 0), {
		CFrame = GreenBar.CFrame * CFrame.new(newVector)
	})
	
	tween:Play()
	partTween:Play() -- play both tweens simultaneously
end)
1 Like

Just for the visuals, I don’t have any other reason but that. Just thought it looked cool.

1 Like

This won’t work, because newVector is not a part, so I can’t run the method Resize on it.