How to use Cocos2d-x with Huawei Mobile Services - Huawei Developers

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.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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.
Code:
cd cocos2d-x
setup.py
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.
Code:
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 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.
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.
Code:
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=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.
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.
Code:
#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.
Code:
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.
Code:
#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.
Code:
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.
After clicking “Account Test”:
After clicking “Login”.
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/