Tweening Colors

Help and Feedback Scripting Support
,
#1

I’m trying to make a health bar, and when the player gets damaged I want the Gui color to go from green to red.

Any help would be appreciated!

#2

You can use the TweenService to tween from green to red on your health bar :

image
image925×731 51.7 KB

#3

Yes, I am aware of that, but I wanted to know how to script it, like to make it red once the player is low on health, and go back up to green when they are full.

Here is what I got so far:

function ChangeProgressBar()
	
	local currentHealth = Humanoid.Health
	local totalHealth = Humanoid.MaxHealth
	
	local progress = currentHealth / totalHealth
	
	local SizeInfo = TweenInfo.new(0.25, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, 0)
	local SizeProps = {Size = UDim2.fromScale(progress, 1)}
	local SizeTween = TS:Create(HealthBar, SizeInfo, SizeProps)
	
	local ColorInfo = TweenInfo.new(0.25, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, 0)
	local ColorProps = {}
	
	SizeTween:Play()
	
end

Humanoid.HealthChanged:Connect(ChangeProgressBar)
#4

Hmm, you could create a constant ratio of Health/MaxHealth where your script sets the TweenInfo color3 property to red. In addition since you want to have it going back to green at a certain ratio you could create a second constant for when it has to go back to green, like this (haven’t tested it) :

local low_Health_Ratio = 0.1 -- 10%
local normal_Health_Ratio = 0.5 -- 50%
local player_Is_At_Low_Health = false

local function get_Bar_Color3(health_Ratio)
	if player_Is_At_Low_Health then
		if health_Ratio >= normal_Health_Ratio then
			player_Is_At_Low_Health = false
			return Color3.new(1, 0, 0) -- red color
		end
	else
		if health_Ratio <= low_Health_Ratio then
			player_Is_At_Low_Health = true
			return Color3.new(0, 1, 0) -- green color
		end
	end
	
	return Color3.new(0, 1, 0) -- green color
end

function ChangeProgressBar()

	[...]
	
	local new_Bar_Color3 = get_Bar_Color3(progress) 

	[...]

	local ColorProps = {BackgroundColor3 = new_Bar_Color3} -- i suppose its BackgroundColor3

	[...]

end

Humanoid.HealthChanged:Connect(ChangeProgressBar)
#5

Your tweens isnt correctly formatted

Heres your tweens:

ocal SizeInfo = TweenInfo.new(0.25, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, 0)
	local SizeProps = {Size = UDim2.fromScale(progress, 1)}
	local SizeTween = TS:Create(HealthBar, SizeInfo, SizeProps)
	
	local ColorInfo = TweenInfo.new(0.25, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, 0)
	local ColorProps = {}

Assuming you dont want them to reverse back to green or that wierd stuff, this should work:

ocal SizeInfo = TweenInfo.new(0.25, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, 0, false, 0)
	local SizeProps = {Size = UDim2.fromScale(progress, 1)}
	local SizeTween = TS:Create(HealthBar, SizeInfo, SizeProps)
	
	local ColorInfo = TweenInfo.new(0.25, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, 0, false, 0)
	local ColorProps = {}

Plug that in to where the previous stuff was

might not work just by plugging them in, like the “false” stuff in the script, try retyping them in if it doesn’t work or color normally