Felgo Crash Course Lesson 5 - How to increase player retention & downloads in 10 minutes

Today's lesson is about Felgo Game Network: it helps you to make your players return to your game more often and to better engage players in your game. How you ask?

Well, there are many ways Felgo Game Network can help you achieving these goals and today I'll show you two of them: achievements and leaderboards.

You might know these game design twists to make your game more fun and engaging for your players from other services like Game Center, however, in Felgo Game Network there are a couple of advantages you can use in your games today:

  • No Extra Accounts or Registrations Required: Players do not need to create an extra account to compare their highscores or achievements across platforms, which leads to high usage. A login with Facebook is available, but not a requirement for players to use the gaming services. This is a key benefit over other gaming services forcing a registration: in our games we have seen high drop-out rates up to 60% of players who do not use other services because of privacy concerns or feeling unconfident connecting a game with their Facebook account - with Felgo Game Network you can also satisfy these players!
  • Full Offline Support: Highscores, achievements and WebStorage can be used even when your players have no Internet connection and get synced automatically as soon as Internet connection is available again.
  • Fully customizable UI: Felgo Game Network comes with a ready-made UI so you can integrate it in 10 minutes in your game. However, with the strength of QML you can fully customize all views to your game easily and give it an extra-polished look.

  • Export Player Data: You can export your player data and use it for example for sending newsletters to bring your players back to the game, or to promote your other games with personal emails.
  • Simple QML API: Use properties and signals to get notified when important things happen, e.g. when the player connected with Facebook, reached a new highscore or unlocked an achievement.
  • Sharing to Game Center: With a single API call, you can report your game progress to the Felgo Game Network and also to Apple Game Center. So your players can use both their familiar game service on iOS and also compare their progress with players on other platforms.
  • Easy Facebook Integration: Let your players connect with Facebook in a single API call. We have integrated posting the player's score and achievements to your player's timeline, so the most important Facebook functionality to bring new downloads and make your players return to your games is already built-in.

  • Cloud Storage: With the WebStorage component, storing your data in the cloud is as easy as it can be: you can use it to synchronize your player's data across multiple devices or to change the balancing of your game remotely from our Web Dashboard, without the need to release a new update to the app stores.
  • Cross-Platform Leaderboards: In most games players can reach highscores representing how well a player has done in the game. With Felgo Game Network you can use unlimited Leaderboards to let players compare against each other in a competitive way and brag about it on Facebook, keeping them playing. You can either display all scores across all platforms on one leaderboard or filter the leaderboards based on platform, time or users.

In the next quick steps, I'll show you how to add leaderboards and achievements to your game in less than 10 minutes!

Step 1: Create a Game in the Game Network Dashboard

Click here, open the Game Network in the Developers Area top navigation of the Felgo website in your browser, to see how your games are doing and to create a new game powered with Felgo Game Network.

Press the New Game button and enter a Game Title and Game Secret for it as shown in the following image. You can leave the Facebook fields empty for now, we will get to that in the next lesson *spoiler-alert*. ;)

The Game Title you entered is just to distinguish between your games in the dashboard. The secret and the generated gameId you will see in the next view after you pressed the Create button, are required for the FelgoGameNetwork component in the next step.

Step 2: Add the FelgoGameNetwork Component

You can now switch from the browser to Qt Creator and add the FelgoGameNetwork component in your main qml file, like in the following example:

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {

   FelgoGameNetwork {
     // created in the Felgo Web Dashboard
     gameId: 5
     secret: "abcdefg1234567890"
   }

   // add other components like the EntityManager here

   Scene {

     // add your game functionality here

   }
 }

Step 3: Add the GameNetworkView Default UI

After adding the FelgoGameNetwork component, the next step is to add a view for your game's leaderboards, achievements and player profile. The easiest way to do this, is to use the GameNetworkView component, the default view that comes with the Felgo SDK. The following example shows how to add it in the scene and how to show it in your game.

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {
   // add other components like the EntityManager here

   FelgoGameNetwork {
     id: gameNetwork
     // created in the Felgo Web Dashboard
     gameId: 5
     secret: "abcdefg1234567890"
     gameNetworkView: myGameNetworkView
   }

   Scene {
     id: scene
     // add your game functionality here

     SimpleButton {
       text: "Show Leaderboards"
       onClicked: {
         // open the leaderboard view of the GameNetworkView
         gameNetwork.showLeaderboard()
       }
     }

     GameNetworkView {
       id: myGameNetworkView
       anchors.fill: scene.gameWindowAnchorItem

       onShowCalled: {
         myGameNetworkView.visible = true
       }

       onBackClicked: {
         myGameNetworkView.visible = false
       }
     }// GameNetworkView

   }// Scene
 }// GameWindow

When you run this project, you will see the following image:

In the code changes above, the GameNetworkView component was added and set as gameNetworkView property. If the back button is pressed, the normal game scene is shown again with a single button to show the leaderboard. In the GameNetworkView top navigation, you can toggle between the leaderboard, achievement and profile view.

