ゲームのオブジェクトをいい感じの曲線で動かす

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

ベジェ曲線というものをご存知でしょうか。
ゲームなど、コンピュータ上できれいな曲線を表現することができる式です。
この記事ではそのベジェ曲線をゲームに利用してみます。

＊ベジェ曲線は、その線（軌道）を描くのに開始地点と終点以外の制御点を1つ以上使うのですが、この記事では個人的な扱いやすさと動きから開始と終点含めて計4つの座標を使用します。

---

実際の計算式と動き

---

下記の式でTimeを0.0f ~ 1.0fまで動かすことで表現できます。

position = (1.0f - Time) * (1.0f - Time) * (1.0f - Time) * 開始地点 +
            3.0f * (1.0f - Time) *(1.0f - Time) * Time * 制御地点1 +
            3.0f * (1.0f - Time) * Time * Time * 制御地点2 +
            Time * Time * Time * 終了地点;

＊このgifでは左下の地点から時計周りに 開始地点,制御地点1,制御地点2, 終了地点です。

---

実用

---

シューティングの弾や取得したアイテムの取得演出などに使えると思います。
線形補間とかでオブジェクトの座標を設定してもいいですがベジェを使うと自然に不規則な感じが出てかっこいいです。

制御地点を変えるだけでも動きにかなりのバリエージョンが出せますし、
この記事では2次元的な動きしかお見せしていませんが当然1次元、3次元の動きにも使えるので色の変化やカメラの動きなどに使ってもいいかもしれません。

---

おわりに

---

ベジェ曲線について軽く調べると..
・N 個の制御点から得られる N − 1 次曲線である。
・2次ベジェ曲線 (Quadratic Bézier curve)、3次ベジェ曲線 (Cubic Bézier curve)などがある
.etc

どうでもいい上によくわかりませんが、ゲームのオブジェクトの動きに使おうとしてる自分的には周りに伝わる呼び方と結果を得られる式だけ理解できればそれでいいです。
仕組みがわからなくても一度使ってみると直感的に使えてとても便利だと思うので一度使ってみてはいかがでしょうか。