1. 项目概述为什么屏幕震动是游戏体验的“灵魂”在移动游戏和H5小游戏开发里屏幕震动是一个成本极低、但效果拔群的“体验放大器”。你想想看角色挥出一记重拳屏幕纹丝不动和屏幕随之猛烈一颤反馈感是天壤之别。Cocos Creator作为一款流行的跨平台游戏引擎其内置的渲染管线与节点系统为我们实现屏幕震动提供了绝佳的土壤。但很多开发者尤其是刚入行的朋友往往止步于调用一个简单的API或者从网上复制一段抖动摄像机的代码知其然不知其所以然效果生硬、性能不佳甚至在不同设备上表现不一。今天我们就来彻底拆解Cocos引擎中屏幕震动的核心技术。我的目标不是让你“会用”而是让你“精通”。我会从最基础的震动原理讲起带你理解震动的数学本质然后手把手实现从简单到复杂的五种震动效果并深入分析它们的性能开销与应用场景。最终你将能像搭积木一样组合出符合你游戏风格的、丝滑且高效的震动反馈。整个过程我们争取在5分钟内讲透核心但深入下去你会发现这是一个值得深挖的宝藏。2. 核心原理拆解震动不过是摄像机的“舞蹈”屏幕震动的本质是让游戏摄像机或渲染画布的根节点在短时间内按照特定规律进行位移或旋转。这个“特定规律”就是我们实现不同震动效果的关键。2.1 震动的数学心脏正弦函数与噪声绝大多数有节奏感、平滑的震动其核心驱动都是三角函数尤其是正弦函数Math.sin。为什么是它因为正弦波天然具有周期性、平滑性能模拟出物体受冲击后衰减振荡的物理感觉。一个基础的震动位移可以这样描述位移量 振幅 * Math.sin(频率 * 时间)这里振幅决定了震动幅度的大小频率决定了震动得快慢。在代码中“时间”通常是一个从震动开始持续累加的变量。当我们把时间乘以一个系数比如time * 8.0这个系数就是角频率它直接影响了震动的快慢。网络热词中提到的time * 2.0、time * 8.0、time * 32.0正是通过调整这个乘数来创造低、中、高三种不同频率的震动感受。然而纯粹的三角函数震动有时会显得过于“规整”和“电子味”。为了模拟爆炸、撞击等更随机、更粗暴的效果我们需要引入噪声。在Shader或程序化生成中Simplex Noise或Perlin Noise是更好的选择它们能生成连续、平滑但不可预测的随机值。在Cocos的TypeScript逻辑层我们也可以使用Math.random()进行简化但要注意处理其不连续性带来的突兀感。2.2 Cocos中的实现载体摄像机与渲染根节点在Cocos Creator中实现屏幕震动主要有两个思路震动摄像机节点这是最直观的方法。如果你的游戏场景由一个主摄像机渲染那么直接修改这个摄像机节点的position位置或eulerAngles欧拉角用于旋转即可。这种方法逻辑简单但要注意如果摄像机本身有其他动画或跟随逻辑需要处理好叠加关系避免冲突。震动渲染根节点Canvas对于UI界面震动或某些全屏特效震动整个画布节点是更高效的选择。Cocos的场景渲染通常挂载在一个根Canvas节点下移动它所有子节点都会跟着动。这种方式性能开销相对更小且不影响摄像机与其他游戏对象的逻辑。关键选择对于“世界内”的震动如角色受伤、附近爆炸推荐震动摄像机。对于“UI层”或“全局性”的震动如获得巨大奖励、系统警告推荐震动Canvas节点。在接下来的实战中我们将以震动摄像机为主进行讲解因为其原理更具通用性。3. 五种经典震动效果深度实现与性能剖析直接上代码边写边讲。我们创建一个名为ScreenShakeManager.ts的单例管理类这是管理多种震动、避免冲突的最佳实践。3.1 基础单向震动低频率这是最简单的震动模拟轻微的撞击或震动。// ScreenShakeManager.ts 部分代码 import { _decorator, Component, Node, Vec3, tween } from cc; export class ScreenShakeManager extends Component { private static _instance: ScreenShakeManager null; private _cameraNode: Node null; // 假设已绑定主摄像机节点 private _originalPos: Vec3 new Vec3(); public static get instance(): ScreenShakeManager { return this._instance; } // 初始化获取摄像机原始位置 init(cameraNode: Node) { this._cameraNode cameraNode; Vec3.copy(this._originalPos, cameraNode.position); ScreenShakeManager._instance this; } /** * 基础单向震动 * param duration 总持续时间秒 * param strength 震动强度 * param frequency 震动频率乘数参考热词低频约2.0-4.0 */ public basicShake(duration: number, strength: number 0.5, frequency: number 2.0) { if (!this._cameraNode) return; const startTime Date.now(); const shakeFunc () { const elapsed (Date.now() - startTime) / 1000; // 转换为秒 if (elapsed duration) { // 震动结束复位 this._cameraNode.setPosition(this._originalPos); return; } // 核心震动公式使用正弦波并随时间衰减振幅 const decay 1.0 - (elapsed / duration); // 线性衰减因子 const currentStrength strength * decay; // 计算X轴偏移单向这里以X轴为例 const offsetX currentStrength * Math.sin(frequency * Math.PI * 2 * elapsed); const newPos new Vec3(this._originalPos.x offsetX, this._originalPos.y, this._originalPos.z); this._cameraNode.setPosition(newPos); // 请求下一帧继续执行 requestAnimationFrame(shakeFunc); }; shakeFunc(); } }实现解析与注意点衰减Decaydecay变量至关重要。它让震动幅度随着时间从最大值衰减到0模拟能量消散的过程。没有衰减的震动会突然开始、突然结束非常生硬。这里使用了最简单的线性衰减你也可以尝试指数衰减Math.pow(decay, 2)以获得更自然的尾部效果。requestAnimationFrame我们使用这个浏览器/引擎提供的API来驱动逐帧动画它比setTimeout或setInterval更平滑、更节能。在Cocos的游戏循环update中处理也是可以的但用requestAnimationFrame在此管理器内更解耦。性能初探每帧计算一次正弦函数并设置节点位置开销极小。这是性能最好的震动类型。3.2 双向震动中频率通用型在X和Y轴甚至Z轴上同时震动效果更立体适用于大多数受击、爆炸场景。/** * 双向震动经典震动 * param duration 总持续时间 * param strength 震动强度 * param frequency 频率乘数热词中的通用值8.0就在这里用 */ public dualAxisShake(duration: number, strength: Vec3 new Vec3(0.3, 0.3, 0), frequency: number 8.0) { if (!this._cameraNode) return; const startTime Date.now(); // 为X和Y轴使用不同的相位避免完全同步导致的对角线震动 const phaseOffsetX Math.random() * Math.PI * 2; const phaseOffsetY Math.random() * Math.PI * 2; const shakeFunc () { const elapsed (Date.now() - startTime) / 1000; if (elapsed duration) { this._cameraNode.setPosition(this._originalPos); return; } const decay Math.pow(1.0 - elapsed / duration, 2); // 改用二次方衰减更自然 const currentStrengthX strength.x * decay; const currentStrengthY strength.y * decay; // X和Y轴使用不同相位的正弦波 const offsetX currentStrengthX * Math.sin(frequency * Math.PI * 2 * elapsed phaseOffsetX); const offsetY currentStrengthY * Math.sin(frequency * Math.PI * 2 * elapsed phaseOffsetY); const newPos new Vec3( this._originalPos.x offsetX, this._originalPos.y offsetY, this._originalPos.z strength.z // Z轴通常不参与正弦震动可做初始冲击 ); this._cameraNode.setPosition(newPos); requestAnimationFrame(shakeFunc); }; shakeFunc(); }技巧与心得相位偏移Phase OffsetphaseOffsetX和phaseOffsetY是点睛之笔。如果X和Y使用相同的相位摄像机只会沿45度对角线震动显得很假。加入随机相位差震动轨迹就变成了更自然的椭圆或随机形状。衰减曲线这里使用了Math.pow(decay, 2)二次衰减意味着衰减初期慢后期快震动停止得更“柔和”比线性衰减的体验更好。你可以根据手感调整这个指数。频率选择frequency 8.0是一个经验值能产生清晰、有力但又不至于令人眼花的震动感这也是它被称为“通用场景”频率的原因。3.3 高频细腻震动用于模拟手机振动、电流穿过、精细的魔法效果等。/** * 高频细腻震动 * param duration 持续时间通常较短 * param strength 强度通常较小 * param frequency 高频如热词提到的32.0 */ public highFreqShake(duration: number, strength: number 0.08, frequency: number 32.0) { // 实现结构与dualAxisShake类似但有以下关键区别 // 1. strength值很小0.05-0.1因为高频大振幅会让人头晕。 // 2. frequency值很高20.0-40.0。 // 3. 衰减可以更快例如使用三次方衰减Math.pow(decay, 3)。 // 4. 通常只用一个轴如X或两个轴但强度极低避免过度。 console.warn(高频震动实现代码与双向震动类似需调整强度、频率和衰减曲线。强度建议0.1); }重要警告高频震动务必谨慎使用过高的频率和振幅极易引起部分玩家视觉疲劳甚至不适。始终提供游戏内的“关闭屏幕震动”选项是负责任开发者的基本素养。3.4 冲击波震动距离衰减模拟爆炸点对摄像机的影响距离越近震动越强。这需要空间计算。/** * 冲击波震动基于距离 * param explosionPos 爆炸点世界坐标 * param maxStrength 爆炸点处的最大强度 * param range 影响范围 */ public impactShake(explosionPos: Vec3, maxStrength: number 1.0, range: number 200) { if (!this._cameraNode) return; const cameraWorldPos this._cameraNode.worldPosition; const distance Vec3.distance(explosionPos, cameraWorldPos); if (distance range) { return; // 超出范围无震动 } // 计算距离衰减因子线性衰减也可用平滑的曲线衰减 const distanceFactor 1.0 - (distance / range); // 计算实际强度并限制持续时间距离越近震动越久 const actualStrength maxStrength * distanceFactor; const duration 0.5 0.5 * distanceFactor; // 基础0.5秒随距离增加最多到1秒 // 调用双向震动传入计算出的参数 this.dualAxisShake(duration, new Vec3(actualStrength, actualStrength, 0), 6.0); }设计思路这种震动将游戏逻辑爆炸事件、位置与表现层屏幕震动连接起来。distanceFactor是关键它根据距离线性衰减震动强度。你可以用更复杂的曲线如1.0 / (distance 1)来模拟物理上的强度衰减。3.5 噪声驱动的混沌震动使用噪声函数来生成随机但平滑的位移模拟大地震、巨兽行走等混乱效果。// 需要一个简单的噪声函数这里使用一个伪随机梯度函数作为示例 private _noise(x: number): number { // 这是一个非常简化的噪声函数仅用于演示。生产环境建议使用完善的噪声库。 return Math.sin(x * 12.9898) * 43758.5453 % 1; } /** * 噪声震动 * param duration 持续时间 * param strength 强度 */ public noiseShake(duration: number, strength: Vec3) { const startTime Date.now(); const seed Math.random() * 1000; // 随机种子让每次震动不同 const shakeFunc () { const elapsed (Date.now() - startTime) / 1000; if (elapsed duration) { this._cameraNode.setPosition(this._originalPos); return; } const decay 1.0 - elapsed / duration; // 对经过时间种子进行噪声采样 const noiseX this._noise(seed elapsed * 10) * 2 - 1; // 映射到[-1, 1] const noiseY this._noise(seed 100 elapsed * 10) * 2 - 1; // Y轴使用不同的偏移 const offsetX strength.x * decay * noiseX; const offsetY strength.y * decay * noiseY; this._cameraNode.setPosition( this._originalPos.x offsetX, this._originalPos.y offsetY, this._originalPos.z ); requestAnimationFrame(shakeFunc); }; shakeFunc(); }注意事项示例中的_noise函数质量不高会产生明显的图案重复。在实际项目中建议引入一个成熟的噪声库如simplex-noise的TypeScript版本或者使用Cocos Shader在GPU端实现更高效、更高质量的噪声震动这对于持续性的环境震动如地震性能更好。4. 实战集成与高级管理策略有了这些震动方法我们还需要一个强大的管理器来协调它们防止多个震动冲突并优化性能。4.1 单例管理器的增强让我们完善之前的ScreenShakeManager增加震动队列和叠加逻辑。export class ScreenShakeManager extends Component { // ... 之前已有的静态实例、摄像机引用等 private _shakeStack: Array{updateFunc: Function, weight: number} []; private _isShaking: boolean false; /** * 请求一个震动并加入堆栈 * param shakeFunc 震动更新函数 * param weight 该震动的权重用于叠加混合 */ public requestShake(shakeFunc: Function, weight: number 1.0) { this._shakeStack.push({updateFunc: shakeFunc, weight}); if (!this._isShaking) { this._isShaking true; this._startShakeLoop(); } } // 将之前的basicShake等方法改为返回一个闭包函数供requestShake调用 public createDualAxisShake(duration: number, strength: Vec3, frequency: number): Function { return (elapsed: number, weight: number): Vec3 { if (elapsed duration) return null; // 返回null表示震动结束 const decay Math.pow(1.0 - elapsed / duration, 2); const phaseOffsetX 0; // 可以固定或传入 const phaseOffsetY Math.PI / 2; const offsetX strength.x * decay * Math.sin(frequency * Math.PI * 2 * elapsed phaseOffsetX) * weight; const offsetY strength.y * decay * Math.sin(frequency * Math.PI * 2 * elapsed phaseOffsetY) * weight; return new Vec3(offsetX, offsetY, 0); }; } private _startShakeLoop() { const loop () { if (this._shakeStack.length 0) { this._isShaking false; this._cameraNode.setPosition(this._originalPos); return; } let totalOffset new Vec3(0, 0, 0); // 遍历所有活跃震动计算偏移量 for (let i this._shakeStack.length - 1; i 0; i--) { const shake this._shakeStack[i]; // 假设每个shake.updateFunc接收(elapsed, weight)并返回Vec3偏移或null const offset shake.updateFunc(/* 需要传入当前该震动的已进行时间 */, shake.weight); if (offset null) { // 该震动已结束移除 this._shakeStack.splice(i, 1); } else { Vec3.add(totalOffset, totalOffset, offset); } } // 应用总偏移 const newPos new Vec3( this._originalPos.x totalOffset.x, this._originalPos.y totalOffset.y, this._originalPos.z totalOffset.z ); this._cameraNode.setPosition(newPos); requestAnimationFrame(loop); }; loop(); } // 外部调用示例 public triggerExplosion() { const shakeFunc this.createDualAxisShake(0.8, new Vec3(0.4, 0.4, 0), 7.0); this.requestShake(shakeFunc, 1.0); } }管理器核心优势叠加处理多个震动源如同时爆炸和受击可以叠加weight参数可以控制混合强度避免过冲。生命周期管理自动清理已结束的震动确保性能。统一入口游戏内所有需要震动的地方都通过管理器调用易于监控和调试如统一开关。4.2 性能优化关键点向量对象池在震动循环中频繁创建new Vec3()会产生大量垃圾回收GC。务必使用Cocos提供的Vec3.pool对象池。const tempVec Vec3.pool.alloc(); // ... 使用tempVec进行计算 Vec3.pool.free(tempVec);按需更新当没有震动时_startShakeLoop循环应停止而不是空转。上述代码已实现。强度裁剪当计算出的总偏移量totalOffset的模长小于一个极小阈值如0.001时可以直接认为没有震动跳过节点位置设置减少引擎变换矩阵的计算。Shader替代方案对于全屏、后处理性质的震动尤其是高频噪声震动可以考虑在后期处理Shader中直接对最终渲染画面进行位移扰动。这完全绕过节点树性能极佳但实现复杂度较高且不适用于需要与场景物体联动的震动。5. 常见问题排查与手感调校心得即使代码正确震动感觉不对也是常事。下面是一些实战中踩过的坑和调校技巧。5.1 震动问题速查表问题现象可能原因解决方案震动生硬像卡顿每帧位移变化不连续或频率太低检查requestAnimationFrame是否正常连续调用。提高frequency值如从2.0调到8.0。确保衰减函数是连续的。震动结束后摄像机位置偏移震动结束时没有精确回归原点在震动结束的判断分支内使用this._cameraNode.setPosition(this._originalPos)而非累加值复位。确保_originalPos在震动开始后未被意外修改。多个震动叠加后效果失控偏移量直接相加没有标准化或权重控制使用管理器为每个震动设置权重(weight)。叠加后可以对总偏移进行限幅clamp。低端设备上震动导致掉帧每帧计算和设置位置开销过大优化代码使用对象池。考虑降低震动更新的频率如每2帧更新一次。对于复杂噪声震动评估是否必要。特定方向震动感弱X和Y轴震动相位相同或强度设置不当为X和Y轴震动引入相位差如Math.PI/2。调整strength的x和y分量使其不同。旋转震动晃动不自然直接修改eulerAngles可能导致万向节锁使用Quat四元数进行旋转插值。小角度旋转时用angleAxis创建四元数再应用到节点旋转上更稳定。5.2 手感调校经验谈调校震动就像给游戏“调味”没有绝对标准但有最佳实践建立“感觉库”在项目中常量定义几套震动参数给它们起好名字。export const ShakePresets { SMALL_HIT: {duration: 0.15, strength: new Vec3(0.1, 0.1, 0), freq: 12.0}, BIG_EXPLOSION: {duration: 0.8, strength: new Vec3(0.5, 0.3, 0), freq: 6.0}, EARTHQUAKE: {duration: 2.5, strength: new Vec3(0.8, 0.2, 0), freq: 3.0, noise: true}, };游戏里所有调用都使用这些预设保证体验一致也方便统一调整。关联游戏事件震动强度、持续时间最好能和游戏数据挂钩。例如玩家受到的伤害值damage可以映射为震动强度strength damage * 0.05。这样不同威力的攻击会有不同的反馈沉浸感直线上升。“少即是多”原则不要滥用震动。频繁、剧烈的震动会令玩家烦躁。重要的时刻Boss登场、致命一击、获得传说装备才使用强烈的、独特的震动模式让它成为强化心流体验的工具而非视觉干扰。真机测试在目标真机尤其是性能各异的手机上测试震动效果。PC上感觉轻微的震动在手机小屏幕上可能过于剧烈。确保在所有设备上都有可接受的体验。最后别忘了在游戏的“设置”菜单里放上一个显眼的“屏幕震动强度”滑块甚至可以直接关闭。把选择权交给玩家是获得好评的简单一步。 Cocos Creator屏幕震动核心技术：从数学原理到五种实战效果实现
1. 项目概述为什么屏幕震动是游戏体验的“灵魂”在移动游戏和H5小游戏开发里屏幕震动是一个成本极低、但效果拔群的“体验放大器”。你想想看角色挥出一记重拳屏幕纹丝不动和屏幕随之猛烈一颤反馈感是天壤之别。Cocos Creator作为一款流行的跨平台游戏引擎其内置的渲染管线与节点系统为我们实现屏幕震动提供了绝佳的土壤。但很多开发者尤其是刚入行的朋友往往止步于调用一个简单的API或者从网上复制一段抖动摄像机的代码知其然不知其所以然效果生硬、性能不佳甚至在不同设备上表现不一。今天我们就来彻底拆解Cocos引擎中屏幕震动的核心技术。我的目标不是让你“会用”而是让你“精通”。我会从最基础的震动原理讲起带你理解震动的数学本质然后手把手实现从简单到复杂的五种震动效果并深入分析它们的性能开销与应用场景。最终你将能像搭积木一样组合出符合你游戏风格的、丝滑且高效的震动反馈。整个过程我们争取在5分钟内讲透核心但深入下去你会发现这是一个值得深挖的宝藏。2. 核心原理拆解震动不过是摄像机的“舞蹈”屏幕震动的本质是让游戏摄像机或渲染画布的根节点在短时间内按照特定规律进行位移或旋转。这个“特定规律”就是我们实现不同震动效果的关键。2.1 震动的数学心脏正弦函数与噪声绝大多数有节奏感、平滑的震动其核心驱动都是三角函数尤其是正弦函数Math.sin。为什么是它因为正弦波天然具有周期性、平滑性能模拟出物体受冲击后衰减振荡的物理感觉。一个基础的震动位移可以这样描述位移量 振幅 * Math.sin(频率 * 时间)这里振幅决定了震动幅度的大小频率决定了震动得快慢。在代码中“时间”通常是一个从震动开始持续累加的变量。当我们把时间乘以一个系数比如time * 8.0这个系数就是角频率它直接影响了震动的快慢。网络热词中提到的time * 2.0、time * 8.0、time * 32.0正是通过调整这个乘数来创造低、中、高三种不同频率的震动感受。然而纯粹的三角函数震动有时会显得过于“规整”和“电子味”。为了模拟爆炸、撞击等更随机、更粗暴的效果我们需要引入噪声。在Shader或程序化生成中Simplex Noise或Perlin Noise是更好的选择它们能生成连续、平滑但不可预测的随机值。在Cocos的TypeScript逻辑层我们也可以使用Math.random()进行简化但要注意处理其不连续性带来的突兀感。2.2 Cocos中的实现载体摄像机与渲染根节点在Cocos Creator中实现屏幕震动主要有两个思路震动摄像机节点这是最直观的方法。如果你的游戏场景由一个主摄像机渲染那么直接修改这个摄像机节点的position位置或eulerAngles欧拉角用于旋转即可。这种方法逻辑简单但要注意如果摄像机本身有其他动画或跟随逻辑需要处理好叠加关系避免冲突。震动渲染根节点Canvas对于UI界面震动或某些全屏特效震动整个画布节点是更高效的选择。Cocos的场景渲染通常挂载在一个根Canvas节点下移动它所有子节点都会跟着动。这种方式性能开销相对更小且不影响摄像机与其他游戏对象的逻辑。关键选择对于“世界内”的震动如角色受伤、附近爆炸推荐震动摄像机。对于“UI层”或“全局性”的震动如获得巨大奖励、系统警告推荐震动Canvas节点。在接下来的实战中我们将以震动摄像机为主进行讲解因为其原理更具通用性。3. 五种经典震动效果深度实现与性能剖析直接上代码边写边讲。我们创建一个名为ScreenShakeManager.ts的单例管理类这是管理多种震动、避免冲突的最佳实践。3.1 基础单向震动低频率这是最简单的震动模拟轻微的撞击或震动。// ScreenShakeManager.ts 部分代码 import { _decorator, Component, Node, Vec3, tween } from cc; export class ScreenShakeManager extends Component { private static _instance: ScreenShakeManager null; private _cameraNode: Node null; // 假设已绑定主摄像机节点 private _originalPos: Vec3 new Vec3(); public static get instance(): ScreenShakeManager { return this._instance; } // 初始化获取摄像机原始位置 init(cameraNode: Node) { this._cameraNode cameraNode; Vec3.copy(this._originalPos, cameraNode.position); ScreenShakeManager._instance this; } /** * 基础单向震动 * param duration 总持续时间秒 * param strength 震动强度 * param frequency 震动频率乘数参考热词低频约2.0-4.0 */ public basicShake(duration: number, strength: number 0.5, frequency: number 2.0) { if (!this._cameraNode) return; const startTime Date.now(); const shakeFunc () { const elapsed (Date.now() - startTime) / 1000; // 转换为秒 if (elapsed duration) { // 震动结束复位 this._cameraNode.setPosition(this._originalPos); return; } // 核心震动公式使用正弦波并随时间衰减振幅 const decay 1.0 - (elapsed / duration); // 线性衰减因子 const currentStrength strength * decay; // 计算X轴偏移单向这里以X轴为例 const offsetX currentStrength * Math.sin(frequency * Math.PI * 2 * elapsed); const newPos new Vec3(this._originalPos.x offsetX, this._originalPos.y, this._originalPos.z); this._cameraNode.setPosition(newPos); // 请求下一帧继续执行 requestAnimationFrame(shakeFunc); }; shakeFunc(); } }实现解析与注意点衰减Decaydecay变量至关重要。它让震动幅度随着时间从最大值衰减到0模拟能量消散的过程。没有衰减的震动会突然开始、突然结束非常生硬。这里使用了最简单的线性衰减你也可以尝试指数衰减Math.pow(decay, 2)以获得更自然的尾部效果。requestAnimationFrame我们使用这个浏览器/引擎提供的API来驱动逐帧动画它比setTimeout或setInterval更平滑、更节能。在Cocos的游戏循环update中处理也是可以的但用requestAnimationFrame在此管理器内更解耦。性能初探每帧计算一次正弦函数并设置节点位置开销极小。这是性能最好的震动类型。3.2 双向震动中频率通用型在X和Y轴甚至Z轴上同时震动效果更立体适用于大多数受击、爆炸场景。/** * 双向震动经典震动 * param duration 总持续时间 * param strength 震动强度 * param frequency 频率乘数热词中的通用值8.0就在这里用 */ public dualAxisShake(duration: number, strength: Vec3 new Vec3(0.3, 0.3, 0), frequency: number 8.0) { if (!this._cameraNode) return; const startTime Date.now(); // 为X和Y轴使用不同的相位避免完全同步导致的对角线震动 const phaseOffsetX Math.random() * Math.PI * 2; const phaseOffsetY Math.random() * Math.PI * 2; const shakeFunc () { const elapsed (Date.now() - startTime) / 1000; if (elapsed duration) { this._cameraNode.setPosition(this._originalPos); return; } const decay Math.pow(1.0 - elapsed / duration, 2); // 改用二次方衰减更自然 const currentStrengthX strength.x * decay; const currentStrengthY strength.y * decay; // X和Y轴使用不同相位的正弦波 const offsetX currentStrengthX * Math.sin(frequency * Math.PI * 2 * elapsed phaseOffsetX); const offsetY currentStrengthY * Math.sin(frequency * Math.PI * 2 * elapsed phaseOffsetY); const newPos new Vec3( this._originalPos.x offsetX, this._originalPos.y offsetY, this._originalPos.z strength.z // Z轴通常不参与正弦震动可做初始冲击 ); this._cameraNode.setPosition(newPos); requestAnimationFrame(shakeFunc); }; shakeFunc(); }技巧与心得相位偏移Phase OffsetphaseOffsetX和phaseOffsetY是点睛之笔。如果X和Y使用相同的相位摄像机只会沿45度对角线震动显得很假。加入随机相位差震动轨迹就变成了更自然的椭圆或随机形状。衰减曲线这里使用了Math.pow(decay, 2)二次衰减意味着衰减初期慢后期快震动停止得更“柔和”比线性衰减的体验更好。你可以根据手感调整这个指数。频率选择frequency 8.0是一个经验值能产生清晰、有力但又不至于令人眼花的震动感这也是它被称为“通用场景”频率的原因。3.3 高频细腻震动用于模拟手机振动、电流穿过、精细的魔法效果等。/** * 高频细腻震动 * param duration 持续时间通常较短 * param strength 强度通常较小 * param frequency 高频如热词提到的32.0 */ public highFreqShake(duration: number, strength: number 0.08, frequency: number 32.0) { // 实现结构与dualAxisShake类似但有以下关键区别 // 1. strength值很小0.05-0.1因为高频大振幅会让人头晕。 // 2. frequency值很高20.0-40.0。 // 3. 衰减可以更快例如使用三次方衰减Math.pow(decay, 3)。 // 4. 通常只用一个轴如X或两个轴但强度极低避免过度。 console.warn(高频震动实现代码与双向震动类似需调整强度、频率和衰减曲线。强度建议0.1); }重要警告高频震动务必谨慎使用过高的频率和振幅极易引起部分玩家视觉疲劳甚至不适。始终提供游戏内的“关闭屏幕震动”选项是负责任开发者的基本素养。3.4 冲击波震动距离衰减模拟爆炸点对摄像机的影响距离越近震动越强。这需要空间计算。/** * 冲击波震动基于距离 * param explosionPos 爆炸点世界坐标 * param maxStrength 爆炸点处的最大强度 * param range 影响范围 */ public impactShake(explosionPos: Vec3, maxStrength: number 1.0, range: number 200) { if (!this._cameraNode) return; const cameraWorldPos this._cameraNode.worldPosition; const distance Vec3.distance(explosionPos, cameraWorldPos); if (distance range) { return; // 超出范围无震动 } // 计算距离衰减因子线性衰减也可用平滑的曲线衰减 const distanceFactor 1.0 - (distance / range); // 计算实际强度并限制持续时间距离越近震动越久 const actualStrength maxStrength * distanceFactor; const duration 0.5 0.5 * distanceFactor; // 基础0.5秒随距离增加最多到1秒 // 调用双向震动传入计算出的参数 this.dualAxisShake(duration, new Vec3(actualStrength, actualStrength, 0), 6.0); }设计思路这种震动将游戏逻辑爆炸事件、位置与表现层屏幕震动连接起来。distanceFactor是关键它根据距离线性衰减震动强度。你可以用更复杂的曲线如1.0 / (distance 1)来模拟物理上的强度衰减。3.5 噪声驱动的混沌震动使用噪声函数来生成随机但平滑的位移模拟大地震、巨兽行走等混乱效果。// 需要一个简单的噪声函数这里使用一个伪随机梯度函数作为示例 private _noise(x: number): number { // 这是一个非常简化的噪声函数仅用于演示。生产环境建议使用完善的噪声库。 return Math.sin(x * 12.9898) * 43758.5453 % 1; } /** * 噪声震动 * param duration 持续时间 * param strength 强度 */ public noiseShake(duration: number, strength: Vec3) { const startTime Date.now(); const seed Math.random() * 1000; // 随机种子让每次震动不同 const shakeFunc () { const elapsed (Date.now() - startTime) / 1000; if (elapsed duration) { this._cameraNode.setPosition(this._originalPos); return; } const decay 1.0 - elapsed / duration; // 对经过时间种子进行噪声采样 const noiseX this._noise(seed elapsed * 10) * 2 - 1; // 映射到[-1, 1] const noiseY this._noise(seed 100 elapsed * 10) * 2 - 1; // Y轴使用不同的偏移 const offsetX strength.x * decay * noiseX; const offsetY strength.y * decay * noiseY; this._cameraNode.setPosition( this._originalPos.x offsetX, this._originalPos.y offsetY, this._originalPos.z ); requestAnimationFrame(shakeFunc); }; shakeFunc(); }注意事项示例中的_noise函数质量不高会产生明显的图案重复。在实际项目中建议引入一个成熟的噪声库如simplex-noise的TypeScript版本或者使用Cocos Shader在GPU端实现更高效、更高质量的噪声震动这对于持续性的环境震动如地震性能更好。4. 实战集成与高级管理策略有了这些震动方法我们还需要一个强大的管理器来协调它们防止多个震动冲突并优化性能。4.1 单例管理器的增强让我们完善之前的ScreenShakeManager增加震动队列和叠加逻辑。export class ScreenShakeManager extends Component { // ... 之前已有的静态实例、摄像机引用等 private _shakeStack: Array{updateFunc: Function, weight: number} []; private _isShaking: boolean false; /** * 请求一个震动并加入堆栈 * param shakeFunc 震动更新函数 * param weight 该震动的权重用于叠加混合 */ public requestShake(shakeFunc: Function, weight: number 1.0) { this._shakeStack.push({updateFunc: shakeFunc, weight}); if (!this._isShaking) { this._isShaking true; this._startShakeLoop(); } } // 将之前的basicShake等方法改为返回一个闭包函数供requestShake调用 public createDualAxisShake(duration: number, strength: Vec3, frequency: number): Function { return (elapsed: number, weight: number): Vec3 { if (elapsed duration) return null; // 返回null表示震动结束 const decay Math.pow(1.0 - elapsed / duration, 2); const phaseOffsetX 0; // 可以固定或传入 const phaseOffsetY Math.PI / 2; const offsetX strength.x * decay * Math.sin(frequency * Math.PI * 2 * elapsed phaseOffsetX) * weight; const offsetY strength.y * decay * Math.sin(frequency * Math.PI * 2 * elapsed phaseOffsetY) * weight; return new Vec3(offsetX, offsetY, 0); }; } private _startShakeLoop() { const loop () { if (this._shakeStack.length 0) { this._isShaking false; this._cameraNode.setPosition(this._originalPos); return; } let totalOffset new Vec3(0, 0, 0); // 遍历所有活跃震动计算偏移量 for (let i this._shakeStack.length - 1; i 0; i--) { const shake this._shakeStack[i]; // 假设每个shake.updateFunc接收(elapsed, weight)并返回Vec3偏移或null const offset shake.updateFunc(/* 需要传入当前该震动的已进行时间 */, shake.weight); if (offset null) { // 该震动已结束移除 this._shakeStack.splice(i, 1); } else { Vec3.add(totalOffset, totalOffset, offset); } } // 应用总偏移 const newPos new Vec3( this._originalPos.x totalOffset.x, this._originalPos.y totalOffset.y, this._originalPos.z totalOffset.z ); this._cameraNode.setPosition(newPos); requestAnimationFrame(loop); }; loop(); } // 外部调用示例 public triggerExplosion() { const shakeFunc this.createDualAxisShake(0.8, new Vec3(0.4, 0.4, 0), 7.0); this.requestShake(shakeFunc, 1.0); } }管理器核心优势叠加处理多个震动源如同时爆炸和受击可以叠加weight参数可以控制混合强度避免过冲。生命周期管理自动清理已结束的震动确保性能。统一入口游戏内所有需要震动的地方都通过管理器调用易于监控和调试如统一开关。4.2 性能优化关键点向量对象池在震动循环中频繁创建new Vec3()会产生大量垃圾回收GC。务必使用Cocos提供的Vec3.pool对象池。const tempVec Vec3.pool.alloc(); // ... 使用tempVec进行计算 Vec3.pool.free(tempVec);按需更新当没有震动时_startShakeLoop循环应停止而不是空转。上述代码已实现。强度裁剪当计算出的总偏移量totalOffset的模长小于一个极小阈值如0.001时可以直接认为没有震动跳过节点位置设置减少引擎变换矩阵的计算。Shader替代方案对于全屏、后处理性质的震动尤其是高频噪声震动可以考虑在后期处理Shader中直接对最终渲染画面进行位移扰动。这完全绕过节点树性能极佳但实现复杂度较高且不适用于需要与场景物体联动的震动。5. 常见问题排查与手感调校心得即使代码正确震动感觉不对也是常事。下面是一些实战中踩过的坑和调校技巧。5.1 震动问题速查表问题现象可能原因解决方案震动生硬像卡顿每帧位移变化不连续或频率太低检查requestAnimationFrame是否正常连续调用。提高frequency值如从2.0调到8.0。确保衰减函数是连续的。震动结束后摄像机位置偏移震动结束时没有精确回归原点在震动结束的判断分支内使用this._cameraNode.setPosition(this._originalPos)而非累加值复位。确保_originalPos在震动开始后未被意外修改。多个震动叠加后效果失控偏移量直接相加没有标准化或权重控制使用管理器为每个震动设置权重(weight)。叠加后可以对总偏移进行限幅clamp。低端设备上震动导致掉帧每帧计算和设置位置开销过大优化代码使用对象池。考虑降低震动更新的频率如每2帧更新一次。对于复杂噪声震动评估是否必要。特定方向震动感弱X和Y轴震动相位相同或强度设置不当为X和Y轴震动引入相位差如Math.PI/2。调整strength的x和y分量使其不同。旋转震动晃动不自然直接修改eulerAngles可能导致万向节锁使用Quat四元数进行旋转插值。小角度旋转时用angleAxis创建四元数再应用到节点旋转上更稳定。5.2 手感调校经验谈调校震动就像给游戏“调味”没有绝对标准但有最佳实践建立“感觉库”在项目中常量定义几套震动参数给它们起好名字。export const ShakePresets { SMALL_HIT: {duration: 0.15, strength: new Vec3(0.1, 0.1, 0), freq: 12.0}, BIG_EXPLOSION: {duration: 0.8, strength: new Vec3(0.5, 0.3, 0), freq: 6.0}, EARTHQUAKE: {duration: 2.5, strength: new Vec3(0.8, 0.2, 0), freq: 3.0, noise: true}, };游戏里所有调用都使用这些预设保证体验一致也方便统一调整。关联游戏事件震动强度、持续时间最好能和游戏数据挂钩。例如玩家受到的伤害值damage可以映射为震动强度strength damage * 0.05。这样不同威力的攻击会有不同的反馈沉浸感直线上升。“少即是多”原则不要滥用震动。频繁、剧烈的震动会令玩家烦躁。重要的时刻Boss登场、致命一击、获得传说装备才使用强烈的、独特的震动模式让它成为强化心流体验的工具而非视觉干扰。真机测试在目标真机尤其是性能各异的手机上测试震动效果。PC上感觉轻微的震动在手机小屏幕上可能过于剧烈。确保在所有设备上都有可接受的体验。最后别忘了在游戏的“设置”菜单里放上一个显眼的“屏幕震动强度”滑块甚至可以直接关闭。把选择权交给玩家是获得好评的简单一步。