Tutorial: Cool fading text in LuaZM

Just thought I’d make a little tutorial. This one is an easy way to make a nice fading text effect for a splash screen.

OK, so to start out, let’s define some function variables. I like to make them local because it is faster, but you can do whatever you want or just use them in their full size (zmg.*)

So, we’ll be needing, quite obviously, I hope, the zmg.drawText command. We are also going to need zmg.drawRectFill (for drawing the background), zmg.fastCopy, and zmg.makeColor.

fastCopy = zmg.fastCopy
drawRectFill = zmg.drawRectFill
makeColor = zmg.makeColor
drawText = zmg.drawText

OK, so now that we have our function variables, let’s create a variable with our color information in it.

color = {bg=makeColor(0,0,0),fg=makeColor(0,0,0)}

Let’s scrutinize that line of code a little. we are making the variable color an array, same as if I did color = {}. Inside is where the fun stuff happens. the bg= part let’s me get that variable by typing color.bg instead of color[1]. The makeColor part is simply converting RGB to 5-6-5 color, which would look something like this 0x0000.

You might be wondering why color.fg and color.bg are the same color. The reason for that is we want the text to fade in from the background, so color.fg is going to start out the same color as the background.

Now let’s dive into the real meat of the program.

First let’s make a loop to put everything in.

while exit~=1 do
end

That part shouldn’t require too much explanation. Basically its just making a loop that won’t break until exit==1.

So let’s put in our drawText command.

while exit~=1 do
drawRectFill(x,y,SCREEN_WIDTH,SCREEN_HEIGHT,color.bg)
drawText(1,1,"Hello World",color.fg,color.bg)
end

The first function is just going to draw a giant filled rectangle so we can have a colored (in this case, black) background.

The next function is drawText(). I made the x and y variables 1 but you can make them whatever you want. Our string is Hello World, but again, you can make it anything your heart desires. The last two arguments are (you guessed it!) the foreground and background colors.

“Hey,that code”, you say, “is going to do absolutely nothing!” And you’re absolutely right. So let’s go change it a little.

First, we have to put a little variable called i in there. This is how we are going to change the amount of blue is in color.fg. So, go ahead and put this right under color = { …

i = 0

And now let’s use that variable. Put this right before end at the bottom of the program.

i = i+1

Now let’s update color.fg. So go ahead and put this right after i = i+1.

color.fg = makeColor(0,0,i)

Lastly, let’s make the program break when i>255.

if i>255 then exit=1 end

So there you go! That’s the basic code, but you can go ahead and play around with it.

So, all the code, all together:

fastCopy = zmg.fastCopy
drawRectFill = zmg.drawRectFill
makeColor = zmg.makeColor
drawText = zmg.drawText
color = {bg=makeColor(0,0,0),fg=makeColor(0,0,0)}
i = 0

while exit~=1 do
drawRectFill(x,y,SCREEN_WIDTH,SCREEN_HEIGHT,color.bg)
drawText(1,1,"Hello World",color.fg,color.bg)
i = i+1
color.fg = makeColor(0,0,i)
if i>255 then exit=1 end
end

Advertisements
  1. No trackbacks yet.

Write comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: