Hello and welcome to a new tutorial. Today, we're
going to create a simple online leaderboard.
To do this, we'll be using a plugin
from Epic Games themselves. Go to "Settings" -> "Plugins" and activate the HTTP
Blueprint plugin, then restart Unreal Engine.
As our data storage, we'll use Dreamlo. It's free
and super easy to use. To create a leaderboard, simply click on "Get yours now"
(no registration needed).
There are several ways to implement an online
leaderboard. I've created a small list of options, each with its pros and cons. Except for
security, I believe we have a good free solution for small games or game jams.
Let's get started. First, create a new empty level and import an image for
visual aesthetics in this tutorial.
Now, let's create a new widget
called "WB_leaderboard."
We need a Canvas Panel, so simply drag it in.
Then add two images: one for the background and the other for our created leaderboard image.
Uncheck "Is Variable." Anchor the background to fullscreen, and adjust the color as per
your preference. I've chosen a dark blue.
Anchor the other image to the
left and select your texture.
Next, add a Vertical Box and a Text Block.
We'll use this to display player information, so position them roughly for now.
Name them "verticalbox_player" and "verticalbox_score" and activate "Is Variable."
Repeat this process for the score. Align them roughly and set a test value of 100.
Now, we need to display our widget. Open the Level Blueprint. Remove the "Tick" node. Create a
widget and choose our leaderboard. Set the owning player to your player controller, then add it
to the viewport. To display the mouse cursor, enable "Show Mouse Cursor" in the
Player Controller settings.
Inside our widget, we want to create a
way to enter and submit scores. For this, we need an Editable Text field to enter
player names, a button to submit the scores, and some text for labeling.
For our example, let's generate the score randomly by making it a variable.
You can design the button appearance by adjusting the image under "Image
Normal" and copying the values.
Let's take a look. Entering data works, but
we still need to program the submit button.
To have a score to submit, go to the
graph. Under "Event Construct," generate a random score and set the text with a random
integer value, in the range of 50 to 200.
After setting the score, we need to retrieve data
from the leaderboard. Create a new custom event, "GetLeaderboard," and execute it right
after generating the random score.
Dreamlo offers multiple ways to fetch data: XML,
JSON, Pipe, and Quote, which we'll use. Just enter the URL in your browser to see the results.
Now, let's fetch the data in Unreal. Search for "HTTP Request" and choose "GET" for the
method. Enter your Dreamlo address as the URL, and you can limit the output with "/10," for
example, to get only 10 scores in total.
Once the request is successful,
add a "Print String" node for testing. The results will appear above.
Next, we'll format the output to extract only the player names and scores as individual
strings. You can use "Replace" and "Parse Into Array" to isolate each data field.
With a "For Each Loop," you can iterate through the array. It may not be the cleanest
solution, but it gets the job done. Test the output, and you'll see that all values are
separated. Now, we need to filter them.
Create a new variable called
"Leaderboard_ArrayIndex." In our array, every 5th field holds the player name,
and every 6th field holds the score. So, check if our index matches the Leaderboard_Index
(0, 5, 10, etc.). Then, do the same for Leaderboard_Index + 1 to get the 1st, 6th,
11th, etc., values. This works when we increment Leaderboard_Index by 5 after each loop.
Perform another test, and don't forget to connect the element to the output. It should work now.
We have the name and the corresponding score.
I'll show you the process step by
step. I'll set a breakpoint.
This is the original result.
Now, without the commas.
And then, it's added to the array.
Now, I'll add a few more entries in the browser using the URL, and you'll see the results. Now you
understand why we need every 5th and 6th value.
To display this in our widget, dynamically
create a Text Block. Set its text using "Set Text" and use your player value. Add the Text
Block as a child to the Vertical Box and adjust the padding. You may need to play with the
values; try 50. If it looks good, you're all set.
Copy this process for the score area; it's
essentially the same. Just remember to change the Vertical Box from "Player" to "Score."
Next, let's program the new entries. It's quite simple. Name your variable and click
on the button's "On Click" event.
You can copy your HTTP request and change
it to "POST." The error message is normal; the node wants a string value for both
the body and the result body. Just create an empty string to specify the type.
With this URL, we can add new entries to the leaderboard. To adjust our values,
use "Format Text." Change "Carmine" to your player variable and "100" to your score
variable. Then, put this output in the URL.
Retrieve the "Score" and "Player" from your
variables and get the contents using "Get Text." Plug that into the URL.
In essence, that's it. Add a "Print String" for testing, and if the entry is
successful, let's reload our leaderboard by calling the "Get Leaderboard" function.
Let's test it with "John" and a score of "137," "alex2," and "noob." You'll see our print
string with "OK" in the top left and your entry correctly sorted in the leaderboard.
As mentioned, you can limit the entries. For example, if you only want to see the
top 3, you can do that. When set to 10, you'll see all 10 entries, or in our case, 8.
That's it! Thank you for watching.
