Guide for Integrating HUAWEI Computer Graphics Kit - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum
​1. Preparations
1.1 Introduction
HUAWEI Computer Graphics (CG Kit) is a high-performance rendering framework launched by Huawei that provides atom-level capabilities for rendering, covering materials, models, lighting, and post effects. CG Kit also contains high-performance rendering components, including anti-aliasing and Vulkan-based multi-thread components, while offering such expansions as Smart Cache and Pre-rotation, as well as incorporating cutting-edge research in computer graphics, computer vision, and deep learning.
1.2 Website Walkthrough
Visit the home page of Huawei Developers:
https://developer.huawei.com/consumer/en/
Navigate to CG Kit, as shown in the figure below.
{
"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"
}
Or alternatively, click on the direct link below:
https://developer.huawei.com/consumer/en/hms/huawei-computer-graphics/
You can find an introduction to CG Kit on this page.
Click on “View documents” to visit the CG Kit development page at:
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/introduction-0000001050197938
Remember to pay special attention to the Examples and Library tab pages:
The code of a sample Android Studio project is provided, while the necessary .so and header files are packaged in the SDK.
You will need to complete some steps to develop an app on your own:
1. The SDK is a core module and can be downloaded only after you have registered for a HUAWEI Developers account. Therefore, the SDK is not included in the sample code. You will need to download the SDK separately, and import it to the sample project.
2. Due to copyright concerns, the model files are not included in the sample code. You will need to download or create models on your own, and import them to the sample project.
1.3 Getting Started
The following is the list of minimum requirements for integrating with CG Kit:
1. Kirin SoC-powered Huawei mobile phone running Android 10 or later, with Vulkan 1.0 support
2. Android Studio (The most recent release 4.0 is recommended.)
3. NDK 20.1.5948944
4. API level 29 (Android 10)
5. Build Tools 29.0.3
2. Development Workflow
2.1 Creating a Project
Create a project in Android Studio. In this example, directly open the provided sample project.
Android Studio automatically downloads related content based on Gradle, for example, Gradle 5.6.4 specified by the project.
Though the value of minSdkVersion for Gradle can be changed from 27 to 29 for compatibility reasons, for the most recent release of CG Kit, it can only run on versions Android 10 and later.
2.2 Signing
The Gradle file in the sample code is already signed. You can choose to delete the signature for purely development and verification-related purposes. You can also refer to the CG Kit guide to generate signatures and access Huawei applications.
2.3 Integrating the SDK
Download the SDK.
Copy the include folder to the following directory:
app\src\main\cpp
Copy the libs directory to the app directory, as shown in the figure below.
Click on Refresh Linked C++ Projects under Build.
Open the MainApplication.cpp file and check the APIs. If they are no longer highlighted in red, it means that the configuration is successful.
2.4 Making Skyboxes
You will need to prepare skyboxes on your own, as they are not released with the sample code.
The following website provides the visualized displays for skyboxes:
https://doc.babylonjs.com/resources/playground_textures#cubetextures
Download a cubemap skybox and edit the .cub configuration file as follows:
width=512
height=512
depth=6
mipmap=1
face=6
channel=4
suffix=.png
The width and height must be consistent with those in the PNG image for the level 1 mipmap of the skybox.
Name the images in the following manner.
Store these files in the env directory, then copy them to the cubemap directory for the sample project.
Please note that CG Kit supports only four-channel PNG images. If your PNG images are not four-channel, open the files with Microsoft Paint and save them as .png files, to convert them into four-channel PNG images.
2.5 Preparing a Model
Currently, CG Kit only supports models in .obj format, and can only parse points and planes only from .obj files; .mtl materials are ignored. CG Kit also supports normal parsing, map coordinate parsing, and tangent computing, but only the triangle mode is supported when parsing surfaces. Automatic triangulation is not supported for surfaces with multiple vertices.
Open-source 3D models can be easily accessed online free-of-charge, for instance through the following website:
https://www.turbosquid.com/Search/3D-Models/free/obj
The following model was selected in this guide:
https://www.turbosquid.com/3d-models/medieval-blacksmith-low-poly-3d-model-1591136
The overview is as follows.
2.6 Developing an App
Modify the MainApplication.cpp code in the sample project.
2.6.1 Modifying the Model
Modify the model path in the InitScene method.
Code:
String modelName = "models/black_smith/black_smith.obj";
Change the path of the map. (Convert the original .jpg file to .png format.)
Code:
String texAlbedo = "models/black_smith/texture/black_smith.png";
Comment out the original map.
Code:
//String texNormal = "models/Avatar/Normal_01.png";
//String texPbr = "models/Avatar/Pbr_01.png";
Comment out SetTexture and SetSamplerParam corresponding to the two maps.
2.6.2 Modifying the Skybox
Modify the related configuration in the CreateSkybox method to change the cube model used by the skybox to as follows.
Code:
String modelName = "models/cube/cube.obj";
The cube is the simplest model. The link is shown below:
https://gist.github.com/MaikKlein/0b6d6bb58772c13593d0a0add6004c1c
Set the environment map in the MainApplication.h file to the following.
Code:
String m_envMap = "cubemaps/env/env.cub";
Keep the name the same as that used to create the skybox.
2.7 Verifying Execution
The result is shown below.
If an error occurs during the execution, you can run the adb logcat command to view the log and locate the error. CG Kit also logs ERROR-level events in Android log files. To view CG Kit log messages, run the following command.
Code:
adb logcat | grep CGKit
3. FAQs
3.1 What model formats does CG Kit support?
CG Kit only supports models in .obj format, and can parse vertexes, normals, map coordinates, and surface information. However, automatic triangulation is not supported for surfaces with more than three vertices, and related configurations cannot be parsed from .mtl material files.
3.2 What map formats does CG Kit support?
CG Kit only supports 4-channel PNG images.
3.3 Do I need to sign my app?
Sign your app as required by referring to the Android manual. For purely development and verification-related purposes, you can choose to comment out the signature configuration in the sample code.
3.4 What should I do if “Failed to get hire” is printed?
The “Failed to get hire” message works for dotting only, and can be ignored. Dotting refers to the process during which CG Kit records and reports its runtime status. This does not affect the operation of functional modules, such as the rendering module.
4. Appendix
The compiled APK and Android Studio project are available in Google Drive for reference.
Link:
https://drive.google.com/drive/folders/1V0tC_51dCZDBEy_peD2sWzHBvCQpkwtt?usp=sharing
Please note that the project provided here does not contain the SDK (containing the required .so and header files). You will need to register a HUAWEI Developers account and download the CG Kit SDK on your own. The project already contains the necessary resources, such as the models, maps, and skyboxes. Only the CG Kit SDK needs to be downloaded separately.

