![](/assets/img/thumbnail/flutter_gamekit_google_services.png)
Nowadays with millions of games on app stores, 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 to trigger the fire inside the user to unlock all the achievements and discover all the hidden ones.
Games services, what are they?
They are 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
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image1.png)
Now click on reveal in finder
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image2.png)
You will see the items as in the image below:
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image3.png)
Double click on the Runner.xcworkspace
then select the project from the top
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image4.png)
Now from the right menu click on Runner target then select Signing & Capabilities, click on add capability button
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image5.png)
Search for Game Center
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image6.png)
Select it.
Now you can close Xcode.
Now go to the iTunes Connect, Then select your app, select features, then Game Center, now from here you can add an achievement or a leaderboard it’s a very simple process.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image7.png)
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.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image8.png)
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.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image9.png)
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
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image10.png)
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.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image11.png)
Make sure to add the metadata inside your app application tag.
1
2
3
4
5
6
7
<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 your game, from the left side navigation drawer, Navigate to Play Games Services
, Setup and management
, then Configuration
.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image12.png)
Now select No, my game doesn't use Google APIs
.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image121.png)
And then select Create
.
Take the app id and use it inside the android project manifest.xml
(Search in the page for Project ID
).
Next, click on Edit properties
and enter the description of the game, the icon and feature graphics.
Now, In the Credentials
section click on Configure
.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image13.png)
Then click on Google Cloud Platform
.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image131.png)
Select External
.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image132.png)
Now fill ALL
the App information, Click Save And Continue
.
From the next screen click on Add or remove scopes
add these two scopes: games, games_lite and drive.appdata.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image133.png)
Click on Update
, then Save And Continue
.
Return to Play Console to confirm configuration.
Now, the Credentials
view will change, and Add credential
button will be enabled. Click on it.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image134.png)
Next, scroll down to Authorization
section. Select Create OAuth client
.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image135.png)
Now click on Create OAuth Client ID
.
Select the Application type
as Android
, the name as DEBUG
, enter your Package name
, enter the SHA-1
, then click Create
. To get the SHA-1
for your debug key follow the steps below.
You can get the SHA1
by executing the following command line .
This command for macOS, You can search how to do the same on Windows.
1
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
to know more about it check the last section.
Now go back to the Google play console, click on Done
, select the OAuth client we just created from the drop down list. And then click on Save changes
.
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.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image14.png)
Now, you need to go to publishing and click on Publish
.
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
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image15.png)
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.
1
games_services: any
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image16.png)
Now press on Packages get, or run flutter pub get
.
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
1
GameAuth.signIn();
Don’t forget to import the plugin.
1
import 'package:games_services/games_services.dart';
You can call the sign-in function in the initState
method.
1
2
3
4
5
@override
void initState() {
super.initState();
GameAuth.signIn();
}
Leaderboards Screen
To show the leaderboards screen you can simply call the showLeaderboards function
1
Leaderboards.showLeaderboards(iOSLeaderboardID: 'ios_leaderboard_id', androidLeaderboardID: 'android_leaderboard_id');
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:
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image20.png)
Achievements Screen
To show the achievements screen you need to call the showAchievements
function
1
Achievements.showAchievements();
When you call it a new screen will open with the list of achievements.
Result:
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image21.png)
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.
1
Leaderboards.submitScore(score: Score(androidLeaderboardID: 'android_leaderboard_id', iOSLeaderboardID: 'ios_leaderboard_id', value: 5));
Unlock achievement
To unlock an Achievement
, you need to send an AchievementObject
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.
1
Achievements.unlock(achievement: Achievement(androidID: 'android_id', iOSID: 'ios_id', percentComplete: 100, steps: 2));
More!
The games_services has plenty of features that you can discover yourself like:
- Save game, to save a game progress.
- Support for macOS.
- Get player info.
To know more check the documentation.
SHA-1
When you publish your game don’t forget to add the SHA-1 of the release build. In the google play console, go to your app then Release
-> Setup
-> App integrity
-> App Signing
-> SHA-1 certificate fingerprint
Get that SHA1 and add it to your Play Games Services Configuration Credentials.
![](/assets/img/screenshots/integrate_gamekit_and_play_services/image22.png)
Support my game!
I tried this plugin in my own game and it’s working perfectly. To check my game here android or iOS
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 have any questions you can send me a message on Twitter or facebook. Also you can check my Github page or my Apps.