渲染排序组件

对于大部分渲染情况来说,默认的排序已经满足需求。但是实际上由于半透明物体的特殊性,我们可能需要手动对这些物体进行排序。对于这种情况,可以使用 渲染排序组件

属性检查器 内点击 添加组件 按钮选择 Sorting 即可添加。

sorting

注意:该组件只对持有 MeshRendererSpriteRenderer 组件的节点生效。

属性

属性说明
Sorting Layer选择 排序图层
通过下拉框选择不同的排序图层,这些图层需要在 项目设置 -> 排序图层 内设置后才可以选择
sortring-layer
Sorting Order在相同图层内的排序优先级

示例

  • 项目设置 -> 排序图层 内添加排序图层 Sorting Layer 1。

    setting

  • 按照示例中搭建如下的场景:

    default

  • 立方体和球体的材质需要选择使用半透明渲染队列:

    technique

    添加 Sorting 组件且属性保持默认。

  • 图片需要使用 SpriteRenderer 组件(注意不是 Sprite 组件),着色器需要使用 builtin-sprite-renderer,并添加 Sorting 组件,保持属性默认:

    layer1

此时可观察到这些节点的排序方式是按照默认顺序排序。

Sorting Layer 示例

调整后方 SpriteRenderer 节点的 Sorting Layer 如下图:

layer 2

由于自定义的层级是高于立方体和球体的层级 default 的,因此可以观察到下图的结果:

result

Sorting Order 示例

Sorting Order 属性可以调整同一个排序图层内物体渲染的优先级。

场景和上述的示例类似,但是将立方体的 Sorting 组件内的 Sorting Order 属性调整为 1:

order 1

此时,立方体在渲染队列内的优先级是高于球体的,因此可以观察下图的结果:

result

脚本示例

下面的代码演示了如何在运行时修改 Sorting Order 以及 Sorting Layer。

  1. import { _decorator, Component, Sorting, SortingLayers } from 'cc';
  2. const { ccclass, property } = _decorator;
  3. @ccclass('SortingSample')
  4. export class SortingSample extends Component {
  5. @property(Sorting)
  6. sorting:Sorting | null = null;
  7. start() {
  8. this.sorting.sortingLayer = SortingLayers.getLayerIndexByName("Sorting Layer 1");
  9. this.sorting.sortingOrder = 1;
  10. }
  11. }

排序层管理器(SortingLayers) 可以在运行时获取排序图层的名称和索引,但无法在运行时修改。

API

渲染排序组件的 API 可以参考 Sorting 以及 排序层管理器 SortingLayers