shigureni.dev

締めと、この先

着地で横に潰れて飛び立つ瞬間に縦へ伸びるスカッシュ&ストレッチ。手触りの替え方は他にもある。固定タイムステップの上で update だけ数フレーム止めて打撃を重くするヒットストップ、ワールド座標を lerp で遅れて追うカメラ、FSM の遷移爆発を宣言的に解くビヘイビアツリー。

スカッシュ&ストレッチはアニメーションの十二の基本原則の一つで、Disney のアニメーターが体系化した。物体は変形しても見かけの体積を保つので、縦に s 倍潰れたら横は 1/s 倍に膨らむ。潰れ具合を衝撃の速さに、伸び具合を移動の速さに結ぶと、硬い剛体の運動が弾力を持った質感に化ける。

ボールを重力で落とし、床で跳ね返しながら横へ走らせる。落下の速さ vy に応じて着地の瞬間に縦を一気に潰し、その潰しは毎フレーム少しずつ 1 へ戻る。空中では速度ぶん縦に伸ばす。縦の倍率 sy に対して横は 1/sy にして、見かけの面積を一定に保つ。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const floor = h - 24
  const radius = 18

const ball = {
    x: radius + 4,
    y: floor - 120,
    vx: 2.6,
    vy: 0,
    squash: 1,
  }

c.fillStyle = colors.paper
  c.fillRect(0, 0, w, h)

return () => {
    c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

ball.vy += 0.5
    ball.x += ball.vx
    ball.y += ball.vy

if (ball.x < radius || ball.x > w - radius) {
      ball.vx = -ball.vx
      ball.x = Math.max(radius, Math.min(w - radius, ball.x))
    }

if (ball.y > floor - radius) {
      // 着地の瞬間、落下の速さに応じて一気に潰す
      const impact = Math.min(1, Math.abs(ball.vy) / 13)
      ball.squash = 1 - impact * 0.6
      ball.y = floor - radius
      ball.vy = -ball.vy * 0.82
    }

// 潰しは毎フレーム 1 に戻り、空中では速度ぶん縦に伸びる
    ball.squash += (1 - ball.squash) * 0.18
    const stretch = Math.min(0.35, Math.abs(ball.vy) / 40)
    const sy = ball.squash + (ball.squash >= 1 ? stretch : 0)

// 床
    c.strokeStyle = colors.tint(150)
    c.lineWidth = 2
    c.beginPath()
    c.moveTo(0, floor)
    c.lineTo(w, floor)
    c.stroke()

// 縦に潰れたぶん横に膨らむ。体積を一定に保つ
    const sx = 1 / sy
    const rx = radius * sx
    const ry = radius * sy

const cy = Math.min(ball.y, floor - ry)

c.fillStyle = colors.ink
    c.beginPath()
    c.ellipse(ball.x, cy, rx, ry, 0, 0, Math.PI * 2)
    c.fill()
  }
}

床に当たる瞬間にボールが横長に潰れ、跳ね上がる縦長に戻る。落下が速いほど潰れが深く、跳ね返りが弱まるにつれて潰れも浅くなる。impact の係数 0.6 を上げると潰れが極端になり、ball.squash >= 1 のときだけ足す stretch を切ると、伸びの無い潰れだけの弾みになる。位置の物理は素の放物運動のまま、描く楕円の縦横比を速度に結んだだけで、剛体の跳ね返りに弾力が乗る。