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.1k
複数解像度・画面比率対応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
drumstick_jacket.pdf
lyh125
0
410
衛星通信を使ってLチカしてみた #starlink #iotlt
n0bisuke2
0
360
Last CoLab
yumechi
1
120
Building the Perfect Custom Keyboard
takai
0
370
JAWS-UG勉強会オンライン配信事情
awsjcpm
1
140
#呼び込み君 に例のバイトをさせる #iotlt
n0bisuke2
0
190
How to Build Confidence and Achieve Challenges
satoshoco
1
540
ServiceNow Knowledgeの歩き方
manarobot
0
180
ファシリテーターの美意識_株式会社コミュカル Mitz
comucal
PRO
0
190
Wear OSでwatch face作成~令和になってもCanvas芸?~
cibmc
1
620
地域JAWSの現状とベストプラクティス
awsjcpm
0
240
事前準備_ファームウェア解析に触れてみよう!
owaspkansai
0
200
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
What's in a price? How to price your products and services
michaelherold
238
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Writing Fast Ruby
sferik
622
60k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Optimizing for Happiness
mojombo
370
69k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
Infographics Made Easy
chrislema
238
18k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Code Review Best Practice
trishagee
56
15k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
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