複数解像度・画面比率対応UIの配置手法

2022/07/02　大阪　ゲーム制作全般もくもく会　LT資料

Unityにおける、複数の解像度、及び複数の画面比率へ対応したUIの配置手法について解説した際の説明資料です。

Transcript

1. 複数解像度・画面比率
   対応UIの配置手法
   Putinu
   2022年7月2日
   大阪 ゲーム制作全般もくもく会 LT
   1
   @putinu3
   

   View Slide

2. 2
   @putinu3
   自己紹介
   小田 耀斗
   • @putinu3
   • 大学３回生
   • Unityゲーム開発者
   • Unity1WeekやGCK2021に出てました
   

   View Slide

3. 3
   @putinu3
   本日のLTについて
   • Unity1週間ゲームジャムでの経験をもとに知見を共有
   • Unity初級者向け？（結構簡単かも）
   • もっと良い手法があれば聞きたい！
   

   View Slide

4. 4
   @putinu3
   環境
   • Unity2021.3.3f1
   • Rider
   

   View Slide

5. 5
   @putinu3
   目次
   • 同じ画面比率での複数解像度対応
   • 異なる画面比率への対応手法
   • アニメーション処理による位置ずれ問題とその対策
   

   View Slide

6. 6
   @putinu3
   目次
   • 同じ画面比率での複数解像度対応
   • 異なる画面比率への対応手法
   • アニメーション処理による位置ずれ問題とその対策
   

   View Slide

7. 7
   @putinu3
   複数解像度の対応は必須！
   HD, FHD, 4K ...など
   画面サイズに合わせてUIを
   拡大させる必要がある
   5K解像度 – Wikipedia
   (https://ja.wikipedia.org/wiki/5K%E8%A7%A3%E5%83%8F%E5%BA%A6 )
   WebGLなどでプレイヤーが
   勝手に画面拡大するかも...
   

   View Slide

8. 8
   @putinu3
   Canvas Scaler
   • 基本的にUnityが頑張って対応してくれる
   • Canvasについてるコンポーネント
   

   View Slide

9. 9
   @putinu3
   Canvas Scaler
   • UI Scale Mode
   • Reference Resolution
   UIをどうスケーリングするか
   Scale With Screen Sizeにする
   UI解像度の設定
   これを基準にスケーリングされる
   Canvas Scaler – Unity Documentation
   (https://docs.unity3d.com/ja/2019.4/Manual/script-CanvasScaler.html )
   

   View Slide

10. @putinu3
    複数の解像度対応には
    Canvas Scaler を
    設定しよう！！
    10
    

    View Slide

11. @putinu3
    目次
    • 同じ画面比率での複数解像度対応
    • 異なる画面比率への対応手法
    • アニメーション処理による位置ずれ問題とその対策
    11
    

    View Slide

12. @putinu3
    スマホによって画面比率は違う！
    • PC
    • 16:9
    • スマートフォン
    • 3:2, 16:9, 19:9, 20:9...
    • こんな綺麗な比にならないものも
    12
    

    View Slide

13. @putinu3
    Canvas Scaler のみだと…
    16:9 19:9
    右下に引っ付くように
    配置したつもり
    だったけど…
    画面下部に空白が！
    13
    

    View Slide

14. @putinu3
    Anchor Presetsを使おう！
    コレ！
    14
    

    View Slide

15. @putinu3
    Anchor Presetsとは？
    親のUI要素の端を原点にしたり、
    そのサイズに合わせて引き延ばせる
    Anchor Presets
    15
    

    View Slide

16. @putinu3
    左上を原点にする
    右下を原点にする
    親のUIサイズに合わせて引き延ばす
    Anchor Presetsとは？
    16
    

    View Slide

17. @putinu3
    Anchor Presetsとは？
    (1920, -1080)
    (0, 0)
    ※pivotも同方向に設定
    左上
    17
    

    View Slide

18. @putinu3
    Anchor Presetsとは？
    (0, 0)
    (-1920, 1080)
    ※pivotも同方向に設定
    右下
    18
    

    View Slide

19. 19
    @putinu3
    右下を原点にする
    さっきの画面に適用してみる
    16:9 19:9
    ぴったり右下に
    くっついている！
    

    View Slide

20. @putinu3
    応用例
    16:9 19:9
    ヘッダー部分
    メイン部分
    フッター部分
    20
    

    View Slide

21. 21
    @putinu3
    応用例（構成）
    ヘッダー
    メイン
    フッター
    X引き延ばし + 上端がy=0
    XY引き延ばし
    X引き延ばし + 下端がy=0
    …
    …
    …
    

    View Slide

22. @putinu3
    応用例
    16:9 19:9
    ヘッダー部分
    メイン部分
    フッター部分
    22
    

    View Slide

23. Anchor Presets を
    @putinu3
    異なる画面比率対応には
    使いこなそう！！
    23
    

    View Slide

24. @putinu3
    目次
    • 同じ画面比率での複数解像度対応
    • 異なる画面比率への対応手法
    • アニメーション処理による位置ずれ問題とその対策
    24
    

    View Slide

25. @putinu3
    こんなことがある
    DOTweenでX方向に+400移動させて画面に表示しよう！
    25
    （イージングとかができるアセット）
    • 画面外からぬるっと出現するタイプの演出
    • ちょっとしたアナウンスとかに使う
    

    View Slide

26. @putinu3
    これはずれる！！
    26
    • +400などのピクセル数指定は、相手の解像度
    によって大きく移動量が変化する！
    • 1280x720 と 1920x1080 では全く違う！
    • WebGLで画面の拡大縮小などをすると発生しがち
    

    View Slide

27. @putinu3
    どう対策する？
    移動先に空のGameObjectを用意しよう！
    27
    そこに行けばいいのね～
    

    View Slide

28. @putinu3
    どう対策する？
    移動先に空のGameObjectを用意しよう！
    28
    • 移動先のオブジェクトも拡大率に比例して
    移動するので、正しい位置に移動できる！
    • 移動先の情報を保持するという手間・コストもある
    

    View Slide

29. @putinu3
    簡易的な対策
    Screen.width / height を掛ける手法もアリ
    29
    • 縦横の画面の長さを保持している
    • 画面の大きさのうち何パーセント動かすかというイメージ
    • 細かい調整には向いていない
    ⇒ ダメージ表示とかに使えそう？
    

    View Slide

30. 空のGameObjectを
    @putinu3
    アニメーション移動には
    用意しよう！！
    30
    

    View Slide

31. @putinu3
    まとめ
    • 複数解像度の対応にはCanvas Scalerを使おう！
    • 異なる画面比率対応にはAnchor Presetsを駆使しよう！
    • アニメーション移動には空のGameObjectを用意しよう！
    31
    

    View Slide