MENU
わかりやすいUnityゲーム開発解説
Unity実装方法検索
  1. ホーム
  2. Easy Effect Viewer の使い方

Easy Effect Viewer の使い方

日本語 | English

Unity Asset Store、Boothで販売している、Easy Effect Viewerの使い方の説明です。

目次

概要

Easy Effect Viewerは、プロジェクト内のParticleSystem、VFX Graphをサムネイル表示し、タグで整理・検索できるツールです。
エンジニア、エフェクトアーティスト、レベルデザイナーがエフェクトアセットを効率的に管理するために設計されています。

Unity標準のPrefabプレビュー機能では、エフェクトのプレビューを表示することが出来ないため、目当てのエフェクトをすぐに見つけることが出来ません。

通常のPrefabプレビューはサムネイル(画像でのプレビュー)が表示されない

本アセットを使用することで、目当てのエフェクトを探す手間を最大限効率化することが出来ます。

サムネイル付きのプレビュー

多くのUnity開発者は、エフェクトアセット等をプロジェクトに取り込み、その中から必要なアセットのみを抽出して自身のプロジェクトに使用されていると思います。
しかし、外部アセットには通常、多くのエフェクトが含まれており、その中から本当に必要なエフェクトだけをピックアップする作業は非常に手間です。

そこで、プロジェクトに必要なエフェクトにタグを付けて分類・管理し、多くのアセットの中から使いたいエフェクトだけを即座に見つけて使用する、というワークフローを想定したアセットとなっています。

主要機能は以下のとおりです。

1．プロジェクト内のエフェクトPrefabのサムネイル作成・表示機能
2．各エフェクトへのタグ付け機能
3．インスペクタ内Previewでのシミュレーション再生機能

更新履歴

Version 1.0.0

  • 初回リリース

対応環境

  • Unity バージョン: Unity 2019.4 以降
  • レンダーパイプライン:
    • Built-in Render Pipeline
    • URP
    • HDRP

クイックスタート（細かい説明は読まずに、とにかく触って覚えるタイプの人はこの章だけ読めばOK）

クイックスタート-1. エフェクトをサムネイル表示

メニューから Tools > EffectViewer > Viewer を選択してウィンドウを開きます。
Ctrl + Shift + E でも開きます。

Effect Viewer Windowを開く

ウィンドウを開くと、自動でプロジェクト内にあるParticleSystem、VFX Graphのエフェクトのサムネイルが自動で生成され、サムネイルの一覧で表示されます。
初回表示時はサムネイルの作成処理が走るため、少し時間がかかります。

サムネイル作成後のViewer

クイックスタート-2．タグの新規作成

左のレーンから、「+ New Tag」ボタンを押し、タグを作成が出来ます。

クイックスタート-3．タグの設定

タグを付けたいエフェクトを選択し、右クリックでタグの設定が可能です。
タグのレーンにドラッグアンドドロップでもタグの設定が出来ます。

クイックスタート-4．エフェクトをインスペクタ内でプレビュー表示する

該当のエフェクト選択すると、インスペクタ内でプレビューが再生されます。

Preview内の、「Thumbnail」ボタンを押すと、その時点のプレビューの内容をキャプチャして、EffectViewerのサムネイルに設定出来ます。

Effect Viewerのウィンドウの詳細説明

ここからは、EffectViewerの機能の詳細の説明です。

サムネイル自動生成機能

  • 以下のタイミングで、プロジェクト内のすべてのParticleSystem、VFX Graphのプレハブを自動検出し、サムネイルを自動で生成します。
    - プロジェクトをUnityで始めて開いた時
    - ParticleSystemを含むPrefabを追加したとき
  • サムネイルは、エフェクトを再生して一定時間経過後のタイミングをキャプチャした状態で機械的に作成します。サムネイルのキャプチャタイミングを変更する場合、設定から変更が可能です。

自動サムネイル再生成機能

すべてのサムネイルを再生成することが出来ます。
手動で作成したサムネイルを上書きしてしまうので、ご注意ください。

Tool Barのボタンの説明

  • タグ表示切替ボタン: 左端のタグアイコンでタグペインの表示/非表示を切替
  • 検索ボックス: 名前でエフェクトをフィルタリング出来ます
  • Refresh ボタン: プロジェクトを再スキャンします。Viewerを開いている状態で、エフェクトアセットを取り込んだ際などに使用します
  • Regen Thumbs： すべてのサムネイルを再生成します
  • 設定ボタン: 設定ファイルを開きます。設定可能な内容はこちらを参照ください。

サムネイル情報

各サムネイルには以下の情報が表示されます。

  • タグ: 割り当てられたタグが最大2つまで表示されます
  • エフェクトタイプアイコン:ParticleSystem または VFX Graph を示すアイコン
  • プレハブ名

