Building A Mesmerizing Game For Apps And Mini Apps At The Same Time

It has been more than a year since the ancient-style simulation business game "Call Me Mr. Big Boss" developed by Yanqu Games was launched. During this period, the game has been continuously enriched, iteratively optimized, and even had promotion and distribution upgrades, successfully attracting and retaining a large group of players. In the Cocos Star Meetings in Xiamen, Cheng Gran, the main director of “Call Me Mr. Big Boss” shared the technical development experience of building the project’s App and mini-games at the same time.

“Call Me Mr. Big Boss” is a simulation business game released globally. It has been released in multiple languages ​​and on various platforms in 8 countries and regions, so it requires content versions to be updated and iterated quickly.

The project was established in mid-2019. Only the app was considered at that time, and the relatively new Cocos Creator 2.2.2 was selected for development. The UI system editor was designed with fgui, mainly because it supports multi-language and multi-region functions.

The mini game version was put into research and development in April 2021, using Cocos Creator 2.4.4, and later upgraded to v2.4.7. v2.4.x began to support the AssetBundle function, which can replace the sub-package function of the previous version, with better performance and support for the sub-package function of WeChat and other mini game platforms. In addition, the upgrade also takes into account that the subsequent Creator version upgrade will be more efficient and friendly.

Our project does not want players to force app changes because app force changes may cause user churn, so the project would not be able to do an app version engine upgrades, where the code also can not be done in various sub-packages, resulting in the code only being placed inside a sub-package. With version updates, the amount of code will get bigger and bigger. In contrast, the current project sub-package only does resource management updates.

Since there are two Cocos Creator engine versions in the project, but only one project code is used, we have also made a set of engine API-compatible intermediate layers, mainly reflected in resource loading management and some material-related code.



I will introduce the technical research and development experience of the two versions of the “Call Me Mr. Big Boss” app and the mini game.

App technology sharing

Multi-packer packing and hot update, remote resource management

How to efficiently package hot update packages? In response to this, we have modified and optimized based on v2.2.2. If the Creator is a higher version, it can be combined with the engine hot update logic to determine whether the following points are available.

The main programs are as follows:

  • The update timeout period is not related to the number of update files, and the timeout period of a single file is not associated with the file size. Still, the overall timeout experience is controllable and configurable. Solve the problem that during the hot update process, it is necessary to consider network fluctuations and cause the loading of individual files might timeout and cause the hot update to fail.

  • Modify the version comparison logic to make the hot update executable version rollback. The hot update of the engine can only be compared to the higher version, but in project practice, it is sometimes necessary to let the specified user fall back to the specified hot update version.

  • Divide all resources into four categories: main package resources, sub-package resources, supplemental resources, and remote resources, expanding the content later in the game without increasing the initial download package size. This part is a routine operation that most of the larger games consider.

  • By adding a custom md5 check in the file, the cross-packing of multiple packages is created to improve the efficiency and avoid the abnormal size of the hot-update patch of different packages.

  • Determine whether the resource package is regenerated by the md5 generated by the resource content.

  • Note : The above two points are to solve the repackaging of resources caused by different machines or meta changes, but in fact, the resources are still unchanged from the original, and it will be judged that the resource needs to be hot-updated when it is required.

Tabular data encryption and compression

  • Use the npm module xlsx function[1] to read excel table data. The module API is relatively stable and convenient.

  • Tabular data is packaged using protobuf [2] to generate binary content files. The use of protobuf mainly reflects two points: the generated file is small, and the encryption is efficient.

  • Use the embedded JS template engine EJS to customize TS file content: load protobuf binary code, custom enumeration, and structure code.

  • Make the generated code into a JS plug-in, add the plug-in to the project for use, and use the plug-in to decouple from the project code.

Large map display and optimization

  • We can learn from the principle of quadtree to load large maps in blocks. In this project, we also customize the block loading function according to the project requirements.

  • When sliding dynamic loading, it is loaded according to the camera lens attribute judgment.

  • Use the camera for visual effects such as moving, zooming, and positioning.

  • Note : Cocos Creator recommends the above two points, that is, try to use the camera function as much as possible instead of manipulating the node’s properties, which can significantly improve the performance.

  • Judging the display range of the camera controls the display and concealment of objects on the large map and will not be displayed if they are not within the specified range.

2D interface for 3D depth of field effect

640

  • Set the is3DNode of the floor node to true and adjust the eulerAngles property.

  • Next, for the image of the buildings, set the genMipmaps[3] of Texture2D to true, and the texture refresh is effective.

  • Regarding genMipmaps, improved performance for faster 3D scene rendering and reduced image aliasing.

Fgui virtual list multi-level node usage

The list component has always been the most frequently used component that affects the performance of our UI interface. If the list can be deeply optimized, it will solve most UI interface performance problems.

The number of renderings of DrawCall is an important indicator. This technology solves the problem of rendering batches being interrupted by other components. Divide a list into multi-level rendering and nodes that will not interrupt batch rendering can be placed on the same layer: image nodes (combined images) on one layer and text nodes on one layer.

If designed by fgui, related Api: GList.prototype.addLayer.

Mini game technology sharing

Mini game startup process optimization

Modify the main.js file of the mini-game, add an exception to the download process and try to re-download and give feedback to the user. This is to take into account the problems caused by low network speed.

Move the RESOURCES subpackage loading out of the main logic flow and load it again on the startup page to speed up the startup. Although the resources are placed on the remote CDN, there is a config.json file in it. Our project has a lot of resources, and this file will also be several megabytes in size. All files must be loaded in batches to avoid low network connection issues. Fast loading often fails.

