(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]

可変する数字を画像(Sprite)を使って、SpriteRendererやImageで表示【Unity】【uGUI】


このエントリーをはてなブックマークに追加

この記事でのバージョン
Unity 2018.4.6f1


はじめに

Unityで数字を表示する時はuGUIのTextを使うのが一般的ですが、

「フォントを使わずに可変する数字を画像で表示したい!」

「SpriteRendererで可変する数字を表示したい!」みたいな事がたまにあります。


という事で今回はフォントを使わず、以下のような数字の画像(Sprite)を使って

f:id:kan_kikuchi:20190912073536j:plain


SpriteRendererやImageで任意の数字を表示するプログラムの紹介です!

f:id:kan_kikuchi:20190912075702g:plain


なお、記事中の例では数字の画像をバラバラの状態で使っていますが、

実際に使用する際はSpriteAtlasなどでまとめる事をオススメします。(負荷が下がるので)





SpriteNo

さっそくSpriteで数字を表示するプログラムです。



使い方は簡単、これら3つを作成し、

f:id:kan_kikuchi:20190912075608j:plain


任意のオブジェクトにSpriteRendererNoもしくはImageNoをAddし、

0 ~ 9の画像を順にInspectorで設定するだけ。

f:id:kan_kikuchi:20190912075946j:plain


するとTextの欄に入力した画像が自動で生成&削除されるようになります。

(SpriteRendererNoならSpriteRenderer、ImageNoならImage)

f:id:kan_kikuchi:20190912082038j:plain


また、Colorで画像に色を乗算したり、Layout Typeで寄せる場所を指定したり、

Text Spanで数字同士の幅を調整する事も可能です。

f:id:kan_kikuchi:20190912075702g:plain


さらに、SpriteRendererNoならSorting Layer NameやOrderを指定出来ますし、

(Sorting Layer Nameは指定しなければDefault)

f:id:kan_kikuchi:20190912080150j:plain


ImageNoならRaycast Targetを指定できます。

f:id:kan_kikuchi:20190912080356j:plain


もちろん、プログラムから表示する数字を変えることも可能です。

//58を表示
_spriteRendererNo.SetNo(58);
f:id:kan_kikuchi:20190912081440j:plain


なお、058などの最初に0が来る場合は以下のような感じになります。

//58を3桁で表示(足りない所は0を詰める)
_spriteRendererNo.SetNo(58, "000");
f:id:kan_kikuchi:20190912081447j:plain


ちなみに数字以外の他の設定もプログラムから変更可能です。

//左寄せに変更
_spriteRendererNo.ChangeLayout(SpriteRendererNo.LayoutType.Left);

//数字の間隔を2にする
_spriteRendererNo.ChangeSpan(2);

//色を黒に変更
_spriteRendererNo.ChangeColor(Color.black);

//レイヤーを変更(SpriteRendererNo用)
_spriteRendererNo.ChangeSortingLayerName("Test");
_spriteRendererNo.ChangeSortingOrder(111);

//RaycastTargetを有効にする(ImageNo用)
_imageNo.ChangeRaycastTarget(true);