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.6k
複数解像度・画面比率対応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
カンファレンスでリフレッシュ!無理なく楽しむカンファレンス参加術 / How to enjoy conferences without stress
kattsuuya
1
8.6k
静岡県のお相撲さん20240509/sumo_wrestler_from_shizuoka_prefecture_20240509
nicepapa_hirano
0
260
いぬぬウォッチャー - オレトク賞オンライン決勝 #ヒーローズリーグ
n0bisuke2
0
200
新婚19年目から学ぶ夫婦円満の正しい歩き方 / Life is beautiful
soudai
PRO
12
4.6k
「無理」を「コントロール」するスキル / Skills to Control "Muri"
hageyahhoo
6
2.1k
苦手の克服方法 / How to overcome weaknesses
toma_sm
0
260
LT(Lightning Talk)のドキドキ感を共有する IoT ぼっとキーホルダ!
scbc1167
0
360
CH32Vシリーズを楽しもう(74thの場合) / enjoy ch32v series
74th
1
930
自分がご機嫌になれる 素敵な場所を守るために
kenichirokimura
2
120
中指立てたか判定IoT #iotlt #p5js
n0bisuke2
0
290
JAWS-UG Community Upadate - JAWS-UG 熊本
awsjcpm
2
150
BlueTeamer勉強会 Security Onion編 激闘!Importノード
disconinja
1
310
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Typedesign – Prime Four
hannesfritz
42
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Bash Introduction
62gerente
614
210k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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