【Unity開発】放物線を描いて飛ばす表現方法【コラム】

ゲーム中でキャラに向けてハートを飛ばしたい！
まずはまっすぐ飛ばしてみる
直線ではなく、放物線を描くようにする
まとめ

ゲーム中でキャラに向けてハートを飛ばしたい！

ぴっくるでは現在、研究開発の一環で、PurpleMandrillの開発を進めています。

今回はキャラクターに向かってハートを飛ばす実装を考えます。

テンションの上がるコメントが入力された場合、テンションゲージが上がるのですが、その際に視覚的にキャラクターに向かってハートを飛ばすようにします。

飛ばし方ですが、ユーザーのコメントがハートになって、プレイヤーに飛んでいくようなイメージなので、画面下からプレイヤーのいる画面中央あたりに飛んでいくことを想定します。

ボールを投げるように放物線を描きたいと思います。

まずはまっすぐ飛ばしてみる

3Dで表現する場合、カメラ位置のちょい下からプレイヤーの位置までを移動すれば良いですが、今回はカメラとプレイヤーの位置が固定なので、手を抜いて2DのUGUI上で行います。

ハートは1枚画像で、Imageコンポーネントを使います。

まずは手始めに直線で等速に飛ばします。

var startPos = new Vector2(Random.Range(-350f, 350f), -1080 / 2 - 100);
var endPos = Vector2.zero;
var pos = Vector2.Lerp(startPos, endPos, m_Timer / Duration);
m_RectTrans.anchoredPosition = pos;

始点と終点の距離を出して、時間を正規化して現在の表示座標を出してやる感じですね。

式にすると、

現在座標＝始点＋（終点－始点）×経過時間÷総時間

になります。

Unityには便利なLerp関数があって、これを使えば同じ事が出来ます。

線グラフで表現したもの

実際のゲーム映像

このままではちょっと味気ないですね。

なので、次は放物線を描くようにしたいと思います

直線ではなく、放物線を描くようにする

放物線を描くには、放物線の式を使います。

y=ax^2

みたいなやつですね。

まずX座標については従来通りの等速移動を行います。

Y座標は、

Y座標＝始点＋（終点－始点）×（経過時間÷総時間）＾２

という感じになります。

処理を書き換えてみます。

var startPos = new Vector2(Random.Range(-350f, 350f), -1080 / 2 - 100);
var endPos = Vector2.zero;
var pos = new Vector2();
var t = m_Timer / Duration;
pos.x = startPos.x + (endPos.x - startPos.x) * t;
var l = (endPos.y - startPos.y);
pos.y = startPos.y + l * t * t;
m_RectTrans.anchoredPosition = pos;

終点に近づくにつれて、ちょっと動きが滑らかになりましたね。

ただしこの式では、終点が山の頂上に来るので、放物線を描いて飛んでるようには見えません。

終点の少し前に頂上があって、少し降りてくるような動きにさせたいです。

この場合、3次曲線を使います。

よくエルミート曲線などと言われるものです。

エルミート曲線は自前で組むと少し面倒なのですが、UnityにはAnimationCurveという便利なクラスがあるのでそれを使います。

var startPos = new Vector2(Random.Range(-350f, 350f), -1080 / 2 - 100);
var endPos = Vector2.zero;
var pos = new Vector2();
pos.x = startPos.x + (endPos.x - startPos.x) * m_Timer / Duration;

var l = (endPos.y - startPos.y);
var animCurve = new AnimationCurve();
var keyFrameS = new Keyframe(0, startPos.y, 0, l);
var keyFrameE = new Keyframe(Duration, endPos.y, -l * 2, 0);
animCurve.AddKey(keyFrameS);
animCurve.AddKey(keyFrameE);

pos.y = animCurve.Evaluate(m_Timer);
m_RectTrans.anchoredPosition = pos;