【Unity】落下地点の座標から、放物線の方程式を求める

落下地点が決まっていて、そこに向かって弾をとばしたり、ミサイルを撃ち込みたいことがあります。落下地点から放物線の方程式を求めるのって、結構難しいんですよね・・・。

ということで、ここでは、打ち出し角度と落下地点の座標を指定することで放物線の係数をもとめる方法を紹介します。

これにより、指定した落下地点に確実に落下するミサイルなどを作ることが出来ますよ！記事の内容は次のとおりです。

放物線の求め方

放物線を求めるのに必要な情報として次の２つを与えます。

• 落下地点の座標
• 射出角度

ただし、打ち出す場所は原点とします。原点以外から撃つ場合は、オフセットを足してあげればOKです。この情報をもとに図を書くとこんな感じになります。

求める放物線はf(x)=ax^2+bx+cと書けます。コレに上の条件をあたえると・・・

f(0)=0より、c = 0
f(target.x)=target.yより、target.y = a*target.x^2+b*target.x
f'(0)=tan(deg)より、b = tan(deg)

この連立方程式を解くと

a = (target.y - b * target.x) / (target.x * target.x)
b = tan(deg)

と、比較的簡単に放物線の方程式を求めることが出来ます。

放物線を求めるプログラム

落下地点の座標から放物線をもとめるスクリプトは次のようになります（ここでは、実際に放物線の方程式を求めているボールのスクリプトを示しています）

public class BallController : MonoBehaviour {

    public GameObject block;
    Vector3 offset;
    Vector3 target;
    float deg;
 
    IEnumerator ThrowBall()
    {
        float b = Mathf.Tan (deg * Mathf.Deg2Rad);
        float a = (target.y - b * target.x) / (target.x * target.x);
      
        for (float x = 0; x <= this.target.x; x+= 0.3f)
        {
            float y = a * x * x + b * x;
            transform.position = new Vector3 (x, y, 0) + offset;
            yield return null;
        }
    }

    public void SetTarget(Vector3 target, float deg)
    {
        this.offset = transform.position;
        this.target = target - this.offset;
        this.deg = deg;

        StartCoroutine ("ThrowBall");
    }

    void Start()
    {
        // ブロックに向かって60度の角度で射出
        SetTarget ( block.transform.position, 60 );
    }
}

SetTargetメソッドで、ボールの落下地点の座標（target）と、ボールの射出角度(deg)を指定しています。この例では、落下地点はブロックの位置、射出角度は60度を指定しています。射出地点を原点にするためoffsetを保存してから、放物線の係数を計算しています。ThrowBallコルーチンの中で、現在のx座標と放物線の方程式からy座標を求めています。最後にoffsetを戻してボールの位置に反映しています。

実行結果

クリックした点にボールが飛んで行くように修正したプログラムの実行結果がこちらです。

ここでは射出角度を、射出座標と落下座標のなす角度から求めています。

【Unity】バネの動きを実現する3つの方法

Unityでバネのアニメーションを作る場合、大きく分けて3つの方法があります。

バネの挙動をシミューレートできるSpring2DコンポーネントはPhysicsの物理挙動に従って計算するため、リアルな挙動にしたい場合はこれを使うと良いでしょう。ちょっとバネバネアニメーションを付けたい、という場合には大げさで取り回しが悪かったりします・・・

また、Animationを自分で組み立てる方法もあります。この場合、バネの強度や移動方向など、値が決め打ちになってしまうので、挙動を変えたい場合にはすこし手間が大きい方法です。

最後に、もっとも柔軟性の高い方法として、バネの挙動をスクリプトでシミュレートする方法があります。スクリプトでバネの動きを実現するのは意外と簡単なので、オススメの方法です。

では、それぞれの方法を使う方法を紹介します。

Spring Joint 2Dを使う方法

Spring Joint 2Dコンポーネントを使う場合は、バネに従って動かしたいオブジェクトにこのコンポーネント（Physics2D → Spring Joint 2D）をアタッチします。Spring Joint 2Dをアタッチすると、自動的にPhysics 2Dコンポーネントもアタッチされます。

Spring Joint 2Dコンポーネントをアタッチすると、シーンビューには次のように緑の線で仮想のバネが表示されます。

