# How to make fading text?

How would I go about drawing text on someones screen and making it fade away slowly?

Change the alpha values?

Well obviously, but what is a good method to get the alpha value to decrease smoothly?

Check out ralle’s post, http://www.facepunch.com/showthread.php?p=27508761#post27508761, it has the concept down.

To be completely honest I hardly understand the mechanics of that.

My skill in math is very low.

One sec, I’ll post a snippet from my DeathNotify usermessage and explain it to you.

Cool, thanks.

Is this actually you lauscript? You seem to be asking a lot of simple questions recently, which someone like you should know the answers to.

[lua]local queue = {}
local deathOpac = 0

function DeathNotify(msg)
deathOpac = 255
table.insert(queue, 1, msg)

``````timer.Destroy("preDeathFade")

if deathOpac &gt; 0 then deathOpac = deathOpac - 1 end
if deathOpac &lt;= 0 then
queue = {}
end
end)
end)
``````

end

if deathOpac <= 0 then return end

``````for k,v in pairs(queue) do
draw.DrawText(v, "deathFont", ScrW() - 19, 11 + (20 * (k - 1)), Color(0, 0, 0, deathOpac), TEXT_ALIGN_RIGHT)
draw.DrawText(v, "deathFont", ScrW() - 20, 10 + (20 * (k - 1)), Color(230, 0, 0, deathOpac), TEXT_ALIGN_RIGHT)
end
``````

end)[/lua]

Ok, this used to be a usermessage function but thats kinda beyond the scope of what you need to learn so I just removed all the umsg stuff.

Basically this function is called, given a string as an argument (msg), and then the logic goes like so:

On lines 1 and 2, we declare the local variables queue, and deathOpac. queue is a table that will hold all the death notifications (So that we can show more than one at a time), and deathOpac will be the opacity of the text we’ll draw.

On line 5, we set the deathOpac variable to 255, because this variable will be used as the opacity for our notification to be drawn, and then on line 6 we add the message that was sent to the function into the first position in the queue table (That way the most recent messages show on top).

If the preFadeTimer or the deathTimer are already running, we stop them from running on lines 8 and 9, that way timers dont overlap eachother and start messing up the fade.

We then create the “preDeathFade” timer on line 11, which is basically a 3 second delay before the death notifications start to fade out. Normally I would use timer.Simple(3, function() end), but since you cant stop timer.Simple()'s, it’d make preventing timer overlap difficult.

Line 12, we create the “deathFade” timer, which runs every 0.001 seconds, and runs 255 times, and basically does this:

If the deathOpac is greater than zero, subtract one from it.
And if the deathOpac is less than or equal to 0, then stop the fade timer and reset the queue.

This is what gets our fade effect, and resetting the queue makes it so that we don’t see old notifications once they’re gone.

Then on line 22 we create the “HUDPaint” hook, which is how we’re rendering the text. You can use a panel’s Paint member and do the drawing in there, or use a similar render hook, but we’re using HUDPaint for this example. Logic is as follows:

If the deathOpac is less than or equal to zero, i.e. we’re not going to be seeing anything, then end the function and dont bother drawing invisible text.

Then we loop through the queue of messages, and draw the messages (v) using the deathOpac as the opacity, so that it fades. “deathFont” is a font that is defined earlier on in the file.

As you can see, the Y position (vertical) of the text is kinda weird, this stuff basically just makes it so that every entry after the first one is 20 pixels down from the one above it, so that it all looks nice.

Anyway, sorry I totally went out of the scope of what you needed to learn haha, but hopefully this explains it for you.

Certain fields I’m expertise in, other fields I am not. Especially fields that happen to be about math. This is one of the things I don’t know how to do, so I’m learning how to do it.

And yes, it is actually me.

[lua]local starttime
if not starttime then starttime = CurTime() end

``````local fract = (CurTime() - starttime)/ fadeouttime
draw.SimpleText("Fading out..." , "ScoreboardText" , ScrW() / 3 , ScrH() / 2 , Color(255 , 255 , 125 , 255-fract*255))
``````

end )[/lua]

And then if you want it to fade in and out, use math.sin. You’d use the absolute value as negative values are no use to you.

http://dl.dropbox.com/u/9104987/abssin.png

Edit: 5 minute :ninja:

Kopimi that made perfect sense, thankyou. And as for the scope of what i needed to do, it’s better i learn more than i need to learn to better understand what i need to learn. If that makes sense…

Wowza, that blows me out of the water :o

I still dont understand math.sin lol D:

math.sin(x) = <Graph of sin graph at x>

This is always between 1 and -1.

The graph continues and will always be relative to 360 degrees unless the period of the wave is decreased. So the idea is you feed in a number that constantly increases (CurTime does the trick) and you will get a gradual change returned - the key use is that this number is always between 1 and -1.

How would you stop math.sin from doing it’s thing if it hit’s 0?

It’s thing?

Thanks FlapJack, I just learned something

By thing i mean changing value, so when it goes up to 1, then when it drops and reaches 0 stop it.

TBH I dont think you should be using math.sin for this really

I’m not i’m just curious for future use.