Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
複数解像度・画面比率対応UIの配置手法
Search
putinu
July 02, 2022
How-to & DIY
2
1.7k
複数解像度・画面比率対応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
HCIのデモに役立つ映像活用アイデア集 #WISS2024 ナイトセッション #HCIVideoCulture
bonsaistudiojp
2
1k
How to create better speaker proposals
logico_jp
2
1.1k
LLMはTRPGのGMができる(確信)
kgmkm
0
1.6k
How to get hundreds of organic backlinks through statistics link building
ronishehu
1
300
「AITRIOS」でトカゲの活動量を可視化
hoshinoresearch
0
410
バッドプラクティスから学ぶハワイアン航空で行く re:Invent
kentosuzuki
0
390
AWS Community Day 2024: Using AWS to build a launchable knowledge rocket 👉 Organize knowledge, accelerate learning and understand AI in the process
dwchiang
0
240
QFHアンテナを作ってみた、 それとパッチアンテナ
takurx
1
270
Trying "Vibe No-code/Low-code" with MCP #noderedjp
n0bisuke2
0
100
とある航空会社の飛行機の乗り方をお教えします。/20240913-lt
kwada
3
330
人を補助するAI ~AIとの壁打ちがきっかけになる~ #共創AIミートアップ
ishikiemo
0
480
JAWS-UG会津 & JP Stripes会津 合同勉強会 JAWS-UGとAWSコミュニティプログラムアップデート
awsjcpm
0
140
Featured
See All Featured
Navigating Team Friction
lara
190
15k
KATA
mclloyd
PRO
32
15k
Documentation Writing (for coders)
carmenintech
75
5.1k
Building Adaptive Systems
keathley
44
2.8k
It's Worth the Effort
3n
187
28k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Faster Mobile Websites
deanohume
310
31k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fireside Chat
paigeccino
41
3.7k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
GitHub's CSS Performance
jonrohan
1032
470k
A designer walks into a library…
pauljervisheath
209
24k
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