【Unity】Motion Blurを使って影分身っぽいのを作る【Post Processing】

Unity
マイケル
マイケル
みなさんこんにちは!
マイケルです!
エレキベア
エレキベア
こんにちクマ〜〜
マイケル
マイケル
突然ですがみなさんはこのようなキャラクターを・・・
ScreenShot 2021 04 28 10 25 35
マイケル
マイケル
影分身させてみたい と思ったことはありませんか?
エレキベア
エレキベア
(無いクマ・・・。)
マイケル
マイケル
今回は ブラー効果を使って分身のような効果 をつけてみます!
簡単にできるのでやってみましょう!
エレキベア
エレキベア
まあ面白そうだしやってみるクマ〜〜〜
スポンサーリンク

Post Processingを導入する

マイケル
マイケル
Unityでブラー効果を付けるため、今回は Post Processing というアセットを使います!
Post Processingとは
  • Unityでポストプロセス(※1)を実装するためのアセットのこと
  • ※1)カラー補正やブラー効果等、カメラの画像バッファにフィルターやエフェクトを適用する処理

エレキベア
エレキベア
いろいろな画面の効果がかけれるクマね
マイケル
マイケル
それじゃ早速導入してみよう!

Post Processingの導入

マイケル
マイケル
Post ProcessingはUnityに内臓されているので導入は簡単!
Package ManagerからPost Processingを選んでインストールする だけです!
ScreenShot 2021 04 28 12 08 50
↑PackageManagerからインストール
エレキベア
エレキベア
これは簡単クマ〜〜〜

Post Processingの初期設定

マイケル
マイケル
インストールしたら使うための設定をしていきましょう!


・PostPricessingVolume用のレイヤーを作成する。
 ※レイヤー名は何でもOK

ScreenShot 2021 04 28 12 13 19


・Cameraオブジェクトに「Post-process Layer」コンポーネントをアタッチし、
 レイヤーに作成したPostPricessingVolume用のレイヤーを設定する。

ScreenShot 2021 04 28 12 13 48


・PostPricessingVolumeのGameObjectを作成し、
 「Post-process Volume」コンポーネントをアタッチする。
 その後、ProfileのNewボタンを押下し、Profileを作成する。
 ※シーンと同フォルダ内に作成される。

ScreenShot 2021 04 28 12 15 05
マイケル
マイケル
以上で設定は完了です!
エレキベア
エレキベア
簡単クマ〜〜〜〜

影分身を作る

マイケル
マイケル
それじゃブラー効果をつけてみよう!

Motion Blurを付与する

マイケル
マイケル
Post-process Volume内の「Add effect」ボタンを押下し、「Motion Blur」を選択しましょう!
ScreenShot 2021 04 28 12 28 26
↑Motion Blurの追加
マイケル
マイケル
Motion Blurで設定できる項目は下記の通り!
今回はこのように設定します!


Shutter Angle:シャッターの角度
Sample Count:サンプリング数

ScreenShot 2021 04 28 12 28 34
↑シャッター角度、サンプリング数の設定
マイケル
マイケル
これでブラー効果がかかるようになっているはずです!
試しにカメラを動かしてみましょう!
01 camera move
マイケル
マイケル
このように早く動かすとブラーがかかっていることが分かります!
Motion Blurのオンオフを切り替えて比べてみましょう!

影分身スクリプトの作成

マイケル
マイケル
これを利用してカメラを自動で揺らして分身っぽくしてみます!
下記スクリプトをCameraオブジェクトにアタッチしてましょう!
(※カメラのX位置は0として作っています。)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// カメラ操作クラス
/// </summary>
public class CameraController : MonoBehaviour
{
    public GameObject hakasePrefab;       // ハカセPrefab
    private bool doShadow = false;        // 影分身実行フラグ
    private float moveVec = -1.0f;        // 移動方向
    private float moveMaxSpeed = 20.0f;   // 移動最高速度
    private float moveBaseSpeed = 10.0f;  // 移動初期速度
    public float moveSpeed;               // 移動速度

    /// <summary>
    /// 開始処理
    /// </summary>
    void Start()
    {
        moveSpeed = moveBaseSpeed;
    }

    /// <summary>
    /// 更新処理
    /// </summary>
    void Update()
    {
        // カメラ位置の取得
        Vector3 pos = transform.position;
        // 影分身実行フラグで処理を分ける
        if (doShadow)
        {
            // *** 影分身実行時 ***
            // 向きを反転
            if (pos.x >= 0.35f)
                moveVec = -1.0f;
            else if (pos.x <= -0.35f)
                moveVec = 1.0f;
            
            // 移動
            pos.x += moveSpeed * Time.deltaTime * moveVec;

            // スピードを加算
            if (moveSpeed >= moveMaxSpeed)
                moveSpeed = moveMaxSpeed;
            else
                moveSpeed += 3.0f * Time.deltaTime;
        }
        else
        {
            // *** 影分身未実行時 ***
            // 0固定
            pos.x = 0.0f;
            // 初期化
            shadowTime = shadowBaseTime;
            moveSpeed = moveBaseSpeed;
        }

        // カメラ位置を再設定
        transform.position = pos;
    }

