Packaging an HTML5 Game into a Quick Game

You can use the quick app web component to quickly package an HTML5 game into a quick game. As long as the URL of the original HTML5 game remains unchanged, the quick app does not need to be upgraded, which reduces the maintenance workload.

You can package a quick game in the Quick App IDE in just 7 steps.

1. Download the Quick App IDE from Installing the Development Tool and install it on your PC.

2. Go to File > New Project > New QuickApp Project and create a project. Choose HTML5 Game in Template.

• App Name: app name, which corresponds to the name field in the manifest.json file.
• Package Name: app package name, which corresponds to the package field in the manifest.json file.

3. Click Ok to create a quick game project.

4. Configure the manifest.json file.

• package: quick game package name. Once the game is released, the package name cannot be changed. Otherwise, the game cannot be upgraded.
• name: quick game name.
• versionName: quick game version name. The value must be increased by 1 upon upgrade. For example, if the name of the source version is 1.0.0, the name of the target version must be 2.0.0.
• versionCode: quick game version number. The value must be increased by 1 upon upgrade. For example, if the number of the source version is 1, the number of the target version must be 2.
• icon: quick game logo used in a shortcut icon created on the home screen. Replace logo.png with the HTML5 game icon.
• minPlatformVersion: minimum platform version with which an app is compatible, which functions like the Android API level. You are advised to set the platform to the latest version, for example, version 1070, to avoid incompatibility.

{
“package”: “com.huawei.quickgamedemo”,
“name”: “QuickGameDemo”,
“versionName”: “1.0.0”,
“versionCode”: 1,
“icon”: “/Common/logo.png”,
“minPlatformVersion”: 1070,
“features”: [
{
“name”: “system.prompt”
},
{
“name”: “service.pay”
},
{
“name”: “service.account”
}
],
“permissions”: [
{
“origin”: “*”
}
],
“config”: {},
“router”: {
“entry”: “Hello”,
“pages”: {
“Hello”: {
“component”: “hello”
}
}
},
“display”: {
“titleBar”: false,
“fullScreen”: true
}
}

3. Edit the .ux file for loading the HTML5 game. The project takes hello.ux as an example.

• src: URL of the HTML5 game.
• fullscreendirection: game orientation. Both landscape and portrait orientations are supported.
• jumppolicy: URL redirection policy within the game. If ads are integrated into the game, you are advised to set this parameter to browser and set the value of multiwindow to true.
• allowthirdpartycookies: indicates whether cross-domain cookies transfer is supported. The default value is false. If a web page needs to access cookies across domains, for example, in the scenario of sign-in with a third-party account, set this parameter to true.
• trustedurl: Set this parameter if the launch page is different from the loading page displayed after a user has successfully signed in.

4. Go to Tools > Certificate to check whether a formal certificate has been generated. If no certificate is generated, click Create to generate one and save it to the sign > release directory of the project. Keep the file properly as it cannot be retrieved once lost.

5. Go to Build > Run Release to package a formal .rpk package, which is stored in the dist directory of the project.

Note: The .rpk file for release on AppGallery must be packaged following the preceding method.

The final directory structure of the quick game project is as follows:

Now, you have successfully packaged the HTML5 game into a quick game. If you want to integrate more functions into the game, or test and run your game, please refer to the Quick Game Development Guide (HTML5).