Detailed explanation of CocosCreator optimization DrawCall

Preface

In game development, DrawCall is a very important performance indicator that directly affects the overall performance of the game.
Whether it is Cocos Creator, Unity, Unreal or other game engines, DrawCall is absolutely indispensable when it comes to game performance optimization.
This article will introduce what DrawCall is, why you should reduce DrawCall, and how to reduce DrawCall in Cocos Creator projects to improve game performance.

What is DrawCall

DrawCall is the CPU calling the graphics drawing interface of the graphics library (such as DirectX or OpenGL) to command the GPU to perform rendering operations.

How does DrawCall affect performance?

Let me give you an example:
Which one takes less time: pulling 1024 1kb files from a server via http or pulling a single 1M file?
Answer: It is definitely faster to pull a single 1M file.
The reason is that before each request, http needs to do a lot of preparation to ensure that the file can be transmitted normally. And it is this extra work that causes a lot of time and performance overhead.

The CPU calls DrawCall every time it draws, and before calling DrawCall, the CPU has to do a lot of preparatory work: detecting the rendering status, submitting the data required for rendering, and submitting the status required for rendering.
The GPU itself has very powerful computing power and can handle rendering tasks very quickly. Generally speaking, drawing 100 triangles takes about the same amount of time as drawing 1000 triangles.
However, when there are too many DrawCalls, the CPU will have a lot of extra overhead for preparation work, the CPU itself is loaded, and the GPU may be idle at this time.

**That is to say, it is precisely because the CPU needs to do a series of preparations before each rendering, and each memory read and write, data processing and rendering state switching of the CPU will bring a certain performance and time consumption, which accumulates over time, while the GPU is slacking off most of the time.
That’s why we think that too many DrawCalls cause lag.

How to reduce DrawCall

As mentioned above, we can achieve our goal by assigning more work to the CPU at a time, rendering more content at a time, and reducing the number of allocations.
That being said, how should we actually implement it? Look down

For image resources

Static image

It means integrating fragmented pictures into a large picture, which is what we often call a picture album.
But the atlas is not created randomly, and it is not the case that the more small pictures a large picture can contain, the better. There are certain tricks involved here.

Try to pack adjacent fragments with the same rendering status in the same interface (UI) into an atlas

For Creator, when the game is running, the engine renders from top to bottom and from shallow to deep in the order of node hierarchy. In theory, a DrawCall is required for each rendered image (text is ultimately also an image).
Rendering state refers to: texture state (premultiplication, loop mode and filter mode) or Material, Blend, etc., so using a custom Shader will also interrupt batching.

So being adjacent and having the same rendering state is the key point.
Tip: It is not recommended that the size of any image resource exceed 2048*2048, otherwise loading-related problems may occur.

Here are 2 ways to create a collection of pictures:

Auto Atlas

Use the built-in automatic atlas resource of Cocos Creator to pack the fragments into an atlas.
When the project is built, the editor will package all images that meet the requirements in the folder where all automatic atlas resources are located into one or more atlases according to the configuration.
Automatic atlas resources are very flexible to use. The editor will automatically recurse into subdirectories when packaging the atlas. If there are also automatic atlas resources (i.e. .pac files) in the subdirectory, the directory will be skipped, so we can configure different parameters for different parts of the same directory.

Some suggestions on automatic atlas

Reasonably control the maximum size of the atlas to avoid long loading time for a single image. Images that are too large do not need to be included in the atlas (such as background images). Making good use of Sliced ​​can save a lot of space (this requires the cooperation of an art expert). Keep the default spacing of 2 and keep the margin expansion option checked to avoid image cropping errors and black edges. Check the Do not include unreferenced resources option to automatically exclude unused images to save space (this option is invalid during preview). Preview the atlas during development and make adjustments based on the results to achieve the best optimization effect.

TexturePacker

When using TexturePacker to pack atlases, you need to configure "Shape Padding (corresponding to the spacing in Auto Atlas)" to avoid the situation where pixels of adjacent images appear in a certain image.

Compare

Auto Atlas

• Cocos Creator built-in, convenient
• Not many functions but everything you need
• The atlas is generated only when the project is built, and there is no pressure to modify it at will during development
• The atlas size is adaptive when generated to save space
• Support automatic texture compression

TexturePacker

• Third-party software needs to be installed by yourself, which is not convenient enough
• There are many paid functions that are very professional but basically not needed, and the free functions are enough
• Generate the atlas first and then use it. If you change the image, you need to regenerate the atlas.
• Fixed size needs to be set by yourself
• Automatic texture compression and dynamic merging are not supported

Creator official description:

