darjjeelling apps website



Unityで画像の数字を描画する方法

Unity2Dでゲームスコアなどに使う数字を、フォントではなく自作の画像で置き換えて表示したくなった時のやり方を調べていました。
その過程で、2D用にSpriteで表示できるやつを作ってみたのでGitHubに公開します。

https://github.com/darjjeelling/imagenumber

Unityで表示するとこんな感じです。

splash

上のように自分の好きに作ったオブジェクト枠内に、フォントではなく画像にしてある数字を表示してくれます。
また図中の上段の数字が上位桁を0埋めした場合、下段の数字が0埋めを表示しない場合です。この切り替えもできます。

呼び出し側のコードはこんな感じの2、3行でOK

使い方・基本編

0. GitHubからプロジェクト一式をダウンロードします

1. 以下のファイルを自分のプロジェクトのAssets内にコピーします
– NumberImageRenderer
– SampleScript
– Resources以下のファイル
2. HierarchyでCreate->Create Emptyで生成したオブジェクトにRect TransformをAdd Componentします
3. さらにNumberImageRenderer, SampleScriptの2つのスクリプトを追加します
4. Inspector上でNumberImageRenderer(Script)で以下のように指定します
– File Name : img123456789
– Parent Transform :
5. プロジェクトを実行します。2.で作成したオブジェクト内に数字が表示されます。

使い方・応用編

  • 数字表示の呼び出し側はSampleScript.csを参考に、ご自分のスクリプト内に書いてもいいです。
  • 最大桁数を指定するとその桁数になるよう0で埋めて表示されます。
    ex) ni.maxDigit = 9;
  • 最大桁数を指定した上でInspectorのIgnore Filled Zeroのチェックをオンにすると、0が表示されなくなります
    Ignorezero
  • 数字の幅と高さは2.で作成したオブジェクトのサイズに自動的に変換します。なので、例えば最大4桁の幅で表示したくてオブジェクトの幅を決めても、入力数値が3桁だったら横に伸びた表示になります。それを抑えたい時にも最大桁数を指定してください。
  • 数字の画像を入れ替えたい場合は、Asset下のimg0123456789を別のものにしてください。
    以下のように数字を横長に並べた画像を用意し、SpriteEditorを使って分割します。
    numberimage012.png
    各数字のSprite名はhogehoge_1,hogehoge_2,…のように末尾に対応する数字をつけてください。
  • 数字は正の整数のみ。桁区切りにも未対応です。

それではよろしければご利用ください。

広告

%d人のブロガーが「いいね」をつけました。