v4-new-features

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Phaser 4 New Features

Phaser 4 新特性

New features and capabilities in Phaser 4: Filters (replacing FX/BitmapMask), RenderNodes (replacing Pipelines), CaptureFrame, Gradient, Noise game objects, SpriteGPULayer, TilemapGPULayer, Lighting component, RenderSteps, and new tint modes.
Related skills: ../v3-to-v4-migration/SKILL.md, ../filters-and-postfx/SKILL.md, ../game-object-components/SKILL.md, ../tilemaps/SKILL.md
Migrating from v3? See the v3 to v4 Migration Guide for step-by-step code changes, removed APIs, and a migration checklist.
Phaser 4的新功能与能力:Filters(替代FX/BitmapMask)、RenderNodes(替代Pipelines)、CaptureFrame、Gradient、Noise游戏对象、SpriteGPULayer、TilemapGPULayer、Lighting组件、RenderSteps以及新的色调模式。
相关技能: ../v3-to-v4-migration/SKILL.md, ../filters-and-postfx/SKILL.md, ../game-object-components/SKILL.md, ../tilemaps/SKILL.md
从v3迁移? 请查看v3到v4迁移指南,获取分步代码修改说明、已移除API列表以及迁移检查清单。

Overview: What Changed in v4

概述:Phaser 4的变化

Phaser 4 is a complete overhaul of the WebGL rendering engine. The v3 renderer let each subsystem manage WebGL state independently, causing conflicts (e.g. certain FX breaking Masks). v4 centralizes WebGL state management through a RenderNode graph, where each node handles exactly one rendering task.
Phaser 4是WebGL渲染引擎的全面重构。v3渲染器允许每个子系统独立管理WebGL状态,这会导致冲突(例如某些FX会破坏Mask)。v4通过RenderNode图集中管理WebGL状态,每个节点仅处理一项渲染任务。

Key Removals

主要移除特性

