[Huawei Developers] Freemind R:
More articles like this, you can visit HUAWEI Developer Forum.​

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.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064044.87099091588757932726862009463203:50510707054406:2800:43B389C9F788BAE6AE21B6AFAC12203D0FF4DB62C0E1493C55EF2EA84F97D222.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064044.87099091588757932726862009463203:50510707054406:2800:43B389C9F788BAE6AE21B6AFAC12203D0FF4DB62C0E1493C55EF2EA84F97D222.png[/IMG]​

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

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064149.23822294413236820453418961217397:50510707054406:2800:BC9CBD061FE2803A5B045266CDA589BE09263C9A3DDC8011B7460FFD442D7656.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064149.23822294413236820453418961217397:50510707054406:2800:BC9CBD061FE2803A5B045266CDA589BE09263C9A3DDC8011B7460FFD442D7656.png[/IMG]

NDK Root Path Configuration
​

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 your computer.

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

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064530.35712139528068665864389692085262:50510707054406:2800:30DCF0FCC7A658E7D4DC433B1301906AE735AD367D06025F07D5FE57FCF1E51E.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064530.35712139528068665864389692085262:50510707054406:2800:30DCF0FCC7A658E7D4DC433B1301906AE735AD367D06025F07D5FE57FCF1E51E.png[/IMG]​

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”

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064614.90506537264178321573487243963910:50510707054406:2800:2A5262A7F4E8F3DA402172EFB7466FBB753E354EBEE551B94347E508E26C7B72.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064614.90506537264178321573487243963910:50510707054406:2800:2A5262A7F4E8F3DA402172EFB7466FBB753E354EBEE551B94347E508E26C7B72.png[/IMG]​

NDK configuration

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

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064641.86516157033800413192609844153722:50510707054406:2800:7DB632B64B8444A2F69A935E89034D8E58F1DCC989B6122DD026FB0B7269A2FA.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064641.86516157033800413192609844153722:50510707054406:2800:7DB632B64B8444A2F69A935E89034D8E58F1DCC989B6122DD026FB0B7269A2FA.png[/IMG]​

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 havemultiple 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.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064719.63874483092034881547662361906973:50510707054406:2800:8F7DC5C3C513629E9D58C47DECA145B085F6E17981CFCEDC326DF0A04E4F6BEB.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064719.63874483092034881547662361906973:50510707054406:2800:8F7DC5C3C513629E9D58C47DECA145B085F6E17981CFCEDC326DF0A04E4F6BEB.png[/IMG]​

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.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064901.91301970526056147281393181615191:50510707054406:2800:85EDEA663463009CE705FA414C79FFA6D6DE959107A412FBAE261255D1FBB7DF.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064901.91301970526056147281393181615191:50510707054406:2800:85EDEA663463009CE705FA414C79FFA6D6DE959107A412FBAE261255D1FBB7DF.png[/IMG]​

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=17

RELEASE_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.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064950.15569056132489540117305787727531:50510707054406:2800:5C842A567F2066CE318BE1B6404DF952502027F68EEAEE60002D612865A9A139.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630064950.15569056132489540117305787727531:50510707054406:2800:5C842A567F2066CE318BE1B6404DF952502027F68EEAEE60002D612865A9A139.png[/IMG]​

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

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630065149.40593379043659801115483708751496:50510707054406:2800:53F12B3290DE8EB170AF299EB1BC1F99C13FF8E4B160C6A48F91345018A41684.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630065149.40593379043659801115483708751496:50510707054406:2800:53F12B3290DE8EB170AF299EB1BC1F99C13FF8E4B160C6A48F91345018A41684.png[/IMG]​

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;

We will create listener for HMS and we will invoke this in init() function.

#include "HelloWorldScene.h"
#include "SimpleAudioEngine.h"
#include "PluginHMS/PluginHMS.h"
#include "json/rapidjson.h"
#include "json/document.h"
.....
//Listener for HMS
class PluginHMSListener : public sdkbox::HMSListener {
public:
PluginHMSListener(HelloWorld* scene): hw(scene) {
}
void onLogin(int code, const std::string& errorOrJson) {
cocos2d::log("HMS onLogin: %d, %s", code, errorOrJson.c_str());
if (0 != code) {
showMsg("login failed:" + errorOrJson);
return;
}
rapidjson::Document doc;
doc.Parse(errorOrJson.c_str());
std::ostringstream ss;
ss << "Login success:" << doc["displayName"].GetString();
showMsg(ss.str());
}
private:
HelloWorld* hw;
};
bool HelloWorld::init()
{
sdkbox::PluginHMS::setListener(new PluginHMSListener(this));
sdkbox::PluginHMS::buoyShow();
......
return true;
}

This function for login via HMS.

void HelloWorld::genAccountMenu() {
mMenu->addChild(MenuItemLabel::create(Label::createWithSystemFont("Login", "arial", 24), [](Ref*){
showMsg("to login...");
// sdkbox::PluginHMS::login(0); // slient login
sdkbox::PluginHMS::login(1); // login (id token)
// sdkbox::PluginHMS::login(2); // login (author code)
}));
mMenu->addChild(MenuItemLabel::create(Label::createWithSystemFont("Logout", "arial", 24), [](Ref*){
showMsg("to logout...");
sdkbox::PluginHMS::logout();
}));
}

Running a project

First runnig may take a long time. It will compile more than 600 cpp file.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630065623.22102432994340814840202716874382:50510707054406:2800:E4879AF814BCBD2E7605B4DD9E9B2C1725852BD97E5DB46F5BB3606E7D81DE17.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630065623.22102432994340814840202716874382:50510707054406:2800:E4879AF814BCBD2E7605B4DD9E9B2C1725852BD97E5DB46F5BB3606E7D81DE17.jpg[/IMG]​

After clicking “Account Test”:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630065644.22555316748835398802117228406596:50510707065013:2800:63588CCD4DF4938E51D36BA581CB7AC3AE2B82B4A53833E0D4E65DDC32FE2342.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630065644.22555316748835398802117228406596:50510707065013:2800:63588CCD4DF4938E51D36BA581CB7AC3AE2B82B4A53833E0D4E65DDC32FE2342.jpg[/IMG]​

After clicking “Login”.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630065657.06333000829956402457278722600815:50510707065013:2800:29D553BD2576BC3B42727D386A9021EED6286C4E29DB6A0D86F5DFA3B1C5D806.jpg"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/024/888/398/5190090000024888398.20200630065657.06333000829956402457278722600815:50510707065013:2800:29D553BD2576BC3B42727D386A9021EED6286C4E29DB6A0D86F5DFA3B1C5D806.jpg[/IMG]​

Finally our project connected Huawei account.

Thanks for reading.

I hope this gives you a starting point for Cocos2d-x and integration with HMS. Feel free to check out the full source code in github.

Links：

codelab

Codelabs provide a technical expert guidance, tutorial and hands-on coding experience. Here you can learn about…

developer.huawei.com

http://docs.sdkbox.com/en/plugins/hms/v3-cpp/