ゲーム開発
Unity
UnrealEngine
C++
Blender
ゲーム数学
ゲームAI
グラフィックス
サウンド
アニメーション
GBDK
制作日記
IT関連
ツール開発
フロントエンド関連
サーバサイド関連
WordPress関連
ソフトウェア設計
おすすめ技術書
音楽
DTM
楽器・機材
ピアノ
ラーメン日記
四コマ漫画
その他
おすすめアイテム
おもしろコラム
  • ゲーム開発
    • Unity
    • UnrealEngine
    • C++
    • Blender
    • ゲーム数学
    • ゲームAI
    • グラフィックス
    • サウンド
    • アニメーション
    • GBDK
    • 制作日記
  • IT関連
    • ツール開発
    • フロントエンド関連
    • サーバサイド関連
    • WordPress関連
    • ソフトウェア設計
    • おすすめ技術書
  • 音楽
    • 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

      関連記事
      【Unity】Timeline × Excelでスライドショーを効率よく制作する
      2024-10-31
      【書籍紹介】「コンピュータグラフィックス」に出てくる用語をまとめる【CGエンジニア検定】
      2024-07-13
      【UE5】Niagara SimulationStageによるシミュレーション環境構築
      2024-05-30
      【Unity】Boidsアルゴリズムを用いて魚の群集シミュレーションを実装する
      2024-05-28
      【Unity】GoでのランキングAPI実装とVPSへのデプロイ方法についてまとめる【Go言語】
      2024-04-14
      【Unity】第二回 Wwiseを使用したサウンド制御 〜インタラクティブミュージック編〜
      2024-03-30
      【Unity】第一回 Wwiseを使用したサウンド制御 〜基本動作編〜
      2024-03-30
      【Unity】第二回 CRI ADXを使用したサウンド制御 〜インタラクティブミュージック編〜
      2024-03-28