[Unity] 数字をスプライトで表示

Unityのスプライトで数字を表示させるためのTipsのご紹介です。

num-sprite

Unityで数字を表示するためにはGUITextやuGUIのTextを用いることで実現できます。
しかし、自分で描いたオリジナルの数字を表示させたい場合は数字の絵を並べて表示させる必要が出てきます。
今回はこれを簡単に行うためのスクリプトを用意しました。

宜しければご自由にお使いください。

NumSprite.cs

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

// 数字のスプライト表示
public class NumSprite : MonoBehaviour {
    [SerializeField]
    private GameObject showSprite;  // スプライト表示用オブジェクト(プレハブ)

    // 数字スプライト
    [SerializeField]
    private Sprite _0;
    [SerializeField]
    private Sprite _1;
    [SerializeField]
    private Sprite _2;
    [SerializeField]
    private Sprite _3;
    [SerializeField]
    private Sprite _4;
    [SerializeField]
    private Sprite _5;
    [SerializeField]
    private Sprite _6;
    [SerializeField]
    private Sprite _7;
    [SerializeField]
    private Sprite _8;
    [SerializeField]
    private Sprite _9;
    [SerializeField]
    private Sprite _Minus;

    [SerializeField]
    float width;    // 数字の表示間隔

    private int showValue;  // 表示する値

    private GameObject[] numSpriteGird;         // 表示用スプライトオブジェクトの配列
    private Dictionary<char, Sprite> dicSprite; // スプライトディクショナリ

    // スプライトディクショナリを初期化する
    void Awake() {
        dicSprite = new Dictionary<char, Sprite>() {
            { '0', _0 },
            { '1', _1 },
            { '2', _2 },
            { '3', _3 },
            { '4', _4 },
            { '5', _5 },
            { '6', _6 },
            { '7', _7 },
            { '8', _8 },
            { '9', _9 },
            { '-', _Minus },
        };
    }

    // 表示する値
    public int Value {
        get {
            return showValue;
        }
        set {
            showValue = value;

            // 表示文字列取得
            string strValue = value.ToString();

            // 現在表示中のオブジェクト削除
            if ( numSpriteGird != null ) {
                foreach ( var numSprite in numSpriteGird ) {
                    GameObject.Destroy(numSprite);
                }
            }

            // 表示桁数分だけオブジェクト作成
            numSpriteGird = new GameObject[strValue.Length];
            for ( var i = 0 ; i < numSpriteGird.Length ; ++i ) {
                // オブジェクト作成
                numSpriteGird[i] = Instantiate(
                    showSprite,
                    transform.position + new Vector3((float)i * width, 0),
                    Quaternion.identity) as GameObject;

                // 表示する数値指定
                numSpriteGird[i].GetComponent<SpriteRenderer>().sprite = dicSprite[strValue[i]];

                // 自身の子階層に移動
                numSpriteGird[i].transform.parent = transform;
            }
        }
    }
}

かなりやっつけで作ったので、汚い部分があることはご了承願います。
今回は左寄せのみに対応しました。

上記スクリプトをGameObjectにアタッチすると、インスペクタから以下のような編集画面が表示されます。

num-sprite-edit

ShowSpriteにスプライトを表示させるのに用いるGameObjectのプレハブ、0~9に各数字に対応したスプライト、Minusにマイナス符号「-」のスプライトを指定します。
Widthには表示する数字の間隔を指定します。
これで、記事の冒頭で示したような数字のスプライトが表示されるようになります。

表示する値はスクリプトからValueプロパティに指定してください。

var numSprite = GetComponent<NumSprite>();
numSprite.Value = 1234; // ここで「1234」の値を指定

今回のスプライト表示の考え方は、各数字をスプライトの付いたGameObjectとして並べて表示することです。
スプライトは表示する数字に合わせて変えてやります。
並べるGameObjectは数字の桁数分だけ必要です。

Valueに値を指定するたびにGameObjectの破棄・作成を行う、左寄せしか出来ない、桁数分だけGameObjectが必要などデメリットがありますが、それほどパフォーマンスを求めない場面では使えるのではないかと思います。
パフォーマンス面では大いに改良の余地ありですが、これはまたの機会に考えたいと思います。