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

  2. 2 @putinu3 自己紹介 小田 耀斗 • @putinu3 • 大学3回生 •

    Unityゲーム開発者 • Unity1WeekやGCK2021に出てました
  3. 3 @putinu3 本日のLTについて • Unity1週間ゲームジャムでの経験をもとに知見を共有 • Unity初級者向け?(結構簡単かも) • もっと良い手法があれば聞きたい!

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

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

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

  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などでプレイヤーが 勝手に画面拡大するかも...
  8. 8 @putinu3 Canvas Scaler • 基本的にUnityが頑張って対応してくれる • Canvasについてるコンポーネント

  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 )
  10. @putinu3 複数の解像度対応には Canvas Scaler を 設定しよう!! 10

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

  12. @putinu3 スマホによって画面比率は違う! • PC • 16:9 • スマートフォン • 3:2,

    16:9, 19:9, 20:9... • こんな綺麗な比にならないものも 12
  13. @putinu3 Canvas Scaler のみだと… 16:9 19:9 右下に引っ付くように 配置したつもり だったけど… 画面下部に空白が!

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

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

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

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

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

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

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

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

    X引き延ばし + 下端がy=0 … … …
  22. @putinu3 応用例 16:9 19:9 ヘッダー部分 メイン部分 フッター部分 22

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

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

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

  26. @putinu3 これはずれる!! 26 • +400などのピクセル数指定は、相手の解像度 によって大きく移動量が変化する! • 1280x720 と 1920x1080

    では全く違う! • WebGLで画面の拡大縮小などをすると発生しがち
  27. @putinu3 どう対策する? 移動先に空のGameObjectを用意しよう! 27 そこに行けばいいのね~

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

  29. @putinu3 簡易的な対策 Screen.width / height を掛ける手法もアリ 29 • 縦横の画面の長さを保持している •

    画面の大きさのうち何パーセント動かすかというイメージ • 細かい調整には向いていない ⇒ ダメージ表示とかに使えそう?
  30. 空のGameObjectを @putinu3 アニメーション移動には 用意しよう!! 30

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

    31