Adding Online Leaderboards to Your GDevelop Game with LootLocker

Gdevelop
Leaderboards
Author image
Johannes Fornaeus 4 min read
Cover image

As part of our ongoing work to make sure LootLocker can be integrated into all popular game engines, we didn't want to wait until we have a full-blown SDK before giving the communities of GDevelop a chance to start playing around with our plug and play backend service. That's why we've created this guide to show how quickly you can integrate LootLocker leaderboards into your GDevelop game using JavaScript and ur REST APIs.

This guide will walk you through authenticating the player using Guest Login, uploading a player's score to the leaderboard, retrieving the leaderboard data and using both our stage (test) and live environments depending on the development stage of your game.

Before You Start

In this example we will use JavaScript to implement LootLocker with GDevelop and demonstrate:

  • How to authenticate a player
  • Handling a returning player
  • Retrieve leaderboard data
  • Upload a leaderboard score

From there, you can use this code as a base and build upon it.

An example project with this set up is available in the link below (extract and open in GDevelop).

Foo

Creating the Leaderboard in LootLocker

Before we write any code, we'll begin by creating a free LootLocker account, setting up a game in LootLocker, and creating a leaderboard.

  1. Create your free LootLocker account by signing up or following our guide. Follow the steps after creating your account to create your first game.
  2. Create a leaderboard by navigating to Systems, and then Leaderboards. Click the Create button create a leaderboard.

  • Fill in the the following information and click Save
  • Implementing Your Leaderboard in GDevelop

    Let's now implement the LootLocker leaderboard directly into GDevelop.

    1. Create two new scene-variables in GDevelop: score and leaderboardData.
    2. Create two new global variables in GDevelop: player_id and session_token.
    3. Add a new scene Event with condition At the beginning of the scene.
    4. Add a Javascript code block and insert the following code:
  • In the code above, replace your-game-api-key with your game api key, found on the LootLocker dashboard. You can locate this by navigating to the API tab in Game Settings.
  • Replace your-leaderboard-key with your leaderboard key that you see next to the leaderboard you created earlier in the guide in the LootLocker leaderboard menu.
  • Use this code when you want to upload a score.
  • Make sure you replace your-leader-board-key-here with your leaderboard key from the LootLocker leaderboard menu.
  • You're all set, now make an awesome game!
  • Switching Between Stage and Live Environments

    When you're ready to show your game to the public, it's good practice to change between Stage and Live environments. LootLocker has these two environments so that you can test your game in safety using the Stage environment, and then have a fresh backend for your players to interact with with the Live environment.

    You can switch between environments easily.

    1. Create a new leaderboard for the Live environment on the LootLocker Dashboard by clicking on the environment switcher in the bottom left corner of the LootLocker dashboard. Use the same leaderboardKey as with the leaderboard from the previous steps.

  • Change developmentMode to false in the authentication script we pasted into your project earlier in this guide.
  • Release your game!
  • Let LootLocker Level Up Your Game Even More

    Now that you've got LootLocker leaderboards implemented in your game, it's time to add a few more features to your game, like player progression or unlockable cosmetics and items. These all come out of the box, ready to be added to your game. Check out all of our available features on our website, and their corresponding REST APIs in our reference documentation.

    And of course, if you're stuck - we're always here to help. Reach out to us or better yet, join us on Discord.

    Stay up to date.

    Join our newsletter and get these posts sent directly to your inbox.