Cocos Creator provides a static atlas method when building a project - "Auto Atlas". However, when the project grows, the number of textures will become very large, and it is difficult to pack the textures into one large texture. At this time, static texture combination is difficult to meet the demand of reducing DrawCall.
Therefore, Cocos Creator added the "Dynamic Atlas" feature in v2.0, which can dynamically merge textures into a large texture when the project is running. When rendering a texture, the dynamic merging system will automatically detect whether the texture has been merged into the atlas (picture collection). If not, and the texture meets the conditions for dynamic merging, it will be merged into the atlas.
Dynamic image combination official documentation:
https://docs.cocos.com/creator/manual/en/advanced-topics/dynamic-atlas.html

There are two limitations to dynamic atlases:

• The maximum size of the dynamic atlas is 2048 * 2048
• The size of the fragmented image cannot exceed 512 by default, and can be modified through the API: cc.dynamicAtlasManager.maxFrameSize = 512

Tips: Enabling dynamic image merging will increase memory consumption, and the memory usage on different platforms is inconsistent. By default, dynamic image synthesis is prohibited in mini-games and native platforms. You can enable it by yourself through the API: cc.macro.CLEANUP_IMAGE_CACHE = false; cc.dynamicAtlasManager.enabled = true;
It is also necessary to ensure that the texture's Premulyiply Alpha, Wrap Mode, Filter Mode and other information are consistent with the dynamic atlas before dynamic batching can be achieved.

In addition, static atlases can also participate in dynamic merging as long as they meet the requirements of dynamic merging.
Tip1: For Auto Atlas resources, you need to enable the Packable option under the Texture column in its Property Inspector panel. This option is disabled by default .
Tip2: Sprites also need to enable the Packable option in order to dynamically combine images. This option is on by default .
Tip3: If you want to use shader, you need to disable the Packable option of the sprite.

For Label

Bitmap font (BMFont)

In Creator, using system fonts or TTF fonts in Labels will interrupt the rendering batch, especially when Labels and Sprites are overlapped and interlaced. Each Label will interrupt the batch and add a DrawCall.

Therefore, it is recommended to use BMFont instead of TTF or system fonts, and pack BMFont and UI fragments into the same atlas (or "turn on dynamic combination"), which can avoid the increase of DrawCall caused by most texts.

Cache Mode

Creator 2.0.9 version adds a Cache Mode option to the Label component to solve the performance issues caused by system fonts and TTF fonts.
There are three options for CacheMode:

• NONE (default) Each Label will be generated as a separate bitmap and will not participate in dynamic merging, so each Label will interrupt the rendering batch.
• BITMAP After turning on BITMAP mode, the text will also be generated as a bitmap, but as long as it meets the dynamic merging requirements, it can participate in dynamic merging and merge DrawCall with the surrounding sprites. It is important to note that BITMAP mode is only suitable for text that does not change frequently, otherwise memory will explode.
• CHAR When CHAR mode is turned on, the engine will cache all characters appearing in the Label into a globally shared bitmap, which is equivalent to generating a BMFont. Suitable for situations where text changes frequently, and is the most friendly to performance and memory. Tip: This mode can only be used for labels with fixed font style and size, and where a large number of unused characters do not appear frequently . Because the maximum size of the shared bitmap is 2048*2048, once it is full, no new characters can be rendered, and the shared bitmap will be cleared only when the scene is switched.

Summary: For large amounts of frequently changing text, the performance improvement brought by using CHAR mode is very obvious.
At the same time, the limitations of CHAR mode are also obvious. It is generally used when a large amount of digital text appears in the scene, similar to special effects such as experience value increase and health reduction.

The only way – adjust the UI hierarchy order

in principle:

Separate image nodes and text nodes. Use BMFont or Cache Mode options for text, and try to avoid text interrupting rendering batches. FBI WARNING: A Mask component and the rendering nodes it controls require at least three Draw calls. The first time the template test is turned on and a Draw call is called to refresh the template buffer. The second drawing sets the area that needs to pass the template test. The third time, the actual subnode content is drawn, and the template test is closed after the drawing is completed. Therefore, when using the Mask component, it is impossible to batch process with other adjacent nodes , but the continuous nodes inside the Mask component will still be batched if the merging rules are met.

Summarize

Changing the rendering state will interrupt the rendering batch, such as changing the texture state (premultiplication, loop mode and filtering mode) or changing the Material, Blend, etc., so using a custom Shader will also interrupt the batch. By default, atlases do not participate in dynamic merging. After manually turning on the Packable option of the automatic atlas resource, if the final atlas meets the requirements of dynamic merging, it can also participate in dynamic merging. After the texture has the Packable option enabled and participates in dynamic merging, you cannot use a custom shader because dynamic merging will modify the UV coordinates of the original texture. When using the BITMAP mode of Cache Mode, you need to pay attention to the memory situation. When using the CHAR mode, you need to pay attention to not having too much text content. In versions prior to Cocos Creator 2.0.7, changing the color or transparency of a node or using Sliced ​​in a Sprite component will interrupt the batch rendering.

The above is a detailed explanation of CocosCreator’s optimization of DrawCall. For more information about CocosCreator’s optimization of DrawCall, please pay attention to other related articles on 123WORDPRESS.COM!