👨🏼‍💻How to use Huawei Kits in Cocos Creator ?

Cocos Creator & HMS Core

Hello everyone,

In this article, we are going to talk about the usage of Huawei kits in Cocos Creator.

Introduction

Since 2019, Cocos has launched a full range of cooperation with Huawei based on mobile game development.

Developers can access Huawei HMS Core with just one click inside Cocos Creator, and seamlessly upload existing game content to HUAWEI AppGallery Connect and quickly publish it to the Huawei app market, significantly improving the efficiency of game development.

What is Cocos Creator ?

Cocos Creator is a content creation-focused, scripted, component-based and data-driven game development tool. It features an easy-to-use content production workflow and a powerful developer tool suite for implementing game logic and high-performance game effects. In keeping with Cocos’s usual product features like open-source, easy-to-use, high-performance and cross-platform, this new game engine is designed to be the new choice for developers to create 2D and 3D games.

Cocos Creator

Which Huawei Kit Cocos support ?

Here are where you can integrate the supported huawei kits.

Cocos SDKHub → Account Kit, In-App Purchases, Ads Kit, Push Kit, Game Service(not every version has game service)

HUAWEI HMS Core → Analytics Kit

HUAWEI AppGalleryConnect → APM, Auth Service, Crash Kit, App Messaging, Remote Config, Cloud Store, Cloud DB, Cloud Functions

Services

How to use Huawei Kits in Cocos ?

Let’s create a project and integrate one of the HUAWEI services.

Cocos Dashboard

Create Project on Cocos

Hello world is a sample Cocos Creator project. I’m using it for showing purposes. You can create an Empty scene if you like.

Cocos Creator provides a Service panel in the Menu bar -> Panel, and developers can quickly integrate services through the Service panel for the game.

Select Service Panel

Now we have to connect out project with an app.

Click Service → Set Cocos AppID

Set Cocos AppID

In the Set Cocos AppID popup we have to select our game.

If you haven’t created your game on Cocos Service panel simply click the Click Create button on the lower right corner.

Associate your game in Cocos Creator

Now on the following Create Game page;

Enter the necessary information and click Create.

Create Game page in Cocos Panel

Now you can display your app in the popup.

Note: You might need to open the popup again to see the project if you just created it.

Associate your game in Cocos Creator

Now we can Activate any service we want.

Let’s activate Ads Kit.

Since Ads Kit is under Cocos SDKHub Service we have to activate it.

Click on CocosSDKHub.

Select CocosSDKHub

Now in the CocosSDKHub service page activate the service like in the following picture.

Open Cocos_SDKHub

We activated the Cocos SDKHub service.

Now after we activate the service you will see that under Params section it says Not Configured.

This is because Cocos SDKHub contains 4 services and they are automatically opened after we activated the service. Click to Plugin Manage.

Note: If you are using a service that requires a configuration edit Parameter Config by clicking the edit button and entering the necessary parameters. Click here for more information.

Configure Params

Unselect the kits you don’t want to use and select the kit you want to activate.

Then click OK.

Plugin Manage Page

You will see that there is no longer an error under the Params section.

And now we can create our scripts.

First I added an Empty node to the screen and named it “HuaweiAdsManager”

Second I right-clicked on Assets → Create → TypeScript → NewComponent

Don’t forget to name the component. I named it “HuaweiAdsManager”

Now, let’s open our new script.

Create Script

Here is our HuaweiAdsManager.ts class

Now let’s build the project.

Click Project → Build

Build the Game from Project Panel

Make sure to select “HUAWEI AppGallery Connect” as a platform

Set Platform in Build Panel

Enter your package name from AGC and enter the Target API Level.

Set Package Name and Target API Level in Build Panel

Now we have to enter our keystore and agconnect-services.json file

Set Keystore and Agconnect file in Build Panel

Here you can find how to integrate your app with HMS and get the ag-connect file.

Android | Integrating Your Apps With Huawei HMS Core

Here you can find how to generate keystore file.

Android | Generating Fingerprint from a Keystore(.jks file)

After everything is set you can build the game.

Huawei Banner in Cocos

Finally here is the script with the other ads types

You can reach the project files from here.

GitHub - enes-ozdemir/SampleCocosHMSProject: Cocos HMS Sample Project

Conclusion

Cocos has been around for a long time as a foundation for making 2D games for mobile devices and other platforms. And by the end of 2018, Cocos had more than 1.3 million active game developers worldwide, covering 1.1 billion game devices. And The in-depth cooperation between Cocos and Huawei is bound to bring new opportunities to global games, especially Chinese games.

This is why now is the perfect time to start integrate HMS Kits in your game.

References

Huawei's HMS Core Helps Cocos Developers Build New Experiences

Android | Integrating Your Apps With Huawei HMS Core

Android | Generating Fingerprint from a Keystore(.jks file)

GitHub - enes-ozdemir/SampleCocosHMSProject: Cocos HMS Sample Project