Cocos Creator mini-game/H5 first package, sub-contract, loading optimization plan and project examples
Today is Crazy Thursday, and I would like to show you my recent results.
Qilinzi upgraded "Jare's Adventure" to Cocos Creator 3.8 last weekend and updated it to the Cocos Store.
After doing more sophisticated subcontracting management, splitting resource loading, and using analysis tools to eliminate unnecessary resource loading, it was finally possible to enter the game almost instantly.
Today I will share with you how I optimize subpackage loading.
Content subcontracting
Recommended plan
- The first package : mainly contains loading scenes, references as few resources as possible, and cannot reference other sub-packaged codes.
- Basic package : mainly includes main menu scenes and some common interfaces, resources, codes, etc.
- Game package: Game play-related scenes, resources, code, etc.
Since the game package is loaded later, the game package can reference the code of the base package and the first package.
- Others : The remaining packages can be divided according to needs. Different sub-games are in a separate package, and there are many materials that need to be sub-packaged. Due to platform restrictions, they must be divided into multiple packages, etc.
Next let's see how we got this solution.
Cocos Creator's bundle (sub-packaging) mechanism can split the game into different bundles.
First let's take a look at the built-in bundles.
Their priority is as follows:
Here are a few key rules:
- The code and resources of different bundles will be packaged into different bundles.
- If the referenced resource is referenced in a high-priority bundle, it will be packaged into the high-priority bundle first (except code, except code, except code).
- The code must be in the corresponding bundle to be used.
- The four built-in bundles will be loaded from high to low priority.
- The subcontracting process cannot be verified until the build is released. The test version will not perform code sub-packaging detection.
Note: The code in the resources and main packages can be used in any sub-package.
From this, we can get the roughest subcontracting plan.
- First package: Only a very simple loading scene and related code are retained.
- Game Pack: Has resources for the entire game.
Under this mechanism, since the first package only contains the simplest resources, the engine loads the first package very quickly after starting. After entering the first package, start the loading process. At this time, the screen and progress bar will appear, so the user will not be anxious.
But there are several situations to pay attention to:
- The first package loads the scene, closes the skybox, and removes references to the skybox and any 3D materials. This can avoid adding skybox and 3D material-related content into the first package.
- Do not use any code in other sub-packages in the first package, otherwise it will prompt that the XXX class cannot be found when running after packaging.
- Do not use the resources package as a game package. When there are many files, the subpackaged config.json will be large. However, the subcontracting information of resources needs to be loaded first before main is loaded, which will make the startup process longer.
- The preloading of subpackages only loads the subpackage information and does not load the subpackage resources.
But some games usually have a main menu interface for players to choose how to play, customize their own data, select levels, sign in, etc.
When the user is in this interface, there is no need to load game materials. In this case, a separate package can be used as a buffer.
When users click to enter the game, they can accept longer loading times and have a better experience. For some games with a lot of resources, heavy gameplay, and long level loading times, it is a must-have choice.
In addition, there are some special circumstances to consider. In the end, the initial set of recommended plans was formed: first package, basic package, game package and other packages.
UI split
After the subcontracting is successful, we can quickly enter the game. But for many games, there will be a lot of panels in the scene. If these panels are placed in the scene node, the scene file will be very large, and the parsing and initialization time will be very long.
Here, I used the latest OpenTGXframework to optimize interface management.
You only need to edit the Prefab and write the Controller, and you can display the desired interface anywhere with one line of code.
tgxUIMgr.inst.showUI(UI_GameHUD);
Interface layering, resource loading, and resolution adaptation are all managed automatically.
For
OpenTGXan introduction, please view the official account menu.
Dependency analysis
The functions in WeChat Developer Tools 代码依赖分析can be said to be excellent resource subcontracting analysis tools. It can help us check the package size and find out the large files in the package.
The entry in WeChat developer tools is as follows:
The following is the subcontracting diagram before optimization (11.43MB):
Through analysis, I found some situations in my resources:
- One image was 2.92MB, but when I converted it to jpg it became 522 KB.
- The chicken model used two identical pictures. After removing them and converting them into jpg, the size was reduced from the original 1.5 MB to only 177KB.
- The object model uses multiple PNGs. After being converted to JPG, the size was reduced from 1.04 MB to 237 KB.
The final subpackage size is as follows (7.44MB):
The total package dropped from 11.43MB to 7.44MB, a reduction of 3.99MB.
More room for optimization
At present, I have only manually processed some visible larger images and removed resource references that should not exist.
If you want to fully optimize more packages, you can use image compression tools such as pngquat to process all the 3D model textures, which can reduce it a lot.
About OpenTGX
In the past year or so, Qilinzi has spent most of his time on guiding newcomers to get started and teaching graphics rendering, while ignoring the needs of certain groups, such as:
- Requires technical advancement and growth , and learning practical project handling skills
- High-quality project templates are needed to quickly verify project prototypes and enter the iteration cycle
- A high-quality framework is needed to solve project module management and some basic issues.
So Kirinzi took some time, rebooted KylinsToolkit, and changed its name OpenTGX.
OpenTGX is an open source free full-stack game development solution based on TypeScript.
The difference from other open source frameworks is that it is not a pure framework. Instead, it relies on a unified basic framework and a large number of template cases to meet industry needs and solve project problems.
Open = open source, open T = TypeScript , the front and back
ends of this solution are written in TS language
G = Game Development Technique, game development technology is the usage entrance, G is the technical basis, and X is the plan and goal
OpenTGX accelerates development on both the client and server sides. The client is based on Cocos Creator (can be published to almost all mainstream platforms), and the server uses NodeJS (the world's most popular JS/TS server program development platform).
Currently, OpenTGXthe basic library includes the following parts:
base: Some basic tool components, such as automatic screen adaptation, resource loading queue, sound playback manager, input manager, etc.easy_camera: Roaming camera, FPS camera, third-person camera, 2D following cameraeasy_controller: Virtual joystick (supports 2D and 3D), buttons, camera controllereasy_ui_framework: A minimalist version of MVVM-type UI framework, one-way dependent on logical data. Supports UI layered management, UI autoloader, UI event hosting, etc.
Later, the network, common controls for 2D games, common controls for 3D games, etc. will be gradually added.
Click here to enter the OpenTGX open source warehouse page!
I will consider code cloud mirroring in the future, but I don’t know how to do it yet. Friends who know how can teach me.
Scan the code to experience the game
Come here today, everyone can start to experience it
