Huawei Game Service & Map Kit & Account Kit (İl Bil Sample App) — Part 1
Hi Folks :)
I wanted to explain these Huawei Kits with an app so I coded a sample Android game which name is Il Bil.
I will introduce you to how to implement Account Kit, Map Kit, Game Service.
About the game: The app has got fullscreen Turkey map via Huawei Map. App selects random province and shows it borders on the map than user will try to guess the provinces name.
Scenario: First of all, user must login with Huawei ID via Huawei Account Kit. When user login, they can play game via Huawei Map Kit or look at Leaderboard & Achievement via Game Service.
The purpose of this article is how to use Huawei Game Service, how to use Huawei Map Kit and polygone operations. So I will not mention parts such as MVVM, Hilt, binding, UI, etc.
You can access the github repository with the source codes and next episodes of this articles series from the references at the bottom of the page.
About the data?
I used an API on this app.
You can access the API I used to get city border points lists here.
Create Project & HMS Integrations
First of all you must integrate HMS to project. I am not going to explain this steps because it will take too much time. You can check this article.
Huawei Account Kit
Login With Huawei ID
I added the line to build.gradle for integrating Huawei Account Kit.
I recommend you to check if the version you use is up to date.
Login Activity has a button as huaweiSignInButton for Login with Huawei Id. When user clicks its calling the accountKit.prepare() method and AccountKit class prepares AccountAuthService object via AccountAuthParams object. Also AccountAuthParams is getting created with DEFAULT_AUTH_REQUEST_PARAM_GAME.
We are calling accountKit.getSignInIntent(), this method returns Huawei AccountAuthService’s signInIntent object. And then we are calling startActivityForResult via that intent object.
There is default loginWithHuaweiId method. First it is checking requestCode==8888 and then authAccountTask.isSuccessful if both of the results is true, We can say that Login With Huawei Id is completed.
For more detail about this feature click here.
Silent Sign In
Game Service requires users to login the app via Account Kit.After first time user login to the app I used Account Kit Silent Sign In.
In the Splash Activity there is just one function for when activity created. If login process’s result is a success the app will navigate to the Main Activity, if not app will navigate to the Login Activity.
There is critical line, AccountAuthParams is getting creates with DEFAULT_AUTH_REQUEST_PARAM_GAME.
Huawei Map Kit
Integration
I added the line to build.gradle for integrate Huawei Map Kit.
I recommend you to check if the version you use is up to date.
On the Application class, I added MapInitializer.setApiKey() for initialize Huawei Map Kit. Also API_KEY added to Constant file, the value coming from AGC.
We can show map with MapView component or SupportMapFragment component. I used SupportMapFragment on this project.
When the mSupportMapFragment.getMapAsync() line’s process completed, the overridden onMapReady function is called. The OnMapReadyCallback must be implemented in the activiy for this procedure.
Map Kit style
I wrote a json file for remove map’s words such as province name, road name, transit name etc.
For more detail about Map Style Customization, click here.
I applied map_style.json to Huawei Map. So all words is getting removed when this after this line.
Draw Polygon & Animate Camera
When I get polygon’s lattitude & longitute list from API, I call drawPolygon function. The API has some strange problem so the 9th line about that.
I wrote a for loop for preparing points of the polygon. When the for loop finished I prepared currentPolygon and add to map via hMap.addPolygon line.
Also, with hMap.animateCamera, I animate camera to current polygon’s center point.
Painting Polygon
There are 2 different functions on above about painting the polygon.
On the correctAnswer function, we are filling polygon via currentPolygon.fillColor
On the wrongAnswer function, same as with correctAnswer function, also we are setting polygon’s stroke color via currentPolygon.strokeColor.
For more detail about Drawing on a Map click here.
