ゲーム開発
Unity
UnrealEngine
C++
ゲーム数学
ゲームAI
サウンド
アニメーション
GBDK
制作日記
3DCG
Houdini
Blender
USD
グラフィックス
テクノロジ
ツール開発
フロントエンド関連
サーバサイド関連
ソフトウェア設計
ハードウェア関連
おすすめ技術書
音楽
DTM
楽器・機材
ピアノ
その他
都会のエレキベア
ラーメン日記
四コマ漫画
おすすめアイテム
おもしろコラム
  • ゲーム開発
    • Unity
    • UnrealEngine
    • C++
    • ゲーム数学
    • ゲームAI
    • サウンド
    • アニメーション
    • GBDK
    • 制作日記
  • 3DCG
    • Houdini
    • Blender
    • USD
    • グラフィックス
  • テクノロジ
    • ツール開発
    • フロントエンド関連
    • サーバサイド関連
    • ソフトウェア設計
    • ハードウェア関連
    • おすすめ技術書
  • 音楽
    • DTM
    • 楽器・機材
    • ピアノ
  • その他
    • 都会のエレキベア
    • ラーメン日記
    • 四コマ漫画
    • おすすめアイテム
    • おもしろコラム
  1. ホーム
  2. 20210428_01

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

Unityグラフィックス
2021-04-28

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

Post Processingを導入する

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

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

Post Processingの導入

マイケル
マイケル
Post ProcessingはUnityに内臓されているので導入は簡単!
Package ManagerからPost Processingを選んでインストールする だけです!

↑PackageManagerからインストール
エレキベア
エレキベア
これは簡単クマ〜〜〜

Post Processingの初期設定

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


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


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


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

マイケル
マイケル
以上で設定は完了です!
エレキベア
エレキベア
簡単クマ〜〜〜〜

影分身を作る

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

Motion Blurを付与する

マイケル
マイケル
Post-process Volume内の「Add effect」ボタンを押下し、「Motion Blur」を選択しましょう!

↑Motion Blurの追加
マイケル
マイケル
Motion Blurで設定できる項目は下記の通り!
今回はこのように設定します!


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


↑シャッター角度、サンプリング数の設定
マイケル
マイケル
これでブラー効果がかかるようになっているはずです!
試しにカメラを動かしてみましょう!
マイケル
マイケル
このように早く動かすとブラーがかかっていることが分かります!
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;
    }
}
マイケル
マイケル
ボタン押下で実行フラグを切り替えるようにしています!
早速動かしてみましょう!

↑分身っぽい動きをするハカセ
マイケル
マイケル
このように分身してるっぽく見えます!!
エレキベア
エレキベア
(なんだこれはクマ・・・。)
マイケル
マイケル
さっそくジャギィに見せてみよう!
動画を送ってっと・・・。


ポコン♪(返信の音)

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

増殖させる

マイケル
マイケル
本当の影分身を見せてやるぜ!!
エレキベア
エレキベア
(何をする気クマ・・・。)
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);
    }
}
マイケル
マイケル
ハカセ増殖タイムをスクリプトに追加して実行!!!

↑ついに分身したハカセ
マイケル
マイケル
WWWWWWWWWW
エレキベア
エレキベア
(カオスクマ・・・。)

おわりに

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

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

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


Unityグラフィックス
2021-04-28
記事をSNSで共有する
X
Facebook
LINE
はてなブックマーク
Pocket
LinkedIn
Reddit

著者の各種アカウント
フォローいただけると大変励みになります!
X
GitHub

関連記事
【Three.js】カスタムシェーダーでトゥーン+背面法アウトラインを実装する
2026-02-15
【Three.js】Three.js入門 - シーン構築・モデル読み込み・ポストプロセスまで
2026-02-15
【Houdini21.0】3Dビル群っぽいブログヘッダー画像を作成する
2026-01-10
【Houdini21.0】Solaris徹底入門:USD構成を意識した基本的な作業フローについてまとめる
2025-12-31
【ゲーム数学】第十回 p5.js(+α)で学ぶゲーム数学「複素数とフラクタル」
2025-11-02
【プロシージャル】Pythonで学ぶ波動関数崩壊アルゴリズム(Wave Function Collapse)
2025-06-22
【UE5.5】Nanite、Lumen、VSMの概要についてまとめる
2025-05-12
【Unity】Timeline × Excelでスライドショーを効率よく制作する
2024-10-31