How to Integrate HUAWEI ML Kit and Create a Hit Game - Huawei Developers

There are so many online games these days that are addictive, easy to play, and suitable for gamers of all ages. So, have you ever dreamed of creating a hit game of your own? If this is something you are interested in, HUAWEI ML Kit's face detection and hand keypoint detection capabilities can help you.
Crazy Rockets is a game that integrates both of these capabilities. With its two playing modes, players can control rockets using both their hands and faces. Both modes work flawlessly by detecting the motions.
Crazy Shopping Cart integrates ML Kit's hand keypoint detection capability. Players control a shopping cart by moving their hands, and try to collect as many items as they can. The cart speeds up every 15 seconds.
Crazy Rockets-Development Practice
1. Face Detection
1.1 Configure the Maven repository.
l Go to allprojects > repositories and configure the Maven repository address for the HMS Core SDK.
Code:
allprojects {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
}
Go to buildscript> repositories and configure the Maven repository address for the HMS Core SDK.
Code:
buildscript {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
}
Go to buildscript> dependencies and add the AppGallery Connect plug-in configurations.
Code:
dependencies {
...
classpath 'com.huawei.agconnect:agcp:1.3.1.300'
}
}
1.2 Integrate the SDK.
Code:
Implementation 'com.huawei.hms:ml-computer-vision-face:2.0.1.300'
1.3 Create a face analyzer.
Code:
MLFaceAnalyzer analyzer = MLAnalyzerFactory.getInstance().getFaceAnalyzer();
1.4 Create a processing class.
Code:
public class FaceAnalyzerTransactor implements MLAnalyzer.MLTransactor<MLFace> {
@Override
public void transactResult(MLAnalyzer.Result<MLFace> results) {
SparseArray<MLFace> items = results.getAnalyseList();
// Process detection results as required. Note that only the detection results are processed.
// Other detection-related APIs provided by ML Kit cannot be called.
}
@Override
public void destroy() {
// Callback method used to release resources when the detection ends.
}
1.5 Create an instance of LensEngine to capture dynamic camera streams, and pass them to the analyzer.
Code:
LensEngine lensEngine = new LensEngine.Creator(getApplicationContext(), analyzer)
.setLensType(LensEngine.BACK_LENS)
.applyDisplayDimension(1440, 1080)
.applyFps(30.0f)
.enableAutomaticFocus(true)
.create();
1.6 Call the run method to start the camera, and read camera streams for detection.
Code:
// Implement other logic of the SurfaceView control by yourself.
SurfaceView mSurfaceView = findViewById(R.id.surface_view);
try {
lensEngine.run(mSurfaceView.getHolder());
} catch (IOException e) {
// Exception handling logic.
}
1.7 Release detection resources.
Code:
if (analyzer != null) {
try {
analyzer.stop();
} catch (IOException e) {
// Exception handling.
}
}
if (lensEngine != null) {
lensEngine.release();
2. Hand Keypoint Detection
2.1 Configure the Maven repository.
l Go to allprojects > repositories and configure the Maven repository address for the HMS
Code:
allprojects {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
}
Core SDK.
Code:
buildscript {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
}
Go to buildscript > repositories and configure the Maven repository address for the HMS Core SDK.
Go to buildscript > dependencies and add the AppGallery Connect plug-in configurations.
Code:
dependencies {
...
classpath 'com.huawei.agconnect:agcp:1.3.1.300'
}
}
Code:
// Import the base SDK.
implementation 'com.huawei.hms:ml-computer-vision-handkeypoint:2.0.4.300'
// Import the hand keypoint detection model package.
implementation 'com.huawei.hms:ml-computer-vision-handkeypoint-model:2.0.4.300'
2.2 Integrate the SDK.
Code:
MLHandKeypointAnalyzer analyzer =MLHandKeypointAnalyzerFactory.getInstance().getHandKeypointAnalyzer();
2.3 Create a default hand keypoint analyzer.
2.4 Create a processing class.
Code:
public class HandKeypointTransactor implements MLAnalyzer.MLTransactor<List<MLHandKeypoints>> {
@Override
public void transactResult(MLAnalyzer.Result<List<MLHandKeypoints>> results) {
SparseArray<List<MLHandKeypoints>> analyseList = results.getAnalyseList();
// Process detection results as required. Note that only the detection results are processed.
// Other detection-related APIs provided by ML Kit cannot be called.
}
@Override
public void destroy() {
// Callback method used to release resources when the detection ends.
}
}
2.5 Set the processing class.
Code:
analyzer.setTransactor(new HandKeypointTransactor());
2.6 Create a LensEngine.
Code:
LensEngine lensEngine = new LensEngine.Creator(getApplicationContext(), analyzer)
.setLensType(LensEngine.BACK_LENS)
.applyDisplayDimension(1280, 720)
.applyFps(20.0f)
.enableAutomaticFocus(true)
.create();
2.7 Call the run method to start the camera, and read camera streams for detection.
Code:
// Implement other logic of the SurfaceView control by yourself.
SurfaceView mSurfaceView = findViewById(R.id.surface_view);
try {
lensEngine.run(mSurfaceView.getHolder());
} catch (IOException e) {
// Exception handling logic.
}
2.8 Release detection resources.
Code:
if (analyzer != null) {
analyzer.stop();
}
if (lensEngine != null) {
lensEngine.release();
}
Crazy Shopping Cart-Development Practice
1. Configure the Maven repository address.
Code:
buildscript { repositories { google() jcenter() maven {url 'https://developer.huawei.com/repo/'} } dependencies { ... classpath 'com.huawei.agconnect:agcp:1.4.1.300' }} allprojects { repositories { google() jcenter() maven {url 'https://developer.huawei.com/repo/'} }}
dependencies{ // Import the base SDK. implementation 'com.huawei.hms:ml-computer-vision-handkeypoint:2.0.4.300' // Import the hand keypoint detection model package. implementation 'com.huawei.hms:ml-computer-vision-handkeypoint-model:2.0.4.300'}
2. Perform integration in full SDK mode.
Once you've integrated the SDK in either mode, add the following configuration to the file header:
Add apply plugin: 'com.huawei.agconnect' after apply plugin: 'com.android.application'.
Code:
MLHandKeypointAnalyzer analyzer =MLHandKeypointAnalyzerFactory.getInstance().getHandKeypointAnalyzer();
3. Create a hand keypoint analyzer.
Code:
public class HandKeypointTransactor implements MLAnalyzer.MLTransactor<List<MLHandKeypoints>> {
@Override
public void transactResult(MLAnalyzer.Result<List<MLHandKeypoints>> results) {
SparseArray<List<MLHandKeypoints>> analyseList = results.getAnalyseList();
// Process detection results as required. Note that only the detection results are processed.
// Other detection-related APIs provided by ML Kit cannot be called.
}
@Override
public void destroy() {
// Callback method used to release resources when the detection ends.
}
}
4. Create the detection result processing class HandKeypointTransactor.
Code:
analyzer.setTransactor(new HandKeypointTransactor());
5. Set the detection result processor, and bind it to the analyzer.
6. Create a LensEngine.
Code:
LensEngine lensEngine = new LensEngine.Creator(getApplicationContext(), analyzer)
.setLensType(LensEngine.BACK_LENS)
.applyDisplayDimension(1280, 720)
.applyFps(20.0f)
.enableAutomaticFocus(true)
.create();
7. Call the run method to start the camera and read camera streams for detection.
Code:
// Implement other logic of the SurfaceView control by yourself.SurfaceView mSurfaceView = findViewById(R.id.surface_view);try { lensEngine.run(mSurfaceView.getHolder());} catch (IOException e) { // Exception handling logic.}
if (analyzer != null) { analyzer.stop();}if (lensEngine != null) { lensEngine.release();}
8. After the detection is complete, stop the analyzer, and release detection resources.
As you can see, the development process is really quick and simple. As well as these games, ML Kit's face detection and hand keypoint detection capabilities have lots of other useful applications. For example, users can add cute or funny special effects to their videos when using short-video apps with these capabilities integrated. Also, for smart home apps, users can customize the hand gestures they use to remotely control appliances. Try these capabilities out for yourself by integrating HUAWEI ML Kit into your own apps.
Learn More
For more information, please visit HUAWEI Developers.
For detailed instructions, please visit Development Guides.
To join the developer discussion, please go to Reddit.
To download the demo and sample code, please go to GitHub.
To solve integration problems, please go to Stack Overflow.