2011年6月21日火曜日

Unity3D:マルチカラーなフォントを使う

なんだかUnityのデフォルトのフォント機能ってとっても貧弱。
と文句ばっかいってても仕方ないのでちょっと調べてみると
割とカンタンにしたかったことができたので覚書しときます。










なんか画像小さくてスイマセンw
とりあえず左がUnity標準機能のフォント、右がちょっと工夫したやつです。
赤から黄色にグラデーションがかかってます。
標準のフォント機能だけだとこれは難しいのではなかろうか(オレが知らないだけ?)

解説しようと思いますが英語でOKって方はコッチのソースの方を
見たほうが早いです。

SaveFontTexture
TexturedFont

流れとしては…
①フォントをテクスチャとして書き出す。
②書き出したテクスチャをPhotoShop等で加工し再度Unityにインポート
③フォントのマテリアルに加工したテクスチャを割り当てる。

です。では順番に解説。
まずUnityにtruetypeフォント等をインポートすると下図のように
なるかとおもいます(フォントの下にマテリアルとテクスチャが自動で作られる)















このフォントテクスチャを書き出せれば良いのですが右クリックから選択して
エクスプローラで開いても実体がありません。















テクスチャを書き出すためにコードを書きます。
Create→JavaScriptでjsファイルを作成し、
上のリンク先(SaveFontTexture)のものを貼り付けてください。
ちなみに下図のようにEditorというフォルダを作ってその中に作成したjsファイルを
入れるみたいです。














うまくいくと下図のようにAssetメニューのなかにSaveFontTextureという項目ができます。



















先ほどのフォントの下にあるテクスチャを選択してSaveFontTextureを選ぶと
保存場所を聞かれるので適当な場所に書き出します。
ちなみにテクスチャのプレビュー画面が真っ黒の場合はcharacterをUnicodeとかに
してあげるとよいみたいです。






















無事書き出せたらPhotoShop等で加工します

で、再度インポート。

で、新規にマテリアルを作成し以下のように設定。























しかし、これだとテクスチャを設定したにも関わらず
単色になってしまいます。なんでまたコードを貼り付けます。
TexturedFont
Create→Shederで新規シェーダーに貼り付けてください。
うまくいくとShederのGUIの項目が増えます。
TexturedTextShederに切り替えてください。























で、新規にGui Fontを作成し、マテリアルに先ほどのものを
割り当てます。
























できた!(ハズ)

なんかずれてる…という方。
書き出したときのテクスチャのサイズとフォントサイズが一緒じゃないと
たぶんずれます。
そうじゃねえよ…という方。
もっと便利な方法ありましたら教えてくださいまし。

これでリッチなフォントがUnityでも使える!
しかし、テクスチャとして書き出した時点でベクターデータではないので
当然サイズが大きくなると粗くなります。
あらかじめ書き出す際に、使うサイズをきめとくといいかも。
あー、長かった。
途中からしんどくなって後半は手抜きです。ぶふー、つかれた。

0 件のコメント:

コメントを投稿