【Unity】ユニティちゃんの走った経路を足跡で表示する

ゲームで「地に足の着いた感」を出すには影を使うのが一般的ですが、面白い表現として足跡を使うことがあります。この記事ではUnityで「それっぽい」足跡を表示する方法を紹介します。

f:id:nn_hokuson:20170810201546p:plain

記事の内容は次のとおりです。

ステージをセッティングする
足跡のテクスチャを用意する
Unityちゃんの通った経路に足跡を生成する
足跡がだんだん薄れていくようにする
まとめ

ステージをセッティングする

ここでは次のようなステージを作成し、NavMeshを使ってUnityちゃんを走らせるようにします。

f:id:nn_hokuson:20170810201614p:plain:w550

NavMeshを使ってUnityちゃんを走らせる方法は次の記事を参照ください。

nn-hokuson.hatenablog.com

足跡のテクスチャを用意する

片足づつのテクスチャを使うと配置するのが大変になるので、今回は両足ぶんのテクスチャを用意します。足跡の中点がテクスチャの中心に来るようにします。

f:id:nn_hokuson:20170810201642p:plain:w100

続いてこのテクスチャをシーンビューに配置します。ヒエラルキーウインドウでCreate -> 3D Object -> Planeを選択して、画面上に地面と平行になるように配置してください。

f:id:nn_hokuson:20170810201656p:plain:w500

足跡テクスチャをPlaneにドラッグ＆ドロップし、ShaderのRendering Modeを「Fade」に設定します。また、Smoothnessは「0」に設定しておきます。

f:id:nn_hokuson:20170810201708p:plain:w300

Standard ShaderのFadeとTransparentの違いは次の通りです。

オプション	意味
Transparent	ガラスのような透明感（光の具合によっては不透明）
Fade	どこから見ても透明

ヒエラルキーウインドウからプロジェクトウィンドウに足跡のテクスチャをドラッグ＆ドロップして足跡のPrefabをつくります。名前はfootPrintPrefabにしておきます。

f:id:nn_hokuson:20170810135633j:plain

Unityちゃんの通った経路に足跡を生成する

Unityちゃんの通った経路に足跡を生成していくスクリプトを作りましょう。プロジェクトウィンドウで右クリックし、Create -> Script -> C# Scriptを選択してください。

スクリプトが作れたら名前を「UnitychanController」にして、次のスクリプトを入力してください。

public class UnitychanController : MonoBehaviour 
{
    public GameObject footPrintPrefab;
    float time = 0;

    void Update()
    {
        this.time += Time.deltaTime;
        if (this.time > 0.35f)
        {
            this.time = 0;
            Instantiate (footPrintPrefab, transform.position, transform.rotation);
        }
    }

Updateメソッドの中で一定時間ごとに、ユニティちゃんの向いている方向に合わせて足跡Prefabのインスタンスを生成しています。

UnitychanControllerをユニティちゃんにドラッグ＆ドロップして、アタッチしてください。続けて、アタッチしたスクリプトのfootPrintPrefabの欄に、足跡Prefabの実態をセットしてください。

f:id:nn_hokuson:20170810135814j:plain

これで、ユニティちゃんの歩いた経路に従って足跡が表示されるようになりました。実行してみてください。

f:id:nn_hokuson:20170810201813g:plain

足跡がだんだん薄れていくようにする

今のままでも良いですが、徐々に足跡が薄れていくように変更してみます。

プロジェクトウィンドウで右クリックし、Create -> Script -> C# Scriptを選択して「FootPrintController」を作り、次のスクリプトを入力してください。

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

public class FootPrintController : MonoBehaviour 
{
	void Start () {
        StartCoroutine (Disappearing ());
	}
	
    IEnumerator Disappearing()
    {
        int step = 90;
        for (int i = 0; i < step; i++)
        {
            GetComponent<MeshRenderer> ().material.color = new Color (1, 1, 1, 1 - 1.0f * i / step);
            yield return null;
        }
        Destroy (gameObject);
    }
}