Creating progressing leaderboards

[Avator]

If you have checked the leaderboard's features, you will see there are a few new nifty tricks available. The leaderboard and multiboard of Warcraft III are here merged into 1 leaderboard with functions of both of them, and more. In here, I will explain how these features work and how to apply them correctly.

Preparations

The first steps are pretty much the same as in Warcraft III World Editor. So we start with creating the variables. First of all, we need a variable for the leaderboard. This has to be a global variable, since we need to refer to it when we edit it's content over time in another trigger. So left-click the left part of the screen where your Melee Initialization trigger is, and then press Ctrl+B to create a new variable in that list (next to Melee Initialization). Since it's in that list, it is a global variable. For the ease of this tutorial, we will just call our leaderboard variable 'Leaderboard test'.
In the screen next to it, you will see the properties of the variable you created. In the Type drop-down menu, you select Leaderboard. We will not need to set any arrays, and there's nothing we can or need to do with the initial value. So if you selected the Type, you've got that variable covered.
Now in this tutorial, we want to create a value in the leaderboard. Something that changes as the game progresses. So we create another global variable names 'Leaderboard progress'. We will make this a Real type variable, because it's more accurate then integer and is the default counting type for leaderboard values. Also with this variable, we will not need to do anything else but to set the variable Type to Real.

With these 2 variables, we have all we really need for a decent leaderboard. So it's time to start triggering.
Obviously, the first thing we're going to do is clear the Melee Initialization of all those annoying melee triggers and create a new trigger: Leaderboard - Create Leaderboard (This means the function is 'Create Leaderboard', and can be found in the category 'Leaderboard'). In this example we will just create 1 row with 3 columns. This gives us 3 items to edit: 1 for the player name, 1 for the progress bar, and 1 for the progress in numbers. Give it a name (like Progress) and a color (this color will only effect the text color of the leaderboard name, which is in my case 'Progress'. The color of the leaderboard will always be the same, unless you edit the UI with imports).
With a leaderboard created, we set Leaderboard test as (Last Created Leaderboard). This is obviously done with the all-powerful Set Variable command.

With this done, we have a trigger list like this:

• Melee Initialization
• Leaderboard test = No Leaderboard <Leaderboard>
• Leaderboard progress = 0.0 <Real>

And we have a Melee Initialization trigger that looks like this:

• Melee Initialization
  • Events
    • Game - Map initialization
  • Local Variables
  • Conditions
  • Actions
    • Leaderboard - Create a leaderboard with 3 columns and 1 rows, with the name "Progress", and using (73%, 19%, 91%) color.
    • Variable - Set Leaderboard test = (Last created leaderboard)

Creating the content

Now we're getting to business. With 3 items to fill, let's get started with the player name. This is obviously text, we we create a command Leaderboard - Set Leaderboard Item Text. We want the text in the 1st column at the 1st row. The text will be Player - Name Of Player. We simply put up player 1 (which is you) as the player who's name we want and we're done. In-game, it will show as Local player. Once you go multiplayer or you have a single player account name, it will most likely change to that player name. I haven't tested this though, but we will find out once the game is released.

At the 2nd item, we're going to get a progress bar. This will be a visual bar that increases as the progress value does. We will create a new command Leaderboard - Set Leaderboard Item Progress Range. The leaderboard is (again) Leaderboard test, the bar will be shown in column 2 of the 1st row, and we want it to range from 0.0 to 100.0, which will be easier to indicate a percentage. Now with a bar, there's no default length. It's all up to you to decide how long this bar will be. That is why our next command is Set Leaderboard - Set Leaderboard Column Width.

With this command, we set a fixed length for the column, which will automatically be the length of the progress bar in it. We have all the window space in the world (or in the window actually) to create the bar as long as we like. But to keep it decent, let's just set the width of column 2 to 25% of the screen. columns with text will automatically adjust to the width of the widest text in the column, so in this example we don't need to set those column's width. Now the bar will not show until you tell it to show itself. This final touch on preparing the progress bar is done with the Leaderboard - Show/Hide Leaderboard Item Progress Bar command. We obviously have to show the progress bar for Leaderboard test, which is located at column 2, row 1. With this done, you can enjoy an empty bar! Thats hard to beat, huh?

The 3rd and last column will show the same progress as the progress bar, but then in numbers. This is probably a very recognizable part from World Editor multiboards. For the preparation part though, we only need to set up the base, which is done again by using the Leaderboard - Set Leaderboard Item Text. In Leaderboard test, we set the text of column 3, row 1 to "0/100".

The Melee Initialization trigger should now look roughly like this:

• Melee Initialization
  • Events
    • Game - Map initialization
  • Local Variables
  • Conditions
  • Actions
    • Leaderboard - Create a leaderboard with 3 columns and 1 rows, with the name "Progress", and using (73%, 19%, 91%) color.
    • Variable - Set Leaderboard test = (Last created leaderboard)
    • Leaderboard - Set Leaderboard test item text at column 1 and row 1 to (Name of player 1)
    • Leaderboard - Set Leaderboard test item progress bar at column 2 and row 1 to range from 0.0 to 100.0
    • Leaderboard - Set width of 2 column in Leaderboard test to 25.0 (% of the screen)
    • Leaderboard - Show progress bar for Leaderboard test item at column 2 and row 1
    • Leaderboard - Set Leaderboard test item text at column 3 and row 1 to "0/100"

Making the leaderboard dynamic

With that done, we have a working leaderboard in Starcraft II. However, it's not doing anything yet. That's about to change. We're going to change the progress text and bar in this chapter with a new trigger.

