様々なデバイス向けに UI をスケーリングする

プロジェクトの UI 作業をしている時に、既にプロジェクトをリリースするターゲット デバイスを念頭に入れている場合があります。実際、プロジェクトを複数のデバイスやプラットフォームでリリースする予定があるかもしれません。 Unreal Engine の DPI Scaling ルールを採用した解像度に依存しない UI の自動スケーリングを使用することで、複数のデバイスで適用可能な解像度スケールを作成することができます。

DPI Scaling は、DPI Scale Rule と DPI Curve を定義し、様々な解像度に合わせて UI エレメントを自動的にスケーリングします。 DPI Scale Rule は適用するどのスケーリングを指定し、DPI Curve は様々な解像度と個々のスケーリング値を含みます。 これらのオプションにより、幅広いデバイス解像度で、UI 画面を電話などのデバイスからタブレットまたは PC に迅速かつ簡単に変換できます。

この操作ガイドでは、アスペクト比スケールの初期設定を行ってから、別のデバイス比をスケールに追加します。

DPI Scale Rules と Curve の詳細については、「DPI スケーリング」を参照してください。

UI を 1 にスケールする

UI を正しくスケールするには、最初のデバイスに対してアスペクト比の範囲を指定し、スケールを「1」に設定します。

この操作ガイドでは First Person Template を使用しますが、必要に応じて他のプロジェクトを使用することもできます。

1. コンテンツ ブラウザ > [Add New (新規追加)] > [User Interface] を選択し、InteractiveWidget という DPI_Widget を作成します。

2. DPI_Widget で [Screen Size (画面サイズ)] ドロップダウン メニューからデバイス アスペクト比を選択します。

   

   この例では、この操作の 1 台目のデバイスとして Android フォンを使用します。

   [Screen Size (画像サイズ)] オプションは、承認されたサポート対象デバイスに基づいてバージョン リリースごとに UE4 内の自動アップデートを行います。

3. 左下角の解像アスペクト比と右下隅の DPI Scale を書き留めます。

   クリックしてフルサイズで表示

   通常、1.0 のスケーリングで UI エレメントで最適に機能し、DPI スケーリング ルールを使用してエレメントを拡大、縮小します。

4. 左下隅の 歯車 の形をしたアイコンをクリックして、[User Interface Settings (UI 設定)] ウィンドウを開きます。

   

   プロジェクトの プロジェクト設定 からユーザー インターフェース (UI) 設定にアクセスすることもできます。

5. DPI Scaling (DPI スケーリング) で好きな DPI Scale Rule (DPI スケール値) を選択してください。ここではビューポートの Shortest Side (最短の辺) を使用します。

   

6. DPI Curve で 1.0 の スケーリング 値を表すキーを見つけます。

   

7. 指定した Scale Rule に基づいて [Resolution (解像度)] を設定します。この例では最短の辺を使用しているので、解像度は 1080 から 496 にリセットされています。

   

   これが他のすべてのキーが関係を持つベースキーとなります。解像度の範囲をまだ設定していないため、496.000061 など、解像度の値が少し外れる場合があります。

8. グラフで別のキーを選択し、[Resolution] を「1」、スケールを「495」に設定します。

   

   異なる解像度の間で UI 要素が正しく設定されるように、この 2 つめのキーを使って指定解像範囲を UI が正しくレンダリングするように設定する必要があります。

   グラフを拡大縮小して、範囲内の表示粒度を調節できます。

9. DPI_Widget ブループリント に戻ると、デバイスの DPI Scale は「1.0」になっています (それまでなかった場合)。

新しいデバイス比を追加する

アスペクト比が初期設定されたので、別のデバイスに対するアスペクト比を追加できます。

1. [Screen Size] ドロップダウンから別のアスペクト比を選択します (タブレットや別のスマートフォン ブランド)。

   クリックしてフルサイズで表示

   ここでは iPhone を使用します。

2. DPI Curve のユーザー インターフェース設定に戻り、Shift キーを押したまま、左クリック して新しいキーを 2 つ作成します。

3. 1 つめのキーで、解像度を「1079」、スケールを「1.66」に設定します。

   

4. 2 つめのキーで、解像度を「1090」、スケールを「1.66」に設定します。

   

   これらのキーに対する新しいスケールを決定するために、最初のデバイスと新しいデバイスの DPI Scale Rule の差を見ます。この例では、新しいデバイスの最短の辺を最初のデバイスの最短の辺で割ります。つまり 828/496 となり、新しいスケールは 1.66 となります。

   さらにデバイスを追加する場合、新しいノードには標準スケールの 1079 x 1090 を常に適用します。Scale は新しいデバイスごとに変わる変数です。

DPI Widget には Andriod フォンと iPhone が含まれているはずです。この手順を繰り返して、新しいデバイスをウィジェット スケールに追加します。

ウィジェットを配置していて、それらが画面から外れてしまう場合は、ビューポート内の場所にウイジェットを固定する必要があります。ウィジェットの固定方法については「アンカー」を参照してください。