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
【ふりかえりワークショップ】Tryを決めるだけじゃない!感情にフォーカスした、ふりかえりを体験しよう!
scrummasudar
0
530
Azure PortalのQoLを上げてたら Big Techに怒られた
horihiro
2
340
AWS Summit Japan 2025 個人的参加レポート
midnight480
0
160
いぬぬウォッチャー - オレトク賞オンライン決勝 #ヒーローズリーグ
n0bisuke2
0
240
バッドプラクティスから学ぶハワイアン航空で行く re:Invent
kentosuzuki
0
390
PlatformIO IDE用M5Stack定型コード環境の紹介
3110
1
600
バーチャルバナナとリアルバナナ #iotlt #TouchDesigner
n0bisuke2
0
180
安全に失敗するための手遊び-未定義動作を引き出そう-
zilmina
0
650
#Stampfly #M5Stack 開発ストーリーと今後の可能性 前説
takasumasakazu
0
140
RDKX3 ハンズオン資料 東京 D-Robotics 日本語
takasumasakazu
0
160
M5Stickと超小型エッジAIカメラ「AITRIOS」
hoshinoresearch
0
530
こんなにあるの? 最近のIPAトレンドを ざっくりまとめてみた
watany
4
1k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.3k
Why Our Code Smells
bkeepers
PRO
339
57k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Invisible Side of Design
smashingmag
301
51k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Music & Morning Musume
bryan
46
6.8k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
What's in a price? How to price your products and services
michaelherold
246
12k
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