3
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-15

はじめに

このアカウントは、プログラムについて勉強し始めて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
using UnityEngine;

public class SizeOptimise : MonoBehaviour
{
    public GameObject canvas;
    public bool       horizontal = true;
    public bool       vertical   = true;

    void Start()
    {
        float width  = gameObject.GetComponent<RectTransform>().sizeDelta.x;
        float height = 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     = new Vector2(width, height);
        gameObject.GetComponent<RectTransform>().localPosition = new Vector3(0, 0, 0);
    }
}

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

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

3
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?