【unity】スクリプトで任意の数字の画像を表示する
2022/09/25
Unity version : 2021.1.2.7f1 Personal(日本語化済み)

PCゲームなどを作る場合に考えることとして、プレイする環境(端末)によっては使いたい文字フォントが無いことがあります。
特にスコアなど数字の表示は欲しいところです。

今回はスクリプトを使ってUnityのUI(uGUI)で表示してみます。
利点はプレイ環境(端末)を問わず表示でき、UIオブジェクト一つで桁数を動的に変えることができるからです。

先に、結果をお見せすると次の画像のようになります。

順を追って説明します。

まず、2Dのスプライト(矩形)を作成してスプライトレンダラーに数字画像を当てます。数字画像は分割します。
数字画像は次の画像(注1)のようにするとよい感じです。
黒い背景は透明色にしてください。文字色は白にすると文字色の変更が簡単です。

次に、描画の起点となるUIのImageオブジェクトを作成しシーンに配置します。
そして、別にもう一つオブジェクトを作り(空のオブジェクトでよい)そこに次の2つのスクリプトをアタッチします。

(参考)下記のサイトを参考にさせていただきました。この場を借りて感謝申し上げます。

※Unity C# 数字を画像で描画するScript (@syougun360 様)
https://qiita.com/syougun360/items/eb787fdbdcf100f04114
※【Unity】オブジェクトを表示、非表示にする (I-STUDIO 様)
https://marunouchi-tech.i-studio.co.jp/2290/

NumberImageRendrerer.cs


DisplayNumber.cs

作ったUIのインスペクターのFilenameに数字画像のファイル名(拡張子を除く。)
PearentTransformには先ほど作成した描画の起点となるUIを指定します。
Colorには表示させたい色を。
Justficationは文字の間隔を指定します。

スクリプトの大まかな流れです。

  1. DisplayNumber.cs 内の Start() を実行します。
  2. NumberImageRendrerer.cs 内の Render(int score) を呼び出して描画を行います。

NumberImageRendrerer.cs で行う処理は・・・

  1. Render は ResourcesLoad を呼び出します。
  2. ResourcesLoad は 前回作成したスプライトリストを消去し、(スプライトにした)数字画像(注1)を Resources フォルダから呼び出します。
  3. Render は Rendering を呼び出します。

Rendering 関数で行う処理は・・・

  1. score の桁数(text.Length)だけ繰り返すループに入ります。
  2. 表示するスプライトを text の各桁とスプライト名を名前で一致するものを選びます。
  3. createList に追加するスプライトのデータを Create(sprite) で作成します。
  4. シーン上に表示するスプライトの座標をImageオブジェクトを起点に Vector3 型で指定します。
  5. createList にシーン上に表示するスプライトを createList.Add で追加します。
  6. 全ての桁数を表示したらループを抜けます。
※ createList (List<T>型)は個々のスプライトの座標(RectTransform 型)と画像(Image 型)を持ちます。

Create 関数で行う処理は・・・

  1. スプライトを表示する新しいゲームオブジェクトのインスタンスを作成します。
  2. ゲームオブジェクトの親を指定します。今回はUIのImageオブジェクトを指定します。
  3. RectTransForm構造体である rectTrans に拡大率と表示サイズを登録します。
  4. ゲームオブジェクトのインスタンスに数字画像(注1)を指定します。イメージが白色なら任意の数値で色を指定できます。
注1)画像は、アルファ値を含むデータ(r,g,b,a タイプ)を用意します。
今回は持っていなかったので new Color( data.color.r, data.color.g, data.color.b, 1.0f) としました。

使い方:
Start 関数を呼べばシーンに描画されます。
このとき、scoreの数値の桁数分だけ数字オブジェクトが生成されます。
シーン実行中にヒエラルキーで確認できるので見てみてください。

この方法は Update, FixedUpdate 内などリアルタイムで表示するには動作的に厳しいものと思われます。
それは、Render(int score) を呼び出すたびに都度、数字画像の読み込みを行っているからです。
もうちょっと効率がいい方法を探したいと思います。
今回は以上です、最後まで見て頂きありがとうございました。


あとがき
ソースの色付けは手動でやっています。疲れた・・・・

ページトップ