Related

How to use Cocos2d-x with Huawei Mobile Services

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/

【Trip to HMS Core 5.0】Add Analytics Kit to Your iOS App

More articles like this, you can visit HUAWEI Developer Forum
​HUAWEI Analytics Kit 5.0 version has been updated, and it supports iOS SDK now, enabling one-stop, unified analysis of cross-platform Android and iOS users. It looks into user-centric analysis and helps you understand user behavior on the Android and iOS platforms. Today I want to share with you how to add Analytics Kit to your iOS App. The version I integrated is 5.0.0.300.
The general steps we will walk through include:
Configuring App Information in AppGallery Connect
Integrating the HMS Core SDK
Accessing HUAWEI Analytics Kit
Configuring App Information in AppGallery Connect
Follow the steps below to configure App Information in AppGallery Connect for your iOS application. If you have both an Android and an iOS version of your app, you can set them within the same project, this will allow you to finish the data analysis conveniently.
{
"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"
}
Getting Started:
1. Have your Bundle ID ready for your iOS app (ask your developers for this).
2. Go to AppGallery Connect and create a new project.
Once you’ve created a new project, you’ll see a page, and the side navigation bar shows the AGC's various function menus.
3. Click Add app, and create an iOS application.
Here the App package ID is the Bundle ID.
Click OK, and then you will get the configuration file agconnect-services.plist.
Click Manage APIs, and here we’ve already had the Analytics API enabled.
Back to the side navigation bar, and go to the HUAWEI Analytics tab, you will see all kinds of functions, including User analysis, Behavior analysis, etc. Select any menu to Enable Analytics service.
On the Project access settings page, set the data storage location, time zone, currency, user data storage time, and calendar week, and click Finish.
Integrating the HMS Core SDK (in Cocoapods Mode)
I prefer the Cocoapods Mode. You can also integrate the HMS Core SDK into the Xcode Project Manually.
1. Add the AppGallery Connect configuration file of the app to your XCode project.
a. Click Download agconnect-services.plist to obtain your iOS config file (agconnect-services.plist).
b. Move your agconnect-services.plist file into the root of your Xcode project.
2. Edit the Podfile file
a. Create a Podfile if you don't already have one:
$ cd your-project-directory
$ pod init
b. To your Podfile, add the pods that you want to use in your app: Add pod 'HiAnalytics', that is, the dependency for pod.
Example Podfile file:
Code:
# Uncomment the next line to define a global platform for your project
# platform :iOS, '9.0'
target 'HiAnalyticsSwiftDemo' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for HiAnalyticsSwiftDemo
pod 'HiAnalytics'
target 'HiAnalyticsSwiftDemoUITests' do
# Pods for testing
end
end
c. Install the pods, then open your .xcworkspace file to see the project in Xcode:
$ pod install
$ open your-project.xcworkspace
Accessing HUAWEI Analytics Kit
1. Initialize Analytics SDK in your app
The final step is to add initialization code to your application. Initialize AppDelegate through the config interface.
Objective C sample code: Perform initialization in AppDelegate.m.
Code:
#import "AppDelegate.h"
#import <HiAnalytics/HiAnalytics.h>
@interface AppDelegate ()
@end
@implementation AppDelegate
...
- (BOOL)Application:(UIApplication *)Application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after Application launch.
[HiAnalytics config];//Initialization
return YES;
}
...
@end
Swift code example: Perform initialization in AppDelegate.swift.
Code:
import UIKit
import HiAnalytics
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
...
func Application(_ Application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after Application launch.
HiAnalytics.config();//Initialization
return true
}
...
}
2. Record defined events using the onEvent API.
For definitions of the events, please refer to Event Description.
3. Call APIs of HUAWEI Analytics Kit to implement the corresponding functions. For details, please refer to API Reference.
During the development, you can use DebugView to view the event records in real time, observe the results, and adjust the event tracing scheme.
Enabling/Disabling the Debug Mode
1.To enable the debug mode:
Go to Product > Scheme > Edit Scheme from the Xcode menu. On the Arguments page, click + to add the -HADebugEnabled parameter. After the parameter is added, click Close to save the setting.
Code:
1. –HADebugEnabled
2.To disable the debug mode
Code:
1. -HADebugDisabled
After the data is successfully reported, you can go to HUAWEI App Debugging to view the data, as shown in the following figure.
Q&A:
1. I have integrated the iOS SDK of HUAWEI Analytics Kit into my app but why no log events are collected when the app is running?
When this problem occurs, it is probable that the run log parameters have not been set. You can set the log level to any of the following values: -HALogLevelDebug, -HALogLevelInfo, -HALogLevelWarn, and -HALogLevelError.
For example, to set the log level to -HALogLevelDebug, perform the following steps:
Choose Product > Scheme > Edit Scheme from the Xcode menu.
On the Arguments page, click + to add the -HALogLevelDebug parameter.
After the parameter is added, click Close to save the setting.
Face problems during development? Take it easy. Go to Stack Overflow and raise your questions. Huawei experts will get back to you as soon as possible.
https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest

