Changing the colour of a button when clicked

[aezys]

I'm trying to make a button change colour for a few seconds after it has been clicked but I'm not sure on how to do it.
Currently this is part of my button class code, I know the click detection works because it also plays a sound when clicked:

Code: Select all

function Box:isHovered(x,y)
    if x > self.X and x < self.X + self.width and y > self.Y and y < self.Y + self.height then
          return true
       end
end

function Box:click()
    if love.mouse.isDown("1") then
        local x, y = love.mouse.getPosition()

        if self:isHovered(x,y) then
            self.sound:play()
            self.clicked = true
        end
    end
    
end

function Box:render()
    if clicked then
        love.graphics.setColor(lighterYellow['r'], lighterYellow['g'], lighterYellow['b'])
    else
        love.graphics.setColor(self.colour['r'], self.colour['g'], self.colour['b'])
    end   
    
    love.graphics.rectangle('fill', self.X, self.Y, self.width, self.height)
end

In main's update function I'd just call box:click().
Now, I tried using that if-else statement in box:render() to change the colour but I think it doesn't work because it'd change the colour for a frame and then it'd go back to normal. Is that right?
Honestly I'm stuck, could anybody please give me some advice?

[Nikki]

'for a few seconds after it has been clicked' -> You need some way of keeping track of time.
In your Box:click() function you could set some duration lets say 2.0 for 2 seconds

Then in your render function or update function if there was one you could update that duration, in other words subtract the current delta from it.

Code: Select all

function Box:update(dt)
  self.duration = self.duration - dt
end

[aezys]

Thank you for the reply! I added the code you said and then I noticed that i wrote clicked instead of self.clicked.
And I think that's because clicked wouldn't be defined and so the return value would be false, right? I'm kind of a noob sorry '.
Anyway, now the if-else statement is like this:

Code: Select all

if self.clicked and self.duration > 0 then
        love.graphics.setColor(lighterYellow['r'], lighterYellow['g'], lighterYellow['b'])
    else
        love.graphics.setColor(self.colour['r'], self.colour['g'], self.colour['b'])
    end 
 

but how can I make the button change colour more every time it gets clicked instead of just the first? Until now, self.clicked remained true after the button is clicked once. So I tried having the function like this:

Code: Select all

function Box:render()
    if self.clicked and self.duration > 0 then
        love.graphics.setColor(lighterYellow['r'], lighterYellow['g'], lighterYellow['b'])
    else
        love.graphics.setColor(self.colour['r'], self.colour['g'], self.colour['b'])
    end   

    -- this is what I added
    if self.duration < 0 then
        self.clicked = false
    end
    
    love.graphics.rectangle('fill', self.X, self.Y, self.width, self.height)
end

but the result is still the same, it changes only the first it's clicked. Any idea why?

[pgimeno]

Maybe you also need to set self.duration back to the total duration?

[aezys]

Ohh, I did not think of it. It works now, thank you so much!