Edited at

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

More than 3 years have passed since last update.

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


開発環境

・Live2D_SDK_Unity_2.1.00_beta_8_jp

・Unity 5.0.1f1

・Live2Dモデル(noshipuさんのベルツノさんモデルをお借りました)


軌跡のやり方

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

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

・Trail Rendererを使う

・Particle Systemを使う

Live2Dの場合、どちらの方法でも軌跡が半透明オブジェクトだとLive2Dモデルの後ろに描画されます

 01_drag.gif

つまり、半透明オブジェクトでなければLive2Dモデルの前に表示されます。

<透明でないオブジェクトの場合>

02_1.png

<半透明のオブジェクトの場合>

02_2.png

これはLive2DがDrawMeshNowというUnityの描画方式を使ってるためです。

そのため、以下どちらかの描画モードに変更する必要があります。

1)描画モードをDRAW_MESHに変更する

 → 複数Live2Dモデルの描画順を制御するの「2.描画モードを変更しZ値で制御する」を参考に

2)RenderTextureで描画する

 → Live2D SDKのRenderTextureプロジェクトを使う

 参考ページ:UnityでLive2Dを簡単フェードインアウト


Trail Rendererを使う

1)まず空のGameObjectを作ります。名前はDragPointerとします

2)軌跡用のマテリアルを作ります。ShaderはParticles/Additiveにします

 03.png

3)Trail Rendererをアタッチします。先ほど作ったマテリアルをセットし、軌跡の設定はこんな感じに

 04.png

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


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


Particle Systemを使う

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

1)まずDragPointerのTrail Rendererのチェックは外しておきます

 06.png

2)Resources/Particlesフォルダを作り、ParticleSystemをprefab化したものをいれます

 (Trail_Starという名前にします)

  そしてMaterialを作成し、以下の画像を選択します

 star.png

 07.png

3)ParticleSystemの設定は以下のようにし、作ったMaterialを使います

 08.png

 Color over Lifetimeに関しては、以下のように最初と最後(クロスライダー部分)を透明度0%にします。

 そうする事でパーティクルのフェードインフェードアウトできます。

 08_3.png

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


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

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

参考URL:TrailRendererでマウス軌跡