Cocos Creator Integrates with AppGallery Connect APM – Releasing a Cocos-based App

According to the introduction of Cocos Creator from its official website, Cocos Creator 2.4.1 and later versions support HUAWEI AppGallery Connect and have been providing multiple AppGallery Connect services. The following figure shows all supported AppGallery Connect services.
{
"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"
}
To test how well Cocos supports AppGallery Connect services, this article uses the App Performance Management (APM) service as an example to monitor the performance data of a Cocos-developed app. First, let's see what APM is.
AppGallery Connect APM
APM of AppGallery Connect provides minute-level app performance monitoring capabilities. You can view and analyze app performance data collected by APM in AppGallery Connect to comprehensively understand the performance features of developed apps, helping you quickly and accurately rectify possible performance problems and continuously improve user experience.
That is, APM can help you monitor your app performance data in a variety of scenarios, including app launch, page loading, and network request. We can assume that APM can quickly locate performance-related problems for games, which attach great importance to performance as it greatly affects user experience.
Before You Start
Downloading and Installing the Cocos Dashboard
1. The Cocos Dashboard is the GUI-based development tool provided by Cocos. You can download it from https://www.cocos.com/creator/ (latest version: 2.4.2).
2. You need to install the Visual Studio as well to obtain the Cocos dependency package. The following figure shows the installation procedure.
3. After the installation is complete, click Run
Downloading and Installing Cocos Creator
1. Open the Cocos Dashboard and click Signin in the upper right corner. You can sign up first if you do not have an account.
2. After sign-in, click Editor on the left, and then click Download in the lower right corner.
3. On the Editor page, select the latest version of Cocos Creator, click the download button on the right, and agree with the terms.
4. Once the download is complete, you can create a Cocos project on the Project page. Take a HelloWorld project as an example.
5. When you open the project for the first time, the system prompts you to select a language. Just select English. Select the corresponding running environment and click Run.
Configuring the Visual Studio Code Compilation Environment
The built-in code editor of Cocos is too simple and is only suitable for code viewing and a small amount of editing. Therefore, we need a more mature and powerful compilation environment. This is where Visual Studio Code comes in.
1. Download and install Visual Studio Code of the required version based on your computer environment.
2. Open your project in Cocos Creator and choose Developer > VS Code Workflow > Install VS Code Extension from the main menu to add an adaptation plug-in to Cocos Creator.
3. If the information shown in the following figure is displayed, the installation is successful.
4. If you want the system to autocomplete the Cocos Creator engine API during coding, you need to generate the API autocompletion data and put the data in the project path through the menu. Choose Developer > VS Code Workflow > Update VS Code API Source.
5. Double-click the HelloWorld.js script in the project directory. In the dialog box that is displayed, click Yes and select Visual Studio Code as the default editor.
6. Double-click the HelloWorld.js script again to develop your app.
Packaging and Releasing a Cocos-based App in AppGallery Connect
Cocos Creator 2.4.1 and later versions allow you to package and release your app to HUAWEI AppGallery through AppGallery Connect. In addition, Cocos Creator suports various AppGallery Connect services, such as APM, which can be quickly integrated and used. The detailed procedure is as follows:
1. Sign in to AppGallery Connect and create an app.
2. Sign in to Cocos Creator, choose Project > Build…, and select HUAWEI AppGallery Connect as the release platform.
3. Click Build. If Built huawei-agc successfully is displayed, the build is successful.
Note: When you build a project for the first time, you need to choose File > Settings… and configure the Android SDK path and NDK path on the native development environment page.
4. Click Compile and wait until the compilation is successful.
5. A jsb-default or jsb-link directory (depending on the template selected on the Build… panel) is generated in the build directory of the default release path. AppGallery Connect services are automatically integrated in the directory. Open the publish directory in the jsb-link directory to view the generated APK file.
6. Upload the packaged APK file locally or using AppGallery Connect.
l Uploading the file on the Upload... panel.
a) Login Type: OAuth
Click Confirm, sign in to your HUAWEI ID (with sufficient permissions), and select the check box of the corresponding permissions. The APK file will be uploaded automatically.
b) Login Type: API Client
Sign in to AppGallery Connect to obtain related configuration. Go to Users and permissions > Connect API > Create, create an API client, select a role as required, and click OK.
Enter your client ID and key of the API client in the text boxes on the Upload... panel in Cocos Creator. Click Confirm.
After the APK file is uploaded successfully, you can view it in AppGallery Connect.
Uploading the file in AppGallery Connect
Click Upload and select the APK generated by Cocos Creator.
For more details, please refer to:
Cocos official documents
AppGallery Connect APM development guide
AppGallery Connect console
GitHub to download demos and sample codes
Stack Overflow to solve any integration problems​