First thing to do is creating a new trigger that will change the data of the leaderboard over time, and will adjust it on the screen. So create a new trigger (Ctrl+T) and let's name it "Progress". In this trigger, we want to adjust the bar over time. Now once per second will be a bit boring, so let's give it a bit more power and let it activate 4 times per second. Create an event Timer - Periodic Event (just like in the World Editor), and make this trigger run every 0.25 seconds of the Real Time.

Next, for the actions, we need to set the progress value. This is why we created the Leaderboard progress variable. We want this value to go up with 1.0, every time the trigger runs. So set Leaderboard progress = (Leaderboard progress + 1.0).
This also comes with a problem: We have a maximum of 100 at the progress bar. This is easily fixed with an If/Then/Else command. If Leaderboard progress > 100.0, then set Leaderboard progress = 0.0 .

With the progress value set in this trigger, we just have to apply it to the items in the leaderboard. Create the command Leaderboard - Set Leaderboard Item Progress Value and set the progress value of column 2, row 1 in leaderboard test to our Real variable: Leaderboard progress. However, these changes are not applied until you show the progress bar again. You can just copy the Show Leaderboard Progress Bar command from the Melee Initialization trigger and paste it right here. Now, every time the trigger runs, the value will change and the progress value of the progress bar will change along.

For the text, we use the same command as we created it in the preparations, Set Leaderboard Item Text, but instead of the text "0/100", we set the text to ((Text(Leaderboard progress) with 0 decimal places) + "/100"). These are 2 substrings. 1 part is the Real variable 'Leaderboard progress' converted to Text, and the other part is simple "/100" text. I set the decimal places (amount of number behind the comma) to 0, but if you increase your progress value with decimal numbers (like 0.5), you can increase the shown accuracy by setting the decimals to 1, more, or set it to Any Precision.

Your Progress trigger should now look like this:

• Progress
  • Events
    • Timer - Every 0.25 seconds of Real Time
  • Local Variables
  • Conditions
  • Actions
    • Variable - Set Leaderboard progress = (Leaderboard progress + 1.0)
    • General - If (Conditions) then do (Actions) else do (Actions)
      • If
        • Leaderboard progress > 100.0
      • Then
        • Variable - Set Leaderboard progress = 0.0
      • Else
    • Leaderboard - Set Leaderboard test item progress value at column 2 and row 1 to Leaderboard progress
    • Leaderboard - Show progress bar for Leaderboard test item at column 2 and row 1
    • Leaderboard - Set Leaderboard test item text at column 3 and row 1 to ((Text(Leaderboard progress) with 0 decimal places) + "/100")

Optional feature

With this done, we have a complete dynamic leaderboard. If we want, we can add a little extra tint to the leaderboard, by giving the progress bar a color that changes over time.

In your Melee Initialization trigger, you create the command Set Leaderboard Item Progress Color. This is (as you should now by now) for Leaderboard test, in column 2, row 1. Set the color to whichever color you want and keep it at step 1. This way, your progress bar color (the bar, not the border) will be that color at all times. Currently, I believe there's no way to set the progress bar to a specifically wanted color. I hope Blizzard will have done something about this in the retail version.

Now here comes the fun part: Changing the bar's color over time. You copy the same Progress Color command you just created. In this copy, you change the color to the one you want it to change to over time. The first color will be the color the bar starts with while filling up. Set the step of this new command to step 2.
IMPORTANT: If the colors chosen between 2 steps are too different, the color of the bar will go crazy and you'll likely get a very flashy, but dull color show for the first quarter of the bar's progress. To avoid this, create some steps in between to 'guide' the colors to create a more natural flow. The more the colors differ, the more steps you have to create between them.
Also, be aware to set a color for every step. If you create step 1, 2, 3 and 5, then the computer will automatically create a step 4 where the progress bar goes black (it disappears on the background).

It will require quite some steps to create a constant, perfect flow. In this example I used 5 gradual steps, which shows a decently acceptable color flow. My Melee Initialization trigger now looks like this:

• Melee Initialization
  • Events
    • Game - Map initialization
  • Local Variables
  • Conditions
  • Actions
    • Leaderboard - Create a leaderboard with 3 columns and 1 rows, with the name "Progress", and using (73%, 19%, 91%) color.
    • Variable - Set Leaderboard test = (Last created leaderboard)
    • Leaderboard - Set Leaderboard test item text at column 1 and row 1 to (Name of player 1)
    • Leaderboard - Set Leaderboard test item progress bar at column 2 and row 1 to range from 0.0 to 100.0
    • Leaderboard - Set width of 2 column in Leaderboard test to 25.0 (% of the screen)
    • Leaderboard - Show progress bar for Leaderboard test item at column 2 and row 1
    • Leaderboard - Set Leaderboard test item text at column 3 and row 1 to "0/100"
    • Leaderboard - Set Leaderboard test item progress bar color at column 2 and row 1 to (26%, 90%, 27%) for step 1
    • Leaderboard - Set Leaderboard test item progress bar color at column 2 and row 1 to (26%, 91%, 91%) for step 2
    • Leaderboard - Set Leaderboard test item progress bar color at column 2 and row 1 to (26%, 28%, 91%) for step 3
    • Leaderboard - Set Leaderboard test item progress bar color at column 2 and row 1 to (89%, 25%, 91%) for step 4
    • Leaderboard - Set Leaderboard test item progress bar color at column 2 and row 1 to (91%, 25%, 27%) for step 5

This was a tutorial in how to create a progressing leaderboard. The triggers can be found back in the map, which I attached to this post.

 

[PurgeandFire]

Nice job. It is well explained and I believe detailed enough to be approved.

Tested the map and it works fine.

~Approved.