Unity＆Live2Dでマウスドラッグの軌跡を出す

Live2D使ったアプリでマウスやタッチの軌跡を出すやり方をメモしておきます。

# 開発環境
・Live2D_SDK_Unity_2.1.00_beta_8_jp
・Unity 5.0.1f1
・Live2Dモデル（noshipuさんの[ベルツノさんモデル](http://library.live2d.com/libraries/view/000027/noshipu)をお借りました）

# 軌跡のやり方
軌跡表示はUnityの一般的なやり方なので、Live2D以外でも有効です。


主な方法としては、以下2点あります。

**・Trail Rendererを使う**
**・Particle Systemを使う**

Live2Dの場合、どちらの方法でも軌跡が半透明オブジェクトだとLive2Dモデルの後ろに描画されます
　![01_drag.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/16f770f7-faf4-9ca5-58b8-ff1ec373fec3.gif)
つまり、半透明オブジェクトでなければLive2Dモデルの前に表示されます。

＜透明でないオブジェクトの場合＞
![02_1.png](https://qiita-image-store.s3.amazonaws.com/0/15028/cebf5f44-f919-da02-c655-c8dc5ebe1937.png)
＜半透明のオブジェクトの場合＞
![02_2.png](https://qiita-image-store.s3.amazonaws.com/0/15028/3c89a8ff-bcf4-6b36-b9df-f64eea8f64c6.png)

これはLive2Dが[DrawMeshNow](http://sites.cybernoids.jp/cubism2/sdk_tutorial/platform-setting/unity/csharp/render-mode)というUnityの描画方式を使ってるためです。
そのため、以下どちらかの描画モードに変更する必要があります。

**１）描画モードをDRAW_MESHに変更する**
　→　[複数Live2Dモデルの描画順を制御する](http://qiita.com/naotaro0123/items/7835138c6ab59921fec8)の「２．描画モードを変更しZ値で制御する」を参考に

**２）RenderTextureで描画する**
　→　Live2D SDKのRenderTextureプロジェクトを使う
　参考ページ：[UnityでLive2Dを簡単フェードインアウト](http://qiita.com/naotaro0123/items/9da45690d36347c73503)
# Trail Rendererを使う
１）まず空のGameObjectを作ります。名前はDragPointerとします

２）軌跡用のマテリアルを作ります。ShaderはParticles/Additiveにします
　![03.png](https://qiita-image-store.s3.amazonaws.com/0/15028/02d59510-b435-6b90-3105-6cfc6ac32935.png)

３）Trail Rendererをアタッチします。先ほど作ったマテリアルをセットし、軌跡の設定はこんな感じに
　![04.png](https://qiita-image-store.s3.amazonaws.com/0/15028/cfead340-7ebe-e10c-98b3-1466bad8a2c3.png)

４）DragPointerのGameObjectにスクリプトをアタッチします

```csharp:TrailRender.cs
using UnityEngine;
using System.Collections;

public class TrailRender : MonoBehaviour {

    void Update () {
        // マウス左クリック時
        if (Input.GetMouseButton(0))
        {
            Vector3 screenPosition = new Vector3(Input.mousePosition.x, Input.mousePosition.y, Camera.main.nearClipPlane + 1.0f);

            gameObject.transform.position = Camera.main.ScreenToWorldPoint(screenPosition);
        }
    }
}
```

はい、これで実行してマウスドラッグすると軌跡が完成です！
　![05_drag.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/58f7b062-2bcf-c60c-476d-4ac7b84f30e7.gif)


# Particle Systemを使う
Trailだと軌跡ラインしか表示されないので、Particleでやる方法です。

１）まずDragPointerのTrail Rendererのチェックは外しておきます
　![06.png](https://qiita-image-store.s3.amazonaws.com/0/15028/bf5265f3-cf2f-fa51-251c-7f6b9dd191f0.png)


２）Resources/Particlesフォルダを作り、ParticleSystemをprefab化したものをいれます
　（Trail_Starという名前にします）
　　そしてMaterialを作成し、以下の画像を選択します
　![star.png](https://qiita-image-store.s3.amazonaws.com/0/15028/68d59f39-a6e2-4c0b-43e1-004ae8161bbc.png)

　![07.png](https://qiita-image-store.s3.amazonaws.com/0/15028/85965e29-8c2d-a65e-ac47-5831a1b3a9db.png)



３）ParticleSystemの設定は以下のようにし、作ったMaterialを使います
　![08.png](https://qiita-image-store.s3.amazonaws.com/0/15028/38d1becb-1638-33b4-e841-813cbcb13fc4.png)
　Color over Lifetimeに関しては、以下のように最初と最後（クロスライダー部分）を透明度0%にします。
　そうする事でパーティクルのフェードインフェードアウトできます。
　![08_3.png](https://qiita-image-store.s3.amazonaws.com/0/15028/32e0bbf8-f4dc-e4b9-39ba-2219cdb6e394.png)

４）以下のスクリプトを作って、DragPointerにアタッチします

```csharp:TrailRender.cs
using UnityEngine;
using System.Collections;

public class TrailRender : MonoBehaviour {

    private GameObject Particle_prefab;
    private GameObject Particle;

    void Start(){
        Particle_prefab = (GameObject)Resources.Load("Particles/Trail_Star");
    }

    void Update () {
        if (Input.GetMouseButton(0))
        {
            Vector3 screenPosition = new Vector3(Input.mousePosition.x,
                                                 Input.mousePosition.y,
                                                 Camera.main.nearClipPlane + 1.0f);
            gameObject.transform.position = Camera.main.ScreenToWorldPoint(screenPosition);

            Vector3 vecHeartPos = gameObject.transform.position;
            Particle = (GameObject)Instantiate(Particle_prefab, vecHeartPos, Quaternion.identity);
            // 1秒後に消す
            Destroy(Particle, 1.0f);
        }
    }
}
```

これで実行してマウスドラッグするとParticleの軌跡が完成ですっ！
　![09_drag.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/ef6f4d8f-39ea-f159-99a7-11fea75a4dd7.gif)

Live2D使ったアプリがどのように実装されているかわかりませんが、Unityならだいたい同じようにやっているかと思います。

参考URL：[TrailRendererでマウス軌跡](http://kurihara-n.hatenablog.com/entry/2013/09/24/131540)