ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Unity - Canvas Scaler:画面サイズの変化に対応する -

初めに

 スマホゲームを作る場合、画面サイズが機種によって異なるため、初めから画面サイズが変化することを見越してゲームを作る必要があります。Canvas Scaler を使うことで、自動調整することができます。

ドキュメント

docs.unity3d.com

UI Scale Mode

UI Scale Mode 機能
Constant Pixel Size UI 要素を画面サイズによらずピクセル単位で同様のサイズに保つ
Scale With Screen Size 画面サイズによってGUIを拡大、縮小
Constant Physical Size UI 要素を画面サイズや解像度によらず、物理的に同様のサイズに保つ

Constant Pixel Size

 UI 要素を画面サイズによらずピクセル単位で同様のサイズに保ちます。

プロパティ 機能
Scale Factor このファクターで Canvas 内のすべての UI 要素をスケーリングする
Reference Pixels Per Unit スプライトが ‘Pixels Per Unit’ 設定を持つ場合、スプライトの 1 ピクセルは UI の 1 ユニットをカバーする

 Scale Factor を x 倍すると、UI 要素の Scale が x 倍されます。
 Reference Pixels Per Unit は、1ユニット当たりに表示されるピクセル数を表します。デフォルトは 100 なので、1ユニット当たり100ピクセル表示されます。

 画面サイズが変わらない場合は、選択肢に入るかと思います。

Scale With Screen Size

 画面サイズに合わせてGUIを拡大、縮小してくれます。

プロパティ 機能
Reference Resolution レイアウトの基準となる解像度
Screen Match Mode 現在の解像度のアスペクト比が基準解像度にフィットしない場合、どのように調整するか選択する
 - Match Width or Height width か height のどちらを基準に調整するか Match で選択する
  ・Match width か height 、それらを混ぜ合わせたもののどれを参照して調整するか選ぶ
 - Expand Reference Resolutionで設定した範囲がゲーム画面に入るように調整される
 - Shrink ゲーム画面がReference Resolutionで設定した範囲の中に必ず収まるように調整される


 Expand と Shrink の違いは主語の違いです。

  • Expand:Reference Resolutionで設定した範囲ゲーム画面に入る
  • Shrink:ゲーム画面Reference Resolutionで設定した範囲に入る

(使ってみた)※Expand にして画面サイズを変更しています

 画面サイズに合わせて調整されるため、一番使う場面が多いかと思います。

Constant Physical Size

 UI 要素を画面サイズや解像度によらず、物理的に同様のサイズに保ちます。

 Physical Unit で単位を選択します。

 DPI(dots per inch)は1インチ当たりのドット数を表します。Fallback Screen DPI は画面の DPI が不明な場合の DPI を設定できます。

画像サイズを調整する

 PCゲームならば、ビルドするときにアスペクト比を固定するようにすればよいので、スマホゲームのことを考えます。

 スマホの画面サイズのアスペクト比は、機種によって異なります。16:9 を基準としてゲームを作る場合、別の比率のスマホで使うと画面崩れが起こる可能性があります。アスペクト比と解像度は初めに考慮に入れて作ったほうがよいです。

 今回は、次のような仕様にします。

  • スマホを横向きに持って遊ぶゲームを想定する
  • ゲーム画面のアスペクト比は固定する(今回は16:9)
  • 余白は黒枠が表示されるようにする

 Canvas の UI Scale Mode を Scale With Screen Size にします。そして、Reference Resolution の値を設定します。今回は 16:9 にしたいので、フルHD画質と同じ 1920×1080 にしています。

 もう一つ Canvas を用意し、Image (名前を "BackSide" に変更しています)を生成します。これの色を黒に変更しましょう。

 黒枠となる Image のサイズをスマホの画面サイズに変更されるように、次のスクリプトを Image につけます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ScreenSideScript : MonoBehaviour
{
    void Start()
    {
        //画面サイズの取得
        int width = Screen.currentResolution.width;
        int height = Screen.currentResolution.height;

        //サイズの変更
        RectTransform rect = this.GetComponent<RectTransform>();
        rect.sizeDelta = new Vector2(width, height);
    }
}

(実行) これで、アスペクト比が 16:9 のスマホでなくても、画面崩れが起きないようにできました。

注意

 これは、スマホの向きを縦にすることは想定していません。ビルド時にスマホの向きを横向きに固定する必要があります。スマホの向きによって、縦横が変化するようにビルドすると、黒枠も何もない部分が表示されるので、ご注意ください。

 なお、Project Settings でアプリの画面の向きを設定できます。Project Settings は Edit をクリックすると出てきます。

Portrait 縦向き固定
Portrait Upside Down 縦向き上下逆さま固定
Landscape Right 横向きで左側が上
Landscape Left 横向きで右側が上
Auto Rotation スマホの向きによって変化

最後に

 実機のことを初めに考慮に入れて作り始めなければ、後から痛い目を見るので、気をつけましょう。