LÖVE


https://love2d.org./forums/

Color Fading

https://love2d.org./forums/viewtopic.php?t=77441

Page 1 of 2

Color Fading

Posted: Sun Mar 09, 2014 4:15 pm
by 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!

Re: Color Fading

Posted: Sun Mar 09, 2014 4:42 pm
by 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]}

Re: Color Fading

Posted: Sun Mar 09, 2014 4:45 pm
by 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

Re: Color Fading

Posted: Sun Mar 09, 2014 4:58 pm
by YGOFreak1997
Azhukar wrote: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 :)

Re: Color Fading

Posted: Sun Mar 09, 2014 5:03 pm
by Robin
I'd actually suggest:

Code: Select all

self.color = {unpack(self.startColor)}
Anyway:
YGOFreak1997 wrote: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.

Re: Color Fading

Posted: Sun Mar 09, 2014 5:07 pm
by YGOFreak1997
Robin wrote:I'd actually suggest:

Code: Select all

self.color = {unpack(self.startColor)}
Anyway:
YGOFreak1997 wrote: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 :/

Re: Color Fading

Posted: Sun Mar 09, 2014 5:16 pm
by Azhukar
YGOFreak1997 wrote: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

Re: Color Fading

Posted: Sun Mar 09, 2014 5:32 pm
by 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 ^^

Re: Color Fading

Posted: Sun Mar 09, 2014 5:53 pm
by Azhukar
YGOFreak1997 wrote: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)

Re: Color Fading

Posted: Sun Mar 09, 2014 6:04 pm
by 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 :rofl:

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?
All times are UTC
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited