Extra note: If you experience errors after copying the codes highlighted yellow it may be because the indents of the text get published as spaces instead of tabs, you will need to delete all of these spaces and indent it properly in your text editor.

=== TUTORIAL #4 ===
Text and Variables

— Step 1: Understanding Variables
Variables in their simplest forms are words that have been declared as capable of holding words and numbers within them, in the case of foregrounds you don’t need to go through any processes of declaring them, you just need to tell the game what to do with whatever variable you make.

The first thing to do is to open up your default.xml file and instead of making a layer, we will make a bitmap text tag between your children tags.
The file you select will be a system font, more often than not the font listed below is used across all themes.
<BitmapText
     File="_eurostile normal"
     Text="Your Text Here"
     InitCommand=""
/>

In order for variables to be declared we need to change the structure of the commands we use, we will be changing the command to a LUA function.
This example shows that a function targeting itself starts when the InitCommand starts, 2 lines below that indicates that the function has ended followed by the quotes to close the whole command off.
<BitmapText
     File="_eurostile normal"
     Text="Your Text Here"
     InitCommand="%function(self)

     end"
/>

Everything written between the start of the function and “end” will be very similar to the horizontal sequencing of a regular command, except it lists vertically.
Let’s say we want to write “x,320;y,240;linear,5;x,0;y,100;” using this new method, it would look like this.
<BitmapText
     File="_eurostile normal"
     Text="Your Text Here"
     InitCommand="%function(self)
     self:x(320);
     self:y(240);
     self:linear(5);
     self:x(0);
     self:y(100);
     end"
/>

— Step 2: Setting Text and Variables
Now that you understand the formatting of functions and how variables work, now it’s time to work with variables.

Let’s say you want to make a timer that increases by 1 every 0.1 seconds, you can do that by bouncing an increasing variable between commands.
<BitmapText
     File="_eurostile normal"
     Text="Your Text Here"
     InitCommand="%function(self)
     TimerVar = 0;
     self:sleep(0.1);
     self:queuecommand('Bouncer');
     end"

     Bouncer2Command="%function(self)
     TimerVar = TimerVar + 1;
     self:sleep(0.1);
     self:queuecommand('Bouncer');
     end"
/>

The next step from here is showing the variable in your text, this is performed with the settext command.
Setting the text equal to the variable immediately after it is changed achieves a timer effect.
<BitmapText
     File="_eurostile normal"
     Text="Your Text Here"
     InitCommand="%function(self)
     TimerVar = 0;
     self:settext(TimerVar);
     self:sleep(0.1);
     self:queuecommand('Bouncer');
     end"

     Bouncer2Command="%function(self)
     TimerVar = TimerVar + 1;
     self:settext(TimerVar);
     self:sleep(0.1);
     self:queuecommand('Bouncer');
     end"
/>

You should now understand the majority of how to make basic foregrounds, the rest is up to you!
Everything beyond this is a matter of research; there are many more parameters, tweens, functions and conditions to learn but this covers the basics and the majority of what you need to work with.
If you need to know more, take a look at any Stepmania or ITG theme, they are all made the exact same way.

Alternatively, here is a great source of commands for you to tinker with. A lot of it is fairly undocumented but in the same sense a lot of it is fairly self explanatory:
http://kki.ajworld.net/wiki/Commands:Main