Unityでマルチ解像度に対応させるメモ

Unity

ココのコイン落としもいよいよ完成間近となって来ました。

しかし、ビルドしたものを手持ちの幾つかの端末で試してみると・・・ココの顔が画面からはみ出してしまったり、アイテム欄が表示されなかったりと酷い状況になってしまっていました。
uGUI(主にCanvas)の理解が足りなかったのが主な原因ですが、具体的にどこに問題があったのでしょうか。

キャンバスの解像度設定

これまでゲームの開発中はuGUIの理解が足りず、よく考えずに解像度設定を↓のように

図①解像度設定

2960×1440ポートレートに設定していました。
その上で、UI用レイヤ、Live2D用レイヤ、アイテムリストレイヤなどにおける↓の設定部分

図②Canvas Scalerコンポーネント

を600×800などバラバラの設定にしてしまっていたのですが、これが別の解像度での表示がおかしくなっていた原因の1つでした。

このコンポーネントはマルチ解像度に対してどういうスケーリングで解決するかという大事な設定を行う部分で、当然メインの動作環境として想定した解像度(reference resolution、この場合1440×2960)と、解像度が変わった場合に幅と高さのどちらにマッチさせるか、などの設定は一致させるべきです(しかし実際には実機テストや図①の箇所で他の解像度を確認するまでは問題なく作っていけてしまうのが落とし穴ですね…)。
私も特に意識せずガリガリ作っていってしまってたので最後になって発覚したのですが、リリース前に気付けただけ運が良かったかもしれません。

uGUI要素の再配置

スクショはありませんが、Reference Resolutionが600×800だったのを1440×2960にしてしまうと、UI要素がとんでもなく小さくなり、画面の四隅に張り付いてしまいます。

図③Rect Transform設定

そうなるのも当然で、 図③はプレイ画面のうち音楽再生ボタンのRect Transform(修正後)ですが、画面左上にAnchor Presetsを設定したところから相対座標でPosYを指定してるわけですが、これが元々は-300とかだったわけです。
600×800の時は丁度よかったかもしれませんが、画面の縦サイズが2960pxになったら画面の上過ぎる場所への指定になってしまいます。ついでにサイズも60×100とかにしてたのでメチャクチャ小さいです。
これをそれぞれ自然な見た目になるように全uGUI要素で指定し直してあげます。結構面倒ですが仕方ありません。

また、ここでScaleをいじって見た目を大きくするのはおすすめしません。単なるImageだけならいいですが、もしそのuGUI要素の子要素にTextなどがあった場合はぼやけた表示になってしまいます。
親の要素のwidthとheightを調整し、子要素のwidthとheightとfont sizeも大きくするのが一番よいかと思います。

Live2Dのモデルを別のCanvasに配置している場合は、同様にCanvas Scalerの設定を揃えた後、Live2DモデルのTransformを調整してください。

図④480×800での実行

これで低解像度な画面でもUIの配置は問題なくなりました!
だいぶ横に広い範囲でコイン落とし台が表示されていますが、なんとか画面端まで3Dモデルおよび背景画像がカバーできているようです。縦横比が多少変わっても背景要素は途切れてしまわないように気を付けた方が良さそうです。

※Unity画面上部の解像度設定を変更した状態でTransform RectのAnchor Presetsを変えてしまうと取り返しが付かなくなるので、必ずメインターゲットの解像度に切り替えてから編集する様にしましょう。

パネルの調整

面倒だったのがアイテムリストを表示するキャンバスの設定でした。

この画面なのですが、別の解像度にするとアイテム解説部分が消えたりとシッチャカメッチャカです。
ちなみにこの画面は以下のような構成で成り立っています。

背景の黒い半透明部分がPanel、その配下にアイテムを表示するScroll View、アイテムの解説などがある画面下部のInformation、そして画面上部のTitleが入っています。
まず、Anchors Presetsを指定していきます。
PanelはCenter-Top、Scroll ViewはStretch-Stretch、InformationはCenter-Bottom、TitleはCenter-Topという設定になりました。
そして大事なのがItemListCanvasのCanvas Scaler設定です。

このようにMathのスライダーをHeight側に変更します。
なぜかというと、2960×1440は十分縦長画面ですし、このゲームはPortrait動作固定なのでこれ以上左右幅が詰まり横が見切れるという事はまず考えられません。
それに対し横幅に合わせてしまうと、タブレットなどもう少し縦横比が緩い端末でPanelが上下に飛び出してしまいます。

480×800、横幅にマッチさせると縦横比の小さい端末だとPanelが上下に飛び出してしまう

MatchをHeightに合わせると下のようになります。

一応アイテム画面は欠けなく見れるので問題は解決です。ただ、ちょっとダサいですね。。用途によってはこれでいいかもですが。

ここで、アイテム画面の比率維持ではなく、画面全体にアイテム画面をフィットしつつレイアウトを維持させるように方針を変えてみます。

ではAnchor Presetsの設定を変えてみましょう。PanelはStretch-Stretchにして画面全体をカバーさせます。Scroll Viewは自動でオブジェクト配置をしてくれるのでそのままStretch-Stretch、InformationはStretch-Bottomで幅変化に追従します。TitleはStretch-Topで同様に。下部のボタンも本当はStretchにしたかったのですが、低解像度にするとどうしても重なってしまうためLeft-Bottom、Right-Bottomに変更。

480×800解像度での実行。横幅の変化に合わせて表示列数が変わっています

左右のボタンの間隔が広いのが気になりますが、文句なしですね!アイテム画面のマルチ解像度対応はこれで完了です。

uGUIアニメーションの修正

配置が終わったら今度は動作部分の変更です。
CanvasのReference Resolutionが変更されたので、その中のuGUI要素の動きにもスケールの変化が生じてきます。
基本的にはDOTweenで動かしていたのですが、これは解像度の変化を吸収するみたいなので(未確認)、Reference Resolutionが大きくなった分移動幅を変化させればそれでマルチ解像度についても問題無いようです。

問題なのがイベント処理などの諸事情でAnimationによるスライドインなどの移動を行っているケース。
拡大縮小だけなら良いのですが、問題なのは移動の場合。
もしアニメーションにAnchored Position(アンカーからの相対位置)プロパティを使っている場合にはこんな事が起こります。

・高解像度では画面の中程に移動するアニメーションのはずが、低解像度では画面から飛び出して行ってしまう
・あるいは、逆の場合はちょっとしか動かない

これはAnchor PosがAnchorからの相対距離を表し解像度変化の影響を受けてしまうからです。
その代わりにAnchor Max & Anchor Minプロパティを代わりに使って動かします。
UI要素を親Canvasにつなぎとめる基準となるanchorですが、Anchor Min、Anchor Maxは親Canvasの矩形に対して0.5なら中央、0なら端のように比率で指定されます。
なので、たとえば画面下部中央の外側から画面中央に飛び出してくるようなアニメーションなら、PivotをX:0.5, Y:1にしてAnchor Min,Anchor MaxをそれぞれX:0.5,Y:1からX:0.5,Y:0.5に変化させるようなAnimationを設定すればマルチ解像度に対応した動作が出来上がります。

これにて修正完了です。
なかなか面倒でしたが一層uGUIについて理解が深まった気がします!

1 Star2 Stars3 Stars4 Stars5 Stars (まだ投票されていません)
読み込み中...

コメント

タイトルとURLをコピーしました