An elucidation to Huawei React Native Scan Kit Plugin(Cross platform support)

Introduction
{
"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"
}
Growing old I always wondered how a product will have a barcode format on its back, how this has been generated and why this is required?
I found my answers when I searched this on internet during my college days and could not find any potential way to have this integrated on a small hand held device, however that era had lot many bulky barcode scanners available in the market and guess what!! They were huge at price and away from the reach of common people.
So the science and Technology filled this gap by providing us easy to use readymade API’s to integrate the scanning capabilities into our mobile applications.
But this was not sufficient as the developer always look for hassle free API integration with high quality results.
I was dumbfounded by the capabilities offered by the Huawei Scan kit as I started working on the QR code scanner application.
Huawei Scan Kit provides robust API’s to developer and deliver smooth and high quality barcode or QR code scanner applications.
Huawei Scan kit can also detect and magnify the slightly blurred barcodes places at a distance under the dim light.
Huawei Scan Kit offers, as follows:
Scanning of all the major barcodes by automatically detecting, magnifying and recognizing them
Parsing of all major 1D and 2D barcodes
Barcode generation.
Development Overview
Prerequisite
1. Must have a Huawei Developer Account
2. Must have a Huawei phone with HMS 4.0.0.300 or later
3. React Native environment with Android Studio, Node Js and Visual Studio code.
Major Dependencies
1. React Native CLI : 2.0.1
2. Gradle Version: 6.0.1
3. Gradle Plugin Version: 4.0.1
4. React Native Scan Kit SDK : 1.2.2.300
5. react-native-hms-scan kit gradle dependency
6. AGCP gradle dependency
Software Requirements
1. Java SDK 1.8 or later
2. Android 5.0 or later
Preparation
1. Create a react native project using React Native CLI and open android directory.
2. Download the React Native Scan Kit SDK and paste It under Node modules directory of React Native project.
3. Create an app and project in the Huawei AppGallery Connect.
4. Provide the SHA Key and App Package name of the project.
5. Download the agconnect-services.json file and paste to the app folder of your android folder.
Integration
Add below to build.gradle (project)file, under buildscript/repositories and allprojects/repositories.
Code:
Maven {url 'http://developer.huawei.com/repo/'}
Add below to build.gradle (app) file, under dependencies to use the Scan kit SDK in your React Native application.
Code:
dependencies{
// Import the SDK.
implementation project(":react-native-hms-scan")
}
Add below under Settings.Gradle file.
Code:
include ':react-native-hms-scan'
Code:
project(':react-native-hms-scan').projectDir = new File(rootProject.projectDir, '../node_modules/@hmscore/react-native-hms-scan/android')
Add below under MainApplication.java file.
Code:
import com.huawei.hms.rn.scan.RNHMSScanPackage;
interface// parclable @Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//Add following line. Don't forget to add import statement also.
packages.add(new RNHMSScanPackage());
return packages;
}
...
};
Use case
Huawei scan kit provides 5 different API’s to support different requirements and use case ranging from text reading application to payment applications. Below are the supported functionalities for same.
In this article the highlight would be generation of QR code for a URL access and also we will see how can we fetch the QR code information from the QR codes using Default View HMS react native API’s.
Adding Required Permission
React Native plugin for scan kit requires Camera and Storage permissions, same needs to be added into the APP.js file on a button click.
Code:
import ScanPlugin from "@hmscore/react-native-hms-scan";
<Button
color="Grey "
title="Request Permission"
onPress={() =>
ScanPlugin.Permission.requestCameraAndStoragePermission().then(
(res) => {
console.log("result", res);
this.setState({permissionGranted: res});
},
)
}
/>
//Also check if the permission is enabled or not prior further operation
const response = await ScanPlugin.Permission.hasCameraAndStoragePermission();
this.setState({permissionGranted: response});
Generating Barcodes
Use the barcode generation API of Scan Kit to generate a barcode as follows:
The app specifies the barcode width and height, character string and format.
The app calls the barcode generation API, buildBitmap from Utils module of the Scan Kit React Native Plugin.
The HMS Scan React Native Plugin sends the generated barcode to the app as Base64 encoded String of Bitmap Image.
Parameters
Set the character string that will be converted into a barcode, set its width and height, and specify the barcode format.
The parameters are as follows:
content: (Required) Barcode content.
width: (Optional) Width of a barcode to be generated.
height: (Optional) Height of a barcode to be generated.
type: (Optional) Barcode format.
margin: (Optional) Barcode margin.
bitmapColor: (Optional) Barcode colour.
backgroundColor: (Optional) Barcode background colour.
More details, you can visit https://forums.developer.huawei.com/forumPortal/en/topic/0203418564668030036
Informative

