PixiJS v8 RenderLayer 完全指南将渲染顺序与场景图层级解耦【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijsRenderLayer 是 PixiJS v8 场景图体系中用于独立控制渲染顺序的核心机制对象保留其在场景图中的逻辑父级用于变换却在图层layer指定的位置参与绘制。本文以RenderLayer的完整 API 为主线结合 RenderLayer.ts 源码与 RenderLayer.test.ts 测试讲解快速上手、attach/detach 用法、排序模式、经典误用陷阱及底层渲染原理帮助你在游戏中实现角色逻辑上属于游戏世界、绘制上却处于 UI 覆盖层这类需求。RenderLayer 要解决什么问题在 PixiJS 中场景图scene graph同时承担两个职责布局模型决定每个节点的变换与渲染顺序兄弟节点按数组顺序绘制靠后的盖住靠前的。大多数情况下二者一致即可但存在一类经典需求会打破这种一致性角色被挂在world容器下跟随世界移动逻辑父级角色的血条 / 名字标签需要始终绘制在所有场景元素之上UI 覆盖层。如果强行把血条 reparent 到 UI 层变换链就会被破坏——血条不再跟随角色。RenderLayer正是为这种变换跟随 A、绘制位于 B的解耦场景而设计对象保留逻辑父级用于变换但渲染器在图层于场景图中的位置处绘制它。其核心能力在 RenderLayer.ts 的 JSDoc 中被明确总结为三条RenderLayer 只控制渲染顺序不影响对象的 position/scale/rotation 等变换也不改变逻辑层级逻辑父级保持不变attach到图层不会 reparent 对象显式控制开发者用layer.attach(obj)将对象分配进图层。从源码结构看RenderLayer本身是Container的子类RenderLayer.ts但它是轻量的没有属于自己的可见内容只是插入场景图中的一个绘制锚点。注意该 API 在源码中仍被标注为实验性experimental并列出若干已知问题详见下文底层原理与已知限制但核心功能已经相当稳健。快速开始RenderLayer从pixi.js主包中导出与Container、Sprite一同引入import { Application, Container, RenderLayer, Sprite } from pixi.js; const bgLayer new RenderLayer(); const entityLayer new RenderLayer(); const uiLayer new RenderLayer(); app.stage.addChild(bgLayer, entityLayer, uiLayer); const world new Container(); app.stage.addChild(world); const player new Sprite(texture); world.addChild(player); // logical parent for transforms entityLayer.attach(player); // render position这段代码中player在变换层面是world的孩子——移动world时player跟随移动但渲染器在entityLayer于 stage 中的位置处收集并绘制player。注意图层在场景图中的兄弟顺序决定了层与层之间的覆盖关系bgLayer在最前最后绘制、uiLayer在最后最先绘制因此 UI 永远盖住实体。一个完整可运行的示例仓库中的 rendering_render-layer/index.ts 是官方演示池塘场景中十条鱼是pondContainer的孩子跟随池塘整体被位移滤镜影响而每条鱼的名字 UIfish.ui被附加到独立的uiLayer上const uiLayer new RenderLayer(); for (let i 0; i 10; i) { const fish new Fish(names[i % names.length], textures[i % textures.length]); pondContainer.addChild(fish); // 鱼的变换属于池塘 fish.x Math.random() * 630; fish.y Math.random() * 410; uiLayer.attach(fish.ui); // 名字 UI 的绘制顺序属于 uiLayer } app.stage.addChild(uiLayer); // uiLayer 最后加入 stage绘制在最上层其中fish.uiCharacterUI由 Fish.ts 作为fish的子节点挂入场景图因此它仍然跟随鱼的位置变换同时它被uiLayer.attach从而脱离pondContainer的滤镜采集范围、稳定绘制在 UI 层。这正是逻辑父级 渲染图层组合的实战形态。核心模式attach 与 detach图层成员关系由attach/detach管理不要使用addChild/removeChild——RenderLayer覆写了这些场景图方法并直接抛错见下文常见错误。layer.attach(sprite); layer.attach(sprite1, sprite2, sprite3); // 支持多个参数或数组 layer.detach(sprite); layer.detachAll(); // 清空整个图层从源码看attachRenderLayer.ts的核心逻辑是将对象推入this.renderLayerChildren数组并把child.parentRenderLayer this作为所属图层标记自动换层如果对象已属于其他图层会先从旧图层 detach 再进入新图层测试 RenderLayer.test.ts 验证了这一点重复 attach 同一对象是幂等的if (child.parentRenderLayer this) continue;测试第 48-53 行验证若存在渲染组会置位renderGroup.structureDidChange true通知渲染组结构已变化。detachRenderLayer.ts则从renderLayerChildren中移除对象并清空其parentRenderLayer标记对不在图层中的对象调用detach是安全的测试第 79-83 行验证。detachAllRenderLayer.ts批量清空且对象仍然保留在场景图中container.children.length不变。排序模式自动排序sorted layers在图层上而非对象上设置sortableChildren: true可选的sortFunction用于自定义排序逻辑const sortedLayer new RenderLayer({ sortableChildren: true, sortFunction: (a, b) a.position.y - b.position.y, }); sortedLayer.attach(sprite1, sprite2, sprite3);默认排序函数按zIndex升序(a, b) a.zIndex - b.zIndexRenderLayer.ts 的defaultOptions经典用途是 2D 俯视游戏的y-sort按对象世界 y 坐标排序实现靠下的角色盖住靠上的角色的纵深感自动排序发生在渲染收集阶段RenderLayer.collectRenderables中若this.sortableChildren为真则先调用sortRenderLayerChildren()RenderLayer.ts。手动排序manual sort当排序频率远低于每帧一次时关闭自动排序并手动触发const layer new RenderLayer({ sortableChildren: false }); layer.attach(sprite1, sprite2, sprite3); layer.sortRenderLayerChildren(); // 需要时手动排序sortRenderLayerChildrenRenderLayer.ts直接以this.sortFunction对renderLayerChildren调用Array.prototype.sort。你也可以在运行期更换layer.sortFunction再手动排序实现排序策略的动态切换。图层与逻辑父级分离Layer logical parentconst world new Container(); const hud new RenderLayer(); app.stage.addChild(world, hud); const player new Sprite(playerTexture); world.addChild(player); hud.attach(player); world.x 100; // player 仍然跟随 world 移动player的变换链经过world移动world.x会视觉上移动player但渲染器将player的绘制调用放在hud在场景图中的位置于是player绘制在所有普通场景内容之上。两者的职责边界非常清晰——变换走场景图绘制走图层。从场景图中移除会自动解除图层挂载world.removeChild(player); // player 被自动从 entityLayer 中 detach当对象从其场景图父级中被移除时removeChild/removeChildren其图层挂载会被自动清除。这一行为的实现位于 childrenHelperMixin.tsremoveChildren在剥离每个子节点时执行child.parentRenderLayer?.detach(child)removeChild最终也走同一路径。对应测试见 RenderLayer.test.ts。注意将对象重新加入场景图父级不会自动恢复图层挂载必须再次显式调用layer.attach(player)。常见错误与正确写法[严重] 对 RenderLayer 使用addChild错误写法const layer new RenderLayer(); layer.addChild(sprite);正确写法const layer new RenderLayer(); container.addChild(sprite); // 真实场景图父级负责变换 layer.attach(sprite); // 图层只负责渲染顺序RenderLayer对addChild直接抛错RenderLayer.addChild() is not available. Please use RenderLayer.attach()。事实上源码中一连串场景图操作都被覆写为抛错包括addChild、removeChild、removeChildren、removeChildAt、addChildAt、getChildAt、setChildIndex、getChildIndex、swapChildren、reparentChild、reparentChildAt见 RenderLayer.ts。对象仍然需要一个真实的场景图父级对Container调用addChild来支撑变换渲染顺序交给layer.attach()。[高] 图层与其挂载对象处于不同的渲染组render group错误写法const renderGroup new Container({ isRenderGroup: true }); const layer new RenderLayer(); renderGroup.addChild(sprite); app.stage.addChild(layer); layer.attach(sprite);正确写法const renderGroup new Container({ isRenderGroup: true }); const layer new RenderLayer(); renderGroup.addChild(sprite); renderGroup.addChild(layer); // 图层与对象必须在同一渲染组内 layer.attach(sprite);图层和它所挂载的对象必须属于同一个渲染组否则挂载的子对象会缺少正确的变换合成绘制结果异常。这一限制在 RenderLayer.ts 的已知问题列表中明确标注。[中] 期望祖先容器的滤镜作用于图层子对象滤镜Filter作用于祖先容器时是通过 push/pop 将该容器的子对象捕获进一张纹理再整体处理的。而图层挂载的子对象跳过这一捕获流程——它们在collectRenderables阶段被单独收集、绘制在图层的位置上。因此祖先容器上的滤镜不会应用到图层挂载的子对象RenderLayer.ts 开头的注释与第 158-161 行的 JSDoc 都说明了这一点若需要对图层挂载对象施加滤镜请直接在该对象上设置filters而非依赖祖先容器。底层原理渲染收集阶段如何工作要理解 RenderLayer 为何能解耦渲染顺序需要看渲染器每帧的收集collect阶段。每个Container的collectRenderables方法collectRenderablesMixin.ts开头有这样的短路判断if ((this.parentRenderLayer this.parentRenderLayer ! currentLayer) || this.globalDisplayStatus 0b111 || !this.includeInBuild) return;含义是如果一个对象被挂载到了图层parentRenderLayer非空但当前收集流程传入的currentLayer不是它所属的图层就直接跳过——它不会跟随逻辑父级被收集而是在RenderLayer.collectRenderablesRenderLayer.ts中被收集若sortableChildren为真先调用sortRenderLayerChildren()排序遍历renderLayerChildren逐个调用子对象的collectRenderables(instructionSet, renderer, this)把this当前图层作为currentLayer传入若某子对象没有场景图父级!layerChildren[i].parent会发出警告图层只处理渲染顺序变换必须依赖场景图addChild。这正是对象跳过逻辑父级的绘制位置、改在图层位置绘制的机制来源。值得留意的是由于 hit testing命中测试遍历的是场景图而非图层源码已知问题中也指出交互命中不会反映图层的视觉顺序——例如对象被图层提到最前方绘制命中测试仍按其原始层级位置判定因此涉及点击交互时需自行评估RenderLayer.ts。选项与配置速查RenderLayer构造器接受RenderLayerOptionsRenderLayer.ts选项类型默认值说明sortableChildrenbooleanfalse为true时每次渲染前自动对图层子对象排序为false时需手动调用sortRenderLayerChildren()sortFunction(a: Container, b: Container) number(a, b) a.zIndex - b.zIndex自定义排序函数返回负数表示 a 应先于 b 绘制正数反之另外RenderLayer.defaultOptions是静态属性可全局修改以改变所有新建图层的默认行为RenderLayer.tsRenderLayer.defaultOptions { sortableChildren: true, sortFunction: (a, b) a.y - b.y, // 全局默认按 y 排序 };两个选项都可在构造后直接读写layer.sortableChildren、layer.sortFunction均为公开字段。测试 RenderLayer.test.ts 验证了默认值与自定义选项的解析排序行为测试第 121-150 行验证了默认 zIndex 排序与自定义反向排序。使用建议什么时候用 RenderLayer对象需要跟随逻辑父级变换、但绘制顺序需要独立指定时如角色在世界中、血条在 UI 层、池中鱼受滤镜影响、名字始终最上什么时候不用仅需在单个容器内显式控制顺序用sortableChildren truezIndex即可需要 GPU 级变换加速的大规模静态子树考虑isRenderGrouprender group 详见 render-groups.md组合使用图层挂载的对象必须与图层处于同一渲染组若对象被removeChild记得重新attach调试场景图与渲染顺序时可借助 PixiJS Devtools Chrome 扩展 实时检查。延伸阅读RenderLayer 源码完整 API 与已知问题注释RenderLayer 测试attach/detach/排序行为的单元验证RenderLayer 官方示例池塘场景 鱼名 UI 覆盖层场景核心概念场景图、Container 与叶子节点、渲染组、遮罩的整体心智模型scene-management.mdRenderLayer、渲染组、裁剪、zIndex 排序的组合视图Container 源码zIndex、sortableChildren等基础属性的定义【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
PixiJS v8 RenderLayer 完全指南：将渲染顺序与场景图层级解耦
PixiJS v8 RenderLayer 完全指南将渲染顺序与场景图层级解耦【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijsRenderLayer 是 PixiJS v8 场景图体系中用于独立控制渲染顺序的核心机制对象保留其在场景图中的逻辑父级用于变换却在图层layer指定的位置参与绘制。本文以RenderLayer的完整 API 为主线结合 RenderLayer.ts 源码与 RenderLayer.test.ts 测试讲解快速上手、attach/detach 用法、排序模式、经典误用陷阱及底层渲染原理帮助你在游戏中实现角色逻辑上属于游戏世界、绘制上却处于 UI 覆盖层这类需求。RenderLayer 要解决什么问题在 PixiJS 中场景图scene graph同时承担两个职责布局模型决定每个节点的变换与渲染顺序兄弟节点按数组顺序绘制靠后的盖住靠前的。大多数情况下二者一致即可但存在一类经典需求会打破这种一致性角色被挂在world容器下跟随世界移动逻辑父级角色的血条 / 名字标签需要始终绘制在所有场景元素之上UI 覆盖层。如果强行把血条 reparent 到 UI 层变换链就会被破坏——血条不再跟随角色。RenderLayer正是为这种变换跟随 A、绘制位于 B的解耦场景而设计对象保留逻辑父级用于变换但渲染器在图层于场景图中的位置处绘制它。其核心能力在 RenderLayer.ts 的 JSDoc 中被明确总结为三条RenderLayer 只控制渲染顺序不影响对象的 position/scale/rotation 等变换也不改变逻辑层级逻辑父级保持不变attach到图层不会 reparent 对象显式控制开发者用layer.attach(obj)将对象分配进图层。从源码结构看RenderLayer本身是Container的子类RenderLayer.ts但它是轻量的没有属于自己的可见内容只是插入场景图中的一个绘制锚点。注意该 API 在源码中仍被标注为实验性experimental并列出若干已知问题详见下文底层原理与已知限制但核心功能已经相当稳健。快速开始RenderLayer从pixi.js主包中导出与Container、Sprite一同引入import { Application, Container, RenderLayer, Sprite } from pixi.js; const bgLayer new RenderLayer(); const entityLayer new RenderLayer(); const uiLayer new RenderLayer(); app.stage.addChild(bgLayer, entityLayer, uiLayer); const world new Container(); app.stage.addChild(world); const player new Sprite(texture); world.addChild(player); // logical parent for transforms entityLayer.attach(player); // render position这段代码中player在变换层面是world的孩子——移动world时player跟随移动但渲染器在entityLayer于 stage 中的位置处收集并绘制player。注意图层在场景图中的兄弟顺序决定了层与层之间的覆盖关系bgLayer在最前最后绘制、uiLayer在最后最先绘制因此 UI 永远盖住实体。一个完整可运行的示例仓库中的 rendering_render-layer/index.ts 是官方演示池塘场景中十条鱼是pondContainer的孩子跟随池塘整体被位移滤镜影响而每条鱼的名字 UIfish.ui被附加到独立的uiLayer上const uiLayer new RenderLayer(); for (let i 0; i 10; i) { const fish new Fish(names[i % names.length], textures[i % textures.length]); pondContainer.addChild(fish); // 鱼的变换属于池塘 fish.x Math.random() * 630; fish.y Math.random() * 410; uiLayer.attach(fish.ui); // 名字 UI 的绘制顺序属于 uiLayer } app.stage.addChild(uiLayer); // uiLayer 最后加入 stage绘制在最上层其中fish.uiCharacterUI由 Fish.ts 作为fish的子节点挂入场景图因此它仍然跟随鱼的位置变换同时它被uiLayer.attach从而脱离pondContainer的滤镜采集范围、稳定绘制在 UI 层。这正是逻辑父级 渲染图层组合的实战形态。核心模式attach 与 detach图层成员关系由attach/detach管理不要使用addChild/removeChild——RenderLayer覆写了这些场景图方法并直接抛错见下文常见错误。layer.attach(sprite); layer.attach(sprite1, sprite2, sprite3); // 支持多个参数或数组 layer.detach(sprite); layer.detachAll(); // 清空整个图层从源码看attachRenderLayer.ts的核心逻辑是将对象推入this.renderLayerChildren数组并把child.parentRenderLayer this作为所属图层标记自动换层如果对象已属于其他图层会先从旧图层 detach 再进入新图层测试 RenderLayer.test.ts 验证了这一点重复 attach 同一对象是幂等的if (child.parentRenderLayer this) continue;测试第 48-53 行验证若存在渲染组会置位renderGroup.structureDidChange true通知渲染组结构已变化。detachRenderLayer.ts则从renderLayerChildren中移除对象并清空其parentRenderLayer标记对不在图层中的对象调用detach是安全的测试第 79-83 行验证。detachAllRenderLayer.ts批量清空且对象仍然保留在场景图中container.children.length不变。排序模式自动排序sorted layers在图层上而非对象上设置sortableChildren: true可选的sortFunction用于自定义排序逻辑const sortedLayer new RenderLayer({ sortableChildren: true, sortFunction: (a, b) a.position.y - b.position.y, }); sortedLayer.attach(sprite1, sprite2, sprite3);默认排序函数按zIndex升序(a, b) a.zIndex - b.zIndexRenderLayer.ts 的defaultOptions经典用途是 2D 俯视游戏的y-sort按对象世界 y 坐标排序实现靠下的角色盖住靠上的角色的纵深感自动排序发生在渲染收集阶段RenderLayer.collectRenderables中若this.sortableChildren为真则先调用sortRenderLayerChildren()RenderLayer.ts。手动排序manual sort当排序频率远低于每帧一次时关闭自动排序并手动触发const layer new RenderLayer({ sortableChildren: false }); layer.attach(sprite1, sprite2, sprite3); layer.sortRenderLayerChildren(); // 需要时手动排序sortRenderLayerChildrenRenderLayer.ts直接以this.sortFunction对renderLayerChildren调用Array.prototype.sort。你也可以在运行期更换layer.sortFunction再手动排序实现排序策略的动态切换。图层与逻辑父级分离Layer logical parentconst world new Container(); const hud new RenderLayer(); app.stage.addChild(world, hud); const player new Sprite(playerTexture); world.addChild(player); hud.attach(player); world.x 100; // player 仍然跟随 world 移动player的变换链经过world移动world.x会视觉上移动player但渲染器将player的绘制调用放在hud在场景图中的位置于是player绘制在所有普通场景内容之上。两者的职责边界非常清晰——变换走场景图绘制走图层。从场景图中移除会自动解除图层挂载world.removeChild(player); // player 被自动从 entityLayer 中 detach当对象从其场景图父级中被移除时removeChild/removeChildren其图层挂载会被自动清除。这一行为的实现位于 childrenHelperMixin.tsremoveChildren在剥离每个子节点时执行child.parentRenderLayer?.detach(child)removeChild最终也走同一路径。对应测试见 RenderLayer.test.ts。注意将对象重新加入场景图父级不会自动恢复图层挂载必须再次显式调用layer.attach(player)。常见错误与正确写法[严重] 对 RenderLayer 使用addChild错误写法const layer new RenderLayer(); layer.addChild(sprite);正确写法const layer new RenderLayer(); container.addChild(sprite); // 真实场景图父级负责变换 layer.attach(sprite); // 图层只负责渲染顺序RenderLayer对addChild直接抛错RenderLayer.addChild() is not available. Please use RenderLayer.attach()。事实上源码中一连串场景图操作都被覆写为抛错包括addChild、removeChild、removeChildren、removeChildAt、addChildAt、getChildAt、setChildIndex、getChildIndex、swapChildren、reparentChild、reparentChildAt见 RenderLayer.ts。对象仍然需要一个真实的场景图父级对Container调用addChild来支撑变换渲染顺序交给layer.attach()。[高] 图层与其挂载对象处于不同的渲染组render group错误写法const renderGroup new Container({ isRenderGroup: true }); const layer new RenderLayer(); renderGroup.addChild(sprite); app.stage.addChild(layer); layer.attach(sprite);正确写法const renderGroup new Container({ isRenderGroup: true }); const layer new RenderLayer(); renderGroup.addChild(sprite); renderGroup.addChild(layer); // 图层与对象必须在同一渲染组内 layer.attach(sprite);图层和它所挂载的对象必须属于同一个渲染组否则挂载的子对象会缺少正确的变换合成绘制结果异常。这一限制在 RenderLayer.ts 的已知问题列表中明确标注。[中] 期望祖先容器的滤镜作用于图层子对象滤镜Filter作用于祖先容器时是通过 push/pop 将该容器的子对象捕获进一张纹理再整体处理的。而图层挂载的子对象跳过这一捕获流程——它们在collectRenderables阶段被单独收集、绘制在图层的位置上。因此祖先容器上的滤镜不会应用到图层挂载的子对象RenderLayer.ts 开头的注释与第 158-161 行的 JSDoc 都说明了这一点若需要对图层挂载对象施加滤镜请直接在该对象上设置filters而非依赖祖先容器。底层原理渲染收集阶段如何工作要理解 RenderLayer 为何能解耦渲染顺序需要看渲染器每帧的收集collect阶段。每个Container的collectRenderables方法collectRenderablesMixin.ts开头有这样的短路判断if ((this.parentRenderLayer this.parentRenderLayer ! currentLayer) || this.globalDisplayStatus 0b111 || !this.includeInBuild) return;含义是如果一个对象被挂载到了图层parentRenderLayer非空但当前收集流程传入的currentLayer不是它所属的图层就直接跳过——它不会跟随逻辑父级被收集而是在RenderLayer.collectRenderablesRenderLayer.ts中被收集若sortableChildren为真先调用sortRenderLayerChildren()排序遍历renderLayerChildren逐个调用子对象的collectRenderables(instructionSet, renderer, this)把this当前图层作为currentLayer传入若某子对象没有场景图父级!layerChildren[i].parent会发出警告图层只处理渲染顺序变换必须依赖场景图addChild。这正是对象跳过逻辑父级的绘制位置、改在图层位置绘制的机制来源。值得留意的是由于 hit testing命中测试遍历的是场景图而非图层源码已知问题中也指出交互命中不会反映图层的视觉顺序——例如对象被图层提到最前方绘制命中测试仍按其原始层级位置判定因此涉及点击交互时需自行评估RenderLayer.ts。选项与配置速查RenderLayer构造器接受RenderLayerOptionsRenderLayer.ts选项类型默认值说明sortableChildrenbooleanfalse为true时每次渲染前自动对图层子对象排序为false时需手动调用sortRenderLayerChildren()sortFunction(a: Container, b: Container) number(a, b) a.zIndex - b.zIndex自定义排序函数返回负数表示 a 应先于 b 绘制正数反之另外RenderLayer.defaultOptions是静态属性可全局修改以改变所有新建图层的默认行为RenderLayer.tsRenderLayer.defaultOptions { sortableChildren: true, sortFunction: (a, b) a.y - b.y, // 全局默认按 y 排序 };两个选项都可在构造后直接读写layer.sortableChildren、layer.sortFunction均为公开字段。测试 RenderLayer.test.ts 验证了默认值与自定义选项的解析排序行为测试第 121-150 行验证了默认 zIndex 排序与自定义反向排序。使用建议什么时候用 RenderLayer对象需要跟随逻辑父级变换、但绘制顺序需要独立指定时如角色在世界中、血条在 UI 层、池中鱼受滤镜影响、名字始终最上什么时候不用仅需在单个容器内显式控制顺序用sortableChildren truezIndex即可需要 GPU 级变换加速的大规模静态子树考虑isRenderGrouprender group 详见 render-groups.md组合使用图层挂载的对象必须与图层处于同一渲染组若对象被removeChild记得重新attach调试场景图与渲染顺序时可借助 PixiJS Devtools Chrome 扩展 实时检查。延伸阅读RenderLayer 源码完整 API 与已知问题注释RenderLayer 测试attach/detach/排序行为的单元验证RenderLayer 官方示例池塘场景 鱼名 UI 覆盖层场景核心概念场景图、Container 与叶子节点、渲染组、遮罩的整体心智模型scene-management.mdRenderLayer、渲染组、裁剪、zIndex 排序的组合视图Container 源码zIndex、sortableChildren等基础属性的定义【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考