    /// <summary>
    /// 影分身ボタン押下処理
    /// </summary>
    /// <param name="doShadow">影分身実行フラグ</param>
    public void PushShadowButton(bool doShadow)
    {
        // 影分身実行フラグの切り替え
        this.doShadow = doShadow;
    }
}
マイケル
マイケル
ボタン押下で実行フラグを切り替えるようにしています!
早速動かしてみましょう!
02 bunshin 1
↑分身っぽい動きをするハカセ
マイケル
マイケル
このように分身してるっぽく見えます!!
エレキベア
エレキベア
(なんだこれはクマ・・・。)
マイケル
マイケル
さっそくジャギィに見せてみよう!
動画を送ってっと・・・。


ポコン♪(返信の音)

IMG 8846
マイケル
マイケル
・・・。
エレキベア
エレキベア
(その通りクマ・・・。)

増殖させる

マイケル
マイケル
本当の影分身を見せてやるぜ!!
エレキベア
エレキベア
(何をする気クマ・・・。)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// カメラ操作クラス
/// </summary>
public class CameraController : MonoBehaviour
{

・・・略・・・

    private float shadowBaseTime = 10.0f; // 増殖開始時間(定数)
    private float shadowTime;             // 増殖開始時間

    /// <summary>
    /// 開始処理
    /// </summary>
    void Start()
    {
        shadowTime = shadowBaseTime;

・・・略・・・

    }

    /// <summary>
    /// 更新処理
    /// </summary>
    void Update()
    {

・・・略・・・

        // 影分身実行フラグで処理を分ける
        if (doShadow)
        {

・・・略・・・

            // ハカセ増殖タイム
            shadowTime -= 3.0f * Time.deltaTime;
            if (shadowTime <= 0.0f)
            {
                GameObject hakaseClone1 = Instantiate(hakasePrefab, new Vector3(3.0f, -1.2f, 0.0f), Quaternion.Euler(0.0f, 180.0f, 0.0f));
                GameObject hakaseClone2 = Instantiate(hakasePrefab, new Vector3(-3.0f, -1.2f, 0.0f), Quaternion.Euler(0.0f, 180.0f, 0.0f));
                Destroy(hakaseClone1, 2.0f);
                Destroy(hakaseClone2, 2.0f);
            }
        }

・・・略・・・

    }

    /// <summary>
    /// 影分身ボタン押下処理
    /// </summary>
    /// <param name="doShadow">影分身実行フラグ</param>
    public void PushShadowButton(bool doShadow)
    {

・・・略・・・

        // 影分身終了後にハカセ(本物)の位置を戻す
        if (!doShadow)
            Invoke("InitHakasePosition", 3.0f);
    }

    /// <summary>
    /// ハカセ位置初期化
    /// </summary>
    public void InitHakasePosition()
    {
        // ハカセ(本物)を元の位置に戻す
        hakasePrefab.transform.position = new Vector3(0.0f, -1.4f, -1.85f);
        hakasePrefab.transform.rotation = Quaternion.Euler(0.0f, 180.0f, 0.0f);
    }
}
マイケル
マイケル
ハカセ増殖タイムをスクリプトに追加して実行!!!
04 bunshin 3
↑ついに分身したハカセ
マイケル
マイケル
WWWWWWWWWW
エレキベア
エレキベア
(カオスクマ・・・。)

おわりに

マイケル
マイケル
というわけで今回はブラーを使ってみました!
どうだったかな?
エレキベア
エレキベア
思ってたよりも簡単に使えて便利だと思ったクマ〜〜〜
マイケル
マイケル
Post Processingはクオリティを上げるのに色々使えそうだね!
みなさんも自分のキャラを分身させてみたい時は使ってみてくださいね!
エレキベア
エレキベア
(絶対使い方間違ってるクマ・・・。)
マイケル
マイケル
それでは今日はこの辺で!
アデュー!!
エレキベア
エレキベア
クマ〜〜〜〜〜

【Unity】Motion Blurを使って影分身っぽいのを作る【Post Processing】 〜完〜

[参考文献]
ポストプロセスの概要 – Unityマニュアル
【Unity】ポストプロセシング(Post-Processing)を使ってプロ級の画面に

コメント