バネを別のオブジェクトに固定するには「Connected Rigid Body」を設定します。ジョイントを固定する座標は「Anchor」、自然長は「Distance」、強度は「Frequency」で設定します。よく使用するのはこれらのパラメータです。ここでは、原点に接続された長さ１のバネをシミュレートします。今回は、Anchor=(0, 0)、Distance=1、Frequency=3に設定しました。

これ以外のパラメータについては、Unityのサイトを参照してください。

docs.unity3d.com

ゲームを実行すると、次のようにボールが原点に向かってバネ振動します。

また、上のように原点とボールの間に線を描きたい場合は、次のスクリプトをボールにアタッチしてください。GizmoクラスのDrawLineメソッドを使ってシーンビューに線を描画します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class BallController : MonoBehaviour 
{
    void OnDrawGizmos ()
    {
        Gizmos.DrawLine (transform.position, Vector3.zero);
    }
}

スクリプトをアタッチ後、Gameビューの「Gizmos」をクリックして有効化することで、ゲームビューでも線を描画することができます。

Animationを使う方法

バネのAnimationを自分で組み立てる場合は、Animatorをボールにアタッチします。ボールを選択した状態で、メニューバーから「Window」→「Animation」を選択してください。Animationウインドウが開くので「spring@ball」という名前でAnimation Clipを保存します。

続いてタイムラインでバネのアニメーションを組み立てます。バネの動作なので時間がたつに従って振幅が減衰するカーブを作成します。今回は次のように、x軸方向にのみ振動するバネを作成しました。

実行結果はこちらです。アニメーションを自分で作るのはセンスが必要ですね（笑）

こちらも分かりやすいように、原点とボールの間にGizmoを使って線を描画しています。この方法は上の「Spring Joint 2D」の項目を参照ください。

バネの挙動をスクリプトで書く方法

最後にスクリプトでバネの挙動をシミュレートする方法を紹介します。バネの挙動はイージングの動作と似ています。イージングではターゲット座標と現在の座標の差分が「ボールの移動速度」になりますが、バネではこの差分が「ボールの加速度」になります。

つまり、ターゲット座標が遠ければ遠いほど大きな力で、ターゲット座標へ向かうことになり、ターゲット座標に近づくにつれて、かかる力も小さくなります。

イージングでは、ターゲット座標と現在の座標の差分は速度に変換されるため、目標地点を行き過ぎることは決してありませんが、バネの場合は加速度に変換されるので、基本的にはオーバーシュートして、また戻ってを繰り返します。この挙動がバネっぽさに繋がるのですね。

ボールの動きを制御するC#スクリプト（BallController.cs）を作成し、ボールオブジェクトにアタッチします。BallControllerのプログラムは次のようになります。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BallController : MonoBehaviour {

    Vector3 targetPos;
    Vector3 acc, vel, pos;

    void Start () 
    {
        acc = vel = Vector3.zero;
        targetPos = pos = new Vector3(0, 0, 0);
    }

    void OnDrawGizmos ()
    {
        Gizmos.DrawLine (this.pos, this.targetPos);
    }

    void Update () 
    {
        if (Input.GetMouseButton (0))
        {
            this.pos = Camera.main.ScreenPointToRay(Input.mousePosition).origin;
            this.pos.z = 0;
        }
        else
        {
            Vector3 diff = this.targetPos - this.pos;
            this.acc = diff * 0.1f;
            this.vel += this.acc;
            this.vel *= 0.9f;
            this.pos += this.vel;        
        }
        transform.position = this.pos;
    }
}

完成図はこんな感じで、ボールをドラッグすると移動でき、マウスを離すと原点に向かってビヨンビヨンします。原点とボールが仮想のバネでつながれているイメージですね。

どうでしょうか？スクリプトでバネを実現する方法が一番気持ち良い動きになっている気がしませんか？慣れもあるとは思いますが、細かい動きまで微調整できるのでオススメですよ！

Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]

Flash Math Creativity

【Unity】uGUIの文字を一文字ずつ別々に動かす

uGUIを使って文字列を表示するにはTextを使います。このTextを使って一文字ずつランダムに動かす方法を紹介します。UIの文字でも場所によっては動いている方が楽しいですね〜

UIのTextを一文字ずつ動かす方法

UGUIのTextはModifyMeshメソッドを使うことで、文字を構成するポリゴンにアクセスすることが出来ます。各ポリゴンの頂点座標を配列として得られるので、その頂点座標を一文字ごとに、違った方向に動かすことで文字がバラバラの動きをします。

文字を構成するポリゴンは４頂点ではなく、６頂点で構成されるので注意が必要です。次のような並びになっているようです。

