Quantcast
Channel: C#タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9707

【Unity】Canvasを使ったUIを複数の解像度に対応させる方法

$
0
0

はじめに

このアカウントは、プログラムについて勉強し始めて1年立たずの専門学校生によるものです。
新たに学んだ技術や知識をなるべくわかりやすくまとめておこうと思います。
アドバイス・ご指摘などありましたら、どうぞご遠慮無く。

解像度について

Unityに限らず、アプリケーションの開発、特にスマートフォン向けのものである場合には必ず直面する問題だと思います。
同じ規格、同じ解像度の端末をすべてのユーザーが使用していることは、基本的には存在しません。
したがって、複数の解像度に対応したアプリケーションの開発が必要になります。
ここで紹介するのはその方法の1つです。
処理速度などは考慮していませんのでご了承ください。

では早速…

Canvasの設定

UnityのUIは”Canvas”によって作ることができます。
まずはCanvasの設定から始めましょう。

今回は3Dのプロジェクトで説明します。
まずは、Canvasを出しましょう。
タスクバーから”GameObject/UI/Canvas”でCancasを出します。
Unity Canvas.png
続いて、Canvasの設定をしていきます。
CanvasのInspectorを見ます。画面はこんな感じ。
Unity Canvas Inspector.png
設定するのは、”Canvas Scaler”の”UI Scale Mode”です。(下記画像の赤枠)
デフォルトでは”Constant Pixel Size”になっているので、”Scale with Screen Size”に変更します。
Unity Canvas Inspector2.png
これで、Canvasの大きさが起動時の画面サイズと同じ大きさになります。

UIオブジェクトの大きさ

Canvasの大きさが画面サイズに対応してもCanvas上のオブジェクトが対応しなければ意味がありません。
今回はオブジェクトにスクリプトをアタッチすることで対応させてみました。

使用したスクリプトはこちら

SizeOptimise.rb
usingUnityEngine;publicclassSizeOptimise:MonoBehaviour{publicGameObjectcanvas;publicboolhorizontal=true;publicboolvertical=true;voidStart(){floatwidth=gameObject.GetComponent<RectTransform>().sizeDelta.x;floatheight=gameObject.GetComponent<RectTransform>().sizeDelta.y;if(horizontal){width=canvas.GetComponent<RectTransform>().sizeDelta.x;}if(vertical){height=canvas.GetComponent<RectTransform>().sizeDelta.y;}gameObject.GetComponent<RectTransform>().sizeDelta=newVector2(width,height);gameObject.GetComponent<RectTransform>().localPosition=newVector3(0,0,0);}}

bool型の変数を二つ用意して、縦と横のサイズ変更が別々にできるようにしました。
使い方は以下の通りです。
Unity SizeOptimise.png
※public変数について
Canvas:このスクリプトをアタッチしたCanvasを選択。そのCanvasサイズがオブジェクトのサイズに対応します。
Horizontal:縦(垂直)方向のサイズを合わせるかどうか
Vertical:横(水平)方向のサイズを合わせるかどうか

まとめ

かかった時間や手間はかなり少ないですが、しっかりと複数の解像度に対応させることができました。
困っていた人がいれば参考にしていただければ幸いです。
また、改善点などありましたらコメントにてご教授いただけると、私のスキルアップにつながります。
ぜひよろしくお願いいたします。


Viewing all articles
Browse latest Browse all 9707

Trending Articles