游戏动画与音频系统

概述

一个游戏的好坏，往往藏在动画的流畅度和音效的反馈里。动画系统让角色拥有生命：行走、跳跃、攻击；音频系统让玩家身临其境：脚步声、爆炸声、环境音。本文讲解游戏动画的两大核心技术——帧动画与骨骼动画，以及音频系统的关键设计——音频池与3D 空间音频，最后用一个完整示例演示动画与音频如何协同。

帧动画（Sprite Sheet Animation）

原理

帧动画是最简单直接的动画方式：把动画的每一帧画在**一张大图（Sprite Sheet）**上，按顺序播放其中的帧。像翻书一样，切换足够快就产生了动画。

一个 192×64 的精灵表，每帧 64×64，包含 3 帧：
┌─────┬─────┬─────┐
│ 帧0 │ 帧1 │ 帧2 │
└─────┴─────┴─────┘

播放器实现

class SpriteAnimation {
  constructor(sheet, frameW, frameH, frameCount, fps = 12) {
    this.sheet = sheet            // Image
    this.frameW = frameW
    this.frameH = frameH
    this.frameCount = frameCount
    this.frameDuration = 1 / fps  // 每帧停留秒数
    this.time = 0
    this.currentFrame = 0
    this.loop = true
    this.finished = false
  }

  // 按 dt 推进动画时间
  update(dt) {
    if (this.finished) return
    this.time += dt
    // 用除法取余实现循环播放
    const progress = this.time / this.frameDuration
    this.currentFrame = Math.floor(progress)

    if (this.currentFrame >= this.frameCount) {
      if (this.loop) {
        this.currentFrame = this.currentFrame % this.frameCount
        this.time = this.time % (this.frameDuration * this.frameCount)
      } else {
        this.currentFrame = this.frameCount - 1
        this.finished = true
      }
    }
  }

  // 在 (x, y) 绘制当前帧
  draw(ctx, x, y, scale = 1) {
    const sx = this.currentFrame * this.frameW
    ctx.drawImage(
      this.sheet,
      sx, 0, this.frameW, this.frameH,
      x, y, this.frameW * scale, this.frameH * scale
    )
  }

  // 重置动画
  reset() {
    this.time = 0
    this.currentFrame = 0
    this.finished = false
  }
}

帧动画的进阶技巧

1. 动画状态与状态机结合：不同状态（行走/攻击/受伤）对应不同动画，用状态机切换（详见游戏设计模式与架构）
2. 帧率与游戏帧率解耦：动画的 fps 独立于游戏帧率，用 dt 驱动，保证动画速度稳定
3. 非循环动画：攻击、跳跃等一次性动画，播完停在最后一帧再切回待机

骨骼动画（Skeletal Animation）

原理

骨骼动画把角色拆成两部分：

• 骨骼（Bones）：一组有层级关系的关节，只保存位置与旋转
• 蒙皮（Skin/Mesh）：顶点绑定到骨骼，跟随骨骼移动

动画不再是"换图片"，而是改变骨骼的旋转/位移，蒙皮自动跟随。优点是资源小（只存骨骼变换）、可复用（同一骨骼换不同皮肤）。

骨骼层级（父子关系）：
    躯干 (root)
    ├── 左上臂
    │   └── 左前臂
    ├── 右上臂
    │   └── 右前臂
    ├── 左腿
    └── 右腿

简单 2D 骨骼动画实现

2D 中常用"图像分层 + 骨骼变换"方案：每块身体是一个图片，通过矩阵变换摆放到骨骼位置：

// 骨骼：表示一个关节，持有旋转角度，可嵌套子骨骼
class Bone {
  constructor(x, y, length = 0) {
    this.x = x           // 相对父骨骼的偏移
    this.y = y
    this.length = length // 骨骼长度
    this.rotation = 0    // 当前角度
    this.children = []   // 子骨骼
  }

  // 世界矩阵：累乘父级变换
  getWorldTransform(parentTransform) {
    const cos = Math.cos(this.rotation)
    const sin = Math.sin(this.rotation)
    const m = multiply(parentTransform, {
      a: cos, b: sin, c: -sin, d: cos,
      tx: this.x, ty: this.y
    })
    return m
  }
}

// 以 2D 向量变换执行骨骼（简化渲染）
function drawBone(ctx, bone, parentTransform) {
  const m = bone.getWorldTransform(parentTransform)
  const endX = m.tx + bone.length * m.a
  const endY = m.ty + bone.length * m.b

  // 画骨骼线
  ctx.strokeStyle = '#fff'
  ctx.beginPath()
  ctx.moveTo(m.tx, m.ty)
  ctx.lineTo(endX, endY)
  ctx.stroke()

  for (const child of bone.children) {
    drawBone(ctx, child, m)  // 递归绘制子骨骼
  }
}

骨骼动画 vs 帧动画

维度	帧动画	骨骼动画
资源大小	大（每帧一张图）	小（骨骼数据 + 一张贴图）
制作成本	低	高（需骨骼绑定工具）
灵活性	低（不可复用部分）	高（可换装、可混合动画）
典型应用	像素风、2D 休闲	3D 角色、2D 复杂角色
性能	绘制指令多	顶点变换，GPU 友好

