🌊

(JS/TS) ゲームでよく使う「動き」を表現するための基本計算まとめ

に公開
JavaScript
等加速度運動
lefp
tech

動きを構成する3つの要素

  • 位置 (Position)：物体が存在する座標
  • 速度 (Velocity)：物体が動く速さと方向
  • 加速度 (Acceleration)：速度が変化する度合

① 一定速度での移動

物体が一定の速度で動く場合、位置の変化量（距離）は次の式で求められます。

距離 = 速度 × 時間

📌 例：毎秒5mの速度で3秒動く場合

5 × 3 = 15m

② 重力による落下（等加速度運動）

現実世界では「重力」という加速度が働くため、物体が落下する際は以下の式を使います。

移動距離 = 初速度 × 時間 + \frac{1}{2} × 加速度 × 時間^2

※ \frac{1}{2} は 0.5 として扱ってOKです。

📌 例：初速度0で2秒間落下した場合

(0 × 2) + (0.5 × 9.8 × 4) = 19.6m

🔍　地球上の物体は、重力加速度9.8 m/s²で落下する。

③ フレーム単位での移動（ゲームでよく使う）

ゲームでは秒ではなく「フレーム単位」で動きを計算することが一般的です。

1フレームの移動距離 = 1秒間の速度 × 1フレームの時間

📌 例：1秒間に120ピクセル動く速度 × 60fps

120 × (1 ÷ 60) = 2ピクセル

→ つまり、1フレームごとに2ピクセル動かせば、1秒間で120ピクセル動いたように見えます。

④ なめらかな動きを作る補間法（Interpolation）

線形補間（Linear Interpolation, 通称 lerp） を使えば、2つの座標間を滑らかに移動できます。

現在位置 = 開始位置 + (終了位置 - 開始位置) × t
  • t は 0〜1 の値をとり、0 のときは開始位置、1 のときは終了位置。
t 中間値 意味
0 0 + (100 - 0) × 0 = 0 開始点
0.25 0 + (100 - 0) × 0.25 = 25 25% 地点
0.5 0 + (100 - 0) × 0.5 = 50 中間点
0.75 0 + (100 - 0) × 0.75 = 75 75% 地点
1 0 + (100 - 0) × 1 = 100 終了点

📌 Aという物体がこのように中間値に沿って動くと、滑らかな移動になります。

⑤ 実際のコード例：JavaScriptでの簡単な落下運動

これは「等加速度運動」をシンプルに表現した例です。

let positionY = 0;        // 現在位置
let velocityY = 0;        // 現在速度
const gravity = 9.8;      // 重力加速度（px単位）
const dt = 1 / 60;        // フレーム間の時間（60fps）

function update() {
  velocityY += gravity * dt;  // 速度 = 現在速度 + 重力 × 経過時間
  positionY += velocityY;     // 位置 = 現在位置 + 最新の速度

  item.style.top = positionY + 'px';  // 画面上の反映

  requestAnimationFrame(update);  // 次のフレームを呼び出し
}

update();

前提条件

項目 値
初期速度 0 px/frame
初期位置 0 px
加速度 2 px/frame²
フレーム時間 1 秒（単純化のため）

フレームごとの計算結果

フレーム 速度の計算 v = v + a × dt 位置の計算 p = p + v 速度 (v) 位置 (p)
0 0 + 2 × 1 = 2 0 + 2 = 2 2 2
1 2 + 2 × 1 = 4 2 + 4 = 6 4 6
2 4 + 2 × 1 = 6 6 + 6 = 12 6 12
3 6 + 2 × 1 = 8 12 + 8 = 20 8 20
4 8 + 2 × 1 = 10 20 + 10 = 30 10 30
5 10 + 2 × 1 = 12 30 + 12 = 42 12 42
6 12 + 2 × 1 = 14 42 + 14 = 56 14 56

算数が必要な理由を子供の頃から知っていてたら🥲

Discussion