サムネイルの操作

  • 右クリック: コンテキストメニューを表示
    • Add Tag: タグを追加
    • Instantiate at Origin: シーン原点(0,0,0)にエフェクトを生成
    • Show in Project: Projectウィンドウで表示

タグの追加

  1. ウィンドウ左側のサイドバーにある "+ New Tag" ボタンをクリック
  2. タグ名を入力
  3. Enterキーで確定

タグの割り当て

方法1: ドラッグ&ドロップ

  • エフェクトのサムネイルを左側のタグにドラッグ

方法2: 右クリックメニュー

  1. エフェクトを右クリック
  2. Add Tag を選択
  3. 割り当てたいタグを選択

タグでフィルタリング

左側のタグをクリックすると、そのタグが付いたエフェクトのみ表示されます。

タグの管理

タグを選択して右クリックを押すと、タグの名前変更、削除が行えます。

  • 名前変更: タグを右クリック → Rename
  • 削除: タグを右クリック → Delete（確認ダイアログが表示されます）

Effect Viewerへの表示対象とEffectViewerへの追加方法

Effect Viewerがスキャンする対象のエフェクトオブジェクトは以下のとおりです。

1．Prefabであること
2．Prefabの親オブジェクトにParticleSystemかVFX Graphコンポーネントがアタッチされていること

親オブジェクトにParticleSystemがアタッチされておらず、子オブジェクトだけにParticleSystemがアタッチされている場合はEffectViewerでは取得出来ません

上記の条件に当てはまらないPrefabであっても、ProjectWindowにて右クリックから、Effect Viewer > Add to Viewer を選択するとViewerに追加することが可能です。

手動で追加したPrefabは右上にアイコンが追加されます。

Inspector プレビュー

エフェクトのPrefabを選択すると、Inspector下部にインタラクティブなプレビューが表示されます。
※シーンビューのヒエラルキー内のPrefabを選択しても表示されません、プロジェクトウィンドウのPrefabを選択した状態でのみ、再生されます。

もしプレビューが見えない場合は、インスペクタウィンドウの最下部にある、以下の画像の赤枠部をクリックください。

再生コントロール

  • Play / Stop ボタン: エフェクトの再生・停止
  • Speed スライダー: 再生速度を調整（0.1x 〜 3.0x）
  • 再生時間表示: 現在の再生時間

カメラ操作

  • 右クリック + ドラッグ: カメラを回転（オービット）
  • 中クリック + ドラッグ: カメラを平行移動（パン）
  • マウスホイール: ズームイン・ズームアウト
  • Reset Camera ボタン: カメラ位置をリセット
  • Zoom スライダー: ズーム倍率を調整（0.1x 〜 3.0x）

表示設定

  • Background Color: プレビュー背景色を変更
  • Show Grid: グリッド平面の表示/非表示を切り替え

サムネイル更新

  • Thumbnail ボタン: 現在のプレビュー状態をキャプチャしてサムネイルを更新

4. サムネイル手動生成機能

  • インスペクタプレビュー内のThumbnail手動生成ボタンを使用すると、Previewに表示しているタイミングのサムネイル生成が可能です。
Thumbnail手動生成ボタン

設定のカスタマイズ

Viewer Settings

Tools > EffectViewer > Settings > Viewer Settings から設定画面を開くことが出来ます。

アイコンからも呼び出せます。

サムネイルキャプチャ設定

自動生成するサムネイルの設定を行うことができます。

自動生成サムネイルカメラ設定

  • Camera Pitch: カメラの上下角度
  • Camera Yaw: カメラの左右角度
  • Camera Distance Multiplier: カメラ距離の倍率（0.5x 〜 5.0x）
  • Background Color: 背景色（デフォルト: ダークグレー）

サムネイル生成設定

  • Thumbnail Size: サムネイルのサイズ（デフォルト: 128px）
  • Simulation Time: サムネを取得する際のエフェクトをシミュレートするタイミング。0.5の場合は0.5秒経過した時点でのサムネを生成します。（0 〜 5秒、デフォルト: 0.5秒）

Preview Settings

Tools > EffectViewer > Settings > Preview Settings で開きます。

アイコンからも呼び出せます。

プレビュー表示設定

  • Background Color: プレビュー背景色（デフォルト: グレー）
  • Show Grid: グリッド平面を表示するか（デフォルト: ON）
  • Camera FOV: カメラの視野角（10° 〜 90°、デフォルト: 30°）

カメラデフォルト設定

  • Camera Yaw: 初期カメラ左右角度（-180° 〜 180°、デフォルト: 0°）
  • Camera Pitch: 初期カメラ上下角度（-89° 〜 89°、デフォルト: -30°）
  • Camera Distance: 初期カメラ距離（1 〜 50、デフォルト: 12）

グリッド表示設定

