How to detect a value deduction or addition (life system) and add changes in ui image

Help and Feedback Scripting Support
1

Hello! I’m trying to make a life system that gives you 3 lives.

I need help on how to detect if a life deducted or added and how to apply the changes into a ui image .

Example: if a life is dectucted (life.Value = life.Value - 1) then a heart in ui frame get destroyed
but if a life get added another heart get added to the ui frame.

Screen Shot 2020-12-21 at 12.47.20 PM
Default image

Screen Shot 2020-12-21 at 12.47.58 PM
Deduction image

Screen Shot 2020-12-21 at 12.50.52 PM
the ui in explorer

2

Look in here and see if its of any help IntValue | Documentation - Roblox Creator Hub

2 Likes
3

thank you help a little in the first one but can you help me with the 2nd part of my question please?

4

Just set the transparency of the third heart to 1 when a life is lost. Check the options for transparency of the heart in the properties tab and change the values as you see fit. You could introduce a loop that makes the heart slowly fade out. ImageLabel | Documentation - Roblox Creator Hub

1 Like
5

Ik how to do that but im unsure how do I make 1value apply to each heart

6

so insert a local script in plrframe do this

repeat wait() until game.Players.LocalPlayer.Character
plr = game.Players.LocalPlayer 
c = plr.Character
humanoid = c:WaitForChild("Humanoid")
LifeThing = script.Parent.Backround
humanoid:GetPropertyChangedSignal("Health"):Connect(function()
      if humanoid.Health <= 75 then
       LifeThing.Life4.Visible = false
       elseif Humanoid.Health <= 50 then
         LifeThing.Life3.Visible = false
       elseif Humanoid.Health <= 25 then
         LifeThing.Life2.Visible = false
        elseif Humanoid.Health <= 0 then

           LifeThing.Life1.Visible = false
end
end)
This should work and make sure there is a fourth gui and call it life4
2 Likes
7

Ah. Just detect what the value is

if intvalue.value == 1 then
 -- hide all the hearts except for the last one
heart1.Imagetransparency = 0
heart2.Imagetransparency = 1
heart3.Imagetransparency = 1
elseif intvalue.value == 2 then
 -- only hide the third heart
heart1.Imagetransparency = 0
heart2.Imagetransparency = 0
heart3.Imagetransparency = 1
elseif intvalue.value == 3 then
 -- Unhide all hearts
heart1.Imagetransparency = 0
heart2.Imagetransparency = 0
heart3.Imagetransparency = 0
end

Note: this is not the most efficient way to do this, but it is the easiest to understand

2 Likes
8

Try putting something like this in a local script under “Background”

local Background = script.Parent
local lifevalue = -- make an int value, define it, and change that int value whenever u want to change the Gui. 
local lastlife = lifevalue.Value --We will use later to detect if the lives increased or decreased

lifevalue.Changed:Connect(function()
       if lifevalue > lastlife then --we know that they gained a life 
       Background:FindFirstChild("Life"..lifevalue.Value).ImageTransperancy = 0 --say they now have 2 lives we will take "Life2" and make it visible

      else -- we know that they lost a life
       Background:FindFirstChild("Life"..lifevalue.Value+1).ImageTransperancy = 1

       end
       lastlife = lifevalue.Value
end)
1 Like
9

Here’s a fun little idea:

  • Make the hearts into PNG frames without the pink bits
  • Create a textButton and make the background completely pink
  • Change the length of the textButton accordingly to life.Value

textButton.Size = UDim2.new(X.Scale - X.Scale/life.Value, X.Offset, Y.Scale, Y.Offset)

1 Like