Phaser 4.0.0 RC7 新特性全解析：滤镜、渐变、噪声、Tint 与纹理系统升级指南

Phaser 4.0.0 RC7 新特性全解析滤镜、渐变、噪声、Tint 与纹理系统升级指南【免费下载链接】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本文基于仓库 changelog/v4/4.0-rc/CHANGELOG-v4.0.0-rc.7.md 编写全面梳理 Phaser 4.0.0 Release Candidate 7 引入的新功能与修复项。你将掌握如何用一行 Action 为相机或 GameObject 快速搭建 Bloom/Shine 特效与蒙版如何用全新的Gradient、Noise游戏对象与ColorBand/ColorRamp构建程序化渐变与噪声纹理如何理解 Tint 体系的破坏性重构以及纹理、位图字体、TimeStep等关键修复的底层原理与实战影响。引言RC7 带来了什么Phaser 4.0.0 Release Candidate 7下文简称 RC7是 Phaser 4 正式发布前的关键候选版本聚焦于把渲染管线中最炫酷的部分——滤镜Filters、渐变Gradient、程序化噪声Noise、蒙版Mask与着色Tint——从能用打磨到好用。它引入了一批开箱即用的动作Actions让原本需要手工组合多层滤镜才能实现的 Bloom、Shine 特效变成一行调用新增了Gradient与Noise系列游戏对象让开发者无需编写 GLSL 即可在场景中直接渲染渐变与多种噪声图案同时对 Tint 系统做了破坏性重构用tintMode取代了旧的tintFill语义。本文以该 CHANGELOG 为骨架结合 src/actions、src/display/ColorBand.js、src/gameobjects/gradient/Gradient.js、src/gameobjects/noise/Noise.js 等源码逐一展开每个特性背后的实现原理与配置细节。一、Actions 新工具一行代码搭建视觉特效RC7 在 src/actions 目录中新增了四个动作工具。它们都是纯函数接收目标或目标数组返回创建出的资源引用方便你后续手动控制。1.1 AddEffectBloom给场景叠加辉光Phaser.Actions.AddEffectBloom(items, config)通过组合多个滤镜来模拟 Bloom 辉光效果。根据 src/actions/AddEffectBloom.js 的实现它内部按以下顺序组装管线ParallelFilters将滤镜流分成top与bottom两路使特效结果能与原图重新合成Threshold剔除较暗的颜色只保留高亮区域Blur将剩余的高亮颜色向外扩散形成光晕。配置参数均来自 src/actions/AddEffectBloom.js 的默认值解析参数默认值作用threshold0.5亮度阈值高于此值的像素才参与辉光blurRadius2模糊半径blurSteps4模糊步数blurQuality0模糊质量等级blendAmount1辉光与原图的混合强度blendModeBlendModes.ADD辉光混合模式默认加法混合useInternalfalse使用内部还是外部滤镜列表基本用法// 给场景主相机直接叠加辉光 Phaser.Actions.AddEffectBloom(this.cameras.main); // 返回值是数组可解构出内部滤镜进行精细控制 const { parallelFilters, threshold, blur } Phaser.Actions.AddEffectBloom(this.cameras.main)[0]; // 关闭或销毁辉光 parallelFilters.active false; // 停用 parallelFilters.destroy(); // 销毁实战注意Bloom 最适合作为全屏效果。源码注释明确指出如果把它应用在带有透明区域的 GameObject 上辉光无法与背景正确混合——因为光晕需要 ADD 混合而物体本身需要 NORMAL 混合二者无法兼得。因此对 GameObject 应用 Bloom 时建议使用不透明贴图。1.2 AddEffectShine模拟高光掠过表面Phaser.Actions.AddEffectShine(items, config)模拟一个高光在表面上掠过的镜面反射效果例如高亮重要物品、传达光泽感。从 src/actions/AddEffectShine.js 可以看到它内部会创建一整组资源一个Gradient对象生成高光区域一个DynamicTexture承载高光区域一个Tween动画驱动高光移动一个Blend滤镜将高光与图像合成可选一个ParallelFilters把图像其余部分加回。关键配置见 src/actions/AddEffectShine.js 与文档注释参数默认值作用direction0.5弧度高光移动方向scale2高光尺度默认为目标两倍保证高光完全离开画面后再循环radius0.5半径偏移给渐变留出进出画面的空间colorFactor[1.15, 0.85, 0.85, 1]高光 RGBA 颜色系数可大于 1 制造超亮高光默认带轻微红调displacementMap/displacement无 /0.1给渐变叠加置换滤镜模拟轻微磨砂表面duration/yoyo/ease2000/false/ 无Tween 动画参数repeatDelay0循环间隔revealfalse开启揭示模式图像仅在光扫过时可见useExternalfalse使用外部还是内部滤镜列表示例缓慢地让一道青色高光在图片上来回扫动并叠加置换贴图做出脏旧质感const { dynamicTexture, gradient, tween } Phaser.Actions.AddEffectShine(this.image, { duration: 5000, direction: Math.PI / 2, scale: 1, displacementMap: displace, colorFactor: [ 0.5, 2, 2, 1 ], yoyo: true, ease: Quad.inout })[0]; // 返回数组源码中值得注意的是方向角会被规范化到0..2π区间并根据象限自动计算渐变的起点角左上/右上/左下/右下见 src/actions/AddEffectShine.js。所有资源都会在目标销毁时自动清理DESTROY/DESTROY_EVENT事件钩子每个目标拥有独立资源集互不影响。1.3 AddMaskShape形状蒙版一键生成Phaser.Actions.AddMaskShape(items, config)用 Shape 快速为 GameObject 或 Camera 添加蒙版。根据 src/actions/AddMaskShape.js 的实现它创建一个形状并用FitToRegion将其缩放到目标区域支持模糊边缘与反相。形状类型config.shapecircle默认、square、rectangle、ellipse。矩形与椭圆用config.aspectRatio控制宽高比默认1。其他配置参数默认值作用padding0向内部收缩形状区域给模糊扩散留出空间blurRadius/blurQuality/blurSteps无给蒙版形状叠加模糊滤镜实现柔和边缘invert无是否反转蒙版region场景画布或对象尺寸目标区域不传时自动推断scaleMode无传递给 FitToRegion 的缩放模式useInternalfalse内部还是外部滤镜列表示例摘自 src/actions/AddMaskShape.jsconst mask Phaser.Actions.AddMaskShape(target, { blurRadius: 2, padding: 2 })[0]; // 返回 Mask 滤镜数组 const shape mask.maskGameObject; // 持有 shape 引用可防止被垃圾回收 const blur shape.filters.external.list[0];几个实现细节值得留意创建的 Shape 会立即从场景子列表中移除src/actions/AddMaskShape.js无需管理生命周期待 Mask 滤镜销毁后自动被回收padding通过重新构建一个内缩的Rectangle区域实现默认蒙版是圆形但按画布 X/Y 两轴分别缩放因此严格说不再是正圆。1.4 FitToRegion把对象变换进任意区域Phaser.Actions.FitToRegion(items, scaleMode, region, itemCoverage)将对象变换到某个矩形区域如屏幕内。它非常适合快速铺满背景、移动对象而不必关心原点、或覆盖已知尺寸的缺口。三种 scaleMode见 src/actions/FitToRegion.jsscaleMode行为-1两轴等比缩放对象内切于区域完全在区域内0两轴独立缩放恰好填满区域默认可能拉伸变形1两轴等比缩放对象外接区域完全覆盖区域区域默认为场景画布{ x: 0, y: 0, width: scene.scale.width, height: scene.scale.height }。如果目标是 Container 这类没有尺寸/原点属性的对象可用itemCoverage传入width、height、originX、originY补充数据优先级高于对象自身属性。负缩放会被转为正数需要翻转请自行处理。二、ColorBand 与 ColorRamp程序化渐变的数据基础RC7 新增的两个显示类Phaser.Display.ColorBand与Phaser.Display.ColorRamp是整个渐变体系的基石被Gradient游戏对象内部使用。2.1 ColorBand两个颜色之间的一次过渡src/display/ColorBand.js 描述一次从colorStart到colorEnd的颜色过渡并支持三个控制维度middle默认0.5控制过渡的中间点形状。源码使用伽马曲线调整渐变斜率数学关系为0.5 middle^gamma即gamma log(middle, 0.5)见 src/display/ColorBand.js。interpolation插值样式取值 0-40 LINEAR直线混合1 CURVED首尾变化快、中间平缓适合凸面2 SINUSOIDAL中间变化快、首尾平缓适合平滑过渡3 CURVE_START起点变化快、终点平缓4 CURVE_END终点变化快、起点平缓。模式 2/3/4 直接使用 circular 缓动函数模式 1 使用基于单位圆的自定义公式src/display/ColorBand.js。colorSpace混合发生的色彩空间取值 0-30 RGBA各通道直接混合在 RGB 空间混合不符合人眼感知可能产生不准确结果1 HSVA_NEAREST在 HSVA 空间混合更好保留饱和度与明度色相按最短角度混合如红与蓝走紫色而非绿色2 HSVA_PLUS色相角总是递增3 HSVA_MINUS色相角总是递减。setColors()接受多种颜色格式数字24/32 位 RGB/ARGB、十六进制字符串、0-1 范围的 RGB/RGBA 数组或Color对象实例src/display/ColorBand.js。颜色以未预乘 alpha的方式处理因此 RGB 值可以大于 alpha。2.2 ColorRamp由多个 ColorBand 组成的色带序列src/display/ColorRamp.js 将多个ColorBand首尾相接成一条色带供Gradient使用。注意波段必须端到端紧密排列、不能有缝隙渐变着色器默认假设如此首尾可以留空但重叠与缝隙的行为不可预期。ColorRamp的核心亮点是GPU 编码默认开启的gpuEncode会把整条色带编码进一张数据纹理data texture供着色器直接采样。encode()的编码布局如下src/display/ColorRamp.js前 2 个 texel首波段起点与末波段终点中间一块二叉对称树用于在着色器中按进度快速定位所属波段。例如 10 个波段的端点存储顺序为[7, 3, 11, 1, 5, 9, 13, 0, 2, 4, 6, 8, 10, 12, 14]不存在的索引会被填充最后一块从dataTextureFirstBand开始每个波段 3 个 texel依次为colorStart、colorEnd、以及colorSpace*255 interpolation middle/2的合成值。常用方法setBands(bands, encode)替换波段并自动重新编码fixFit(start, end, purgeZeroLength, encode)让每个波段的起点对齐上一波段终点消除缝隙可强制拉长到指定范围如 0-1默认剔除零长度波段splitBand(band, steps, quantize, encode)把一个波段拆分成多个quantize为 true 时每个子波段用单一平色量化getColor(index)取色带中 0-1 进度位置的颜色destroy()销毁数据纹理。兼容性提醒如果你手动修改波段数据而非通过setBands()必须自行调用encode()重建数据纹理自动更新仅在创建与setBands()时发生因为框架不希望在你即将覆盖的数据上浪费重建开销。三、GameObjects.Gradient直接渲染渐变的新游戏对象Phaser.GameObjects.Gradient是一个渲染渐变的四边形游戏对象。从 src/gameobjects/gradient/Gradient.js 可知它本质上是一个使用专用着色器程序的Shader子类Extends: Shader片段着色器为Gradient-frag并注入Ramp-glsl头来读取 ColorRamp 数据纹理。它的颜色数据由ColorRamp内含一个或多个ColorBand决定色带沿shape布局、从start位置出发shapeMode决定渐变向其他区域的填充方式。3.1 五种形状shapeModeRC7 提供LINEAR、BILINEAR、RADIAL、CONIC_SYMMETRIC、CONIC_ASYMMETRIC五种渐变形状。注意形状被适配到正方形如果宽高不等形状会被拉伸变形——有时这正是你想要的。3.2 四种重复模式repeatMode渐变进度是一个数值0 为shape向量起点1 为终点重复模式决定了超出 0-1 范围后的行为src/gameobjects/gradient/Gradient.js值名称行为0EXTEND值被钳制在 0-1两端变成平色1TRUNCATE0-1 之外的值被丢弃两端变透明2SAWTOOTH对 1 取模渐变重复锯齿3TRIANGULAR升到 1 再降回 0来回平滑往复三角波注意圆锥渐变conic除非施加offset否则永远不会离开 0-1 范围加了 offset 后表现可能异常。3.3 噪点抖动与动画Interleaved Gradient Noise 抖动通过dither配置启用用交错梯度噪声抖动消除渐变条带banding伪影动画直接修改offset属性即可让渐变动起来。文档建议模式 1TRUNCATE下把 offset 在 -1 到 1 之间动画可制造一次性冲击波模式 2SAWTOOTH或 3TRIANGULAR则适合制造持续移动的图案。若修改色带数据需调用gradient.ramp.encode()重建。示例来自 src/gameobjects/gradient/Gradient.js// 一个简单的从左到右线性渐变 scene.add.gradient(undefined, 100, 100, 200, 200); // 一个发光的光晕径向渐变 抖动 正弦波动画 var halo scene.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, // TRUNCATE shapeMode: 2, // RADIAL start: { x: 0.5, y: 0.5 }, shape: { x: 0.5, y: 0.0 }, }, 400, 300, 800, 800); // 动画随时间改变 offset halo.offset 0.1 * (1 Math.sin(time / 1000));Gradient 具备普通 GameObject 的一切能力可交互、可放进滤镜与蒙版中。相关工厂/创建器位于 src/gameobjects/gradient。四、GameObjects.Noise 系列程序化噪声渲染RC7 引入一整族噪声游戏对象src/gameobjects/noise它们同样是Shader子类片段着色器Noise-frag。4.1 Noise白噪声Phaser.GameObjects.Noise渲染白噪声——随机值。根据 src/gameobjects/noise/Noise.js噪声通过对偏移像素坐标做哈希生成因此同一位置永远生成同一噪声效果可复现。noiseOffset[x, y]数组动画滚动噪声。浮点精度对此效果至关重要滚动很远会出块状物滚动极近会导致输出完全改变。更有效的做法是用setRenderToTexture把它当纹理喂给 TileSprite。noisePower默认1控制值曲线雕琢输出等级——幂越高压低高值幂越低压低低值。noiseColorStart/noiseColorEnd默认黑→白低值/高值对应的颜色可自定义任意颜色与 alpha。算法可选择三角函数或 PCG哈希输出支持灰度、随机彩色或随机法线贴图。4.2 NoiseCell2D / 3D / 4D细胞噪声NoiseCell2D、NoiseCell3D、NoiseCell4D提供 Cellular/Worley/Voronoi 噪声支持锐利或平滑边缘渲染或随机平色填充平滑地在 XY 平面滚动或沿 Z / ZW 轴演进图案叠加八度octave细节渲染为纹理或法线贴图供其他特效使用。4.3 NoiseSimplex2D / 3D单纯形噪声NoiseSimplex2D、NoiseSimplex3D提供单纯形噪声Perlin 噪声的继任者支持用梯度流gradient flow让噪声动画平滑循环叠加八度细节施加湍流turbulence与输出塑形实现多种效果同样支持渲染为纹理或法线贴图。配合Math.Hash、Math.HashCell、Math.HashSimplex见下文第六节可在 CPU 端生成同类哈希/噪声场。五、Tint 系统重构tintMode 取代 tintFillRC7 对 Tint 体系做了破坏性重构这是从 Phaser 3 迁移时最需要注意的变更之一详见 src/gameobjects/components/Tint.js 与 src/renderer/TintModes.jstint与setTint()现在纯粹影响颜色设置。旧版本中它们会静默关闭填充fill模式tintFill与setTintFill()被移除新增属性tintMode与方法setTintMode()负责设置着色填充模式Phaser.TintModes枚举全部合法模式仅 WebGL 生效模式值说明MULTIPLY0乘法着色默认着色色与纹理色相乘FILL1填充着色着色色替换纹理色但尊重纹理 alpha可用于受击闪白ADD2加法着色着色色加到纹理色上尊重 alphaSCREEN4提亮纹理暗部OVERLAY5提亮亮部、压暗暗部HARD_LIGHT6类似 OVERLAY但着色色与纹理色对调FILL 模式现在能正确处理部分 alphaBitmapText 着色也恢复正常迁移提示foo.setTintFill(color)改为foo.setTint(color).setTintMode(Phaser.TintModes.FILL)旧方法在调用时会打印迁移错误提示见 src/gameobjects/components/Tint.js。六、Math 哈希家族CPU 端的噪声基元RC7 在 src/math 新增三个哈希工具与 Noise 游戏对象互为表里Math.Hash对 1/2/3/4 维输入做快速哈希支持三角函数或 PCG 方法Math.HashCell把哈希结果用于 Worley 噪声场产生连续但块状lumpy的场Math.HashSimplex基于单纯形噪声实现的哈希产生连续平滑的场。七、滤镜家族扩张与回归RC7 大幅扩充了 src/filters 目录CombineColorMatrix在图像之间重混 alpha 及其他通道GradientMap用渐变与图像自身亮度重新着色Key移除或隔离指定颜色键控色ImageLight基于图像的光照image-based lighting一种柔和、高真实感的照明方式PanoramaBlur为ImageLight预处理图像NormalTools法线贴图处理工具Quantize减色与抖动Vignette从 Phaser 3 回归现在可设置可配置的边框颜色而非擦除 alpha并支持有限的混合模式Wipe从 Phaser 3 回归现在可设置被擦除区域显示的纹理并提供方向性揭示/擦除效果的辅助函数。八、纹理系统setSource 家族与类型整理Texture#setSource更新纹理的源。注意源会更新但派生值如对象尺寸不会——建议在尺寸相同的纹理间切换以免出现意外的变换src/texturesTexture#setDataSource原本已存在本次改造得更像setSource一样好用TextureManager#addFlatColor创建自定义颜色、alpha、宽高的平色纹理适合作为尚未加载的纹理的临时替身TextureSource#updateSource直接切换源新增Phaser.Types.Textures.TextureSource与TextureSourceElement类型简化日益增多的纹理源管理。九、RC7 修复项盘点TimeStep#stepLimitFPS丢弃更少的帧在目标帧率下运行更流畅。FPSConfig#limit文档明确仅在将游戏人为降速到低于显示器刷新率时才需要帧率限制感谢 Flow、Antriel 的讨论Shape修复了虽带光照组件却不响应光照的问题SpriteGPULayer修复创建时间被 0 干扰的问题混合模式泄漏修复Container内混合模式泄漏到兄弟节点的问题ParseXMLBitmapFont修复纹理偏移DynamicTexture修复初始为 2 的幂分辨率、后被缩放到非 2 的幂时变黑的问题。现在任何 WebGL 纹理缩放2 的幂用REPEAT环绕、非 2 的幂用CLAMP_TO_EDGETextureManager.addUint8Array修复预乘 alpha 与 flipY 的错误。十、从 Phaser 3 迁移到 RC7 的要点清单Tint 填充setTintFill(color)→setTint(color).setTintMode(Phaser.TintModes.FILL)若要 Phaser 3 式 Bloom辉光强度会压暗而非混合在AddEffectBloom中设置blendAmount: 0.5、blurQuality: 1再关闭threshold并给parallelFilters.bottom添加乘法混合详见 src/actions/AddEffectBloom.js 的模拟示例纹理切换务必保持尺寸一致或主动检查派生尺寸帧率限制只在人为降速时使用Vignette/Wipe的行为已升级参数含义有变化重新阅读文档后再用。结语RC7 是 Phaser 4 渲染能力的一次集中释放Actions 让 Bloom、Shine、蒙版这些高级感效果成为一行代码的日常操作Gradient与Noise系列把程序化视觉从写 GLSL降维到配参数ColorBand/ColorRamp的 GPU 编码设计为复杂色带提供了高性能采样路径Tint 重构则让着色模式语义清晰、可组合。若需追根溯源建议对照阅读 src/actions、src/display/ColorBand.js、src/display/ColorRamp.js、src/gameobjects/gradient/Gradient.js、src/gameobjects/noise 与 src/filters并在 tests 中查找对应测试用例验证行为。【免费下载链接】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），仅供参考