Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
複数解像度・画面比率対応UIの配置手法
putinu
July 02, 2022
How-to & DIY
2
580
複数解像度・画面比率対応UIの配置手法
2022/07/02 大阪 ゲーム制作全般もくもく会 LT資料
Unityにおける、複数の解像度、及び複数の画面比率へ対応したUIの配置手法について解説した際の説明資料です。
putinu
July 02, 2022
Tweet
Share
Other Decks in How-to & DIY
See All in How-to & DIY
202203 HENKAKU workshop 資料
geeknees
1
110
Swift愛好会Vol.70 iOSDC 2022 登壇LT レトロゲームのその後の話
samakada
1
110
Ambassadors Meetup 2022
takunology
1
280
#分解のススメ 12回 イベントと コミュニティの紹介 そして新規書籍企画
takasumasakazu
0
140
5分でざっくり。2021年のRaspbeerry Piをふりかえり / osc21on-rpi
akkiesoft
0
300
M5Stackな Cansatをつくってみた
yukuro
0
910
夏の自由研究 - 「エアコン室外機に濡れタオル」は効果があるのか
pmakino
0
400
Selbstverwaltung und Zeitplanung
ddeimeke
0
3.8k
ロードセルによる重量測定装置の作り方
shinrinakamura
0
300
トレーニングを長く続けるコツ
kazukiomo
0
190
相性ピッタリ!reTerminalとNode-REDのステキな関係
ueponx
0
480
動機づけ面接入門2022
ppillc
0
1.3k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
Documentation Writing (for coders)
carmenintech
51
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
A designer walks into a library…
pauljervisheath
198
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
390
Three Pipe Problems
jasonvnalue
89
8.9k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
BBQ
matthewcrist
75
8.1k
Web development in the modern age
philhawksworth
197
9.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Transcript
複数解像度・画面比率 対応UIの配置手法 Putinu 2022年7月2日 大阪 ゲーム制作全般もくもく会 LT 1 @putinu3
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 @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