Phaser 4 Filters 与 Post-FX 完整指南从 Glow、Blur 到自定义 Bloom 的 GPU 后处理管线【免费下载链接】phaserPhaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.项目地址: https://gitcode.com/gh_mirrors/ph/phaser导读本文是 Phaser 4当前仓库gh_mirrors/ph/phaser中滤镜与后期处理Post-FX系统的完整实战指南。Phaser 4 用一套统一的 GPU 滤镜管线取代了 Phaser 3 的 FX 系统摄像机与游戏对象均可挂载内部/外部两类滤镜列表通过FilterList与Phaser.Filters.Controller组织二十余种内置滤镜辉光、高斯模糊、色阶矩阵、桶形畸变、置换、色键抠像、遮罩、擦除转场等并可用ParallelFilters自由组合出自定义 Bloom。读完本文你将掌握如何为游戏对象开启滤镜、如何区分并正确选用 internal/external 滤镜、如何串联多个滤镜、如何用 Mask 实现遮罩、如何用 Wipe 制作转场以及如何用源码级视角理解滤镜的渲染管线与性能开销。本文以仓库内技能文档 skills/filters-and-postfx/SKILL.md 为骨架并结合src/filters/、src/gameobjects/components/下的实现源码与tests/filters/中的测试用例进行深度佐证。快速上手在 Scene 的create()方法中为精灵添加辉光Glow效果const sprite this.add.sprite(400, 300, player); // 第 1 步为游戏对象开启滤镜系统仅 WebGL sprite.enableFilters(); // 第 2 步通过 .filters.internal 或 .filters.external 添加滤镜 sprite.filters.internal.addGlow(0xff00ff, 4, 0, 1);为摄像机添加模糊效果则更简单——摄像机默认就开启了滤镜无需调用enableFilters()const camera this.cameras.main; camera.filters.internal.addBlur(0, 2, 2, 1);核心概念v4 的滤镜是如何工作的滤镜即 GPU 后处理滤镜Filter是基于 GPU 的后处理效果对象或摄像机先渲染到一张纹理上然后每个滤镜对这张纹理执行一次着色器shader通道最终生成视觉输出。滤镜仅在 WebGL 渲染器下可用。带滤镜的摄像机完整渲染管线如下该流程同时记录在 FilterList.js 源码注释 中场景对象渲染到一张与摄像机等大的纹理内部滤镜Internal filters处理该纹理在对象/摄像机局部空间施加效果纹理尺寸可能因模糊等效果而扩展纹理被绘制到一张与上下文context等大的纹理上同时应用摄像机自身的变换位置、旋转、缩放外部滤镜External filters处理该上下文纹理在屏幕空间施加效果同样可按需扩展最终纹理合成到输出。Internal 与 External 的区别每个FilterList都暴露两个子列表filters.internal与filters.external。二者的本质区别是滤镜相对于摄像机/对象变换的执行时机类别执行时机坐标系开销Internal摄像机变换之前对象的局部坐标系只覆盖对象/摄像机区域更便宜External摄像机变换之后屏幕坐标系全屏处理更昂贵一个典型例子对一个旋转 45° 的游戏对象施加水平模糊——使用internal滤镜时模糊会随对象一起旋转 45°使用external滤镜时模糊始终在屏幕上保持水平。尽量优先使用 internal 滤镜以获得更好性能这一点在 FilterList 源码注释 中也有明确建议。FilterList滤镜容器FilterListPhaser.GameObjects.Components.FilterList是持有滤镜控制器的容器位于 src/gameobjects/components/FilterList.js。它提供的核心 APIadd(filter, index)—— 添加一个 Controller 实例可选插入位置索引为负时从尾部倒数插入见源码splice逻辑remove(filter, forceDestroy)—— 移除并销毁滤镜forceDestroytrue时即使设置了ignoreDestroy也会强制销毁clear()—— 移除并销毁全部滤镜ignoreDestroy的滤镜除外getActive()—— 返回所有active true的滤镜内部通过list.filter(isActive)实现list—— 原始 Controller 数组可直接调整顺序重排是安全的便捷工厂方法addBlur()、addGlow()、addMask()等每个滤镜类型对应一个。Filter Controller每个滤镜的控制器每个滤镜都是Phaser.Filters.Controller的子类基类实现位于 src/filters/Controller.js。常用属性属性类型说明activeboolean开关滤镜无需从列表中移除默认truecameraCamera拥有该滤镜的摄像机renderNodestring着色器对应的渲染节点 ID如FilterGlow、FilterMask、FilterParallelFilterspaddingOverrideRectangle覆盖自动 padding 计算传null清除覆盖ignoreDestroyboolean为true时所属 FilterList 被销毁时该滤镜得以保留便于复用关键方法setActive(bool)、setPaddingOverride(left, top, right, bottom)传null清除、不传参则置 0、getPadding()、destroy()置空renderNode与camera引用。源码细节getPadding()返回paddingOverride || currentPadding渲染时通过getPaddingCeil()对 padding 做Math.ceil取整并写入currentPadding避免非整数造成质量损失见 Controller.js。为游戏对象开启滤镜摄像机默认可用滤镜游戏对象则必须显式调用enableFilters()const sprite this.add.sprite(400, 300, hero); sprite.enableFilters(); // 现在 sprite.filters 可用 sprite.filters.internal.addGlow(); sprite.filters.external.addVignette();enableFilters()的实现位于 src/gameobjects/components/Filters.js它的具体行为包括WebGL 检测若!this.scene.renderer.gl则直接返回this在 Canvas 渲染器下静默失效惰性加载并创建内部filterCameranew Camera(0, 0, 1, 1).setScene(scene, false)并设置isObjectInversion true以计算对象的逆矩阵同步roundPixels配置全局roundPixels开启时跟随避免非整数坐标导致抗锯齿模糊初始化maxFilterSize默认取渲染器的getMaxTextureSize()WebGL 下硬件上限至少为 4096可用更小值节省内存或阻止纹理扩容为无明确边界的对象无getBounds、宽高为 0 或未定义自动开启filtersFocusContext true通过addRenderStep(this.renderWebGLFilters, renderWebGLIndex)把滤镜渲染注册为紧邻renderWebGL之前的渲染步骤。开启后游戏对象上出现以下相关属性属性默认值说明filterCameranull → Camera用于滤镜渲染的内部摄像机filtersnull → {internal, external}FilterList 对只读 getter见源码filters定义renderFilterstrue所有滤镜渲染的总开关filtersAutoFocustrue自动调整摄像机以跟随对象filtersFocusContextfalse聚焦渲染上下文而非对象边界filtersForceCompositefalse即使无活动滤镜也始终绘制到帧缓冲maxFilterSizenull → Vector2滤镜帧缓冲的最大纹理尺寸可用willRenderFilters()判断是否真的有活动滤镜会执行渲染——其逻辑为renderFilters filters (internal 或 external 有活动滤镜 || filtersForceComposite)见 Filters.js。源码机制renderWebGLFilters渲染步骤会先执行focusFilters()自动聚焦把滤镜摄像机尺寸设为对象尺寸并同步旋转/缩放/原点处理 flipX/flipY再通过renderer.cameraRenderNode.run(...)将对象渲染到帧缓冲最后把滤镜摄像机的渲染列表并入当前绘制上下文的渲染列表。临时将对象的scrollFactor置 1 是刻意设计——scrollFactor 会被烘焙进变换矩阵无法用于精确聚焦见 Filters.js。手动聚焦也提供了 APIfocusFiltersOverride(x, y, width, height)可自定义聚焦位置与尺寸调用后会关闭filtersAutoFocussetFiltersAutoFocus(value)、setFiltersFocusContext(value)、setFiltersForceComposite(value)、setRenderFilters(value)则提供了对应属性的链式 setter。常见实战模式给游戏对象叠加滤镜const sprite this.add.sprite(400, 300, enemy); sprite.enableFilters(); // 添加辉光 const glow sprite.filters.internal.addGlow(0x00ff00, 4); // 运行时修改 glow.outerStrength 8; glow.color 0xff0000; // 临时停用不删除 glow.setActive(false); // 移除并销毁 sprite.filters.internal.remove(glow);摄像机滤镜const camera this.cameras.main; // Internal效果处于摄像机局部空间 const blur camera.filters.internal.addBlur(0, 2, 2, 1); // External效果处于屏幕空间 const vignette camera.filters.external.addVignette(0.5, 0.5, 0.5, 0.5); // 通过 ColorMatrix 做调色 const cm camera.filters.internal.addColorMatrix(); cm.colorMatrix.sepia();串联多个滤镜链式处理滤镜按列表顺序依次执行每个滤镜接收上一个滤镜的输出const cam this.cameras.main; // 第一层调色 const cm cam.filters.internal.addColorMatrix(); cm.colorMatrix.brightness(0.2); // 第二层对调色结果做模糊 cam.filters.internal.addBlur(1, 2, 2, 1); // 第三层顶部叠加暗角 cam.filters.external.addVignette(0.5, 0.5, 0.5, 0.8);用滤镜实现遮罩Maskv4 中遮罩本身就是滤镜——利用纹理或游戏对象的 alpha 通道控制可见性见 Mask.js 源码注释 与 FilterList.js 中 addMask 的 JSDoc// 用静态纹理做遮罩 sprite.enableFilters(); sprite.filters.internal.addMask(maskTexture); // 用游戏对象做遮罩自动渲染到 DynamicTexture const maskShape this.add.circle(0, 0, 100, 0xffffff); sprite.enableFilters(); const mask sprite.filters.internal.addMask(maskShape); // 反转遮罩 mask.invert true; // 控制游戏对象遮罩的自动更新 mask.autoUpdate true; // 默认每帧重新渲染 mask.needsUpdate true; // 强制一次性更新 // 指定渲染遮罩对象所用的摄像机 sprite.filters.external.addMask(maskShape, false, this.cameras.main);遮罩语义internal 遮罩匹配被过滤的对象适合跟随动画精灵的效果external 遮罩匹配摄像机上下文适合覆盖整个视图的效果。viewCamera参数控制遮罩游戏对象由哪个摄像机渲染不指定时使用场景主摄像机。源码与测试佐证Mask控制器使用游戏对象时会把对象捕获capture到DynamicTexture。测试 tests/filters/Mask.test.js 验证了maskGameObject的更新会置needsUpdate truescaleFactor 2时 DynamicTexture 尺寸翻倍100 → 200viewTransform: local会被透传到 capture 选项destroy()会清理 DynamicTexture 并置空引用。Wipe / Reveal 转场const camera this.cameras.main; const wipe camera.filters.external.addWipe(0.1, 0, 0); // 用 Tween 驱动 progress 动画 this.tweens.add({ targets: wipe, progress: 1, duration: 2000, ease: Linear }); // 方向辅助方法 wipe.setLeftToRight(); wipe.setTopToBottom(); wipe.setRevealEffect(); // 揭示模式reveal wipe.setWipeEffect(); // 擦除模式wipe // 擦除到另一张纹理用于场景转场 wipe.setTexture(nextSceneCapture);addWipe的参数组合direction/axis决定方向左→右为 (0,0)、右→左为 (1,0)、上→下为 (0,1)、下→上为 (1,1)见 FilterList.js 中 addWipe 的 JSDoc。ParallelFilters自定义 Bloom 与合成ParallelFilters将输入拆分为两条独立路径分别处理最后混合结果。它取代了 v3 的专用 Bloom 滤镜。其实现位于 src/filters/ParallelFilters.js自身是一个 ControllerrenderNode为FilterParallelFilters内部持有两个FilterListtop与bottom和一个Blend控制器blendtop输出作为混合纹理叠加到bottom输出上任一路径为空时与原始输入混合可用于保留会被滤镜过程丢失的原始图像数据由于ParallelFilters与FilterList存在循环依赖addParallelFilters()工厂方法是注入到FilterList.prototype上的而非直接写在 FilterList 类中见 ParallelFilters.js。测试 tests/filters/ParallelFilters.test.js 验证了该方法的存在、返回类型、入列行为以及 top/bottom/blend 三者相互独立。const camera this.cameras.main; const pf camera.filters.internal.addParallelFilters(); // 顶部分支先阈值化提亮区域再模糊 pf.top.addThreshold(0.5, 1); pf.top.addBlur(); // 配置混合top 如何叠加到 bottom pf.blend.blendMode Phaser.BlendModes.ADD; pf.blend.amount 0.5; // 底部分支留空 使用原始输入性能提示ParallelFilters 并非并行加速而是复用输入的便捷手段这点在源码注释中明确说明It does not gain performance benefits from parallel processing见 ParallelFilters.js。如果不想手搭可直接使用自动化 ActionPhaser.Actions.AddEffectBloom。它的实现位于 src/actions/AddEffectBloom.js内部正是按ParallelFilters Threshold Blur ADD 混合的方式构建 Bloom并返回{ item, parallelFilters, threshold, blur }对象数组供进一步控制// 对场景摄像机应用 Bloom Phaser.Actions.AddEffectBloom(this.cameras.main); // 访问组成 Bloom 的滤镜并销毁 const { parallelFilters, threshold, blur } Phaser.Actions.AddEffectBloom(this.cameras.main)[0]; parallelFilters.destroy();其配置项及默认值见源码第 80-85 行threshold0.5、blurRadius2、blurSteps4、blurQuality0、blendAmount1、blendModeADD另有useInternal开关决定挂到 internal 还是 external 列表。Bloom 最适合全屏效果——若用在带透明区域的游戏对象上ADD 混合的光晕无法与背景正确混合源码注释已说明此限制。CaptureFrame场景级效果CaptureFrame在显示列表中的位置即捕获点它之前渲染的对象会被捕获之后的对象不会// 需要摄像机处于合成composite模式 this.cameras.main.setForceComposite(true); // 在 CaptureFrame 之前渲染的对象会被捕获 const bg this.add.image(400, 300, background); // 创建捕获点 const capture this.add.captureFrame(myCapture); // 用滤镜显示捕获到的纹理 const display this.add.image(400, 300, myCapture); display.enableFilters(); display.filters.internal.addBlur(0, 4, 4, 2);全部内置滤镜一览以下为FilterList提供的全部工厂方法参数默认值与取值范围均依据 FilterList.js 源码滤镜添加方法说明BarreladdBarrel(amount)桶形收缩/扩张畸变amount1为无畸变通常保持在 ±1 内BlendaddBlend(texture, blendMode, amount, color)用混合模式叠加另一张纹理支持标准 WebGL 之外的混合模式texture默认__WHITEamount期望 0~1color为 RGBA 数组BlockyaddBlocky(config)保留原始颜色的像素化取色块中心像素填充整块不做颜色混合最适合关闭抗锯齿的场景BluraddBlur(quality, x, y, strength, color, steps)高斯模糊。quality0低、1中、2高默认 0x/y默认 2、strength默认 1、steps默认 4须为整数BokehaddBokeh(radius, amount, contrast)景深散景模糊默认radius0.5, amount1, contrast0.2ColorMatrixaddColorMatrix()矩阵调色访问.colorMatrix可使用 sepia、grayscale、brightness、hue 等预设CombineColorMatrixaddCombineColorMatrix(texture)通过颜色矩阵合并两张纹理的通道适合做 alpha 迁移DisplacementaddDisplacement(texture, x, y)置换贴图扭曲位移值是极小浮点数如 0.005GlowaddGlow(color, outerStrength, innerStrength, scale, knockout, quality, distance)边缘光晕。默认color0xffffff, outerStrength4, innerStrength0, scale1, knockoutfalse, quality10, distance10quality与distance创建后不可修改GradientMapaddGradientMap(config)基于亮度用 ColorRamp 重着色ImageLightaddImageLight(config)基于图像的照明IBL使用全景环境贴图与法线贴图KeyaddKey(config)色键抠像移除或隔离特定颜色。配置{ color, threshold, feather, isolate }MaskaddMask(mask, invert, viewCamera, viewTransform, scaleFactor)纹理或游戏对象 alpha 遮罩。viewTransform为local或world默认 worldscaleFactor默认 1NormalToolsaddNormalTools(config)法线贴图操作旋转、调整朝向强度、输出灰度朝向数据PanoramaBluraddPanoramaBlur(config)全景图的球面校正模糊供 ImageLight 使用采样网格samplesX * samplesY很慢ParallelFiltersaddParallelFilters()拆分为两条滤镜路径后混合用于自定义 BloomPixelateaddPixelate(amount)马赛克像素化像素尺寸 2 amount会混合颜色区别于 BlockyQuantizeaddQuantize(config)减少调色板颜色支持 RGBA/HSVA 模式、gamma、offset、抖动ditheringSampleraddSampler(callback, region)从渲染结果提取像素数据交给回调不改变图像开销大ShadowaddShadow(x, y, decay, power, color, samples, intensity)投影偏移、衰减与颜色。默认decay0.1, power1, color0x000000, samples6, intensity1ThresholdaddThreshold(edge1, edge2, invert)每通道二值阈值edge 可为数组实现逐通道控制默认均为 0.5invert默认 falseTiltShiftaddTiltShift(radius, amount, contrast, blurX, blurY, strength)微缩模型/移轴效果内部复用 Bokeh见 FilterList.js 的 addTiltShift 实现VignetteaddVignette(x, y, radius, strength, color, blendMode)边缘暗角/着色。x/y/radius 归一化到 0~1默认 0.5仅支持 NORMAL、ADD、MULTIPLY、SCREEN 四种混合模式WipeaddWipe(wipeWidth, direction, axis, reveal, wipeTexture)擦除/揭示转场用 Tween 驱动progress。wipeWidth默认 0.1归一化 0~1wipeTexture默认空白API 速查开启与访问滤镜// 游戏对象必须先 enableFilters() gameObject.enableFilters(); gameObject.filters.internal.addBlur(); gameObject.filters.external.addGlow(); // 摄像机立即可用 camera.filters.internal.addBlur(); camera.filters.external.addGlow();FilterList 方法const list camera.filters.internal; list.addBlur(); // 工厂方法每种滤镜一个 list.add(controllerInstance); // 添加预构建的控制器 list.add(controller, 2); // 插入到索引 2 list.remove(controller); // 移除并销毁 list.clear(); // 移除并销毁全部 list.getActive(); // 获取所有活动控制器 list.list; // 原始数组可安全重排Controller 通用 APIcontroller.active false; // 停用但不移除 controller.setActive(true); // 启用链式返回 this controller.setPaddingOverride(10, 10, 10, 10); // 覆盖 padding controller.setPaddingOverride(null); // 清除覆盖 controller.ignoreDestroy true; // 在 FilterList.destroy() 时存活 controller.destroy(); // 手动清理Mask 滤镜 APIconst mask list.addMask(texKey); // 按纹理 key const mask list.addMask(gameObject); // 按游戏对象 mask.invert true; // 反转遮罩 mask.autoUpdate false; // 停止自动更新 GO 遮罩 mask.needsUpdate true; // 强制更新一次 mask.setTexture(newKey); // 更换纹理源 mask.setGameObject(newGO); // 更换 GO 源 mask.viewCamera otherCamera; // 渲染 GO 的摄像机 mask.viewTransform local; // local 或 world mask.scaleFactor 0.5; // 遮罩纹理缩放源码细节setTexture仅在纹理存在时替换glTexture并清除maskGameObjectsetGameObject会置needsUpdate true并清除纹理引用测试 tests/filters/Mask.test.js 对不存在纹理、链式返回等边界均有覆盖。ColorMatrix 预设const cm list.addColorMatrix(); cm.colorMatrix.sepia(); cm.colorMatrix.grayscale(1); cm.colorMatrix.brightness(0.3); cm.colorMatrix.hue(90); cm.colorMatrix.saturate(-0.5); cm.colorMatrix.contrast(0.3); cm.colorMatrix.blackWhite(); cm.colorMatrix.negative(); cm.colorMatrix.desaturate(); cm.colorMatrix.night(0.5); cm.colorMatrix.lsd(); cm.colorMatrix.brown(); cm.colorMatrix.vintagePinhole(); cm.colorMatrix.kodachrome(); cm.colorMatrix.technicolor(); cm.colorMatrix.polaroid(); cm.colorMatrix.shiftToBGR();易踩的坑Gotchas仅 WebGLCanvas 渲染器下滤镜不可用enableFilters()检测到无 WebGL 会提前返回见 Filters.js。游戏对象必须enableFilters()摄像机默认可用精灵、图片、容器等对象必须先开启才能访问filters。性能开销每个带活动滤镜的对象都会产生额外绘制调用基础渲染一次 每个活动滤镜一次。源码注释明确提醒可以很昂贵请节制使用见 Filters.js 顶部 JSDoc。应尽早做性能测试。internal/external 选择很重要internal 更便宜对象区域大小external 是全屏。需要随对象旋转的模糊必须用 internal需要保持屏幕对齐的模糊必须用 external。滤镜顺序影响结果滤镜按列表顺序依次执行前一个的输出是后一个的输入。Glow 的 quality 与 distance 不可变创建后无法修改只能销毁重建源码中二者为readonly见 Glow.js。CaptureFrame 需要 forceComposite摄像机必须setForceComposite(true)或以其他方式渲染到帧缓冲CaptureFrame 才能工作。向外扩张效果的 paddingBlur、Glow、Shadow 等滤镜会自动计算 padding 以扩展渲染纹理可用setPaddingOverride()覆盖传null清除。用于摄像机时用camera.getPaddingWrapper(x)渲染图像边缘之外的世界。控制器复用默认控制器会随 FilterList 销毁而销毁设置ignoreDestroy true可跨对象复用但生命周期需自行管理且最好用于 external 滤镜源码注释一个 Controller 不要同时用于多个摄像机否则销毁一个拥有者时控制器也会被销毁见 Controller.js。遮罩游戏对象的渲染autoUpdate true时遮罩对象每帧渲染到 DynamicTexture静态遮罩建议autoUpdate falseneedsUpdate true做一次性更新以提升性能。v4 没有独立 Bloom 滤镜使用 ParallelFiltersThreshold Blur ADD 混合自行搭建或直接用Phaser.Actions.AddEffectBloom自动化源码见 src/actions/AddEffectBloom.js。圆形遮罩可交给Phaser.Actions.AddMaskShape实现见 src/actions/AddMaskShape.js支持 circle/square/rectangle/ellipse 四种形状与可选模糊软边。从 v3 迁移FX → Filters 的变化对照v3FXv4Filters说明gameObject.preFX/gameObject.postFXgameObject.filters.internal/gameObject.filters.externalpre/postFX 被 internal/external 滤镜列表取代camera.postFXcamera.filters.internal/camera.filters.external摄像机同时拥有 internal 与 external 两个列表FX.addBloom()ParallelFilters Threshold Blur无独立 Bloom 滤镜用 ParallelFilters 或Phaser.Actions.AddEffectBloom构建FX.addCircle()Vignette 或 MaskCircle 效果移除用带半径的 Vignette 或圆形 Mask或用Phaser.Actions.AddMaskShape自动化FX.addGradient()Gradient 游戏对象 Quantize新增 Gradient 游戏对象渲染渐变Quantize 可按需加色阶Glowquality是 0-1 小数Glowquality是整数默认 10随机采样取代直线采样质量更高源码转换说明见 Glow.jscamera.setMask()camera.filters.internal.addMask()遮罩并入统一滤镜系统gameObject.setMask()gameObject.filters.internal.addMask()同上FX 控制器Phaser.Filters.Controller子类同样返回可修改属性的控制器对象—游戏对象需enableFilters()新增的显式开启步骤—Blocky、Quantize、Key、Blend、CombineColorMatrix、ImageLight、NormalTools、PanoramaBlur、ParallelFilters、Samplerv4 新增滤镜源码地图文件说明src/gameobjects/components/Filters.jsMixin为游戏对象添加enableFilters()、filterCamera、filters、willRenderFilters()、focusFilters()等src/gameobjects/components/FilterList.jsFilterList 类与全部add*()工厂方法src/filters/Controller.js所有滤镜的基类 Controllersrc/filters/Barrel.js桶形畸变src/filters/Blend.js纹理混合src/filters/Blocky.js保色像素化src/filters/Blur.js高斯模糊src/filters/Bokeh.js散景/移轴src/filters/ColorMatrix.js颜色矩阵sepia、grayscale 等src/filters/CombineColorMatrix.js双纹理通道合并src/filters/Displacement.js置换贴图src/filters/Glow.js辉光/描边src/filters/GradientMap.js渐变重着色src/filters/ImageLight.js基于图像的照明src/filters/Key.js色键抠像src/filters/Mask.jsAlpha 遮罩纹理或游戏对象src/filters/NormalTools.js法线贴图操作src/filters/PanoramaBlur.js全景球面模糊src/filters/ParallelFilters.js并行路径 混合src/filters/Pixelate.js像素化src/filters/Quantize.js颜色量化src/filters/Sampler.js像素采样/回读src/filters/Shadow.js投影src/filters/Threshold.js阈值src/filters/Vignette.js暗角src/filters/Wipe.js擦除/揭示转场src/gameobjects/captureframe/CaptureFrame.js场景级捕获游戏对象tests/filters/各滤镜的单元测试含 Controller、Mask、ParallelFilters 等进一步的配套阅读可参考仓库内的 sprites-and-images 技能文档、cameras 技能文档 与 v4-new-features 技能文档。【免费下载链接】phaserPhaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.项目地址: https://gitcode.com/gh_mirrors/ph/phaser创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考