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

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

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

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

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

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

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

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 @putinu3 Canvas Scaler • 基本的にUnityが頑張って対応してくれる • Canvasについてるコンポーネント

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 )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

putinu

Transcript