[Guide] Releasing a Huawei Quick Game Using the LayaAir Engine

Environment for Game Release and Testing
1. Have a Huawei mobile phone ready.
2. Connect that mobile phone to a PC using a data cable, and make sure that it remains connected during the game release.
The reason is that a Huawei quick game will not generate a QR code for release, so the data cable is needed during the release process. Otherwise, only one RPK package will be generated during game release in the LayaAir IDE, and you still need to connect the two devices and copy the RPK package to the mobile phone.
3. Install Node.js 10.x. You can download it here: https://nodejs.org/download/release/latest-v10.x/.
4. Install the LayaAir 2.8.1 IDE, or a later version. You can download it here: https://ldc2.layabox.com/layadownload/?type=layaairide.
Preparations
To ensure that your game release goes as smoothly as possible, make sure that you:
1. Have installed Node.js and LayaAir IDE on your PC. You do not need to install the ADB and OpenSSL, as they are built into the LayaAir IDE.
2. Have enabled the developer mode on your mobile phone, and allowed for USB debugging.
{
"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"
}
If you do not know how to enable the developer mode, you can check Huawei’s documentation at https://developer.huawei.com/consumer/en/doc/quickapp-open-developer-option.
Releasing a Huawei Quick Game in the LayaAir IDE
First, use the release function for the LayaAir IDE to package the Huawei quick game project to an RPK file. Then, open this project in the IDE and go to Project > Release. Select the release platform huawei fast game and set Minimum platform version(1075). Lastly, click publish to release your quick game.
I won’t describe the steps required for release in detail here. If you have any questions, please refer to the official website.
About the Certificate Fingerprint
If the release signature has been generated in the project, you can print the signing certificate fingerprint on the release page. This fingerprint will be used when you submit a Huawei quick game.
It’s important to note that the print button is only available after the release signature is generated. If no signature is generated, the message shown in the following figure will be displayed, indicating that the certificate does not exist.
Running and Testing the Game on a Real Device
After the game has been successfully released on LayaAir IDE, it will automatically run on the Huawei phone in full-screen mode. If you exit the game, you can also launch the Huawei Quick App Loader and tap the game name to restart the game.
Debugging the Game
No tool is available for debugging a Huawei quick game, so you’ll need to make sure that your browser supports the HTML5 version of the game. Debugging your Huawei quick game requires that you check its logs, so you’ll need to retain the default value log for the log level in LayaAir IDE, as shown in the figure below. In this case, both the LayaAir IDE logs and error logs will be recorded. If you set the log level to error, only error logs will be recorded. Both options allow you to view logs after the game’s release. If you select off, no logs will be available.
You can directly view logs on the project release page, as shown below.
You can also open another CLI on your PC to view logs by entering the following command. This method enables you to avoid keeping the IDE open for debugging for a long period.
adb logcat -s jsLog
All logs generated during runtime after the release are displayed in the CLI, as shown below.
If you would like to export logs, please use Huawei Quick App PC Assistant.
FAQs
1. Do Huawei quick games support package splitting?
Splitting the package of a Huawei quick game and loading its subpackages helps reduce the traffic and time required for app downloads. When doing so, you can choose to load or download specific subpackages, rather than the entire package.
Before using this method, you’ll need to determine whether this method is necessary for your project. Most quick game packages are small enough that they do not necessarily require splitting. You can opt to:
(1) Delete unnecessary JavaScript code.
If the package is not split, the JavaScript files referenced in the index.js and HTML files are packaged in the last RPK file, unless these JavaScript files are referenced elsewhere in the project. You can also directly delete the unused JavaScript files, for example, those of unused engine libraries and third-party class libraries, to reduce the package size.
(2) Compress and obfuscate JavaScript files.
This can significantly reduce the file size. If the file size does not exceed 4 MB, you won’t need to split the package, as game content can be dynamically loaded through URLs. After the content is loaded for the first time, it is stored in the physical cache. Common content that occupies less than 50 MB will not be reloaded the next time.
2. When a third-party library, for example, protobuf, is introduced, the gameThirdScriptError error is reported. What should I do?
A potential cause is that the library contains such code as Function(“return this”)();. For security purposes, the game engine disables such code by default. It is recommended that you modify the JavaScript code. In addition to protobuf, the following third-party libraries have similar code. If these libraries need to be introduced, you’ll need to modify the code as well.
If you do not modify the code, you’ll need to enable the runGame parameter, which is not recommended.
For more information, please refer to:
Huawei Quick App PC Assistant materials:
https://developer.huawei.com/consum...ickApp-Guides/quickapp-pcassistant-user-guide
Huawei quick game materials:
https://developer.huawei.com/consum...uickApp-Guides/quickgame-develop-runtime-game

Categories

Resources