Cocos Creator 屏幕震动实现指南：4 种方案从参数到性能的完整对照

Cocos Creator 屏幕震动实现指南4 种方案从参数到性能的完整对照【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine爆炸特效播完画面抖了一下——在 60 帧的手机上像隔了一层玻璃在 120 帧的旗舰机上却抖得发毛。问题不在位移在你没给震动一个统一的数学形状。这篇带你读完 Cocos Creator 里四条可落地的屏幕震动路线每种方案的关键参数、适用边界和真实开销都会对账清楚带走一份能直接抄进项目的参数清单。把需求拆开屏幕震动要先回答三个问题震动的偏移该作用在谁身上作用在相机的位置画面整体平移天空盒也跟着动作用在某个 UI 容器则只有那层 UI 抖。选错挂点会出现背景纹丝不动、角色抖成一团的割裂感。衰减曲线谁说了算用随机数每帧重掷衰减不可控两帧之间跳变用一条确定的曲线正弦衰减或缓动函数衰减完全在你手里。这就是生硬和有打击感的分水岭。多个震动源怎么排队一次爆炸、一声炮响、一个 UI 点击同时发生是叠加、取最强、还是后来者覆盖不先定规则震感会互相污染。方案一随机位移——三行代码的白噪声震动一句话原理每帧在强度范围内掷两个随机数当偏移强度按固定比例逐帧缩小。放在帧循环里它是整个家族里最省事的写法// 挂在相机节点的 update 里duration 建议 0.2~0.4s // 每帧衰减系数建议 0.88~0.95帧率越高衰减越快见避坑清单 onExplode() { this.amp 0.5; // 初始振幅UI 点击类建议 0.05~0.15 this.duration 0.3; } update(dt) { if (this.duration 0) return; this.duration - dt; this.amp * 0.9; const o Vec2.create( random(-1, 1) * this.amp, random(-1, 1) * this.amp ); cameraNode.position.set(this.basePos.x o.x, this.basePos.y o.y, this.basePos.z); }适用边界单帧开销是两次随机数加一次赋值成本几乎为零适合 2D UI 的低强度点击反馈别拿它做爆炸——相邻帧数值互不相关画面会像白噪点一样刺而不是撞。方案二正弦衰减——一次撞击的余震一句话原理位移 振幅 × sin(相位)振幅按指数函数随时间衰减正弦保证相邻帧连续指数保证自然收尾。这个形状来自生活里最常见的撞击手机被拍一下先猛跳再带两三次越来越小的颤动最后静止。把它写出来就是这几行决定效果的核心是频率和衰减速率两个参数// 挂在相机节点的 update 里freq完整震荡次数/秒建议 8~15 // decay 建议 6~12数值越大收得越快越小余震拖得越长 update(dt) { if (this.t this.dur) return; this.t dt; const k this.t / this.dur; const env this.amp * Math.exp(-this.decay * k); // 指数包络 const p Math.sin(2 * Math.PI * this.freq * this.t); const o p * env; cameraNode.position.set(this.basePos.x o, this.basePos.y o * 0.7, this.basePos.z); }适用边界每帧两次三角函数加一次指数成本极低一条曲线同时描述位置和衰减参数手感好适合单次撞击、受击硬直这类一下就好的效果。它只给一个方向感想要乱就得上方案三。方案三Perlin 噪声——让镜头活着地震一句话原理把时间当作一维坐标用引擎自带的 Perlin 噪声采出连续、平滑、看似随机的偏移序列——像心电图忽高忽低但线不断。引擎粒子系统里有一个现成的 噪声类noise(x, y, z, min, max)接受任意三维坐标返回[min, max]内的连续值。屏幕震动只需要让 x 轴坐标随时间滚动就能滚动出一整条噪声带y、z 固定为 0 即可// this.noise 为 ParticleNoise 实例t 用 dt 累加秒 // 时间系数建议 1.5~4越大抖得越快、越细 // 想要更野的质感把 setOctaves 层数从 1 提到 2~3 update(dt) { this.t dt; const nx this.noise.noise(this.t * 2.0, 0, 0, -1, 1); const ny this.noise.noise(this.t * 2.0, 17.7, 0, -1, 1); // 换种子坐标避免 X/Y 同步 cameraNode.position.set( this.basePos.x nx * this.amp, this.basePos.y ny * this.amp, this.basePos.z ); }适用边界连续性最好、最适合长时间播放地震、行军、镜头呼吸但它是四个方案里每帧计算最重的一档每次采样都要重建一张 512 项的排列表见 噪声源码 第 64~65 行高频采样或大 octaves 数会把这个开销放大。持续型环境震动用它单次冲击别用。方案四缓动函数包络——方向明确的挥拳一句话原理震动强度 一条缓动曲线的输出位移沿一个固定方向推进——它不是抖是撞。Cocos 在 缓动函数模块 里内置了全套曲线elasticOut带回弹、backOut带过冲。把其中一条当包络再配一个方向向量就是最干净的单次重击// dir 是单位方向向量比如爆炸在右上就 {x: 0.8, y: 0.6} // duration 建议 0.25~0.5samp 建议 0.3~0.8 个屏幕空间单位 const k this.t / this.duration; // 0 → 1 const e elasticOut(1 - k); // 1 → 0带一次回弹 cameraNode.position.set( this.basePos.x dir.x * e * this.amp, this.basePos.y dir.y * e * this.amp, this.basePos.z );适用边界每帧一次曲线求值开销与随机法同级方向明确、收尾干脆是一次重击 一次回弹的最佳选择。代价是没有横向的乱抖需要乱抖感时把它和方案二叠着跑而不是单独硬扛。屏幕震动方案性能对比开销、内存与上手成本一张表方案每帧计算开销常驻内存上手成本典型场景随机位移低低低UI 点击、轻微受击正弦衰减低低低单次撞击、爆炸余震Perlin 噪声中每采样重建排列表中中地震、行军、镜头呼吸缓动包络低低低方向明确的单次重击三个加粗结论正弦衰减与缓动包络的开销可以忽略不计是默认首选Perlin 噪声每帧重建排列表是它的主要成本多实例或高频采样前先降频随机位移虽然最省但白噪声刺眼的观感是它用参数修不掉的。避坑清单屏幕震动的三个高频翻车点现象同一份震动代码高刷屏上抖得又猛又短低配机上慢吞吞。根因衰减系数如amp * 0.9按每帧计帧率一高单位时间内衰减的帧数就变多。修法把衰减改写成时间的函数——amp amp0 * Math.exp(-decay * t)频率用sin(2π·freq·t)里的绝对时间t秒驱动而不是逐帧累乘。现象震动一开相机的跟随逻辑开始抽搐背景却纹丝不动。根因震动偏移直接写进了相机本体的位置和相机跟随/镜头移动写在同一层两个系统互相覆盖。修法建一个空的震动节点套在相机外面或反过来让相机做震动节点子节点震动只改这个空节点的位置跟随系统照旧写相机的基础位置两者物理隔离。现象爆炸、炮击、UI 点击同时发生画面抖成筛子。根因每个震动源各自写相机位置后写的直接覆盖先写的。修法引入一个总强度上限每次触发时计算新强度若超过上限则只保留更强的那个或按权重归一化后再合成并给每个震动源一个优先级UI 点击永远让位于爆炸。三步接入把震动装进你的项目第一步搭挂点。在场景里建一个空节点CameraShake作为相机的父节点记录它的基础位置震动只改这个节点的position——这是后面所有方案的公共底座。第二步接事件。在受击或爆炸回调里写入参数即可初始振幅建议按上表场景取区间shakeNode.shake(0.5, 0.3); // UI 反馈类amp 0.05~0.15 // 爆炸类amp 0.4~0.8duration 0.25~0.5第三步定仲裁。加一个总强度上限与优先级多震动源同时触发时按保留最强 归一化合成别让画面抖成筛子。收尾震动感不是抖出来的好的屏幕震动从来不是把位移调大而是让衰减曲线替位移说话——曲线对了0.05 的振幅也有千钧之力曲线错了1.0 的振幅也只是刺眼。下一步你可以做三件事拿方案二在你最常用的机型上把freq从 8 扫到 15找到手感拐点把 Perlin 噪声的时间系数从 1.5 调到 4对比地震和警报两种质感给项目加震动仲裁用一次爆炸 一次点击的并发场景验证上限是否生效。你的项目里哪种震动效果还没调顺把它扔出来对一下参数。【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考