Grid Material: グリッド用のマテリアルを設定出来ます。
以下2種類のマテリアルを用意していますが、お好きなマテリアルに切り替えることも可能です。

・M_EffectViewer_Grid：チェック柄のグリッドです
・M_EffeciViewer_TransparentGrid(デフォルト)：透明なグリッドです

M_EffectViewer_Grid
M_EffeciViewer_TransparentGrid

グリッドの表示設定

  • Grid Plane Size: グリッド平面のサイズ（1 〜 100）
  • Grid Height Offset: グリッドの高さオフセット（-10 〜 10）

サムネイルデータ、タグデータの保存先と仕様

サムネイル用の画像データ、タグの紐づけデータは実ファイルとして、以下のフォルダに保存される仕様です。

EffectViewer内のサムネイル、Prefabのサムネイルは、以下に保存されている画像データを読み取って表示する仕様になっています。
また、プレハブ削除時は、サムネイル画像とタグ紐づけ情報も自動で削除されます

  • タグデータ: Assets/EasyProjectViewer/EffectTagDatabase.asset（ScriptableObject）
  • サムネイル: Assets/EasyProjectViewer/ThumbnailImage/{GUID}.jpg

トラブルシューティング・FAQ

サムネイルの解像度を変更できますか？

A: はい。Tools > EffectViewer > Settings > Viewer Settings の Thumbnail Size で変更できます。変更後は [Regen Thumbs]ボタンから再生成が必要です。

大量のエフェクト（100個以上）がある場合、パフォーマンスは大丈夫ですか？

サムネイルは段階的に生成され、キャッシュされるため、初回スキャン後は高速に動作します。

プレハブを移動するとサムネイルは消去されますか?

いいえ。サムネイルは GUID で管理されているため、プレハブを移動しても維持されます。

VFX Graph と Particle System 両方を含むPrefabはどう扱われますか？

Particle System として扱われます（優先順位: ParticleSystem > VFX Graph）。

プロジェクト内のエフェクトのサムネイルが生成されず、EffectViewerにも表示されない

EffectViewerでの管理する対象の条件に合致しているかを確認してください。
条件に合致していない場合、手動でEffectViewerに追加してください。

EffectViewerの管理対象となる条件や、手動での追加手順はこちらに記載があります。

生成されたサムネイルが真っ黒になる

エフェクトが発生する前のタイミングでキャプチャした画像をサムネイルにしている可能性が高いです。
Viewer Settings のThumbnail Simulation Time を長めに設定してから、Regen Thumbs で再生成してください。

サムネイル再生成ボタン

VFX Graph がEffect Viewerに検出されない

VFX Graph は Prefab 化されたものだけがスキャン対象になります。
VFX Graph を Prefab 化してください。また、VFX Graph パッケージがインストールされているか確認してください。

Inspector プレビューが表示されない

Preview Settings の Enable Inspector Preview がオンになっているか確認してください。

Viewer から除外したエフェクトを Viewer に表示させたい

該当のPrefabを右クリックで選択し、「Add to Viewer」を選択ください。

サムネイルのサイズを変えたい

Viewer Settings の Thumbnail Size で変更できます。

設定変更後は、ツールバーの Regen Thumbs ボタンを押して再生成することでサイズ変更後の設定でサムネイルの再生成が可能です。

プレハブを移動したらサムネイルは消える？

サムネイルは GUID で管理されているので、移動しても消えません。

Particle System と VFX Graph の両方があるプレハブは？

Particle System として扱われます。

タグ一覧が表示されない

ツールバー左端のタグアイコンをクリックして表示を切り替えてください。

アセットインポート後の自動サムネイル生成を止めたい

Viewer Settings で Auto Generate Thumbnails をオフにしてください。

サポート

ご質問や不具合の報告は、以下までお問い合わせください：

関連アセット

120以上のエフェクト・シェーダーをまとめた、「Easy Custom VFX/UI」も発売中です。
本アセットを気に入っていただけましたら、こちらもぜひご覧ください。

ライセンス情報

このアセットは Unity Asset Store の標準ライセンスに従います。

主な条件
- Unity プロジェクトでの使用に限定
- 個人・法人・商用利用可能
- アセット単体の再配布禁止
- 成果物（ゲーム・アプリ）の配布は制限なし
- ソースコード改変可能
- アセットの貸し借り不可。当該アセットが無いと自身の開発作業が行えない方の数分のライセンスを購入ください
Unity
Asset Store Terms of Service and EULA Last updated: January 1, 2023 What’s changed: The “Unity Contracting Party”, the Unity legal entity that provides the Unity Asset Store is now Unity Technologie...

サードパーティライセンス

一部機能は MIT License のオープンソースコードを参考に制作しています。
詳細は同梱の THIRD-PARTY-NOTICES.md をご確認ください。

目次