Cocos Creator 2.4.2 噪声图实现2D扭曲：3种动态参数调节与性能对比

Cocos Creator 2.4.2 噪声图实现2D扭曲：3种动态参数调节与性能对比

在2D游戏开发中，扭曲效果（Distortion Effect）是一种常见的视觉特效技术，能够为游戏场景增添动态感和视觉冲击力。本文将深入探讨如何在Cocos Creator 2.4.2中利用噪声图（Noise Texture）实现高质量的2D扭曲效果，并重点分析三种关键动态参数（速度、强度、方向）对视觉效果和运行时性能的影响。

1. 噪声图扭曲效果基础原理

噪声图扭曲效果的核心思想是通过对纹理坐标（UV）进行扰动，从而改变原始纹理的采样位置，产生视觉上的扭曲感。这种技术在模拟水面波纹、热浪扭曲、魔法效果等场景中尤为常见。

1.1 噪声图的选择与准备

噪声图是实现扭曲效果的关键资源，不同类型的噪声图会产生截然不同的扭曲效果：

• 柏林噪声（Perlin Noise）：产生自然、有机的扭曲效果，适合模拟水面波纹
• 单纯形噪声（Simplex Noise）：计算效率更高，适合移动设备
• 白噪声（White Noise）：产生完全随机的扭曲效果
• 蓝噪声（Blue Noise）：高频噪声，适合特殊风格的扭曲

// 在Shader中声明噪声图属性 uniform sampler2D noisetex;

提示：噪声图的Wrap Mode必须设置为Repeat（平铺模式），否则在边缘会出现不连续的扭曲效果。

1.2 UV坐标扰动算法

基本的UV扰动算法可以表示为：

vec2 distortedUV = originalUV + noiseValue * strength;

其中：

• originalUV：原始UV坐标
• noiseValue：从噪声图中采样的值（通常取R和G通道）
• strength：控制扭曲强度的参数

2. 动态参数控制系统实现

为了实现更灵活的扭曲效果控制，我们需要在Shader中引入三个关键动态参数：速度、强度和方向。

2.1 速度参数（Speed Factor）

速度参数控制扭曲效果的动态变化速率：

// 在Shader Properties中定义速度参数 properties: { speedFactor: { value: 0.1, editor: { tooltip: "扭曲速度", range: [0.0, 1.0] } } } // 在片段着色器中使用时间变量和速度参数 CCTexture(noisetex, v_uv0.xy + v_time.x * speedFactor, noise);

2.2 强度参数（Strength Factor）

强度参数控制扭曲效果的明显程度：

properties: { strengthFactor: { value: 0.1, editor: { tooltip: "扭曲强度", range: [-0.5, 0.5] } } } // 应用强度参数 uv_temp.x += noise.x * strengthFactor; uv_temp.y += noise.y * strengthFactor;

2.3 方向参数（Direction Control）

方向参数允许开发者控制扭曲的主要方向：

properties: { isHorizontal: { value: 0, editor: { tooltip: "水平方向扭曲", range: [0.0, 1.0] } }, isVertical: { value: 0, editor: { tooltip: "垂直方向扭曲", range: [0.0, 1.0] } } } // 方向控制实现 float isH = step(0.1, isHorizontal); float isV = step(0.1, isVertical); uv_temp.x += noise.x * strengthFactor * isH; uv_temp.y += noise.y * strengthFactor * isV;

3. 完整Shader代码实现

以下是整合了所有动态控制参数的完整Shader实现：

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. CCEffect %{ techniques: - passes: - vert: vs frag: fs blendState: targets: - blend: true rasterizerState: cullMode: none properties: texture: { value: white } alphaThreshold: { value: 0.5 } noisetex: { value: white } speedFactor: { value: 0.1, editor: { tooltip: "扭曲速度", range: [0.0, 1.0] } } strengthFactor: { value: 0.1, editor: { tooltip: "扭曲强度", range: [-0.5, 0.5] } } isHorizontal: { value: 0, editor: { tooltip: "水平方向扭曲", range: [0.0, 1.0] } } isVertical: { value: 0, editor: { tooltip: "垂直方向扭曲", range: [0.0, 1.0] } } }% CCProgram vs %{ precision highp float; #include <cc-global> #include <cc-local> in vec3 a_position; in vec4 a_color; out vec4 v_color; #if USE_TEXTURE in vec2 a_uv0; out vec2 v_uv0; #endif out vec4 v_time; void main () { vec4 pos = vec4(a_position, 1); #if CC_USE_MODEL pos = cc_matViewProj * cc_matWorld * pos; #else pos = cc_matViewProj * pos; #endif #if USE_TEXTURE v_uv0 = a_uv0; #endif v_color = a_color; v_time = cc_time; gl_Position = pos; } }% CCProgram fs %{ precision highp float; #include <alpha-test> #include <texture> in vec4 v_color; #if USE_TEXTURE in vec2 v_uv0; uniform sampler2D texture; #endif #if USE_NOISETEX uniform sampler2D noisetex; #endif uniform Factor { float speedFactor; float strengthFactor; float isHorizontal; float isVertical; }; in vec4 v_time; void main () { vec4 o = vec4(1); vec4 noise = vec4(1); vec2 uv_temp = v_uv0; // 采样噪声纹理 #if USE_NOISETEX CCTexture(noisetex, v_uv0.xy + v_time.x * speedFactor, noise); #endif // 应用方向控制 float isH = step(0.1, isHorizontal); float isV = step(0.1, isVertical); uv_temp.x += noise.x * strengthFactor * isH; uv_temp.y += noise.y * strengthFactor * isV; // 采样主纹理 #if USE_TEXTURE CCTexture(texture, uv_temp, o); #endif o *= v_color; ALPHA_TEST(o); gl_FragColor = o; } }%

4. 性能优化与参数调优

4.1 不同参数组合的性能影响

我们测试了三种典型参数组合在不同移动设备上的性能表现：

从测试结果可以看出：

1. 速度参数对性能影响较小
2. 强度参数对性能影响较大
3. 高端设备基本不受参数变化影响

4.2 优化建议

基于性能测试结果，我们提出以下优化建议：

1. 强度参数控制：

   • 移动设备建议保持在0.3以下
   • PC平台可以适当提高到0.5

2. 噪声图分辨率选择：

   • 低端设备：使用512x512噪声图
   • 中高端设备：可以使用1024x1024噪声图

3. 渲染批次优化：

   • 尽量将使用相同扭曲Shader的节点放在一起渲染
   • 避免频繁切换Shader

// 性能优化版本的核心代码修改 #if defined(CC_PLATFORM_MOBILE) strengthFactor = clamp(strengthFactor, -0.3, 0.3); #endif

4.3 不同噪声图的性能对比

我们还测试了不同类型噪声图的性能表现：

注意：在实际项目中，建议根据目标平台性能选择合适的噪声图类型。移动端项目推荐使用单纯形噪声或优化后的柏林噪声。