2022/07/02 大阪 ゲーム制作全般もくもく会 LT資料
Unityにおける、複数の解像度、及び複数の画面比率へ対応したUIの配置手法について解説した際の説明資料です。
複数解像度・画面比率対応UIの配置手法Putinu2022年7月2日大阪 ゲーム制作全般もくもく会 LT1@putinu3
View Slide
2@putinu3自己紹介小田 耀斗• @putinu3• 大学3回生• 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@putinu3Canvas Scaler• 基本的にUnityが頑張って対応してくれる• Canvasについてるコンポーネント
9@putinu3Canvas Scaler• UI Scale Mode• Reference ResolutionUIをどうスケーリングするか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
@putinu3Canvas Scaler のみだと…16:9 19:9右下に引っ付くように配置したつもりだったけど…画面下部に空白が!13
@putinu3Anchor Presetsを使おう!コレ!14
@putinu3Anchor Presetsとは?親のUI要素の端を原点にしたり、そのサイズに合わせて引き延ばせるAnchor Presets15
@putinu3左上を原点にする右下を原点にする親のUIサイズに合わせて引き延ばすAnchor Presetsとは?16
@putinu3Anchor Presetsとは?(1920, -1080)(0, 0)※pivotも同方向に設定左上17
@putinu3Anchor Presetsとは?(0, 0)(-1920, 1080)※pivotも同方向に設定右下18
19@putinu3右下を原点にするさっきの画面に適用してみる16:9 19:9ぴったり右下にくっついている!
@putinu3応用例16:9 19:9ヘッダー部分メイン部分フッター部分20
21@putinu3応用例(構成)ヘッダーメインフッターX引き延ばし + 上端がy=0XY引き延ばし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