How to use Cocos2d-x with Huawei Mobile Services — HMS

YusufAltun

Published in

Huawei Developers

6 min readJun 26, 2020

This post will show you how to use Cocos2d-x on Android and integrate with Huawei mobile services.

What is Cocos?

Cocos have two main product Cocos Creator and Cocos2d-x.

Cocos2d-x — is a open-source, cross platform game engine. It includes the engine and the cocos command-line tool. Its let us to develop in C++, JavaScript or Lua.

Cocos Creator — is a unified game development tool focused on content creation. You can create your entire game, from start to finish, using this tool. It uses JavaScript natively and can export to C++. Read more about Cocos Creator. Cocos Creator integrates the entire mobile browser game solution into the editor tool, eliminating the need to shuttle between multiple software applications. With the Cocos Creator editor open, a one-click automated process takes the least amount of time.

In this article we will focus Cocos2d-x game engine integration.

You can download stabile version from here. (cocos2d-x-3.17.2 used for this article).

Build Requirements

Python 2.7.5+(NOT Python 3)
NDK r16+ is required to build Android games(with android studio we will add)
Android Studio 3.0.0+ to build Android games(tested with 3.6.3)
Windows 7+ (tested with Windows 10)

Environment Setup

Unzip cocos installed file then run this command for setup environment.

-> cd cocos2d-x
-> setup.py

Skip this steps when the command prompt ask you to enter android sdk root path and ndk root path. We will configure paths with android studio. After installation restart.

How to create a new game?

Single command line is enough to create a game.

cocos new <game name> -p <package identifier> -l <language> -d <location>->cocos new MyGame -p com.package.name -l cpp -d N PROJECTS_DIR

You can also create a Lua project with -l lua or JS project with -l js .

After create new project. Open “proj.android” folder in anroid studio.

Android Studio Configurations

File -> Settings -> Android SDK -> SDK Platforms: Download your android version to use
File -> Settings -> Android SDK -> SDK Tools:

Install

Android SDK Build-Tools
NDK
CMake
Android Emulator
Android SDK Platform-Tools
Android SDK Tools
Google USB Driver
Inter x86 Emulator

Note: Configure CPU architecture with “grandle.properties” file, update line 34 PROP_APP_ABI=armeabi-v7a:arm64-v8a:x86

Update android gradle plugin lates version. “../proj.android/gradle/wrapper/gradle-wrapper.properties”

NDK configuration

File -> Project Structure -> SDK Location -> Android SDK Location: Choose default one (we already download).

Cocos2d-x Main Components:

Director: You can think of the Director the same way you think about a movie director. The Director controls every aspect of your game. What is shown on the screen, what sounds are played, what happens with player input, and much more.
Scene: A Scene is a container that holds Sprites, Labels, Nodes and other objects that your game needs. A Scene is responsible for running game logic and rendering the content on a per-frame basis.
Sprite: A Sprite is a 2D image that can be animated or transformed by changing its properties. Most all games will have multiple Sprite objects ranging from the hero, an enemy or a level boss.
Scene Graph: The scene graph is a data structure that arranges a graphical scene, into a tree structure. This tree structure is what is used to render objects onscreen in a specific order.
Renderer: In an oversimplified definition the renderer is responsible for taking everything you want on the screen and getting it there, technically. No need to delve into this further at this time.
Events: What do you do when the player moves around? What about touch events or keyboard input? These all trigger events that can be acted upon as needed.
Audio: Perhaps your game has background music and or sound effects.
UI Components: Things like Button, Label, ScrollView, etc. Items that help you layout your game and related interfaces.
Physics Engine: The physics engine is responsible for emulating the laws of physics realistically within the application.

Well a Sprite is only a Sprite if you move it around. If you don’t move it around it is just a Node

How to use Huawei Mobile Services ?

Cocos2d-x provide the sdkbox to integrate mobile services. This tool help us to use Huawei mobile services.

This tools now supporting Account kit, Game Service, In-App Purchases. Ads kit now developing process and push kit also will come next versions.

Dowload from this link. Drag and drop zip file to your project.

Open a terminal and use the following command to install the SDKBOX HMS plugin. Normally we can download hms plugin directly but now its stating process because of that I use staging server to get plugin.

sdkbox import hms//staging server 
sdkbox import HMS --staging

After this command our project build.gradle files will updated for HMS. If dependencies version are old you can update them.

HMS for android

Create App in AppGallery
Enable Module you need(enable AccountKit and Game Service,we will use this)
Configure app signature(release)
download app info agconnect-services.json

For detail you can follow this link.

Update gradle.properties file:

PROP_MIN_SDK_VERSION=17RELEASE_STORE_FILE=yourSignFile.jks
RELEASE_STORE_PASSWORD=password
RELEASE_KEY_ALIAS=alias
RELEASE_KEY_PASSWORD=password

Cocos Development

Now our application is ready to run with HMS. We will invoke HMS function via plugin, before that I want to show Cocos file structure.

The resources folder is a common repository for all the various assets that your game will use, such as graphics, sound, etc.

The Classes folder is perhaps most important of all, this is where your non platform specific code goes.

An AppDelegate is a helper object that goes with the main window and handles events common to applications such as starting up, minimizing and closing. You won’t really spend much time here, that instead is where the Scene file comes in.

AppDelegate header is pretty straight forward, it declares a constructor, destructor and four methods, initGLContextAttrs, applicationDidFinishLaunching, applicationDidEnterBackground and applicationWillEnterForeground. All four of these methods are pure virtual functions from ApplicationProtocol, from which Application ( and in turn AppDelegate ) inherit, so we must provide an implementation of each, even if it’s empty

Initialize HMS

We will use AppDelegate.cpp for initialize the plugin.

#include "PluginHMS/PluginHMS.h"
bool AppDelegate::applicationDidFinishLaunching() {
#ifdef SDKBOX_ENABLED
    sdkbox::PluginHMS::init();
#endif

AppDelegate class create HelloWorld screen. We will create menu screen for login and logout with HMS account kit.

Update HelloWorld.h for menu.

public:
    ...... 
    void showMenu(const std::string& menuName);
    void genMainMenu();
    void genAccountMenu();
private:
    cocos2d::Label* mTitle;
    cocos2d::Menu* mMenu;