v3 Featurev4 Replacement
Pipeline
RenderNode
(per-task rendering nodes)
FX (
preFX
/
postFX
)
Filters (
filters.internal
/
filters.external
)
BitmapMask
FilterMask
(via filters system)
GeometryMask
(WebGL)
FilterMask
(Canvas still uses GeometryMask)
Derived FX: Bloom, Circle, Gradient, ShineActions (
AddEffectBloom
,
AddEffectShine
,
AddMaskShape
) or GameObjects
Mesh
and
Plane
Removed (proper 3D planned for future)
Point
Use
Vector2
instead
v3特性v4替代方案
Pipeline
RenderNode
(单任务渲染节点)
FX(
preFX
/
postFX
Filters(
filters.internal
/
filters.external
BitmapMask
FilterMask
(通过Filters系统实现)
GeometryMask
(WebGL版)
FilterMask
(Canvas版仍使用GeometryMask)
衍生FX:Bloom、Circle、Gradient、ShineActions(
AddEffectBloom
AddEffectShine
AddMaskShape
)或游戏对象
Mesh
Plane
已移除(计划在未来版本中完善3D支持)
Point
改用
Vector2

Key Additions

主要新增特性

  • New GameObjects:
    CaptureFrame
    ,
    Gradient
    ,
    Noise
    ,
    NoiseCell2D/3D/4D
    ,
    NoiseSimplex2D/3D
    ,
    SpriteGPULayer
    ,
    Stamp
    ,
    TilemapGPULayer
  • New Components:
    Lighting
    ,
    RenderSteps
    ,
    RenderNodes
  • New Tint Modes:
    MULTIPLY
    ,
    FILL
    ,
    ADD
    ,
    SCREEN
    ,
    OVERLAY
    ,
    HARD_LIGHT
  • New Filters: Blend, Blocky, CombineColorMatrix, GradientMap, ImageLight, Key, Mask, NormalTools, PanoramaBlur, ParallelFilters, Quantize, Sampler, Threshold
  • GL Orientation: v4 uses standard GL orientation (Y=0 at bottom for textures)

  • 新游戏对象
    CaptureFrame
    Gradient
    Noise
    NoiseCell2D/3D/4D
    NoiseSimplex2D/3D
    SpriteGPULayer
    Stamp
    TilemapGPULayer
  • 新组件
    Lighting
    RenderSteps
    RenderNodes
  • 新色调模式
    MULTIPLY
    FILL
    ADD
    SCREEN
    OVERLAY
    HARD_LIGHT
  • 新Filters:Blend、Blocky、CombineColorMatrix、GradientMap、ImageLight、Key、Mask、NormalTools、PanoramaBlur、ParallelFilters、Quantize、Sampler、Threshold
  • GL方向:v4使用标准GL方向(纹理Y=0位于底部)

Filters System (Replacing FX and BitmapMask)

Filters系统(替代FX和BitmapMask)

Full reference:
filters-and-postfx.md
Filters unify the v3 FX and Mask systems. Every filter takes an input image and produces an output image via a shader pass. Filters can be applied to any game object or camera -- v3 had restrictions on which objects supported FX.
js
// v3 approach (FX):
sprite.preFX.addGlow(0xff00ff, 4);
sprite.postFX.addBlur(0, 2, 2, 1);

// v4 approach (Filters):
sprite.enableFilters();
sprite.filters.internal.addGlow(0xff00ff, 4, 0, 1);
sprite.filters.external.addBlur(0, 2, 2, 1);

// v3 approach (BitmapMask):
const mask = new Phaser.Display.Masks.BitmapMask(scene, maskImage);
sprite.setMask(mask);

// v4 approach (FilterMask):
sprite.enableFilters();
sprite.filters.internal.addMask(maskImage);
Internal vs External: Internal filters run before the camera transform (object-local space, cheaper). External filters run after (screen space, full-resolution).

完整参考:
filters-and-postfx.md
Filters统一了v3的FX和Mask系统。每个Filter都会通过着色器处理输入图像并生成输出图像。Filters可应用于任何游戏对象或相机——v3中对支持FX的对象有诸多限制。
js
// v3实现方式(FX):
sprite.preFX.addGlow(0xff00ff, 4);
sprite.postFX.addBlur(0, 2, 2, 1);

// v4实现方式(Filters):
sprite.enableFilters();
sprite.filters.internal.addGlow(0xff00ff, 4, 0, 1);
sprite.filters.external.addBlur(0, 2, 2, 1);

// v3实现方式(BitmapMask):
const mask = new Phaser.Display.Masks.BitmapMask(scene, maskImage);
sprite.setMask(mask);

// v4实现方式(FilterMask):
sprite.enableFilters();
sprite.filters.internal.addMask(maskImage);
内部与外部Filters:内部Filters在相机变换前运行(对象本地空间,性能消耗更低)。外部Filters在相机变换后运行(屏幕空间,全分辨率)。

RenderNodes (Replacing Pipelines)

RenderNodes(替代Pipelines)

In v3, a
Pipeline
was a rendering system that often handled multiple responsibilities. In v4, each
RenderNode
handles a single rendering task via its
run()
method. Some nodes also have a
batch()
method to accumulate state before drawing.
在v3中,
Pipeline
是一个通常承担多项职责的渲染系统。在v4中,每个
RenderNode
通过其
run()
方法处理一项单一渲染任务。部分节点还拥有
batch()
方法,用于在绘制前累积状态。

Architecture

架构

The
RenderNodeManager
(on the WebGL renderer) owns all render nodes. Game objects reference nodes through role-based maps.
js
// RenderNode roles on a game object:
// - 'Submitter': runs other node roles for each element
// - 'Transformer': provides vertex coordinates
// - 'Texturer': handles textures

// GameObjects have default and custom render node maps:
gameObject.defaultRenderNodes  // built-in nodes per role
gameObject.customRenderNodes   // overrides per role
gameObject.renderNodeData      // data keyed by node name
RenderNodeManager
(位于WebGL渲染器上)拥有所有渲染节点。游戏对象通过基于角色的映射引用节点。
js
// 游戏对象上的RenderNode角色:
// - 'Submitter': 为每个元素运行其他节点角色
// - 'Transformer': 提供顶点坐标
// - 'Texturer': 处理纹理

// 游戏对象拥有默认和自定义渲染节点映射:
gameObject.defaultRenderNodes  // 每个角色对应的内置节点
gameObject.customRenderNodes   // 每个角色对应的自定义覆盖节点
gameObject.renderNodeData      // 按节点名称存储的数据

Setting Custom RenderNodes

设置自定义RenderNodes

js
// Override a specific render role:
gameObject.setRenderNodeRole('Submitter', 'MyCustomSubmitter');

// Pass data to a render node:
gameObject.setRenderNodeRole('Transformer', 'MyTransformer', {
    customProperty: 42
});

// Remove a custom node (falls back to default):
gameObject.setRenderNodeRole('Submitter', null);
js
// 覆盖特定渲染角色:
gameObject.setRenderNodeRole('Submitter', 'MyCustomSubmitter');

// 向渲染节点传递数据:
gameObject.setRenderNodeRole('Transformer', 'MyTransformer', {
    customProperty: 42
});

// 移除自定义节点(回退到默认节点):
gameObject.setRenderNodeRole('Submitter', null);

Built-in RenderNode Types

内置RenderNode类型

Batch Handlers (accumulate and draw multiple objects per draw call):
  • BatchHandlerQuad
    -- standard quad batching (Image, Sprite, BitmapText, etc.)
  • BatchHandlerQuadSingle
    -- single-quad variant
  • BatchHandlerTileSprite
    -- TileSprite batching
  • BatchHandlerTriFlat
    -- flat triangle batching (Graphics, Shape)
  • BatchHandlerPointLight
    -- point light batching
  • BatchHandlerStrip
    -- triangle strip batching
Submitters (coordinate rendering per object type):
  • SubmitterQuad
    ,
    SubmitterTile
    ,
    SubmitterTileSprite
  • SubmitterSpriteGPULayer
    ,
    SubmitterTilemapGPULayer
Transformers (compute vertex positions):
  • TransformerImage
    ,
    TransformerStamp
    ,
    TransformerTile
    ,
    TransformerTileSprite
Texturers (manage texture binding):
  • TexturerImage
    ,
    TexturerTileSprite
Filters (post-processing -- see
filters-and-postfx.md
):
  • BaseFilter
    ,
    BaseFilterShader
  • FilterBarrel
    ,
    FilterBlend
    ,
    FilterBlocky
    ,
    FilterBlur
    (Low/Med/High variants)
  • FilterBokeh
    ,
    FilterColorMatrix
    ,
    FilterCombineColorMatrix
  • FilterDisplacement
    ,
    FilterGlow
    ,
    FilterGradientMap
    ,
    FilterImageLight
  • FilterKey
    ,
    FilterMask
    ,
    FilterNormalTools
    ,
    FilterPanoramaBlur
  • FilterParallelFilters
    ,
    FilterPixelate
    ,
    FilterQuantize
  • FilterSampler
    ,
    FilterShadow
    ,
    FilterThreshold
    ,
    FilterVignette
    ,
    FilterWipe
Other:
  • Camera
    ,
    FillCamera
    ,
    FillRect
    ,
    FillPath
    ,
    FillTri
  • DrawLine
    ,
    StrokePath
    ,
    ShaderQuad
  • ListCompositor
    ,
    RebindContext
    ,
    YieldContext
  • DynamicTextureHandler
批处理处理器(累积多个对象并通过单次绘制调用完成绘制):
  • BatchHandlerQuad
    -- 标准四边形批处理(Image、Sprite、BitmapText等)
  • BatchHandlerQuadSingle
    -- 单四边形变体
  • BatchHandlerTileSprite
    -- TileSprite批处理
  • BatchHandlerTriFlat
    -- 平面三角形批处理(Graphics、Shape)
  • BatchHandlerPointLight
    -- 点光源批处理
  • BatchHandlerStrip
    -- 三角形条带批处理
提交器(协调特定类型对象的渲染):
  • SubmitterQuad
    SubmitterTile
    SubmitterTileSprite
  • SubmitterSpriteGPULayer
    SubmitterTilemapGPULayer
变换器(计算顶点位置):
  • TransformerImage
    TransformerStamp
    TransformerTile
    TransformerTileSprite
纹理处理器(管理纹理绑定):
  • TexturerImage
    TexturerTileSprite
Filters(后期处理——详见
filters-and-postfx.md
):
  • BaseFilter
    BaseFilterShader
  • FilterBarrel
    FilterBlend
    FilterBlocky
    FilterBlur
    (低/中/高变体)
  • FilterBokeh
    FilterColorMatrix
    FilterCombineColorMatrix
  • FilterDisplacement
    FilterGlow
    FilterGradientMap
    FilterImageLight
  • FilterKey
    FilterMask
    FilterNormalTools
    FilterPanoramaBlur
  • FilterParallelFilters
    FilterPixelate
    FilterQuantize
  • FilterSampler
    FilterShadow
    FilterThreshold
    FilterVignette
    FilterWipe
其他类型:
  • Camera
    FillCamera
    FillRect
    FillPath
    FillTri
  • DrawLine
    StrokePath
    ShaderQuad
  • ListCompositor
    RebindContext
    YieldContext
  • DynamicTextureHandler

Extending: Custom RenderNodes

扩展:自定义RenderNodes

js
// Register a custom node constructor:
renderer.renderNodes.addNodeConstructor('MyNode', MyNodeClass);

// Or add a pre-built node instance:
renderer.renderNodes.addNode('MyNode', myNodeInstance);

js
// 注册自定义节点构造函数:
renderer.renderNodes.addNodeConstructor('MyNode', MyNodeClass);

// 或添加预构建的节点实例:
renderer.renderNodes.addNode('MyNode', myNodeInstance);

New Game Objects

新游戏对象

CaptureFrame

CaptureFrame

Captures the current framebuffer contents to a texture at the point in the display list where it sits. Does not render anything itself. WebGL only.
js
// Everything above this in the display list gets captured:
const image1 = this.add.image(400, 300, 'background');

// Enable framebuffer usage on the camera:
this.cameras.main.setForceComposite(true);

// Create the capture point:
const capture = this.add.captureFrame('myCapturedTexture');

// Use the captured texture on another object:
const overlay = this.add.image(400, 300, 'myCapturedTexture');
// Add filters to the overlay to distort the captured scene
Key details:
  • Requires
    camera.setForceComposite(true)
    or a framebuffer context (Filters, DynamicTexture, camera with partial alpha)
  • Inside a Container with filters, captures only that Container's contents
  • Setting
    visible = false
    stops capturing
  • Components: BlendMode, Depth, RenderNodes, Visible
Source:
src/gameobjects/captureframe/CaptureFrame.js
在显示列表中其所在位置将当前帧缓冲内容捕获为纹理。自身不渲染任何内容。仅支持WebGL。
js
// 显示列表中此对象上方的所有内容都会被捕获:
const image1 = this.add.image(400, 300, 'background');

// 启用相机的帧缓冲使用:
this.cameras.main.setForceComposite(true);

// 创建捕获点:
const capture = this.add.captureFrame('myCapturedTexture');

// 在另一个对象上使用捕获的纹理:
const overlay = this.add.image(400, 300, 'myCapturedTexture');
// 为overlay添加滤镜以扭曲捕获的场景
关键细节:
  • 需要
    camera.setForceComposite(true)
    或帧缓冲上下文(Filters、DynamicTexture、带部分透明度的相机)
  • 在带有Filters的Container内时,仅捕获该Container的内容
  • 设置
    visible = false
    会停止捕获
  • 组件:BlendMode、Depth、RenderNodes、Visible
源码:
src/gameobjects/captureframe/CaptureFrame.js

Gradient

Gradient

Displays GPU-rendered color gradients. Extends
Shader
. Supports linear, radial, and other shape modes with configurable
ColorRamp
containing
ColorBand
objects.
js
// Simple linear gradient:
const grad = this.add.gradient(undefined, 100, 100, 200, 200);

// Complex radial gradient with multiple color bands:
const halo = this.add.gradient({
    bands: [
        { start: 0.5, end: 0.6, colorStart: [0.5, 0.5, 1, 0], colorEnd: 0xffffff, colorSpace: 1, interpolation: 4 },
        { start: 0.6, end: 1, colorStart: 0xffffff, colorEnd: [1, 0.5, 0.5, 0], colorSpace: 1, interpolation: 3 }
    ],
    dither: true,
    repeatMode: 1,
    shapeMode: 2,       // radial
    start: { x: 0.5, y: 0.5 },
    shape: { x: 0.5, y: 0.0 }
}, 400, 300, 800, 800);

// Animate:
halo.offset = 0.1 * (1 + Math.sin(time / 1000));
Key details:
  • Config:
    GradientQuadConfig
    with
    bands
    ,
    shapeMode
    ,
    repeatMode
    ,
    start
    ,
    shape
    ,
    dither
  • Colors defined via
    ColorRamp
    with
    ColorBand
    objects (supports HSV, various interpolation modes)
  • Call
    gradient.ramp.encode()
    after modifying ramp data at runtime
Source:
src/gameobjects/gradient/Gradient.js
显示GPU渲染的颜色渐变。继承自
Shader
。支持线性、径向及其他形状模式,可配置包含
ColorBand
对象的
ColorRamp
js
// 简单线性渐变:
const grad = this.add.gradient(undefined, 100, 100, 200, 200);

// 复杂径向渐变,包含多个颜色带:
const halo = this.add.gradient({
    bands: [
        { start: 0.5, end: 0.6, colorStart: [0.5, 0.5, 1, 0], colorEnd: 0xffffff, colorSpace: 1, interpolation: 4 },
        { start: 0.6, end: 1, colorStart: 0xffffff, colorEnd: [1, 0.5, 0.5, 0], colorSpace: 1, interpolation: 3 }
    ],
    dither: true,
    repeatMode: 1,
    shapeMode: 2,       // 径向
    start: { x: 0.5, y: 0.5 },
    shape: { x: 0.5, y: 0.0 }
}, 400, 300, 800, 800);

// 动画:
halo.offset = 0.1 * (1 + Math.sin(time / 1000));
关键细节:
  • 配置:
    GradientQuadConfig
    ,包含
    bands
    shapeMode
    repeatMode
    start
    shape
    dither
  • 颜色通过包含
    ColorBand
    对象的
    ColorRamp
    定义(支持HSV、多种插值模式)
  • 运行时修改渐变数据后需调用
    gradient.ramp.encode()
源码:
src/gameobjects/gradient/Gradient.js

Noise Game Objects

Noise游戏对象

All noise types extend
Shader
and are WebGL only. Six variants available:
TypeFactoryDescription
Noise
this.add.noise()
White noise (random hash-based)
NoiseCell2D
this.add.noiseCell2D()
2D cellular/Worley/Voronoi noise
NoiseCell3D
this.add.noiseCell3D()
3D cellular noise (Z-axis slicing for animation)
NoiseCell4D
this.add.noiseCell4D()
4D cellular noise (Z+W axis slicing)
NoiseSimplex2D
this.add.noiseSimplex2D()
2D simplex/gradient noise (clouds, fire, water)
NoiseSimplex3D
this.add.noiseSimplex3D()
3D simplex noise
js
// Basic white noise:
const noise = this.add.noise({
    noiseOffset: [0, 0],
    noisePower: 1
}, 100, 100, 256, 256);

// Cellular noise with customization:
const cells = this.add.noiseCell2D({
    noiseOffset: [0, 0],
    noiseIterations: 3,
    noiseNormalMap: true    // output as normal map for lighting
}, 200, 200, 256, 256);

// Simplex noise for natural effects:
const simplex = this.add.noiseSimplex2D({
    noiseFlow: 0,           // animate this for evolution
    noiseIterations: 4,
    noiseWarpAmount: 0.5,   // turbulence
    noiseSeed: 42,
    noiseNormalMap: false
}, 300, 300, 256, 256);
Common properties across noise types:
  • noiseOffset
    --
    [x, y]
    array to scroll the pattern
  • noisePower
    -- sculpt output levels (higher suppresses high values)
  • noiseNormalMap
    -- output normal map (for lighting integration)
  • noiseIterations
    -- detail level (cellular/simplex types)
Math equivalents:
Phaser.Math.Hash()
,
Phaser.Math.HashCell()
,
Phaser.Math.HashSimplex()
Source:
src/gameobjects/noise/
所有Noise类型均继承自
Shader
,仅支持WebGL。提供六种变体:
类型工厂方法描述
Noise
this.add.noise()
白噪声(基于随机哈希)
NoiseCell2D
this.add.noiseCell2D()
2D细胞/Worley/Voronoi噪声
NoiseCell3D
this.add.noiseCell3D()
3D细胞噪声(通过Z轴切片实现动画)
NoiseCell4D
this.add.noiseCell4D()
4D细胞噪声(通过Z+W轴切片实现动画)
NoiseSimplex2D
this.add.noiseSimplex2D()
2D simplex/梯度噪声(用于模拟云、火、水等效果)
NoiseSimplex3D
this.add.noiseSimplex3D()
3D simplex噪声
js
// 基础白噪声:
const noise = this.add.noise({
    noiseOffset: [0, 0],
    noisePower: 1
}, 100, 100, 256, 256);

// 自定义细胞噪声:
const cells = this.add.noiseCell2D({
    noiseOffset: [0, 0],
    noiseIterations: 3,
    noiseNormalMap: true    // 输出为法线贴图以集成光照
}, 200, 200, 256, 256);

// 用于自然效果的simplex噪声:
const simplex = this.add.noiseSimplex2D({
    noiseFlow: 0,           // 此值可用于实现动画效果
    noiseIterations: 4,
    noiseWarpAmount: 0.5,   // 湍流效果
    noiseSeed: 42,
    noiseNormalMap: false
}, 300, 300, 256, 256);
所有Noise类型的通用属性:
  • noiseOffset
    --
    [x, y]
    数组,用于滚动图案
  • noisePower
    -- 调整输出级别(值越高,高值被抑制得越多)
  • noiseNormalMap
    -- 输出法线贴图(用于集成光照)
  • noiseIterations
    -- 细节级别(细胞/simplex类型)
对应数学方法:
Phaser.Math.Hash()
Phaser.Math.HashCell()
Phaser.Math.HashSimplex()
源码:
src/gameobjects/noise/

SpriteGPULayer

SpriteGPULayer

Renders very large numbers of quads (up to millions) in a single draw call by storing data in a static GPU buffer. Up to 100x faster than individual sprites. WebGL only.
js
const layer = this.add.spriteGPULayer(texture, size); // size = max number of members

// Add members (do this all at once, not incrementally):
const member = { x: 100, y: 200, frame: 'tree', scaleX: 1, scaleY: 1, alpha: 1 };
layer.addMember(member);

// Reuse the member object for efficiency with millions of entries:
member.x = 300;
member.y = 400;
member.frame = 'bush';
layer.addMember(member);

// Enable lighting on the layer:
layer.setLighting(true);
Key details:
  • Single texture only (no multi-atlas), single image per layer
  • Members support tween-like animations (fade, bounce, wave, color shift) defined at creation
  • Updating buffer contents is expensive -- populate once, leave unchanged
  • Power-of-two textures recommended for pixel art to avoid seaming
  • "Remove" members visually by setting
    scaleX/scaleY/alpha
    to 0 (avoids buffer rebuild)
  • Components: Alpha, BlendMode, Depth, ElapseTimer, Lighting, Mask, RenderNodes, TextureCrop, Visible
Source:
src/gameobjects/spritegpulayer/SpriteGPULayer.js

通过将数据存储在静态GPU缓冲区中,单次绘制调用即可渲染极大量四边形(最多数百万个),性能比单个精灵高100倍。仅支持WebGL。
js
const layer = this.add.spriteGPULayer(texture, size); // size = 最大成员数量

// 添加成员(建议一次性添加,而非增量添加):
const member = { x: 100, y: 200, frame: 'tree', scaleX: 1, scaleY: 1, alpha: 1 };
layer.addMember(member);

// 为了高效处理数百万个条目,可复用成员对象:
member.x = 300;
member.y = 400;
member.frame = 'bush';
layer.addMember(member);

// 启用图层光照:
layer.setLighting(true);
关键细节:
  • 仅支持单纹理(不支持多图集),每个图层对应单个图像
  • 成员支持在创建时定义类似补间的动画(淡入淡出、弹跳、波动、颜色偏移)
  • 更新缓冲区内容开销较大——建议一次性填充后不再修改
  • 像素艺术推荐使用2的幂次方纹理以避免接缝
  • 可通过将
    scaleX/scaleY/alpha
    设为0来视觉上“移除”成员(避免重建缓冲区)
  • 组件:Alpha、BlendMode、Depth、ElapseTimer、Lighting、Mask、RenderNodes、TextureCrop、Visible
源码:
src/gameobjects/spritegpulayer/SpriteGPULayer.js

New Components

新组件

Full component reference:
game-object-components.md
完整组件参考:
game-object-components.md

Lighting Component

Lighting组件

Replaces the v3 approach of assigning a lighting pipeline. WebGL only.
js
// v3 approach:
sprite.setPipeline('Light2D');

// v4 approach:
sprite.setLighting(true);

// Self-shadowing (simulates surface shadows from texture brightness):
sprite.setSelfShadow(true, 0.5, 1/3);
// Args: enabled, penumbra (lower = sharper), diffuseFlatThreshold (0-1)

// Use game-wide default for self-shadow:
sprite.setSelfShadow(null);  // reads from config.render.selfShadow
Supported on: BitmapText, Blitter, Graphics, Shape, Image, Sprite, Particles, SpriteGPULayer, Stamp, Text, TileSprite, Video, TilemapLayer, TilemapGPULayer.
Batching note: Lighting changes the shader, which breaks batches. Group lit objects together and unlit objects together for best performance.
Source:
src/gameobjects/components/Lighting.js
替代v3中分配光照Pipeline的方式。仅支持WebGL。
js
// v3实现方式:
sprite.setPipeline('Light2D');

// v4实现方式:
sprite.setLighting(true);

// 自阴影(模拟纹理亮度产生的表面阴影):
sprite.setSelfShadow(true, 0.5, 1/3);
// 参数:启用状态、半影(值越小阴影越锐利)、漫反射平坦阈值(0-1)

// 使用全局默认自阴影设置:
sprite.setSelfShadow(null);  // 读取config.render.selfShadow配置
支持对象: BitmapText、Blitter、Graphics、Shape、Image、Sprite、Particles、SpriteGPULayer、Stamp、Text、TileSprite、Video、TilemapLayer、TilemapGPULayer。
批处理注意事项: 光照会修改着色器,这会中断批处理。建议将启用光照的对象和未启用光照的对象分别分组,以获得最佳性能。
源码:
src/gameobjects/components/Lighting.js

RenderSteps Component

RenderSteps组件

Allows injecting custom logic into the render process of a game object. WebGL only. The Filters system uses RenderSteps internally.
js
// Add a custom render step:
gameObject.addRenderStep(function (renderer, gameObject, drawingContext, parentMatrix, renderStep, displayList, displayListIndex) {
    // Custom rendering logic here
    // Call next step when ready:
    var nextFn = gameObject._renderSteps[renderStep + 1];
    if (nextFn) {
        nextFn(renderer, gameObject, drawingContext, parentMatrix, renderStep + 1, displayList, displayListIndex);
    }
});
Key details:
  • Steps are stored in
    _renderSteps
    array, executed via
    renderWebGLStep()
  • First step runs first and is responsible for calling subsequent steps
  • This is how Filters defer and control the
    renderWebGL
    flow
Source:
src/gameobjects/components/RenderSteps.js
允许向游戏对象的渲染流程中注入自定义逻辑。仅支持WebGL。Filters系统内部使用RenderSteps实现功能。
js
// 添加自定义渲染步骤:
gameObject.addRenderStep(function (renderer, gameObject, drawingContext, parentMatrix, renderStep, displayList, displayListIndex) {
    // 此处编写自定义渲染逻辑
    // 准备就绪后调用下一步:
    var nextFn = gameObject._renderSteps[renderStep + 1];
    if (nextFn) {
        nextFn(renderer, gameObject, drawingContext, parentMatrix, renderStep + 1, displayList, displayListIndex);
    }
});
关键细节:
  • 步骤存储在
    _renderSteps
    数组中,通过
    renderWebGLStep()
    执行
  • 第一个步骤先运行,并负责调用后续步骤
  • Filters通过此方式延迟并控制
    renderWebGL
    流程
源码:
src/gameobjects/components/RenderSteps.js

RenderNodes Component

RenderNodes组件

Provides
defaultRenderNodes
,
customRenderNodes
, and
renderNodeData
maps on game objects. See the RenderNodes section above for usage.
Source:
src/gameobjects/components/RenderNodes.js

在游戏对象上提供
defaultRenderNodes
customRenderNodes
renderNodeData
映射。使用方法请参考上方RenderNodes章节。
源码:
src/gameobjects/components/RenderNodes.js

TilemapGPULayer

TilemapGPULayer

Full tilemap reference:
tilemaps.md
High-performance GPU-based tilemap rendering. Renders the entire layer as a single quad via a specialized shader. WebGL only.
js
// Create via Tilemap with the gpu flag:
const map = this.make.tilemap({ key: 'level1' });
const tileset = map.addTilesetImage('tiles', 'tilesImage');
const gpuLayer = map.createLayer('Ground', tileset, 0, 0, true);  // last arg: gpu = true
Capabilities:
  • Single tileset with single texture image
  • Maximum 4096x4096 tiles, up to 2^23 unique tile IDs
  • Tile flipping and animation supported
  • Orthographic tilemaps only (no isometric/hexagonal)
  • Perfect texture filtering in LINEAR mode (no tile seams)
  • Cost is per-pixel, not per-tile -- no performance loss with many visible tiles
Restrictions:
  • Cannot use multiple tilesets
  • Editing requires manual
    generateLayerDataTexture()
    call to update
  • Orthographic only
Internal data: Tile data stored in a texture (4 bytes/tile: 2 flip bits, 1 animation bit, 1 unused, 28-bit tile index). Animation data in a separate texture.
Source:
src/tilemaps/TilemapGPULayer.js

For detailed configuration options, API reference tables, and source file maps, see the reference guide.
完整瓦片地图参考:
tilemaps.md
基于GPU的高性能瓦片地图渲染。通过专用着色器将整个图层渲染为单个四边形。仅支持WebGL。
js
// 通过Tilemap的gpu标志创建:
const map = this.make.tilemap({ key: 'level1' });
const tileset = map.addTilesetImage('tiles', 'tilesImage');
const gpuLayer = map.createLayer('Ground', tileset, 0, 0, true);  // 最后一个参数: gpu = true
功能:
  • 单瓦片集对应单纹理图像
  • 最大支持4096x4096瓦片,最多2^23个唯一瓦片ID
  • 支持瓦片翻转和动画
  • 仅支持正交瓦片地图(不支持等轴测/六边形)
  • LINEAR模式下实现完美纹理过滤(无瓦片接缝)
  • 性能开销基于像素而非瓦片——可见瓦片数量多不会导致性能下降
限制:
  • 无法使用多个瓦片集
  • 编辑后需手动调用
    generateLayerDataTexture()
    以更新
  • 仅支持正交模式
内部数据: 瓦片数据存储在纹理中(每个瓦片4字节:2位翻转信息、1位动画信息、1位未使用、28位瓦片索引)。动画数据存储在单独纹理中。
源码:
src/tilemaps/TilemapGPULayer.js

如需详细配置选项、API参考表以及源码文件映射,请查看参考指南