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

各種デバイス用の DPI スケーリング ルールを使用して自動的に UI をスケーリングする方法を説明します。

Windows
MacOS
Linux

プロジェクト用の UI の作業を行う場合、リリースするプロジェクト用にターゲットとするデバイスについてすでに考えている場合があります。実際に、プロジェクトをリリースするつもりのデバイスやプラットフォームが複数あるかもしれません。
Unreal Engine では、DPI Scaling ルールを使用することで解像度に依存しない UI の自動スケーリングが役立ちます。

DPI Scaling は、DPI Scale RuleDPI Curve を定義し、様々な解像度に合わせて UI エレメントを自動的にスケーリングします。 DPI Scale Rule はどのスケーリングを適用するかを決めるために使用するかを定義し、DPI Curve は定義可能な様々な解像度と個々のスケーリング値を含みます。 電話などのデバイスから迅速かつ簡単にタブレットまたは PC に UI 画面を他の画面解像度の範囲で変換することができます。

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

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 (画面サイズ)] ドロップダウン メニューからデバイス アスペクト比を選択します。

    screensize4.22.png

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

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

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

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

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

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

    OpenUserInterfaceSettings.png

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

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

    DPI_Scaling_rule.png

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

    Scale.png

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

    496_resolution.png

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

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

    1_resolution.png

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

    グラフを拡大縮小して、範囲を細かく、または大まかに表示できます。

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

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

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

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

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

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

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

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

    1079x1.66.png

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

    1090x1.66.png

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

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

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

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

Select Skin
Light
Dark

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信