Delete engine modules that are not used in the project. This is a normal operation.

Use the independent subprocesses of mini games to speed up the startup, but some mini game platforms, such as Huawei Quick Games, do not support it.

Multiple files can be properly grouped together. Too large a file will result in a high download failure rate at low network speed. If it is too small, the number of downloads will increase, and the overall download progress will be long. For example, the table configuration file in our project is divided into multiple combined files to download, and each combined file is about 3M.

Fgui dynamically creates nodes

Synchronized with resource loading

The logical process of opening the conventional interface is linear: load the prefab, load the corresponding resources → create nodes → interface display, and process business logic.

We have optimized this process and displayed the interface so that the interface is opened at one point and the content is rendered one by one. The core of the technical design is to fully use the different time-consuming loading of prefab configuration files and resource files and to create interface nodes and process business logic in advance. On the small game platform, the optimization effect of this solution will be more evident because the resources are all in the remote CDN, and the loading is closely related to the network speed. At the same time, for low-end machines, it takes time to create a single node in the complex interface.

Design principle:

  • Load the bin file of the interface Fgui package (similar to the prefab configuration) and load the image resources of the interface.
  • Loading the bin file will be completed faster than the image, then create interface nodes, record the texture-related node information, and other business logic can be processed before the image loading has completed.
  • After the image resources are loaded, reset the interface texture data.
  • Texture-related nodes include pictures, frame animations, and word art.


flow chart

Of course, the quick opening of the interface also involves other aspects of knowledge. Many great gods on the Internet give answers, such as proper planning and combination of interface resources and loading some resources (spine or special effects) in frames.

Fgui virtual list item loading

The virtual list means using one screen or more limited nodes to display a vast amount of list data, and the nodes are reused and just refresh the content to be displayed according to the data. For example, when the user slides up, the bottommost node is placed at the top, and when the user slides down, the topmost node is placed at the bottom.

However, in the mini game environment, affected by the network and low-end computers, creating node content that displays a screen in the same frame will also make users feel stuck visually, so it is necessary to generate nodes frame by frame to improve the interface effect.

In addition, different nodes are supported to display the list content. The bottom layer determines whether to create or reuse nodes according to the current size of all nodes and the display area size and sets the node position.


flow chart

Comparison of test results:

640
Before optimization

640 (5)
Optimized

Mini game code compression experience

Mini games have a limit on the total size of sub-packages. For example, the total size of all packages of WeChat mini-games cannot exceed 20M, and the main package cannot exceed 4M. However, as mentioned earlier, the App cannot be upgraded, and the project uses a common code, so the code cannot be sub-packaged but can only be placed in a sub-package, and the size has exceeded 20M.

The problem of the size of the project code, as long as it is based on the reasonable planning of sub-packages and the redundancy control of business logic, the general project is not a big problem unless the project content is substantial and the code amount exceeds the limit.

Design principle:

  • Using uglifyjs [4] for code compression, the function is more excellent and stable than other compression schemes.

  • Modify the shortcode generated by uglifyjs to start with a three-digit string to avoid the naming conflict of the following three-digit strings in the code.

  • Need to configure to skip the specified shortcode, such as jsb.

  • Configuration does not generate shortcode naming, including:

a. In principle, the network communication protocol field and table field can also achieve code compression, but considering the relatively wide influence, it is recommended to shield;

b. Engine-specific fields (prefabricated body properties, scene properties, shader properties), fields of different platform adaptation codes (WeChat mini games). These two points need special attention: if the team is looking for problems on their own, they need to be very clear about the engine code and the logic of the platform adaptation file in order to be sure to solve the problem.

c. Integrate the code compression process in the Creator plug-in and execute it in the packagingc process.

d. It can play the role of encryption code in mini games and H5.

e. The code needs to define the interface between the shortcode and the source code to obtain each other, and some logic in the code must use the source code.


flow chart

We have tested the optimization results, and the code compression rate after client compilation reaches about 25%. The highest our game has tested is to compress 21.3M to 15.4M.

There are two other small tips: one is that the project naming needs to be strictly standardized, and you need to pay attention to the variable reference logic through quotation marks. The other is that it is recommended to perform code coverage detection ‍ 5, which can more comprehensively detect code abnormalities.

Code file download optimization scheme

Due to the large size of a single code file, download failures often occur because of low network speed. WeChat mini-game sub-package download does not support breakpoint resuming, and the corresponding functions are processed at the bottom layer. We cannot modify the loading process.

The JS code content of the sub-package of Creator is mainly {file name: the content of the TS file}, and each file name in the sub-package is required when loading the JS code of the sub-package. As shown below:

Modify the content loading process of the JS file that generates the sub-package: When loading the sub-package, only save the JS file content of the sub-package {file name: the content of the TS file}, do not require, but also modify the code in the red box above.

Divide the original sub-package code into multiple sub-packages by configuring the number of TS files, and modify the sub-package configuration of the corresponding mini-game, such as setting.js and gam.json.


After loading the corresponding sub-packages in the game, the call requires saving the file name.

Thank you to Gran, for his work and the work his team is doing.


Gran’s sharing at Xiamen Event

Reference link

[1] xlsx

xlsx - npm

[2] protobuf

Protocol Buffers  |  Google Developers

[3] Official documentation - genMipmaps

Texture · Cocos Creator

[4] uglifyjs

GitHub - mishoo/UglifyJS: JavaScript parser / mangler / compressor / beautifier toolkit

[5] Code coverage detection

JavaScript code coverage · V8