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

様々なデバイス向けに DPI スケーリング ルールを使用して自動的に UI をスケーリングする方法を説明します。

Windows
MacOS
Linux
このページ中

この操作ガイドに進む前に、UMG UI デザイナ の概要を理解することをお勧めします。

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

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

この操作ガイドでは、シンプルな UI 画面用の DPI スケーリング ルールをセットアップし、複数デバイスにデプロイできるようにします。

ステップ

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

  1. Widget ブループリント を作成して開きます。

  2. [デザイナ] タブで、Visual Designer ウィンドウの右下隅にある現在の DPI Scale をメモします。

    WidgetBlueprint.png

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

  3. 歯車 の形をしたアイコンをクリックして、[User Interface Settings] ウィンドウを開きます。

    OpenUserInterfaceSettings.png

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

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

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

    Scale.png

    このプロジェクトでは 1080 が 1 スケールになるようにセットアップしましたが、これを変更します。

  6. [デザイナ] タブの Widget ブループリント に戻り、 [Screen Size] ドロップダウン メニューをクリックし、[Apple iPhone 6 (Portrait)] を選択します。

    iPhone6Screensize.png

    このガイドのターゲット デバイスは、iPhone 6 であることを示しています。各自のプロジェクトで必要に応じてお好きなものを使用してください。

    画面サイズを選択すると、Visual Designer ウィンドウが更新し、使用する画面サイズが反映されるのがわかります。

    VisualDesignerUpdated.png

    Shortest Side (最短の辺) を使うという DPI スケーリング ルールでは、iPhone 6 (Portrait) の最短の辺は 750 であるため、これが 1 スケールになります。

  7. DPI Curve のユーザー インターフェース設定に戻り、1 スケールに対して 解像度750 に設定します。

    UpdatedResolution1.png

    入力した値が調整され、 750.000061 のようなものが表示されるのがわかります。 これは、様々な解像度間で移動するにつれて一部の UI エレメントをごくわずか動かすため、UI に対して 1 スケールを使用する解像度範囲を指定します。

  8. 1 スケールの 解像度749 に設定します。

  9. Shift キーを押したまま 左クリック して、グラフ内でもうひとつキーを作成して、解像度760 に設定し、スケール1.0 に設定します。

    SecondKeyAdded.png

    上の図では、ズームインし、範囲が見えるようにしました。適切な状態になるまでこの範囲を大きくしたり、小さくしたりすることができます。

  10. Widget ブループリント に戻ると、iPhone 6 (Portrait) の DPI Scale が 1.0 になっているのがわかります。

    UpdatedScale.png

  11. Screen Size ドロップダウンを選択し、別のアスペクト比を選択します (例、Samsung Galaxy S4 (Portrait))。

    S4Screen.png

    DPI スケール値が変更します。UI をこのアスペクト比に正確にスケーリングするためには、必要な解像度の最短の辺 (1080) を、ターゲット デバイスの最短の辺 (750) で割ると、スケール値 1.44 が得られます。

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

  13. ひとつのキーの 解像度1079 (スケール 1.44) に設定し、もうひとつのキーの 解像度1090 (スケール 1.44) に設定します。

  14. サポートする予定の各デバイスについて 11 から 13 のステップを繰り返します。

これで UI エレメントが、DPI スケーリング設定で定義したルールに基づき自動的にスケーリングされます。ウィジェットを配置していて、それらが画面から外れてしまう場合は、ビューポート内の場所にウイジェットを固定する必要があるため、アンカー を使って作業する方法をご覧ください。

Select Skin
Light
Dark

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

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

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

フィードバックを送信