【Unity】文章サイズの取得と自動レイアウト機能を使用してみた

はじめに

こんにちは、情熱開発部プログラム2課の竹下です。
今年の冬は雪が積もることもあり寒く感じました。そんな冬も終わりが近づき、暖かい春が待ち遠しい時期になりました。

今回はUnityで文章にフィットするUIの作成方法を紹介していこうと思います。

使用バージョン

※Unity 2021.3.15f1

文章の長さからテキストボックスのサイズを決めたい場面例

例えば、ゲームで「○○を入手しました。」というメッセージを表示したいとします。

動画の通りテキストボックスのサイズが固定されていると、○○の部分に入る文字列が変わったり、多言語対応時に枠からはみ出してしまうこともあります。

これらの問題の対処方法は様々ありますが、今回はTextMeshProUGUIで文章のサイズを取得してテキストボックスのサイズを決める方法と、自動レイアウト機能を使う方法の2つを紹介していきます。

1. 文章サイズを取得しテキストボックスのサイズを変更する

まず、文章サイズを取得してテキストボックスのサイズを変更する方法を紹介していこうと思います。

今回は、TextMeshProUGUIでプロシージャルフォントを使用しています。

ヒエラルキー上での構成は画像のようになっております。

文章のサイズは、preferredWidthとpreferredHeightで取得できます。

Spriteに設定されているborderを考慮し、 サイズをテキストボックスに設定していきます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class TMProController : MonoBehaviour
{
    public TextMeshProUGUI textMesh;
    public Image frame;

    void Update()
    {
        // 文章サイズ
        var size = new Vector2(textMesh.preferredWidth, textMesh.preferredHeight);
        // 余白
        var border = frame.sprite.border;
        var borderSize = new Vector2(border.x + border.z, border.y + border.w);
        frame.rectTransform.sizeDelta = size + borderSize;

        textMesh.rectTransform.sizeDelta = size;
    }
}

文章を変えるとテキストボックスのサイズが変わるようになりました。

次は、同様のことが出来るUnityの機能を紹介します。

2.自動レイアウト機能を使用する

Unityには自動レイアウトという名前の通り、自動でサイズや配置を決めてくれる機能があります。

こちらを使って文章からテキストボックスのサイズを変更してみます。

TextオブジェクトにLayoutElementをアタッチして設定します。

・Min Width：横幅の最小値
・Min Height：縦幅の最小値
・Preferred Width：横幅サイズ指定
・Preferred Height：縦幅サイズ 指定

TextMeshProUGUIで文章サイズを取得する際もPreferred Width、Preferred Heightを使用しました。
TextMeshProUGUIは、このコンポーネントに近いILayoutElementを継承しているためです。

次に、LayoutGroupを枠UIオブジェクトに設定していきます。

Control Child Sizeにチェックを入れると子オブジェクトのサイズから自身のサイズを決定します。
Paddingは余白を設定することが出来ます。

そしてUIオブジェクトの親に空オブジェクトを設定し、Vertical LayoutGroupをアタッチします。

これで文章に応じてテキストボックスのサイズが変わるようになりました。

しかし、このままでは元々設定している大きさ以上にはなりません。

最大サイズを設定したくない際は、Content Size Fitterを使用します。

自動レイアウト機能を使うタイミング

自動レイアウト機能を使う方法は、文章サイズを取得して手動でテキストボックスのサイズを変更する方法と比べて、設定が簡単で出来ることも多いため、基本的にはこちらを使えば問題ないと思いました。

ただ、RectTransformを使用して値の設定がしづらいため、本記事で紹介した文章サイズを取得した後にSpriteのborderサイズを足す等の凝ったことを実現したい場合は、自動レイアウトを使わずにテキストボックスのサイズを変更した方が使いやすそうでした。

最後に

今回は文章サイズの取得方法と自動レイアウト機能を紹介しました。
自動レイアウト機能が非常に便利で、簡潔にUIの見栄えを上げることが出来ました。機会があればご活用いただければと思います。

最後までご覧いただきありがとうございました！

【免責事項】

本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。