|
| 1 | +# 2D Rendering Sorting Component |
| 2 | + |
| 3 | +The Sorting2D component allows customizing the rendering order of 2D objects without affecting the original node hierarchy. It can help solve the issue of increased DrawCalls caused by adjacent render objects using different materials. |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +## Sorting2D Properties |
| 8 | + |
| 9 | +| Property | Description | |
| 10 | +| :-------------- | :----------- | |
| 11 | +| sortingLayer | Sets the sorting layer for render objects. [**Modify project's sorting layer configuration**](../../editor/project/index.md#sorting-layers). Lower layers are rendered first. Default layer is "Default". | |
| 12 | +| sortingOrder | Sets the order of render objects within the same sorting layer. Objects with lower values are rendered first. If values are equal, nodes with lower hierarchy are rendered first. | |
| 13 | + |
| 14 | +**Note**: When recursively collecting render elements from a 2D node tree encounters a Mask renderer, it will use custom sorting rules to render the recorded 2D UI, reset the render state, recollect render elements, and continue using custom sorting rules for the remaining 2D UI after collection is complete. |
| 15 | + |
| 16 | +## Optimization Example |
| 17 | + |
| 18 | +1. Configure sorting layers in your project |
| 19 | + |
| 20 | +  |
| 21 | + |
| 22 | +2. Enable the `2D Rendering Sorting` module in `Project Settings -> Feature Cropping` |
| 23 | + |
| 24 | +  |
| 25 | + |
| 26 | +3. Add Sorting2D component to 2D UI nodes and set sorting layers and orders. |
| 27 | + |
| 28 | +  |
| 29 | + |
| 30 | +4. Build the project, run and observe optimization results |
| 31 | + |
| 32 | + * Before optimization |
| 33 | +  |
| 34 | + |
| 35 | + * After optimization |
| 36 | +  |
| 37 | + |
| 38 | +## Modifying Sorting2D Component's Layer and Order in Code |
| 39 | + |
| 40 | +```typescript |
| 41 | +import { _decorator, Component, find, Node, settings, Sorting2D } from 'cc'; |
| 42 | +const { ccclass, property } = _decorator; |
| 43 | + |
| 44 | +const sortingLayers = settings.querySettings("engine", "sortingLayers"); |
| 45 | +const default_layer = sortingLayers[0].value; |
| 46 | +const autoAtlas_1_layer = sortingLayers[1].value; |
| 47 | +const autoAtlas_2_layer = sortingLayers[2].value; |
| 48 | +const autoAtlas_1_1_layer = sortingLayers[3].value; |
| 49 | +const label_layer = sortingLayers[4].value; |
| 50 | + |
| 51 | +@ccclass('NewComponent') |
| 52 | +export class NewComponent extends Component { |
| 53 | + |
| 54 | + start() { |
| 55 | + var testNode = find("Canvas/test"); |
| 56 | + if (testNode) { |
| 57 | + this.changeUISortingLayer(testNode, autoAtlas_1_layer, 0); |
| 58 | + } |
| 59 | + } |
| 60 | + |
| 61 | + changeUISortingLayer(sortingNode: Node, sortingLayer: number, sortingOrder?: number) { |
| 62 | + if (sortingNode.getComponent(Sorting2D)) { |
| 63 | + sortingNode.getComponent(Sorting2D).sortingLayer = sortingLayer; |
| 64 | + if (sortingOrder !== undefined) { |
| 65 | + sortingNode.getComponent(Sorting2D).sortingOrder = sortingOrder; |
| 66 | + } |
| 67 | + } |
| 68 | + } |
| 69 | +} |
| 70 | +``` |
| 71 | + |
| 72 | +## API Reference and Examples |
| 73 | + |
| 74 | +[Sorting2D API](https://docs.cocos.com/creator/3.8/api/en/class/Sorting2D) |
| 75 | + |
| 76 | +[Sorting2D Demo](https://github.com/zhefengzhang/test-cases-3d/tree/v3.8.7-add-sorting2d-testCase/assets/cases/ui/other/sorting2D) |
0 commit comments