v4-new-features
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePhaser 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 Feature | v4 Replacement |
|---|---|
| |
FX ( | Filters ( |
| |
| |
| Derived FX: Bloom, Circle, Gradient, Shine | Actions ( |
| Removed (proper 3D planned for future) |
| Use |
| v3特性 | v4替代方案 |
|---|---|
| |
FX( | Filters( |
| |
| |
| 衍生FX:Bloom、Circle、Gradient、Shine | Actions( |
| 已移除(计划在未来版本中完善3D支持) |
| 改用 |
Key Additions
主要新增特性
- New GameObjects: ,
CaptureFrame,Gradient,Noise,NoiseCell2D/3D/4D,NoiseSimplex2D/3D,SpriteGPULayer,StampTilemapGPULayer - New Components: ,
Lighting,RenderStepsRenderNodes - New Tint Modes: ,
MULTIPLY,FILL,ADD,SCREEN,OVERLAYHARD_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、StampTilemapGPULayer - 新组件:、
Lighting、RenderStepsRenderNodes - 新色调模式:、
MULTIPLY、FILL、ADD、SCREEN、OVERLAYHARD_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 was a rendering system that often handled multiple responsibilities. In v4, each handles a single rendering task via its method. Some nodes also have a method to accumulate state before drawing.
PipelineRenderNoderun()batch()在v3中,是一个通常承担多项职责的渲染系统。在v4中,每个通过其方法处理一项单一渲染任务。部分节点还拥有方法,用于在绘制前累积状态。
PipelineRenderNoderun()batch()Architecture
架构
The (on the WebGL renderer) owns all render nodes. Game objects reference nodes through role-based maps.
RenderNodeManagerjs
// 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 nameRenderNodeManagerjs
// 游戏对象上的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):
- -- standard quad batching (Image, Sprite, BitmapText, etc.)
BatchHandlerQuad - -- single-quad variant
BatchHandlerQuadSingle - -- TileSprite batching
BatchHandlerTileSprite - -- flat triangle batching (Graphics, Shape)
BatchHandlerTriFlat - -- point light batching
BatchHandlerPointLight - -- triangle strip batching
BatchHandlerStrip
Submitters (coordinate rendering per object type):
- ,
SubmitterQuad,SubmitterTileSubmitterTileSprite - ,
SubmitterSpriteGPULayerSubmitterTilemapGPULayer
Transformers (compute vertex positions):
- ,
TransformerImage,TransformerStamp,TransformerTileTransformerTileSprite
Texturers (manage texture binding):
- ,
TexturerImageTexturerTileSprite
Filters (post-processing -- see ):
filters-and-postfx.md- ,
BaseFilterBaseFilterShader - ,
FilterBarrel,FilterBlend,FilterBlocky(Low/Med/High variants)FilterBlur - ,
FilterBokeh,FilterColorMatrixFilterCombineColorMatrix - ,
FilterDisplacement,FilterGlow,FilterGradientMapFilterImageLight - ,
FilterKey,FilterMask,FilterNormalToolsFilterPanoramaBlur - ,
FilterParallelFilters,FilterPixelateFilterQuantize - ,
FilterSampler,FilterShadow,FilterThreshold,FilterVignetteFilterWipe
Other:
- ,
Camera,FillCamera,FillRect,FillPathFillTri - ,
DrawLine,StrokePathShaderQuad - ,
ListCompositor,RebindContextYieldContext DynamicTextureHandler
批处理处理器(累积多个对象并通过单次绘制调用完成绘制):
- -- 标准四边形批处理(Image、Sprite、BitmapText等)
BatchHandlerQuad - -- 单四边形变体
BatchHandlerQuadSingle - -- TileSprite批处理
BatchHandlerTileSprite - -- 平面三角形批处理(Graphics、Shape)
BatchHandlerTriFlat - -- 点光源批处理
BatchHandlerPointLight - -- 三角形条带批处理
BatchHandlerStrip
提交器(协调特定类型对象的渲染):
- 、
SubmitterQuad、SubmitterTileSubmitterTileSprite - 、
SubmitterSpriteGPULayerSubmitterTilemapGPULayer
变换器(计算顶点位置):
- 、
TransformerImage、TransformerStamp、TransformerTileTransformerTileSprite
纹理处理器(管理纹理绑定):
- 、
TexturerImageTexturerTileSprite
Filters(后期处理——详见):
filters-and-postfx.md- 、
BaseFilterBaseFilterShader - 、
FilterBarrel、FilterBlend、FilterBlocky(低/中/高变体)FilterBlur - 、
FilterBokeh、FilterColorMatrixFilterCombineColorMatrix - 、
FilterDisplacement、FilterGlow、FilterGradientMapFilterImageLight - 、
FilterKey、FilterMask、FilterNormalToolsFilterPanoramaBlur - 、
FilterParallelFilters、FilterPixelateFilterQuantize - 、
FilterSampler、FilterShadow、FilterThreshold、FilterVignetteFilterWipe
其他类型:
- 、
Camera、FillCamera、FillRect、FillPathFillTri - 、
DrawLine、StrokePathShaderQuad - 、
ListCompositor、RebindContextYieldContext 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 sceneKey details:
- Requires or a framebuffer context (Filters, DynamicTexture, camera with partial alpha)
camera.setForceComposite(true) - Inside a Container with filters, captures only that Container's contents
- Setting stops capturing
visible = false - 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添加滤镜以扭曲捕获的场景关键细节:
- 需要或帧缓冲上下文(Filters、DynamicTexture、带部分透明度的相机)
camera.setForceComposite(true) - 在带有Filters的Container内时,仅捕获该Container的内容
- 设置会停止捕获
visible = false - 组件:BlendMode、Depth、RenderNodes、Visible
源码:
src/gameobjects/captureframe/CaptureFrame.jsGradient
Gradient
Displays GPU-rendered color gradients. Extends . Supports linear, radial, and other shape modes with configurable containing objects.
ShaderColorRampColorBandjs
// 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: with
GradientQuadConfig,bands,shapeMode,repeatMode,start,shapedither - Colors defined via with
ColorRampobjects (supports HSV, various interpolation modes)ColorBand - Call after modifying ramp data at runtime
gradient.ramp.encode()
Source:
src/gameobjects/gradient/Gradient.js显示GPU渲染的颜色渐变。继承自。支持线性、径向及其他形状模式,可配置包含对象的。
ShaderColorBandColorRampjs
// 简单线性渐变:
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、shapedither - 颜色通过包含对象的
ColorBand定义(支持HSV、多种插值模式)ColorRamp - 运行时修改渐变数据后需调用
gradient.ramp.encode()
源码:
src/gameobjects/gradient/Gradient.jsNoise Game Objects
Noise游戏对象
All noise types extend and are WebGL only. Six variants available:
Shader| Type | Factory | Description |
|---|---|---|
| | White noise (random hash-based) |
| | 2D cellular/Worley/Voronoi noise |
| | 3D cellular noise (Z-axis slicing for animation) |
| | 4D cellular noise (Z+W axis slicing) |
| | 2D simplex/gradient noise (clouds, fire, water) |
| | 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:
- --
noiseOffsetarray to scroll the pattern[x, y] - -- sculpt output levels (higher suppresses high values)
noisePower - -- output normal map (for lighting integration)
noiseNormalMap - -- detail level (cellular/simplex types)
noiseIterations
Math equivalents: , ,
Phaser.Math.Hash()Phaser.Math.HashCell()Phaser.Math.HashSimplex()Source:
src/gameobjects/noise/所有Noise类型均继承自,仅支持WebGL。提供六种变体:
Shader| 类型 | 工厂方法 | 描述 |
|---|---|---|
| | 白噪声(基于随机哈希) |
| | 2D细胞/Worley/Voronoi噪声 |
| | 3D细胞噪声(通过Z轴切片实现动画) |
| | 4D细胞噪声(通过Z+W轴切片实现动画) |
| | 2D simplex/梯度噪声(用于模拟云、火、水等效果) |
| | 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 - -- 细节级别(细胞/simplex类型)
noiseIterations
对应数学方法: 、、
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 to 0 (avoids buffer rebuild)
scaleX/scaleY/alpha - 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的幂次方纹理以避免接缝
- 可通过将设为0来视觉上“移除”成员(避免重建缓冲区)
scaleX/scaleY/alpha - 组件:Alpha、BlendMode、Depth、ElapseTimer、Lighting、Mask、RenderNodes、TextureCrop、Visible
源码:
src/gameobjects/spritegpulayer/SpriteGPULayer.jsNew 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.selfShadowSupported 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.jsRenderSteps 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 array, executed via
_renderStepsrenderWebGLStep() - First step runs first and is responsible for calling subsequent steps
- This is how Filters defer and control the flow
renderWebGL
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.jsRenderNodes Component
RenderNodes组件
Provides , , and maps on game objects. See the RenderNodes section above for usage.
defaultRenderNodescustomRenderNodesrenderNodeDataSource:
src/gameobjects/components/RenderNodes.js在游戏对象上提供、和映射。使用方法请参考上方RenderNodes章节。
defaultRenderNodescustomRenderNodesrenderNodeData源码:
src/gameobjects/components/RenderNodes.jsTilemapGPULayer
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 = trueCapabilities:
- 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 call to update
generateLayerDataTexture() - 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.jsFor 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参考表以及源码文件映射,请查看参考指南。