1. はじめに

この記事はUnreal Engine (UE) Advent Calendar 2025の24日目の記事です。

この記事では、円形ワイプ演出を題材に、ポストプロセスマテリアルでアスペクト比補正を行う方法を解説します。

2. 対象者・前提環境

対象： UE5初学者。具体的にはエディタで基本的な操作ができ、マテリアルエディタを少し触ったことがある方
環境： UE5.x

執筆者はUE5.5.4で動作確認を実施しました。
また、UE5.xの機能に依存しないため、UE4.xでも同様なはずです。

3.　円形ワイプマテリアル作成

今回のマテリアルを作成。名前は「PP_Screen_Wipe」にしました

マテリアルドメインをPost Processに変更

ノードは以下の画像のように組んでください

ノード構成の説明

画像内コメントでも補足していますが、
この基本的なワイプエフェクトは、3つのセクションで構成されています：

1. 画面のUV座標から中心までの距離を計算（グレーのセクション）

ScreenPositionノード：画面のUV座標を取得します（ViewportUVを使用）
Add(-0.5)：UV座標の中心を(0.5, 0.5)から(0, 0)に移動
Length：中心からの距離を計算し、円形のグラデーションを作成
- ※この段階では画面比率により楕円になります

2. アニメーション（水色のセクション）

TimeWithSpeedVariable：時間経過を取得
Stepノード：距離の値と比較して、0か1の値を出力（境界線を作成）
- Yピン：1で求めた距離
- Xピン：時間による半径の変化

3. 画面との合成（ピンクのセクション）

SceneTexture:PostProcessInput0：元の画面を取得
Multiply：2で作成した白黒マスクと元の画面を掛け合わせて最終出力

これをエミッシブカラーピンに接続します。

作成後、プレビュー画面を画面いっぱいに広げてください。

見た目は以下の用になるはずです

プレビュー画面の縦横比に応じて引き伸ばされてしまいました。

おそらく、このような演出では正円を期待されることが多いはずです。

4. アスペクト比を補正するマテリアル計算

まず、なぜ引き伸ばされるのかを数式で整理します。
原因は、「UVの『1』が指す物理的な長さは、横と縦で違うから」　です。
16:9の画面では、横方向の 1.0 は縦方向の 1.0 よりも約1.77倍長くなっています。
これを正円にするには、「横方向のスケールを縦に合わせて広げてあげる」　という考え方をします。

補正の考え方

(例)16:9の画面の場合：

アスペクト比 = 横幅 ÷ 縦幅 = 16 ÷ 9 ≒ 1.777...
補正後のUV.x = UV.x × アスペクト比

こうすることで、内部的な座標系が 1.777 （横）と 1.0 （縦）になり、物理的な距離の比率が「正方形の空間」として扱えるようになります。この空間で Length を計算すれば、歪みのない正円が生まれます。

5. 実装して正円にしよう

では、マテリアルにアスペクト比補正を組み込みましょう。

実装のポイント

ViewSizeノードから画面の解像度を取得し、X / Y でアスペクト比を算出します
計算したアスペクト比を、中心をずらした後の UVのR成分（横方向）にだけ掛け合わせます（Multiply）
【重要】 アニメーション（半径）側にもアスペクト比を掛け合わせます
座標系を横に広げた（UV.xを1.777倍にした）ため、「半径1.0」が指す範囲も横方向に1.777倍されています。画面の端（元のUV座標で1.0）まで届かせるには、半径も同じアスペクト比を掛けて1.777にする必要があります。

その変更を適用したノードの全体像は以下の通りです。

確認してみましょう。

画面比率に負けない、綺麗な正円になりました。

6. おわりに

この記事は、私が独学でUE5のマテリアルを学んでいた際に詰まった経験から生まれました。

円形ワイプを実装したとき、画面比率で楕円になってしまい「なぜ？」と悩んだことを覚えています。調べていくうちに、UV座標の正規化とアスペクト比の関係という重要な概念に気づくことができました。

ポストプロセスマテリアルでは、このアスペクト比補正が必要になる場面が他にも多くあります。この記事が、同じ壁にぶつかった方の一助となれば嬉しいです。

明日のUnreal Engine Advent Calendar 2025、25日目の記事、楽しみですね！