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

by putinu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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 )

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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