キャラクターを滑らかな軌道で移動させたい。
アニメーションで、自然な動きを実現したい。
そんな場面で使えるのが、ベジェ曲線です。
ベジェ曲線は、制御点を使って滑らかな曲線を描く数学的関数です。
これを使うことで、滑らかな軌道やアニメーションを実現できます。
この記事では、ベジェ曲線をゲームで使う理由として、滑らかな軌道とアニメーションを見ていきましょう。
- ベジェ曲線をゲームでどう使えばいいのか分からない…
- 滑らかな軌道やアニメーションを実現したい。
- ベジェ曲線の使い方を知りたい。
✨ この記事でわかること
- ベジェ曲線とは何かの基本概念
- ベジェ曲線がゲームで使われる理由
- 滑らかな軌道の実装
- アニメーションへの応用
- 初心者でも理解できるベジェ曲線の考え方
Unity入門の森をチェック Unity初心者でも安心。動画解説＋完成サンプル付きで実装まで進められます
ベジェ曲線ゲームとは何か（ゲーム制作目線）
ベジェ曲線は、制御点を使って滑らかな曲線を描く数学的関数です。
制御点の位置によって、曲線の形状が決まります。
ベジェ曲線の特徴は、滑らかで連続的な曲線を描けることです。
これにより、自然な軌道やアニメーションを実現できます。
ゲーム開発では、キャラクターの移動経路、カメラの動き、UI要素のアニメーションなど、様々な場面で使われます。
ベジェ曲線には、2次ベジェ曲線、3次ベジェ曲線など、様々な次数があります。
ゲームでの具体的な使い道
ベジェ曲線が、ゲームでどう使われているか確認してみましょう。
キャラクターの移動経路
ベジェ曲線を使って、キャラクターの移動経路を定義します。
滑らかな軌道で移動させることで、自然な動きを実現できます。
カメラの動き
ベジェ曲線を使って、カメラの移動経路を定義します。
滑らかにカメラを動かすことで、自然なカメラワークを実現できます。
UI要素のアニメーション
ベジェ曲線を使って、UI要素のアニメーションを定義します。
滑らかにUI要素を動かすことで、自然なアニメーションを実現できます。
エフェクトの軌道
ベジェ曲線を使って、エフェクトの移動経路を定義します。
滑らかな軌道でエフェクトを動かすことで、自然なエフェクトを実現できます。
- キャラクターの移動経路（滑らかな軌道）
- カメラの動き（自然なカメラワーク）
- UI要素のアニメーション（滑らかな動き）
- エフェクトの軌道（自然な軌道）
作り方は分かった。
でも完成まで行けない人へ
当たり判定・移動・カメラ・AIまで、
実装しながら学べる「永久会員チケット」です。
※ まずは内容を見るだけでOK
考え方・仕組みを図解イメージで説明
ベジェ曲線は、制御点を使って滑らかな曲線を描く関数です。
2次ベジェ曲線
2次ベジェ曲線は、3つの制御点（開始点、制御点、終了点）で定義されます。
パラメータt（0〜1）を使って、曲線上の点を計算できます。
3次ベジェ曲線
3次ベジェ曲線は、4つの制御点（開始点、制御点1、制御点2、終了点）で定義されます。
より複雑な曲線を描くことができます。
曲線上の点の計算
パラメータtを使って、曲線上の点を計算します。
tが0なら開始点、tが1なら終了点、tが0.5なら中間点に近い位置になります。
補間による滑らかさ
ベジェ曲線は、制御点間を補間すれば、滑らかな曲線を描きます。
これにより、自然な軌道やアニメーションを実現できます。
- ベジェ曲線は、制御点を使って滑らかな曲線を描く
- パラメータt（0〜1）を使って、曲線上の点を計算できる
- 2次ベジェ曲線は3つの制御点、3次ベジェ曲線は4つの制御点で定義される
- 補間により、自然な軌道やアニメーションを実現できる
Unityで実装する際の注意点（代表例）
Unityでベジェ曲線を実装する場合の注意点を見ていきましょう。
2次ベジェ曲線の実装
2次ベジェ曲線を実装する例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public Vector3 BezierQuadratic(Vector3 p0, Vector3 p1, Vector3 p2, float t) { float u = 1 - t; return u * u * p0 + 2 * u * t * p1 + t * t * p2; } void Update() { float t = Time.time % 1f; // 0〜1の範囲でループ Vector3 position = BezierQuadratic(startPoint, controlPoint, endPoint, t); transform.position = position; } |
3次ベジェ曲線の実装
3次ベジェ曲線を実装する例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public Vector3 BezierCubic(Vector3 p0, Vector3 p1, Vector3 p2, Vector3 p3, float t) { float u = 1 - t; float tt = t * t; float uu = u * u; float uuu = uu * u; float ttt = tt * t; return uuu * p0 + 3 * uu * t * p1 + 3 * u * tt * p2 + ttt * p3; } void Update() { float t = Time.time % 1f; Vector3 position = BezierCubic(p0, p1, p2, p3, t); transform.position = position; } |
キャラクターの移動経路
ベジェ曲線を使って、キャラクターの移動経路を定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
public class BezierMovement : MonoBehaviour { public Transform[] controlPoints; public float duration = 5f; private float elapsedTime = 0f; void Update() { elapsedTime += Time.deltaTime; float t = elapsedTime / duration; if (t > 1f) t = 1f; Vector3 position = BezierCubic( controlPoints[0].position, controlPoints[1].position, controlPoints[2].position, controlPoints[3].position, t ); transform.position = position; } } |
アニメーションへの応用
ベジェ曲線を使って、アニメーションのイージングを実現します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// イージング関数として使う public float BezierEasing(float t, Vector2 p1, Vector2 p2) { // ベジェ曲線のY値を返す float u = 1 - t; return u * u * u * 0 + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * 1; } void Animate() { float t = elapsedTime / duration; float easedT = BezierEasing(t, new Vector2(0.25f, 0.1f), new Vector2(0.25f, 1f)); transform.position = Vector3.Lerp(startPos, endPos, easedT); } |
実装のコツ
制御点の位置を適切に設定することが大切です。
パラメータtを0から1まで変化させることで、曲線上の点を計算できます。
複数のベジェ曲線を組み合わせることで、より複雑な軌道を実現できます。
まとめ
この記事では、ベジェ曲線をゲームで使う理由について見てきました。
重要なポイントをおさらいします。
- ベジェ曲線は、制御点を使って滑らかな曲線を描く
- パラメータt（0〜1）を使って、曲線上の点を計算できる
- 2次ベジェ曲線は3つの制御点、3次ベジェ曲線は4つの制御点で定義される
- 滑らかな軌道やアニメーションを実現できる
- 複数のベジェ曲線を組み合わせることで、より複雑な軌道を実現できる
ベジェ曲線は、ゲーム開発で非常に有用な技術です。
制御点を使って滑らかな曲線を描くため、自然な軌道やアニメーションを実現できます。
パラメータtを使って、曲線上の点を計算できます。
実際のゲーム実装とセットで学ぶことで、理解が深まるはずです。
Unity入門の森では、ベジェ曲線を含むシェーダーと描画処理を、実際のゲーム実装とともに体系的に学べます。
ぜひチェックしてみてください。
Unity入門の森をチェック Unity初心者でも安心。動画解説＋完成サンプル付きで実装まで進められます
コメント