PCゲームなどを作る場合に考えることとして、プレイする環境（端末）によっては使いたい文字フォントが無いことがあります。
特にスコアなど数字の表示は欲しいところです。
今回もスクリプトを使ってUnityのUI(uGUI)で表示してみます。
前回とはまた別のアプローチをとってみたいと思います。
スプライトアニメーションを使い、テクスチャの任意の位置を表示します。
考え方は次のような感じです。
まず、目標は次の図のように数字一桁の表示を変えることです。
左側が元の数字画像、右側が実行後の画像です。
単純に、数字とその色が変わっただけです。
順を追って説明します。
数字画像は次の画像（注1）のようにします。
背景は黒、文字は白とします。また、透明要素はありません。
ここで、数字画像は以下の設定を行います。
- テクスチャタイプ:スプライト（2DとUI）
- スプライトモード:複数
- メッシュタイプ:完全な矩形
- SpriteEditorでスプライトを分割する。
描画の起点となるUIのImageオブジェクトを作成しシーンに配置します。
Imageオブジェクトのインスペクター上で、テクスチャに数字画像を指定します。
次に、新規のマテリアルを作成し、Imageオブジェクトのマテリアルに指定します。
今回の対象は UI の Image なので、マテリアルのシェーダーを "UI/Default" に変更します。
Imageオブジェクトに次のコードのファイルをアタッチします。
TextureTest.cs
スクリプトの大まかな流れです。
- 現在のImageのシェーダー情報を取得します。
- 取得したシェーダーを元に新しいマテリアル（注２）を作成します。
- テクスチャのサイズを取得します。
- テクスチャ１つ分のオフセット幅を計算し取得します。
- 表示したい位置へ左からオフセット分だけ移動した位置、マテリアルのオフセットに格納します。
- 色を変更します。
- 現在のImageに新しいマテリアルを適用します。
実行すると、数字と文字色が変わります。
画像が真っ黒になってしまったときは...
場合によっては次の画面にようになるかもしれません。
これは、ライトが設定されてなかったりImageに対して不適切な角度で当たっていたりしています。
ライト（環境光）の設定は・・・
メニューバー -> ウィンドウ -> レンダリング -> ライティング
を選択すると出てきますので、ぜひ確認してみてください。
注1）画像は、アルファ値を含むデータ（r,g,b,a タイプ）を用意します。
今回は持っていなかったので new Color( data.color.r, data.color.g, data.color.b, 1.0f) としました。
注2）スクリプトで新しいマテリアルを作成した場合、ゲーム終了時必ず破棄してください。
そのままでは、メモリ上に残ってしまい、メモリリークの原因となるからです。
当コード上では、 OnDestroy() 内で破棄しています。
今回は以上です、最後まで見て頂きありがとうございました。
（参考）下記のサイトを参考にさせていただきました。この場を借りて感謝申し上げます。
※【Unity】小ネタ:スクリプトでテクスチャ座標を動かす（Karvan 氏）
https://www.karvan1230.com/entry/2020/10/20/222526