Huawei Game Service Kit in Cordova

Introduction

Hello, today I will talk about Huawei Game Service Kit. You can use Game Service to realize the great ideas that on your mind. The Game Service kit has been created to help developers with features such as login, achievements, leaderboard and more.

Here full documentation link for Game Service.

I want to show you how to use the game service with a simple application. In this application I will use some modules such as signing and achievements in the Cordova platform.

Let’s get started! 🚀🚀

What is the Game Service Kit?

Promote your game quickly and efficiently to Huawei’s vast base of users around the globe by letting them sign in using their HUAWEI ID. Implement features like achievements and events faster, so you can quickly build the foundations for your game. Perform in-depth operations tailored to your game content and your users.

First of all, you must register as a HUAWEI developer and complete identity verification on HUAWEI Developers.

How to add step by step?

After the login/register process we should create an AppGallery Project.
1. Sign in to AppGallery Connect, and click My projects.
2. Click Add project.
3. Enter a project name and click OK.

4. After the create project, go to Project Settings>General Information section and click Add app.

5. On the Add app page, enter the app information.

6. On the Project settings page, enter SHA-256 certificate fingerprint.
7. For the enable game service API go to Project Setting> Menage APIs enable Game Service.

8. Download the configuration file agconnect-services.json for Android platform.

Creating Demo Application

Before the start demo application, make sure you have installed Node.js, npm, Cordova CLI on your computer.

1. Create new Cordova project.

cordova create quiz com.quizgame.demo QuizGame

2. Go into the project directory and add android platform to the your project.

cordova platform add android

3. Install HMS Game Service Plugin

cordova plugin add @hmscore/hms-js-gameservice

4. Copy agconnect-services.json to <project_root>/platforms/android/app directory.

5. Add keystore(.jks) and build.json files to your project’s root directory.

6. Import this two lines to platforms/android/app/src/main/java/<your_package_name> directory.

...
import com.huawei.hms.jsb.adapter.cordova.CordovaJSBInit;
....
CordovaJSBInit.initJSBFramework(this)
...

In the end, your file will be similar to the following:

7. Finally we are ready to run Cordova.

cordova run android — device

Make a Quiz Game

For understand the game service I will write a simple quiz application. Firstly, I will add a login page. Then I will add achievements for users and create a leaderboard where the scores are kept.
I used bootstrap for my app. You can check the link for how to add bootstrap.

Game Sign-In

For the access user account information, first of all you should login with Huawei-ID. This method is necessary for the distinguish the user.
For my login page I add a button for signIn and called HMSGameService.signIn method.

If the correct login process is done, the screen that will open will be as follows.

Check the game service configuration for the app gallery side and also for more details please click the link.

Achievements

You can add the achievements to your game for many nice ways such as user interaction or game continuity.

For adding an achievement, you should follow these steps: Sign in to AppGallery Connect and go to My Apps > Your Project > Operate > Achievements to create achievements.

I added two achievement cases. In the first, if you answered a question before 5 seconds, second is the achievement when the game is finished.
After the adding process you should release the achievements. If you don’t make achievements released, users will not see them. But you can test your achievements, events or leaderboards with your test account.

In demo application, for first case of achievement, I added two timer. First timer, after the questions appeared line and second one is when user click any of options, I called the function according to the difference of these two values. If timer is smaller than 5 second I called HMSGameService.unlockAchievementImmediate method.

After successfully unlocking this achievement, you can see that the value of the player column has increased in the app gallery.

The important point I should add here is that an user can only unlock an achievement once. Otherwise, the game service will return an error message to you.

In a game application you will create yourself, you can give your users awards by opening these achievements or you can do more.

When all questions were answered, I called unlocked achievement method for the second achievement.

Leaderboards

Leaderboards are an effective way to drive competition among game players by displaying players’ rankings.

You should follow these steps for adding an leaderboard: Sign in to AppGallery Connect and go to My Apps > Your Project > Operate > Leaderboards to create leaderboard.

After the user answered all the questions, I added users scores to the leaderboard. For adding score value, first of all we should call HMSCore.setRankingsSwitchStatus and set status to 1. After that, we can set the score with HMSGameService.submitScoreImmediate method.

Here is one of the reasons why the game service is easy and useful, since we log in with Huawei ID at first, information about the user is kept in the cache, for this reason, we only need to send the score value.

At the end of the game, I add a button for the show leaderboards that I add scores. For this, I called HMSGameService.loadTopScore.

For increase in-game interaction, you can give gifts to the users who are the most successful in your leaderboards.

Tips & Tricks

1. An achievement can only be unlocked once by a user.
2. Unreleased achievements cannot be accessed by users, you should released them.
3. If you want to unlock a hidden achievements, you must first reveal achievement.

Conclusion

In this story, I tried to explain the two modules of the game service in the easiest way.

By adding the Huawei Game Service to your application, you can create games that are easier and more fun.

For more details, you can visit our developer page.

References

Document

Mervetafrali/QuizGame