Step 4: Add Leaderboards

In this step, we add a button to increase the player's highscore and show the current highscore.

You can use leaderboards in your game to give your players the possibility to compare their highscores across platforms. This ultimately increases your player retention: your players will return to your game more often and play more and longer.

The minimum usage is to report a new score with reportScore() and then show the score in the LeaderboardView as part of the GameNetworkView with showLeaderboard().

Add this code to your previous game Scene:

 Scene {
   id: scene

   // add your game functionality here
   // for this simple example we simulate the game logic with buttons
   // place the buttons below each other in a Column with little spacing in between
   Column {
     spacing: 3

     SimpleButton {
       text: "Show Leaderboards"
       onClicked: {
         // open the leaderboard view of the GameNetworkView
         gameNetwork.showLeaderboard()
       }
     }
     SimpleButton {
       text: "Increase Highscore to " + (gameNetwork.userHighscoreForCurrentActiveLeaderboard + 1)
       onClicked: {
         // increase the current highscore by 1
         gameNetwork.reportScore(gameNetwork.userHighscoreForCurrentActiveLeaderboard + 1)
       }
     }
   }// Column

   // the GameNetworkView from the example before is added here

 }// Scene

This code does the following:

  • Increase the current highscore by 1 when the button is clicked
  • Show the current highscore as text of the button
  • Put two buttons below each other by using a Column element as parent of the 2 SimpleButtons

The specialty about Felgo Game Network leaderboards, is that you can also modify the highscore when the player is offline and has no Internet connection. The new highscore is then sent to the server as soon as the Internet is available again. Also, you can use an infinite amount of different leaderboards, e.g. one for each level or for each game mode! To do that, simply provide the name of your leaderboard to the reportScore() function.

This is how the LeaderboardView looks like for two players, after you clicked the "Show Leaderboards" button:

Note: The friends list contains Facebook friends who also play the same game. We'll have a more detailed look how to connect your game with Facebook in the next lesson.

Step 5: Add Achievements

Achievements are another way to increase player retention: they motivate players to return to your game, until they have unlocked all achievements in a game. Examples for game achievements are:

  • Open a game 5 times.
  • Defeat enemy boss of level 2.
  • Reach the third level.

You can define these achievements in QML and they get uploaded to the Felgo Game Network server when you run your application on Desktop. This is a key advantage over other gaming services where you are required to leave the code environment and define the achievements in the web - with Felgo Game Network you can fully create and change your achievements in QML code and they are then synced with the server!

For the example achievements given above, this is the code how to define them:

 FelgoGameNetwork {

   // ...

   achievements: [

     Achievement {
       key: "5opens"
       name: "Game Opener"
       // comment this until you have your own images for achievements
       //iconSource: "../assets/img/achievement_5opens.png"
       target: 5
       points: 10
       description: "Open this game 5 times"
     },
     Achievement {
       key: "bossLevel2"
       name: "Obsessed Collector"
       //iconSource: "../assets/img/achievement_bossLevel2.png"
       target: 1
       points: 5
       description: "Defeat boss enemy of level 2"
     },
     Achievement {
       key: "level3"
       name: "Third Level Master"
       //iconSource: "../assets/img/achievement_level3completed.png"
       target: 3
       points: 15
       description: "Reach level 3"
     }
   ]
 }// FelgoGameNetwork

And this is how you can test to increase or unlock each of the achievements:

 Scene {
   id: scene

   Component.onCompleted: {
     // increment the counter until until the game was opened 5 times
     // after the target value was reached, a call of incrementAchievement() has no more effect
     gameNetwork.incrementAchievement("5opens")
   }

   Column {
     spacing: 3

     // 2 SimpleButtons for showing leaderboards and increase highscore here

     SimpleButton {
       text: "Unlock bossLevel2 Achievement"
       onClicked: {
         // unlocks the achievement
         gameNetwork.unlockAchievement("bossLevel2")
       }
     }
     SimpleButton {
       text: "Increase Level3 Achievement"
       onClicked: {
         // increase until it is unlocked, then this function does nothing
         gameNetwork.increaseAchievement("level3")
       }
     }
   }// Column

   // ...

 }// Scene

Step 6: Test on Mobile Devices

Now that you have added achievements and leaderboards to your game and tested it on Desktop, it is time to add some more players to your lonely leaderboard: we are going to test it on your mobile devices!

Testing on your mobile is very easy with Felgo: Just add another platform like iOS or Android in the Projects tab and then choose Add Kit. See the Deployment Guide how to add the iOS or Android platforms and for a more detailed tutorial for mobile device deployment.

You can also have a look at the full source code of the application we were developing in this lesson: it is available in the Qt installation folder and then in Examples/Felgo/examples/gamenetwork/GameNetworkTestSimple.

Recap

In this lesson you've learned how to add achievements and leaderboards to your game. This helps your players return more often to your game and have more fun with it.

For any questions about Felgo Game Network, just send us an email to support@felgo.com.

Cheers, Chris from Felgo

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support