したがって、頂点配列の頂点を6個ごとにばらばらの方向に動かすことで上のような文字の動きが実現できます。

ランダムに動かす方法はなんでも良いのですが、ここでは半径Rの円周上をランダムに指すベクトルを方向ベクトルとして使っています。

では、具体的な実装方法を紹介します。

uGUIでTextを配置する

まずはuGUIでTextを配置します。ヒエラルキービューから「Create」→「UI」→「Text」を選択し、インスペクタから適当な文字を設定して下さい。文字の設定はText欄から行います。その他にも、FontやFont Size、Colorなども調整します。

テキストを動かすスクリプトを作成する

続いて、文字を動かすためのスクリプトを作成します。プロジェクトビューで右クリックして「Create」→「C# Script」を選択し、「TextController」という名前で保存して下さい。

スクリプトが作成できたら次のプログラムを入力して下さい。

using UnityEngine.EventSystems;
using System.Collections.Generic;

public class TextController : BaseMeshEffect {

    float time = 0;
    float radius = 1.5f;

    public override void ModifyMesh ( UnityEngine.UI.VertexHelper vh)
    {
        if (!IsActive())
            return;

        List<UIVertex> vertices = new List<UIVertex>();
        vh.GetUIVertexStream(vertices);

        TextMove(ref vertices);

        vh.Clear();
        vh.AddUIVertexTriangleStream(vertices);
    }

    void TextMove( ref List<UIVertex> vertices )
    {
        for (int c = 0; c < vertices.Count; c += 6)
        {
            float rad = Random.Range(0,360) * Mathf.Deg2Rad;
            Vector3 dir = new Vector3 (radius * Mathf.Cos (rad), radius * Mathf.Sin (rad), 0);

            for(int i = 0; i < 6; i++)
            {
                var vert       = vertices [c+i];
                vert.position  = vert.position + dir;
                vertices [c+i] = vert;
            }
        }
    }

    void Update()
    {
        time += Time.deltaTime;
        if (time > 0.05f)
        {
            time = 0;
            base.GetComponent<Graphic> ().SetVerticesDirty ();
        }
    }
}

uGUIのTextはBaseMeshEffectクラスのModifyMeshメソッドをオーバーライドすることで、テキストの表示に使われているポリゴンの頂点にアクセス出来るようになります。

このあたり、Unity5.1、5.2、5.3とどんどん仕様が変わっているようなので、バージョンによってはうまく動かないかもしれません。上のプログラムはUniy5.6で動作を確認しています。

toriden.hatenablog.com

取り出した頂点をTextMoveメソッドの引数に渡しています。TextMoveメソッドの中では６頂点ごとにランダムなベクトルを定義して、頂点座標をベクトル方向に移動させています。

最後にUpdateメソッドから逐次SetVerticesDirtyメソッドを呼ぶことで、文字が動くアニメーションを再生することが出来ます。

おまけ（もっと、もにょもにょ動かす）

上の例では、文字を構成する６頂点はまとめて同じ方向に動かしていましたが、これを１頂点ごとに方向も長さもランダムな方向に動かすと、さらにもにょっとした動きになりました。

こんな感じです。綺麗かどうかは置いておいて（笑）

TextMoveメソッドの中は次のようになっています。頂点2と頂点3、頂点0と頂点5は同じ座標を指すので、同じ方向のベクトルを与えています。

            Vector3[] dirs = new Vector3[6];

            for (int i = 0; i < 6; i++)
            {
                float rad = Random.Range (0, 360) * Mathf.Deg2Rad;
                float r = radius + 6.5f * Random.value;
                Vector3 dir = new Vector3 (r * Mathf.Cos (rad), r * Mathf.Sin (rad), 0);

                dirs [i] = dir;
            }

            dirs [3] = dirs [2];
            dirs [5] = dirs [0];

            for(int i = 0; i < 6; i++)
            {
                var vert       = vertices [c+i];
                vert.position  = vert.position + dirs[i];
                vertices [c+i] = vert;
            }

まとめ

ModifyMeshメソッドをオーバーライドすることで、uGUIのTextの各頂点座標にアクセスする方法を紹介しました。動かし方はまだまだバリエーションが出せると思うので、是非試してみて下さいね〜

UnityゲームUI実践ガイド　開発者が知っておきたいGUI構築の新スタンダード

[asin:4839956405:detail]