English version is available here → README.md
TransitionFXは、Unreal Engine 5向けの軽量かつ高度なプロシージャル画面遷移システムです。 テクスチャを使用せず、SDF（Signed Distance Field）計算に基づいた高品質なトランジションを描画し、ブループリントからたった1つのノードで実装可能です。
TransitionFXは、インディーや小規模チームの開発者が、制作中のゲームに後から遷移エフェクトを簡単に追加できることを最優先に設計されています。専任のテクニカルアーティストがいなくても、追加のコードをほとんど書くことなく、ゲームにクオリティの高いトランジションを組み込むことを可能にすることを目標にしました。
エフェクトの種類・持続時間・イージング・音声など、遷移に関するすべての設定を Transition Preset（Data Asset） に集約しています。ブループリントからは Play Transition And Wait ノードにプリセットを渡すだけで動作します。
プログラマーが呼び出し側のコードを変えることなく、プリセットを差し替えるだけでエフェクトを変更できるため、チーム内の役割分担がしやすく、後からの調整も容易です。
TransitionFXでは一部のブループリントに Latent Action を採用しているため、コールバック関数やフラグ管理を自分で書く必要がありません。完了ピンが発火してから次の処理を繋ぐだけで処理の逐次実行が可能です。
bHoldAtMax と ReleaseHold を組み合わせると、「画面が完全に覆われた状態で一時停止 → バックグラウンドでレベルロード → 完了後に再開」というロード画面パターンも実現できます。
マネージャーは GameInstance Subsystem として動作するため、レベルをまたいでも状態が維持されます。フェードアウト→レベル遷移→フェードインという一連のシーケンスはプラグインが自動で管理します。入力ブロックやエフェクトのプール管理も自動で行われるため、既存のゲームに組み込んでも他のコードと干渉しにくい設計にしました。
- UE 5.5+ Native: 最新のUnreal Engine向けです。
- Procedural Rendering: テクスチャレスなSDFベースのレンダリングにより、あらゆる解像度で劣化せず、アスペクト比の歪みを自動的に補正します。
- Design-First Workflow:
- Data Asset Driven: トランジションパターン、持続時間、カーブを再利用可能な「プリセット」として管理します。
- Auto Input Blocking: トランジション中のプレイヤー入力ブロックを自動的に処理します。
- Pause Support: ゲームが一時停止中でもスムーズに動作します。
- Versatile Control:
- Forward / Reverse: トランジションモードを使用して、単一のプリセットで「フェードアウト」と「フェードイン」を制御します。
- Speed Control:
SetPlaySpeedによる動的な再生速度調整が可能です。
- Audio Integration: 効果音（SFX）をトランジションと同期させます。システムがオーディオのライフサイクルを管理し、開始時に再生し、トランジションがキャンセルされた場合は自動的に停止します。
- Event System:
OnTransitionStarted、OnTransitionCompleted、OnTransitionHoldStartedデリゲートを使用して、正確なゲームプレイロジックのタイミングを取得できます。 - Blueprint Support: クリーンで簡単なスクリプティングのためのLatent Actionノード（
PlayTransitionAndWait）が含まれています。
- エンジンバージョン: Unreal Engine 5.5 以降。それ以前のバージョン（5.3、5.4）は公式にはサポートされていません。
- プロジェクトタイプ: C++ プロジェクト・Blueprint-only プロジェクトの両方で動作します。通常の使用に C++ は不要です。
- レンダリング: PostProcess 対応のレンダリングパイプライン（Deferred または PostProcess 有効の Forward）が必要です。
- プラットフォーム: Windows）。コンソールおよびモバイルプラットフォームは公式にはテストされていません。SDF ベースのエフェクトは GPU 負荷が中心のため、低スペック環境でのパフォーマンスは変動する可能性があります。
全22種以上のトランジションエフェクトを確認できるサンプルプロジェクトを Releases ページ から入手できます。
動作環境: Unreal Engine 5.5、Windows、DX12 SM6、Visual Studio 2022（C++ によるゲーム開発ワークロード）
- Releases ページから
TransitionFX_SampleProject_vX.X.X.zipをダウンロードします。 - zip を任意のフォルダに展開します（スペースや非 ASCII 文字を含むパスは避けてください）。
TransitionFX_Dev.uprojectを右クリックし、「Visual Studio プロジェクトファイルを生成」 を選択します。TransitionFX_Dev.uprojectを開きます。モジュールの再ビルドを促すダイアログが表示されたら Yes をクリックしてください。- エディタが起動したら
L_ShowCaseレベルで Play を押すと、全エフェクトをインタラクティブに確認できます。
注意: 初回起動時はシェーダーコンパイルに数分かかる場合があります。
- Fab からプラグインを取得します。
- Unreal Editor で Window > Fab を開きます。
- ライブラリで
TransitionFXを見つけ、Add to Project をクリックします。 - エディタのプラグインウィンドウで
TransitionFXを有効にします。
- リリースページからプラグインをダウンロードします。
TransitionFXフォルダをプロジェクトのPluginsディレクトリに配置します。- エディタのプラグインウィンドウで
TransitionFXを有効にします。
コンテンツブラウザで右クリック > Miscellaneous (その他) > Data Asset。
TransitionPresetクラスを選択し、名前を付けます（例：DA_FadeBlack）。
- Effect Class:
PostProcessTransitionEffectを選択します。 - Transition Material:
M_Transition_Master（またはM_Transition_Iris、M_Transition_Diamondなど）を選択します。 - Default Duration: 秒単位で時間を設定します（例：
1.0）。 - Progress Curve: (任意) トランジションのイージングを制御するためのフロートカーブを設定します。
- bAutoBlockInput: トランジション中のプレイヤー入力を自動的に無効にするには
Trueに設定します。 - bTickWhenPaused: ゲームが一時停止中でもトランジションを再生するには
Trueに設定します。 - Priority: レンダリングの優先順位を設定します（デフォルト：1000）。
- Audio: (任意) 再生するサウンドアセットを割り当てます。ボリュームとピッチの制御が含まれます。
レベルブループリントまたはGameInstanceでPlay Transition And Waitノードを使用します。
-
Fade Out (Forward):
Play Transition And Wait(Preset:DA_FadeBlack, Mode:Forward, Speed:1.0, Invert:False) （完了後、画面は黒のままになります） -
Fade In (Reverse):
Play Transition And Wait(Preset:DA_FadeBlack, Mode:Reverse, Speed:1.0, Invert:False) （完了時にエフェクトは自動的に削除されます） -
Random Play (ランダム再生):
Play Random Transition And Waitノードを使用すると、プリセットの配列からランダムにトランジションを再生できます。
TransitionManagerSubsystem内の以下のイベントにバインドできます：
- OnTransitionStarted: トランジション開始時に発火します。
- OnTransitionCompleted: トランジション終了時に発火します。
- OnTransitionHoldStarted: トランジションが最大進行度（1.0）でホールド（一時停止）されたときに発火します（
bHoldAtMaxが true の場合）。 - OnTransitionProgressChanged: トランジション再生中、毎Tickイージング適用済みの進捗値（0.0〜1.0）をブロードキャストします。
- OnProgressThresholdReached:
AddProgressThresholdで登録した閾値を進捗が超えた際に1回だけ発火します。
ロード画面パターン・デバッグ・イベント活用など詳細な手順については クイックスタートガイド を参照してください。
Invert フラグは画面のどの領域を覆うかを反転させます。これは再生方向を逆にする Reverse モードとは 別の設定 です。
以下のプレビューはすべて Iris エフェクトで
Mode: Forwardに固定し、Invert フラグの違いのみを確認できるようにしています。
| Invert | 動作 | Preview |
|---|---|---|
| Off（デフォルト） | エフェクトの形状が画面を覆う方向に動作（内側へ閉じる）。通常のフェードアウト。 |  |
| On | エフェクトの形状が画面を開く方向に動作（外側へ広がる）。マスクが反転。 |  |
Tip:
Reverseモードを使わずにフェードインを実現したい場合はMode: Forward+Invert: Trueの組み合わせが使えます。
「フェード → アイリスオープン → ディゾルブイン」のような複合的な演出は、TransitionSequence データアセットで実現できます。
- Content Browser を右クリック >
Miscellaneous>Data Asset>TransitionSequenceを選択します。 Entries配列にエントリを追加します。各エントリは以下を指定できます：- Preset — 再生するトランジションのプリセット
- Mode — Forward / Reverse
- Duration Override — 0 の場合はプリセットの DefaultDuration を使用
- Invert — マスクを反転
- Delay After — 次のエントリに進む前の待機秒数
- Override Params — このエントリ専用のマテリアルパラメータオーバーライド
- （任意）
bLoopを有効にし、LoopCountで繰り返し回数を指定します。bLoop = trueかつLoopCount = 0は無限ループです。
Play Sequence And Wait Latent ノードを使用するか、サブシステムの PlaySequence を直接呼び出します。
- OnSequenceCompleted — シーケンス全体（ループを含む）が完了した際に発火します。
- OnSequenceStepChanged(int32 StepIndex) — 新しいエントリに進むたびに発火します。
- シーケンス内にレベル遷移は含められません。レベル遷移は
OpenLevelWithTransitionを単独で使用してください。 - 同時に再生できるシーケンスは 1 つだけ。新しいシーケンスを開始すると、直前のものは停止します。
- シーケンス再生中に
StartTransitionやOpenLevelWithTransitionを呼び出すと、シーケンスはキャンセルされます。
TransitionManagerSubsystemは、高度な制御のためにいくつかの呼び出し可能な関数を提供します：
- StopTransition(): 現在のトランジションを即座に停止します。
- ReverseTransition(bool bAutoStop): 再生方向を反転します（例：フェードアウトからフェードインへ）。
- SetPlaySpeed(float NewSpeed): 再生速度の乗数を動的に変更します。
- GetCurrentProgress(): 現在の進捗状況（0.0〜1.0）を返します。
- IsTransitionPlaying(): トランジションが現在アクティブな場合にTrueを返します。
- IsCurrentTransitionFinished(): トランジションが終了状態に達している場合にTrueを返します（ポーリングに便利です）。
| Effect Name | Description | Preview |
|---|---|---|
| Fade | 標準的な不透明度のフェード。シンプルで軽量です。 |  |
| Iris | 中央に向かって閉じるクラシックな円形ワイプ。アスペクト比補正済み。 |  |
| Flower Iris | 丸い花びらを持つ花形のアイリスワイプ。花びらの数や形状（鋭さ）を調整可能。 |  |
| Diamond | 中央に向かって閉じるダイヤモンド型のワイプ。レトロなスタイル。 |  |
| Diamond Band Wipe | 画面中央からひし形の帯（バンド）が拡大しながら割れ、元のシーンをスタイリッシュに表示するユニークなトランジション。 |  |
| Box | 中央から拡大するシンプルな正方形。基本的な幾何学的トランジション。 |  |
| Linear Wipe | 方向性のあるワイプ（角度調整可能）。画面の端から端まで正確に覆います。 |  |
| Sliding Doors | エレベーターやエアロックのドアのように、2枚のパネルが左右からスライドして中央で合流するワイプ。 |  |
| Corner Wipe | 指定した画面の角（四隅）を基準点とし、対角線に向かって領域が斜めに拡大していくワイプ。開始する角はパラメータ(0〜3)で自由に選択可能。 |  |
| Split | 画面中央から真っ二つに割れて開くスタイリッシュなワイプ。分割する角度（水平、垂直、斜めなど）を自由に調整可能です。 |  |
| Wavy Curtain | Linear Wipeに似ていますが、カーテンのような波打つ境界線を持つ方向性ワイプです。 |  |
| Radial Wipe | 時計のような放射状ワイプ。滑らかなエッジと開始角度の調整をサポート。 |  |
| Tiles | 画面がグリッド状に分割され、ブロックが中央から波のように拡大します。 |  |
| Polka Dots | 拡大する円（ハーフトーンパターン）の波が画面を覆います。ポップでモダンな外観。 |  |
| Blinds | スタイリッシュなストライプ/ベネチアンブラインド効果。ストライプが拡大・結合して画面を覆います。 |  |
| Spiral | 中央に渦巻く催眠的なスパイラル効果。回転スピンと開始角度を調整可能。 |  |
| Random Tiles | プロシージャルノイズを使用して、グリッドタイルがランダムな順序で現れる確率的なトランジション。 |  |
| Dissolve | プロシージャルノイズを使用し、画面が霧や砂のように溶けていく王道のトランジション。最小限のマージン設定によりリニアなアニメーションを実現。 |  |
| Wind | ストリークノイズを伴う方向性ワイプで、風が画像を吹き飛ばすような表現。 |  |
| Cross Wipe | 十字の形が中央から拡大し、画像を四隅に押しやって消滅させます。 |  |
| Texture Mask | グレースケールテクスチャを使用してトランジションの順序を決定します（黒=開始、白=終了）。パラメータオーバーライドによるカスタムマスクテクスチャをサポート。 |  |
| TV Switch Off | ブラウン管テレビの電源を切った時のように、画面が上下に潰れて横線になり、最後に中央の点に向かって消滅するレトロなエフェクトです。 |  |
| Hexagon | SFテイストのハニカム（六角形）ワイプです。画面中央から波紋のように、各セルが滑らかに縮小して消滅します。 |  |
| Triangle | 鋭利な三角形（ポリゴン）が画面中央から波紋のように縮小して消えていくスタイリッシュなワイプ。 |  |
| Checkerboard | 画面をチェッカーボード（市松模様）パターンで分割し、各タイルが拡大して画面を覆います。クラシックなレトロ風。 |  |
| Pixelate | 画面の解像度を徐々に下げていくピクセル化エフェクト。フェードアウトまでモザイクが進行します。 |
Texture Mask（テクスチャマスク）のヒント: マスクテクスチャをインポートする際は、正確な値を読み取るために sRGB のチェックを外し（sRGBオフ）、Compression Settings（圧縮設定）を Masks (no sRGB) または Grayscale に設定してください。
Transition PresetのEasingTypeプロパティを使用して、トランジションが時間とともにどのように進行するかを制御します。
以下のプレビューはすべて Iris エフェクトを使用して、イージングの違いを分かりやすく表示しています。
| Easing Type | Description | Preview |
|---|---|---|
| Linear | 一定速度（デフォルト）。単純なフェードに適しています。 |  |
| EaseInSine | ゆっくり開始し、滑らかに加速します。 |  |
| EaseOutSine | 速く開始し、滑らかに減速します。 |  |
| EaseInOutSine | 開始と終了で滑らかに加減速します。 |  |
| EaseInCubic | ゆっくり開始し、強く加速します。 |  |
| EaseOutCubic | 速く開始し、強く減速します。 |  |
| EaseInOutCubic | 両端で顕著なイージング。 |  |
| EaseInExpo | ほぼ静止から開始し、指数的に加速します。 |  |
| EaseOutExpo | 速く開始し、指数的に減速します。 |  |
| EaseInOutExpo | 両端でドラマチックなイージング。 |  |
| EaseOutElastic | トランジション終了時にエラスティック（弾性）オーバーシュート。 |  |
| EaseOutBounce | トランジション終了時にバウンス効果。 |  |
| Custom | 独自の FloatCurve アセットを指定できます。 |
— |
注: Transition Curve スロットは、Custom が選択された場合にのみ表示されます。
これらのカーブの視覚化については、easings.net を参照してください。
トランジションが初めて再生される際のフレームドロップ（ヒッチング）を防ぐために、Preload APIを使用してシェーダーを事前コンパイルする機能を用意しました。
問題: Unreal Engineはシェーダーをオンデマンドでコンパイルするため、トランジションエフェクトが初めて再生される際にわずかなスタッター（ヒッチング）が発生することがあります。
解決策: PreloadTransitionPresets 関数を利用してください。一時的な動的マテリアルインスタンスを作成し、ゲームプレイが開始する 前 にエンジンにシェーダーを準備させることができます。
使用方法:
GameInstance Init や Level BeginPlay などの安全な場所で PreloadTransitionPresets を呼び出します。
この関数に、最も頻繁に使用するトランジションプリセットの配列を渡します。
// C++ Example
TArray<UTransitionPreset*> MyPresets = { FadePreset, WipePreset };
TransitionSubsystem->PreloadTransitionPresets(MyPresets);これにより、GPUの準備を整えるために1フレーム分のダミーマテリアルが作成されます。
API リファレンス:
- 関数:
TransitionManagerSubsystem->PreloadTransitionPresets(TArray<UTransitionPreset*> Presets)
メモリを節約するためにトランジションアセットを非同期（例：ロード画面中）でロードしたい場合は、Async APIを使用します。 バックグラウンドでアセットをロードし、自動的にシェーダーのウォームアップを実行し、最後にコールバックイベントを発火させます。
使用方法:
- ソフトオブジェクト参照 (Soft Object References) の配列を
AsyncLoadTransitionPresetsに渡します。 - システムはバックグラウンドでそれらをロードし、シェーダーをウォームアップします。
- 準備が整うと
OnCompleteイベントが発火します。
ブループリントでの使用: ソフトオブジェクト参照の配列を渡します。ロジック（例：レベルを開く）を「On Complete」デリゲートピンに接続します。
// C++ Example
TArray<TSoftObjectPtr<UTransitionPreset>> SoftPresets = { ... };
TransitionSubsystem->AsyncLoadTransitionPresets(SoftPresets, FTransitionPreloadCompleteDelegate::CreateLambda([]()
{
UE_LOG(LogTransitionFX, Log, TEXT("Assets loaded and shaders ready!"));
}));API リファレンス:
- 関数:
AsyncLoadTransitionPresets(TArray<TSoftObjectPtr<UTransitionPreset>> Presets, FTransitionPreloadCompleteDelegate OnComplete)
- 同時再生は 1 つのみ: トランジションは一度に 1 つだけ再生できます。新しいトランジションを開始すると、現在アクティブなトランジションが置き換えられます。
- PostProcess ベースの描画: トランジションは PostProcess エフェクトとして描画されます。これにより：
- エフェクトはビューポート全体の上に描画されます（ビューポートに描画されるデバッグ UI を含む）。
- ビューポートの上に描画される UMG/Slate ウィジェットはトランジションで覆われません。
- トランジション中に UI を非表示にする必要がある場合は、
OnTransitionStartedデリゲートを使用してウィジェットの Visibility を手動で設定してください。
- マルチプレイヤー: TransitionFX は各クライアントでローカルに動作します。サブシステムは GameInstance ごとに実行されるため、本質的にクライアントサイドの処理です。レプリケーションやサーバーサイドのトランジション制御は組み込まれていません。
- パッケージング: プラグインウィンドウで有効になっていれば、パッケージビルドに自動的に含まれます。プラグイン参照を手動で管理している場合は、
.uprojectファイルのPluginsセクションにTransitionFXが含まれていることを確認してください。
今後のリリースで予定している機能です。コミュニティのフィードバックに応じて優先度は変更される場合があります。
- 新しいトランジションエフェクトを追加予定 — 具体的なエフェクトはユーザーフィードバックやクリエイティブな検討を踏まえて決定
- プリセットごとのトランジションカラー
High— プリセットにデフォルトカラーを設定可能にし、毎回パラメータオーバーライドを渡さずにフェード先の色（白など）を指定できるようにする - UMG ウィジェットレイヤートランジション
High— フルスクリーン UMG ウィジェットを使用した代替レンダリングパスにより、Slate/UMG UI レイヤーもトランジションで覆えるようにする - 原点オーバーライド
Medium— Iris、Diamond、Tiles などの中心ベースのトランジションを、任意のスクリーン座標から展開できるようにする - トランジションチェイン / シーケンス
Medium— DataAsset ベースでプリセットを連続再生し、任意でループも可能 - OnTransitionProgress デリゲート
Medium— 毎ティックの進捗値をブロードキャストするデリゲートにより、GetCurrentProgress()のポーリングを不要にする。AddProgressThresholdによる閾値コールバックも追加済み。 - 複数トランジションの同時再生
Low— マルチスロットマネージャーによる複数の独立したトランジションのレイヤリングをサポート
- エディタでのプリセットバリデーション
High— マテリアル未設定や必須パラメータProgressの欠落を警告する - エディタプリセットサムネイル
Medium— コンテンツブラウザで TransitionPreset アセットの静的サムネイルを自動生成し、一目で識別しやすくする - ブループリントプリセットピッカーウィジェット
Medium— ミニプレビュー付きのビジュアルドロップダウンで利用可能なプリセットを表示 - プールサイズの設定
Low— エフェクトプールの上限（現在は 3 にハードコード）をプロジェクト設定で公開する - シェーダー複雑度ティア
Low— パフォーマンスに敏感なプラットフォーム向けの簡略化されたマテリアルバリアント
- マテリアルパラメータリファレンス
High— 全ビルトインマテリアルの調整可能なパラメータを一覧にした専用ドキュメント - 動画チュートリアル: はじめに
Medium— インストール、プリセット作成、最初のトランジション再生のウォークスルー - 動画チュートリアル: レベル遷移ワークフロー
Medium—OpenLevelWithTransitionと HoldAtMax ローディング画面パターンのデモ - カスタムエフェクト作成ガイド
Medium— 新しい SDF マテリアルの作成とITransitionEffectでの組み込みのステップバイステップガイド - サンプルプロジェクト / サンプルマップ
Medium— 事前設定済みプリセットと一般的なパターン（ポーズメニュー、レベルセレクト、カットシーン遷移）のブループリント例を含むダウンロード可能なサンプル
TransitionFX では、ITransitionEffect インターフェースを実装することで独自のカスタムトランジションエフェクトを作成できます。
UObjectを継承しITransitionEffectを実装する新しい C++ クラスを作成します。- 必須メソッド
Initialize、UpdateProgress、Cleanup、SetInvert、SetParametersを実装します。 TransitionPresetでEffect Classをカスタムクラスに設定し、カスタムマテリアルを割り当てます。
リファレンス実装については ITransitionEffect.h と PostProcessTransitionEffect を参照してください。
いいえ。TransitionFX は UEFN が制限しているランタイム機能に依存しています。具体的には、SpawnActor による PostProcessVolume の動的スポーン、UMaterialInstanceDynamic の生成とパラメータ操作、GameInstance サブシステム、および C++ プラグインのロードが挙げられます。これらはアーキテクチャ上の根本的な依存関係であり、軽微な非互換性ではないため、ビルドフラグや条件付きコンパイルで解決できるものではありません。Epic Games が将来的に UEFN のランタイム機能を拡張した場合には、サポートの可能性を改めて検討します。
よくある質問とトラブルシューティングについては FAQ を参照してください。
MIT License