Color Fading

[YGOFreak1997]

Hey Guys, it's been a long time since I last dwelled here on the forums, but now I've got a question for you

First of all, the code for my class:

Code: Select all

------------------
-- // FloatingText \\ --
------------------
local FloatingText = {}
FloatingText.__index = FloatingText

------------------------
-- // Dependencies \\ --
------------------------

------------------------
-- // Declarations \\ --
------------------------


function FloatingText.new(o)
  local self = o or {}
  self.name       = self.name or "FloatingText"
  self.x          = self.x or 150
  self.y          = self.y or 50
  
  self.fadeTime   = 1
  self.velY       = self.velY or -120
  
  self.text       = self.text or "Chaos Factory"
  self.textSize   = self.textSize or 20
  self.font       = self.font or FONT.medium
  
  self.startColor = self.startColor or {r = 255, g = 255, b = 255, a = 255}
  self.endColor   = self.endColor or {r = 255, g = 255, b = 255, a = 0}
  
  self.visible    = self.visible or true
  
--Do not change! 
  self.color      = self.startColor
  self.fadeTimer  = 0
  self.removed    = false
  setmetatable(self, FloatingText)
  return self
end

function FloatingText:update(dt)  
  --Despawn timer
    self.fadeTimer = self.fadeTimer + dt
  
  --Despawn
    if self.fadeTimer > self.fadeTime then self:destroy() end
  
  --Movement
    self.y = self.y + self.velY * dt
  
  --Color fading
    self.color.r = self.startColor.r - ( (self.startColor.r - self.endColor.r) * self.fadeTimer / self.fadeTime )
    self.color.g = self.startColor.g - ( (self.startColor.g - self.endColor.g) * self.fadeTimer / self.fadeTime )
    self.color.b = self.startColor.b - ( (self.startColor.b - self.endColor.b) * self.fadeTimer / self.fadeTime )
    self.color.a = self.startColor.a - ( (self.startColor.a - self.endColor.a) * self.fadeTimer / self.fadeTime )
end

function FloatingText:destroy()
  self.removed = true
end


function FloatingText:draw()
  --Previous color settings (backup)
    --local r, g, b, a = love.graphics.getColor()
  
  love.graphics.setFont(self.font)  
  
  love.graphics.setColor(self.color.r, self.color.g, self.color.b, self.color.a)
    
  love.graphics.printf(self.text, self.x - self.font:getWidth(self.text) / 2, self.y - self.font:getHeight() / 2, self.font:getWidth(self.text), "center")
  
  --love.graphics.setColor(r, g, b, a)
end

return FloatingText

It's just for creating a small text flying upwards, for points or pickups and stuff. Now my problem is that the fadeout of the color or in this example the alpha value is waaay too fast. The fading happens in this rows:

Code: Select all

--Color fading
    self.color.r = self.startColor.r - ( (self.startColor.r - self.endColor.r) * self.fadeTimer / self.fadeTime )
    self.color.g = self.startColor.g - ( (self.startColor.g - self.endColor.g) * self.fadeTimer / self.fadeTime )
    self.color.b = self.startColor.b - ( (self.startColor.b - self.endColor.b) * self.fadeTimer / self.fadeTime )
    self.color.a = self.startColor.a - ( (self.startColor.a - self.endColor.a) * self.fadeTimer / self.fadeTime )

I don't quite know what is wrong here. In pseudocode, I take the starting color or alpha value and subtract the difference to the value I want to change it in multiplied by the time that has passed since the start.

Thanks in advance for every help and hint.

Greetings!

[Azhukar]

Do you understand what you're doing at this line?

Code: Select all

self.color = self.startColor

This makes color and startColor point to the same table, so any change to color also results in changing startColor.

What you could do is:

Code: Select all

self.color = {self.startColor[1],self.startColor[2],self.startColor[3],self.startColor[4]}

[adnzzzzZ]

I haven't looked at your code but you'd probably benefit from using a tweening library: http://vrld.github.io/hump/#hump.timer, https://github.com/kikito/tween.lua

[YGOFreak1997]

Do you understand what you're doing at this line?

Code: Select all

self.color = self.startColor

This makes color and startColor point to the same table, so any change to color also results in changing startColor.

What you could do is:

Code: Select all

self.color = {self.startColor[1],self.startColor[2],self.startColor[3],self.startColor[4]}

Umm, I don't know if I fully understand you, but to make an example, isn't what i'm doing with that line this:

Example = 2 seconds to fade completely, already over = 1 second.

color.a = startColor.a (255) - ( colorDifference(255) * timer (1) / fadeTime (2) )

this would result in:

color.a = 255 - 127,5
color.a = 127,5

and that's exactly what I want it to put out

I hope you understand what I'm trying to say

[Robin]

I'd actually suggest:

Code: Select all

self.color = {unpack(self.startColor)}

Anyway:

isn't what i'm doing with that line this:

No, not really. You see, if you do

Code: Select all

self.color = self.startColor

that means the two are the same thing, and so if you change self.color, you also change self.startColor. And you don't want that.

[YGOFreak1997]

I'd actually suggest:

Code: Select all

self.color = {unpack(self.startColor)}

Anyway:

isn't what i'm doing with that line this:

No, not really. You see, if you do

Code: Select all

self.color = self.startColor

that means the two are the same thing, and so if you change self.color, you also change self.startColor. And you don't want that.

Huh, I think I missed some basic programming stuff xD

If I do

Code: Select all

a = b

, just a gets changed, not b. Even though they are, in this example, the same afterwards, If I use my calculation from above, just the normal color table gets changed, not the startColor table :/

[Azhukar]

Huh, I think I missed some basic programming stuff xD

If I do

Code: Select all

a = b

, just a gets changed, not b. Even though they are, in this example, the same afterwards, If I use my calculation from above, just the normal color table gets changed, not the startColor table :/

In Lua tables are references.

http://www.lua.org/pil/2.5.html

[YGOFreak1997]

To help me understand things - could you explain to me what really happens unsing the example I posted above? Because I am not quite sure what you mean if you say that tables are only references. (Maybe it is like PIL says - I'm coming from C# )

Thank you

[Azhukar]

To help me understand things - could you explain to me what really happens unsing the example I posted above?

Code: Select all

a = {}
b = a
b.x = 1
print(a.x)

[YGOFreak1997]

Oh boy, now I understand what you wanted me to tell and now I understand what Robin tried to suggest me... You meant the declaration of the self.color table and I thought that you were referencing to my calculations all the time

I'll try this unpack thingy to start with...

But to understand things: If I assign a table to another variable the this "new" table is just a reference to the old one?