《Cocos 游戏开发实战》10.3 震动、顿帧与打击感

import { _decorator, Component, sys } from 'cc';

const { ccclass } = _decorator;

@ccclass('Haptics')
export class Haptics extends Component {
  /** 轻震动：拾取、按钮点击 */
  static light(): void {
    Haptics.vibrate(15);
  }

  /** 重震动：受击、撞击、失败 */
  static heavy(): void {
    Haptics.vibrate(40);
  }

  private static vibrate(ms: number): void {
    // 微信小游戏：走 wx.vibrateShort，用 type 表达轻重
    if (sys.platform === sys.Platform.WECHAT_GAME) {
      const wxApi = (globalThis as any).wx;
      if (wxApi && typeof wxApi.vibrateShort === 'function') {
        wxApi.vibrateShort({ type: ms > 25 ? 'heavy' : 'light' });
      }
      return;
    }
    // Web：走 navigator.vibrate，iOS 会静默忽略
    const nav = (globalThis as any).navigator;
    if (nav && typeof nav.vibrate === 'function') {
      nav.vibrate(ms);
    }
  }
}

export interface HitStopConfig {
  duration: number;  // 冻结时长（秒，真实时间）
  scale: number;     // 冻结期间的时间缩放，通常 0 ~ 0.1
}

/** 维护一个时间缩放，到点自动恢复；多次触发取「更强 + 更长」 */
export class GameClock {
  private scale = 1;
  private freezeLeft = 0;
  private freezeScale = 1;

  /** 触发一次顿帧 */
  hitStop(cfg: HitStopConfig): void {
    this.freezeScale = Math.min(this.freezeScale, cfg.scale);
    this.freezeLeft = Math.max(this.freezeLeft, cfg.duration);
    this.scale = this.freezeScale;
  }

  /** 每帧用真实 dt 推进，返回本帧应使用的时间增量 */
  tick(realDt: number): number {
    if (this.freezeLeft > 0) {
      this.freezeLeft -= realDt;
      if (this.freezeLeft <= 0) {
        this.freezeLeft = 0;
        this.freezeScale = 1;
        this.scale = 1;
      }
    }
    return realDt * this.scale;
  }

  get timeScale(): number {
    return this.scale;
  }
}

import { _decorator, Component, Node, Vec3, tween } from 'cc';

const { ccclass, property } = _decorator;

@ccclass('ScreenShake')
export class ScreenShake extends Component {
  @property(Node)
  private target: Node | null = null;

  /** 震一下：amplitude 像素，duration 秒 */
  shake(amplitude = 8, duration = 0.25): void {
    const node = this.target ?? this.node;
    const origin = node.position.clone();
    const stepTime = 0.02;
    const steps = Math.max(2, Math.round(duration / stepTime));

    let t = tween(node);
    for (let i = 0; i < steps; i += 1) {
      const decay = 1 - i / steps;   // 幅度线性衰减
      const dx = (Math.random() * 2 - 1) * amplitude * decay;
      const dy = (Math.random() * 2 - 1) * amplitude * decay;
      t = t.to(stepTime, { position: new Vec3(origin.x + dx, origin.y + dy, origin.z) });
    }
    // 最后一帧回到原位，避免残留偏移
    t.to(stepTime, { position: origin }).start();
  }
}

import { _decorator, Component, UIOpacity, tween } from 'cc';

const { ccclass, property } = _decorator;

@ccclass('HitFlash')
export class HitFlash extends Component {
  @property(UIOpacity)
  private flash: UIOpacity | null = null;

  play(): void {
    if (!this.flash) {
      return;
    }
    this.flash.opacity = 180;
    tween(this.flash)
      .to(0.15, { opacity: 0 }, { easing: 'quadOut' })
      .start();
  }
}

tween(this.node)
  .to(0.05, { scale: new Vec3(1.25, 0.75, 1) })   // 受击压扁
  .to(0.12, { scale: new Vec3(1, 1, 1) }, { easing: 'backOut' })  // 回弹
  .start();