PCゲームなどを作る場合に考えることとして、プレイする環境（端末）によっては使いたい文字フォントが無いことがあります。
特にスコアなど数字の表示は欲しいところです。
UI(uGUI)で表示することにし手動でシーンに配置するオブジェクトは最小限にするため、スクリプト使います。
前回ではスプライトアニメーションを使い、テクスチャの任意の位置を表示しました。
まず、基本形として複数の桁を表示します。スクリプトでは10桁まで対応します。
基本形が完成すると次の画像のようになります。
順を追って説明します。
描画の起点となるUIのImageオブジェクトを作成しシーンに配置します。
オブジェクトの名前を "NumberImage2" に変更します。
"NumberImage2" のインスペクター上で、テクスチャに数字画像を指定します。
数字画像は次の画像のようにします。
背景は透明とし透明要素（アルファ値）「あり」のデータです。
インスペクターに登録したら以下の設定を行います。
- テクスチャタイプ:スプライト（2DとUI）
- スプライトモード:複数
- メッシュタイプ:完全な矩形
- SpriteEditorでスプライトを分割する。
次の画像のようになります。 （UIの表示は"0"が標準です。画面では2になっていますが動作に問題はありません。
次に、新規のマテリアルを作成し、"NumberImage2" のマテリアルに指定します。
今回の対象は UI の Image なので、マテリアルのシェーダーを "UI/Default" に変更します。
Imageオブジェクトに次のコードのファイルをアタッチします。
TextureTest2.cs
スクリプトの大まかな流れです。
- 現在のImageのシェーダー情報を取得します。
- Imageからテクスチャのサイズを取得します。
- テクスチャ１つ分のオフセット幅を計算し取得します。
- 表示したい数値の現在の処理桁の数字を取得します。
- 新しいオブジェクト（インスタンス）を作成します。
- テクスチャの参照先を取得します。
- 取得したシェーダーを元に新しいマテリアルを作成します。
- 表示したい位置へ左からオフセット分だけ移動した位置、マテリアルのオフセットに格納します。
- 色を変更します。
- 現在のImageに新しいマテリアルを適用します。
- 最上位-1桁まで4～10を繰り返します。
- 取得したシェーダーを元に新しいマテリアルを作成します。
- 最上位桁（"NumberImage2" オブジェクト）の色を変更します。
- 最上位桁に新しいマテリアルを適用します。
画像が真っ黒になってしまったときは... |
|
シーンにライトが設定されてなかったり "NumberImage2" に対して不適切な角度で当たっていたりしています。 ライト（環境光）の設定は・・・ メニューバー -> ウィンドウ -> レンダリング -> ライティング を選択すると出てきますので、ぜひ確認してみてください。 |
応用例：カウントアップタイマー
スクリプトは下記のようになり、TextureTest2.cs からの追加・変更箇所は色付けしています。（現在:EDGEで閲覧すると色が付いて見えません。すみません。）
TextureTest3.cs
注）スクリプトで新しいマテリアルを作成した場合、ゲーム終了時必ず破棄してください。
そのままでは、メモリ上に残ってしまい、メモリリークの原因となるからです。
当コード上では、 OnDestroy() 内で破棄しています。
（参考）下記のサイトを参考にさせていただきました。この場を借りて感謝申し上げます。
※Unity C# 数字を画像で描画するScript（syougun360 氏）
https://qiita.com/syougun360/items/eb787fdbdcf100f04114
※【Unity】小ネタ:スクリプトでテクスチャ座標を動かす（Karvan 氏）
https://www.karvan1230.com/entry/2020/10/20/222526