用途
Phaser 4 视觉效果技能,用于在 Phaser 4 游戏中添加滤镜、遮罩、光照与光束渲染器(Beam Renderer)。Phaser 4 整体替换了 v3 渲染器;v3 中互不兼容的两个系统(FX 与遮罩)在 v4 中合并为一个系统——Filters,适用于每一个游戏对象和每一台摄像机。
核心规则
游戏对象必须先调用 enableFilters(),否则 filters 为 null;摄像机则始终有 filters。
// 游戏对象
sprite.enableFilters();
sprite.filters!.internal.addGlow(0xff00ff, 4, 0, 1);
// 摄像机
this.cameras.main.filters.external.addVignette(0.5, 0.5, 0.5, 0.5);
未启用时调用 sprite.filters.internal.addBlur() 会抛错(Cannot read properties of null),这是最常见的 Phaser 4 效果错误。
internal 与 external
每个滤镜列表分两半:internal 使用对象自身空间、随对象移动、按对象尺寸渲染、开销较低,适合精灵发光、面板遮罩;external 使用渲染上下文(通常全屏)、不随对象移动、按全画布渲染、开销较高,适合全屏调色、暗角。无宽高的对象以及描边超出报告边界的 Shape 对象无法定义内部空间,会自动回退到 external。
滤镜目录
每个都是 internal 或 external 上的 add* 调用:addBlur(高斯模糊)、addGlow(轮廓发光)、addShadow(投影)、addBokeh(景深风格模糊)、addPixelate(像素化)、addBlocky(块状量化)、addVignette(边缘变暗)、addBarrel(镜头桶形/扩张畸变)、addDisplacement(按纹理置换,如热浪、水)、addColorMatrix(颜色分级)、addCombineColorMatrix(混合两个颜色矩阵)、addGradientMap(按渐变重映射亮度)、addThreshold(alpha/颜色阈值)、addQuantize(减少颜色数)、addMask(遮罩)、addKey(色键)、addBlend(WebGL 四种原生混合之外的混合模式)、addTiltShift(移轴)、addPanoramaBlur(全景模糊)、addSampler(从其他纹理采样)、addImageLight(基于图像的光照)、addNormalTools(法线贴图操作)、addParallelFilters(并行运行两条滤镜链并合并)、addCustom(自定义着色器)。
ColorMatrix 的嵌套属性:颜色方法位于 colorMatrix 子属性上,如 cm.colorMatrix.sepia()、cm.colorMatrix.grayscale()、cm.colorMatrix.night(0.3)。
复合效果位于 Actions:Phaser.Actions.AddEffectBloom()、AddEffectShine()、AddMaskShape()。
遮罩
BitmapMask 已不存在,createGeometryMask() 与 createBitmapMask() 已不再是游戏对象方法。矩形裁剪使用摄像机视口(比滤镜便宜且像素精确;Phaser 4 无 camera.setScissor(),应使用 setViewport());其他形状使用 Mask 滤镜 filters.internal.addMask(source),第二参数可反转,source 可为纹理键或游戏对象(会渲染到 DynamicTexture,因此动画遮罩与滤镜输出遮罩均可),scaleFactor 用于权衡精度与内存。Stencil(4.2.0+)用于跨多对象多帧的持久遮罩,更便宜,支持 addLayer、subtractLayer、clear、clearRegion 等模式。
着色
Phaser 4 将 tint 颜色与 tint 模式分离,v3 的 tintFill = true 已不存在,改用 sprite.setTintMode(Phaser.TintModes.FILL)。模式包括 MULTIPLY、FILL、ADD、SCREEN、OVERLAY、HARD_LIGHT、MULTIPLY_TWO。MULTIPLY_TWO(4.2.0+)支持每角第二个 tint 颜色,可无着色器实现渐变着色。Mesh2D 与 Tile 支持常量 tint2;TilemapGPULayer 不支持瓦片着色。Shape 对象完全不实现 Tint 组件,应改 fillColor。
光照
this.lights.enable().setAmbientColor(0x333333),再用 this.lights.addLight(...) 添加光源;对象需选择加入光照。锥形光(4.2.0+)复用同一光照着色器,可用于手电筒、视野锥、车灯、探照灯,通过 addConeLight(x, y, radius, colour, intensity, rotation, innerAngle, outerAngle) 创建,支持 setConeRotation、setConeAngles、disableCone。
性能
滤镜是帧缓冲操作,每次都是一个渲染通道。闪光与颜色变化优先用 tint;优先用一个摄像机滤镜替代 N 个对象滤镜;internal 优于 external;滤镜不使用 mipmap;enableFilters() 只在 create() 中调用一次,不要每帧调用 add*;alpha 策略使用 discard。可用 playtest harness 以对比方式验证性能,headless FPS 不能作为游戏性能的绝对值。
从 Phaser 3 迁移
对照表包括:preFX/postFX 改为 enableFilters() + filters.internal/external;BitmapMask/setMask 改为 filters.internal.addMask();createGeometryMask() 改为摄像机视口或 addMask();tintFill 改为 setTintMode;setPipeline 改为渲染节点;Bloom/Shine/Circle FX 改为对应 Actions;colorMatrixFilter 改为 filter.colorMatrix;Mesh/Plane 改为 Mesh2D。迁移前可运行 grep 检查遗留调用。
附加资源
references/filters-api.md、references/lighting.md、references/renderer-and-shaders.md,以及与 phaser-migrate、phaser-particles、phaser-analyze 相关的技能。
限制
以上内容均来自技能说明所提供的事实;未提供的功能、收费、价格、平台或效果信息暂未提供。