Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

putinu

July 02, 2022
Tweet

Other Decks in How-to & DIY

Transcript

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

    View Slide

  2. 2
    @putinu3
    自己紹介
    小田 耀斗
    • @putinu3
    • 大学3回生
    • 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