UE4 Tips: Online Leaderboards

You guys wanted more UE4 Tips Tutorials so there you go! This time I will show you how to create Online Leaderboards where:

  • It’s done fully in Blueprints without C++ code,
  • You don’t need to have any server,

This solution is good for prototyping and getting scores of other players. If you are thinking about good leaderboard solution you would need to create your own server.

Dreamlo Leaderboards Solution

I have found great and free leaderboard solution which should work cross-platform.

http://dreamlo.com/

You can create leaderboard on this site and using custom URL add or get the scores.

Installing JSON Plugin

I will use this great JSON Query plugin from Stefander.

Be sure to download the version matching your engine. I’m using 4.8.3. You can download the plugin for this version here.  Just unzip the file to YourGameProjectPlugins

If you need more information about plugins as always read official documentation. After installing plugin make sure you have JSON category in Blueprints.

jsoninstalled

Preparing UMG

Crete new UMG Widget named Debug_Score.

  • Delete Canvas Panel,
  • Add Horizontal Box,
  • Add TextBlock named TextBlock_Name (and put it into HorizontalBox. Make sure IsVariable is set),
  • Add TextBlock named TextBlock_Score (and put it into HorizontalBox. Make sure IsVariable is set)

hierarchy

Now to go graph and add those variables:

  • Name (Text, Editable, Expose on Spawn),
  • Score (Text, Editable, Expose on Spawn),

And in construct set the variables to TextBlocks:

construct

You can close this Widget. It will be added to vertical box in another UMG.

Create new UMG Widget named Debug_Leaderboards.

Here’s the hierarchy:

Getting Scores

Open Event Grap and add one variable:

  • JsonResult (Json Field Data),

Add OnClicked event on Refresh button:

getjsondata_refresh

getjsondata

To test this out simply add some scores using URLs and try to get the scores using UMG.

Adding Scores

Adding scores is really simple – just custom URL with name and score. The problem is that UE4 Blueprints doesn’t have any HTTP Request functionality so we will use a nasty hack here.

Create new  Media Player named HackMediaPlayer.

mediaplayer

Open it and disable Looping.

In Debug_Leaderboards Graph add new variable:

  • HackMediaPlayer (Media Player, link to HackMediaPlayer created one step earlier) ,

Add OnClicked event to SubmitScore button:

submitscore

It’s nasty hack but it’s working. Hopefully Epic will create some Blueprint nodes to call HTTP URLS without opening default web explorer.

And that’s all!

Final Result

Now you need to add Debug_Leaderboards UMG to viewport. You can do this in Level Blueprint like me:

openingwidget

Creating ShooterTutorial takes a lot of my free time.
Buy Now Button
If you want you can help me out! I will use your donation to buy better assets packs and you will be added to Credits /Backers page as well.

Implementing game is taking time but writing about it is taking much more effort!

6 thoughts on “UE4 Tips: Online Leaderboards

  1. Pingback: Adding PlayFab Online Leaderboards | Shooter Tutorial

  2. Hi Mate, great tutorial. any idea how to pack to android? im getting a load of error messages. error: no such file or directory: ‘C:/Users/David/Documents/Unreal Projects/brosatwar/Plugins/JSONQuery/Binaries/Android/UE4-JSONQuery-armv7-es2.a

Leave a Reply