音频系统设计

浏览器音频基础

浏览器统一使用 Web Audio API 处理音频。核心对象：

• AudioContext：音频图（Audio Graph）的入口
• AudioBufferSourceNode：播放一段音频（可多次播放）
• GainNode：控制音量
• AudioContext.currentTime：精确时钟（秒）

// 创建音频上下文（每个页面建议只建一个）
const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

// 播放一次音频
async function playOnce(url, volume = 1) {
  const buffer = await loadAudio(url)
  const source = audioCtx.createBufferSource()
  const gain = audioCtx.createGain()

  source.buffer = buffer
  gain.gain.value = volume

  source.connect(gain)
  gain.connect(audioCtx.destination)
  source.start()
}

音频池（Audio Pool）

问题：游戏需要高频播放音效（射击、脚步、命中）。如果用 createBufferSource() 每次新建节点，播放频繁时会创建大量节点，内存与性能失控，且同一音效无法重叠播放。

音频池复用已创建的 AudioBufferSourceNode：

class AudioPool {
  constructor(audioCtx, buffer, poolSize = 8) {
    this.ctx = audioCtx
    this.buffer = buffer
    this.sources = []

    // 预创建节点池
    for (let i = 0; i < poolSize; i++) {
      const source = audioCtx.createBufferSource()
      source.buffer = buffer
      source.onended = () => { source.playing = false }  // 播放完标记空闲
      source.playing = false
      this.sources.push(source)
    }
  }

  // 从池中找一个空闲节点播放（找不到则丢弃本次播放）
  play(volume = 1) {
    const source = this.sources.find(s => !s.playing)
    if (!source) return  // 池已满，丢弃（避免卡顿比偶尔丢音效更重要）

    const gain = this.ctx.createGain()
    gain.gain.value = volume

    source.playing = true
    source.connect(gain)
    gain.connect(this.ctx.destination)
    source.start()
  }
}

// 使用：创建一次，高频调用
const shootPool = new AudioPool(audioCtx, shootBuffer, 8)
document.addEventListener('keydown', () => shootPool.play(0.8))

音频池设计要点：

1. 池大小：按最高并发需求设置（射击类 8~16 个）
2. 满则丢弃：宁可丢一次音效，也不能卡顿主线程
3. 音量参数：play 时动态调整音量，实现远近差异化

3D 空间音频（Spatial Audio）

Web Audio API 的 PannerNode 可实现 3D 空间音频：音源有位置，听者有位置，声音随距离衰减、随方位变化。

// 创建空间音源
function createSpatialSound(audioCtx, buffer) {
  const source = audioCtx.createBufferSource()
  source.buffer = buffer

  const panner = audioCtx.createPanner()
  panner.panningModel = 'HRTF'        // 高保真头相关传输函数，模拟双耳
  panner.distanceModel = 'inverse'    // 距离衰减模型
  panner.refDistance = 5              // 参考距离：此距离内音量不衰减
  panner.maxDistance = 100            // 最大听距
  panner.rolloffFactor = 1            // 衰减速度

  // 初始音源位置
  panner.positionX.value = 0
  panner.positionY.value = 0
  panner.positionZ.value = 0

  source.connect(panner)
  panner.connect(audioCtx.destination)
  return { source, panner }
}

// 每帧更新音源位置（世界坐标）
function updateSpatialSound(audio, worldPos, listenerPos) {
  // 把音源相对听者的偏移喂给 PannerNode
  audio.panner.positionX.value = worldPos.x - listenerPos.x
  audio.panner.positionY.value = worldPos.y - listenerPos.y
  audio.panner.positionZ.value = worldPos.z - listenerPos.z
}

音频最佳实践

1. 音频上下文懒创建：浏览器要求用户交互后才能播放音频，在首次点击时创建 AudioContext
2. BGM 循环：source.loop = true 实现背景音乐循环
3. 主音量总线：用一个全局 GainNode 控制总音量，方便静音/调节
4. 格式选择：音效用 MP3（兼容性），高质量场景用 OGG/WebM；小音效用短 WAV
5. 资源预加载：游戏开始前预加载音频，避免播放时卡顿

// 全局主音量总线
const masterGain = audioCtx.createGain()
masterGain.gain.value = 0.8
masterGain.connect(audioCtx.destination)

// 所有音效都连到 masterGain
// masterGain.gain.value = 0  // 一键静音

综合示例：动画 + 音频协同

一个"玩家按空格跳跃并播放跳跃动画与音效"的完整示例：

本章小结

• 帧动画：精灵表 + 按帧序播放，dt 驱动保证速度稳定，状态机管理动画切换
• 骨骼动画：骨骼层级 + 变换传播，资源小、复用性强，是复杂角色的首选
• 音频池：复用 AudioBufferSourceNode，解决高频音效的节点膨胀问题
• 3D 空间音频：PannerNode + HRTF 模型实现距离衰减与方位感
• 音频最佳实践：懒创建 AudioContext、主音量总线、预加载、格式选择

下一篇文章将讲解游戏设计模式与架构——单例、对象池、状态机、观察者、命令模式以及 ECS 与 OOP 的架构之争。