Unityでビルド時にUIがずれる問題の解決方法 - ゲームプログラミング独学ブログ

Unityで開発していると、エディタ内では正常に見えるUIがビルド後にずれて表示される問題に直面することがあります。この問題に対する対策を以下にまとめます。

Canvas Scalerの設定

Canvas Scalerコンポーネントを適切に設定することが重要です。以下の手順で設定を行います。

Canvasの選択：HierarchyからCanvasを選択します。
Canvas Scalerの設定：
- UI Scale Mode：Scale With Screen Sizeに設定。
- Reference Resolution：ゲームの基準解像度を入力（例：1920x1080）。
- Screen Match Mode：Match Width Or Heightを選択し、Match値を0.5に設定。これにより、縦横のスケールを均等にします。

この設定により、異なる解像度やアスペクト比でもUIが適切にスケーリングされます。

参考記事: はかせのラボ、カコカテ備忘録

RectTransformのアンカー設定

UI要素の位置がずれる原因として、RectTransformのアンカー設定が適切でないことが挙げられます。各UI要素のアンカーを以下のように設定します。

Panelや固定位置のUI：親要素に対して上下左右にストレッチ設定を使用。
中央に配置するUI：中央揃えのアンカーを使用。

これにより、画面サイズの変化に対応したUI配置が可能になります。

参考記事: Qiita

解像度変更時のスクリプト対応

解像度が変わった時にUIの再配置を行うスクリプトを追加することも有効です。以下のようなスクリプトを利用して、解像度変更を監視し、適切にUIを再配置します。

using UnityEngine;

public class ResolutionAdjuster : MonoBehaviour
{
    private int screenWidth;
    private int screenHeight;

    void Start()
    {
        screenWidth = Screen.width;
        screenHeight = Screen.height;
        AdjustUI();
    }

    void Update()
    {
        if (screenWidth != Screen.width || screenHeight != Screen.height)
        {
            screenWidth = Screen.width;
            screenHeight = Screen.height;
            AdjustUI();
        }
    }

    void AdjustUI()
    {
        // UIの調整処理をここに記述
    }
}

このスクリプトを使用することで、解像度が変更された際に自動的にUIが調整されます。

参考記事: ぺんごや、とらんぽドットコム

まとめ

Canvas Scalerを適切に設定する。
RectTransformのアンカーを適切に設定する。
解像度変更時のスクリプト対応を追加する。

これらの対策を組み合わせることで、ビルド後にUIがずれる問題を解決することができます。