Skip to main content

剔除器插件

¥Culler Plugin

CullerPlugin 会自动跳过场景中屏幕外对象的渲染。它通过使用渲染器的屏幕边界来确定容器（以及可选的子容器）是否与视图相交来实现此目的。如果没有处理，它们将被剔除，从而减少渲染和更新开销。

¥The CullerPlugin automatically skips rendering for offscreen objects in your scene. It does this by using the renderer's screen bounds to determine whether containers (and optionally their children) intersect the view. If they don't, they are culled, reducing rendering and update overhead.

PixiJS 默认不启用此插件。你必须使用 extensions 系统手动注册。

¥PixiJS does not enable this plugin by default. You must manually register it using the extensions system.

何时应该使用它？​

¥When Should You Use It?

剔除的理想用途：

¥Culling is ideal for:

  • 包含大量屏幕外元素的大型场景

    ¥Large scenes with many offscreen elements

  • 可滚动或相机驱动的环境（例如，图块地图、世界视图）

    ¥Scrollable or camera-driven environments (e.g. tilemaps, world views)

  • 无需重构场景图即可优化渲染性能

    ¥Optimizing render performance without restructuring your scene graph

用法​

¥Usage

const app = new Application();

await app.init({
    width: 800,
    height: 600,
    backgroundColor: 0x222222,
});

extensions.add(CullerPlugin);

const world = new Container();
world.cullable = true;
world.cullableChildren = true;

const sprite = new Sprite.from('path/to/image.png');
sprite.cullable = true; // Enable culling for this sprite
world.addChild(sprite);

app.stage.addChild(world);

启用 Culler 插件​

¥Enabling the Culler Plugin

要在应用中启用自动剔除：

¥To enable automatic culling in your application:

import { extensions, CullerPlugin } from 'pixi.js';

extensions.add(CullerPlugin);

这将覆盖 Application 实例上的默认 render() 方法，以便在渲染之前调用 Culler.shared.cull()：

¥This will override the default render() method on your Application instance to call Culler.shared.cull() before rendering:

// Internally replaces:
app.renderer.render({ container: app.stage });
// With:
Culler.shared.cull(app.stage, app.renderer.screen);
app.renderer.render({ container: app.stage });

配置容器进行剔除​

¥Configuring Containers for Culling

默认情况下，容器不会被剔除。要为容器启用剔除，请设置以下属性：

¥By default, containers are not culled. To enable culling for a container, set the following properties:

container.cullable = true; // Enables culling for this container
container.cullableChildren = true; // Enables recursive culling for children

可选：定义自定义剔除区域​

¥Optional: Define a Custom Cull Area

你可以定义一个 cullArea 来覆盖默认的边界检查（使用全局边界）：

¥You can define a cullArea to override the default bounds check (which uses global bounds):

container.cullArea = new Rectangle(0, 0, 100, 100);

这对于具有许多子容器的容器非常有用，因为这些容器的边界框计算成本高昂或不准确。

¥This is useful for containers with many children where bounding box calculations are expensive or inaccurate.

使用 Culler 手动剔除​

¥Manual Culling with Culler

如果你不使用插件，但希望在渲染前手动剔除：

¥If you’re not using the plugin but want to manually cull before rendering:

import { Culler } from 'pixi.js';

const stage = new Container();
// Configure stage and children...

Culler.shared.cull(stage, { x: 0, y: 0, width: 800, height: 600 });
renderer.render({ container: stage });

API 参考​

¥API Reference