Nowadays with millions of games on the store, it’s hard to compete with all of them and any small change or feature you add to your game will push it more and make the player come back to your game again and again.

This is why we integrate the game services like Game Center and Google Games Services so we can make the players compete with each other to be the number one on our leader board or we will trigger the fire inside the user to unlock all the achievements and discover all the hidden ones.

What is it?

It is a group of APIs from Apple and Google to simplify some games basic features like leaderboards, achievements, and online matches.

In this tutorial, I’m going to show you how to integrate GameKit and Google Play Games Services with your game, So you can add achievements and make a leaderboard to show the top players.

Let’s start!

Before starting we need to do some work on our Android and iOS projects also we need to enable these features and add achievements and leader board into Google play and Game center.

iOS Configurations

First, you need to open the iOS project, you can do that by navigating to ios file then right-click on Runner.xcworkspace

Now click on reveal in finder

You will see the items as in the image below:

Double click on the Runner.xcworkspace then select the project from the top

Now from the right menu click on Runner target then select Signing & Capabilities, click on add capability button

Search for Game Center

Select it.

Now you can close Xcode.

Now you need to go to the iTunes Connect, Then select your app, then select features, then Game Center, now from here you can add an achievement or a leaderboard it’s a very simple process.

For adding a new leader board click on the add icon, then select Single Leaderboard, now enter the name, id, and the score format type, for the Score Submission Type it’s to decide which score should the leaderboard keep, the latest one or the highest one. One last thing, you need to add a language, go to Leaderboard Localization and click on add language, a new dialog will open select the language and enter the name, score format, and score suffix.

Like this, we have added our first leaderboard.

Now for the achievements, it’s almost the same thing click on add achievement icon, enter the name, id, and points and don’t forget to add a language from the Achievement Localization section.

Now like this we finished all the configurations for our game on iOS.

Android Configurations

First, we need to add two new meta-data to our app, you can do that by navigating to the android project manifest.xml

First metadata will have your app id, we will get this id later in this tutorial and you will come back here to replace your id, the second metadata you will copy-paste it as it’s.

Make sure to add the metadata inside your app application tag.

<meta-data

android:name="com.google.android.gms.games.APP_ID"

android:value="app_id" />



<meta-data

android:name="com.google.android.gms.version"

android:value="@integer/google_play_services_version" />

Now you need to go to the Google play console, Then select game service, Add a new game, enter the name and the category then press continue.

A new game will be created, enter the description of the game, the icon and feature graphics.

Take the app id and use it inside the android project manifest.xml .

Next, you need to go to linked apps, click on android, then enter your package name, then click on save and continue.

Now, click on Authorize your app now button, a dialog will ask you for the SHA1 , you can get the SHA1 by executing the following command line.

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

This SHA1 is the debug SHA1 , when you publish your app on google play you need to get the production SHA1 .

Go to publishing, Then click on publish your game.

Now we need to add a new leaderboard by going to the leaderboards then click on add leaderboard, enter the name of the leader board and add an icon then save.

And to add achievements go to achievements and add new achievement, enter the name of the achievement, the description, and the icon then click save.

Now again, you need to go to publishing and click on Publish your game.

One last important thing!

You do need to enable the OAuth APIs that you want, using the Google Cloud Platform API manager. You’ll need also to enable the Google People API. Make sure you’ve filled out all required fields in the console for OAuth consent screen. Otherwise, you may encounter APIException errors.

Like this, we finished all the configurations for our game on Android!.

I know! right now you feel tired doing all these configurations and you are hungry to code, I totally understand you but wait for one last thing!

Games Services

games_services is a flutter plugin I made to support game center and google play games services. so you can easily sign in the user, submit a score, unlock achievements, show the leader board screen and the achievements screen.

To add the plugin to your project navigate to pubspec.yaml and then add the games_services to the app dependencies.

games_services: any

Now press on Packages get, it will be on the top right side.

The code!

First thing you need to do is to sign in the user before doing anything, you can sign in the user by calling

GamesServices.signIn();

Don’t forget to import the plugin.

import 'package:games_services/games_services.dart';

You can call the sign-in function in the initState method.

Leaderboards Screen

To show the leaderboards screen you can simply call the showLeaderboards function

GamesServices.showLeaderboards(

iOSLeaderboardID: "ios_leader_board");

You can get the iOSLeaderboardID from the iTunes connect, (if you remember we created a new leader board for iOS you can take that leader board id and put it here).

Result:

Achievements Screen

To show the achievements screen you need to call the showAchievements function

GamesServices.showAchievements();

When you call it a new screen will open with the list of achievements.

Result:

Submit a score

To submit a Score to a specific leader board, you need to create a Score object and send it using submitScore function.

-The Score class takes three parameters:

- androidLeaderboardID : the leader board id that you want to send the score to in the case of android.

- iOSLeaderboardID the leader board id that you want to send the score for in case of iOS.

- value the score.

GamesServices.submitScore(

score: Score(

androidLeaderboardID: "android_leaderboard_id",

iOSLeaderboardID: "ios_leaderboard_id",

value: score));

Unlock achievement

To unlock an Achievement , you need to send an Achievement Object to the unlock function.

The Achievement takes three parameters:

- androidID the achievement id for android.

- iOSID the achievement id for iOS.

- percentComplete the completion percent of the achievement, this parameter is optional in case of iOS.

GamesServices.unlock(achievement: Achievement(androidID: 'android_id', iOSID: 'ios_id', percentComplete: 100));

Note: The percentComplete is required in case of iOS but not android.

I tried this plugin in my own game and it’s working perfectly. To check my game:

Ready to go!

Your game now is ready to go, you can publish the new update to your players with the leader board and achievements and let them enjoy theses new features!.

If you faced any problem you can add a comment below or send me a message on Twitter or facebook.