【Unity】フォントに関するTIPSまとめ4選[uGUI]

本記事ではuGUIのフォントに関するTIPSをまとめました。

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

uGUIのリッチテキストのタグについて

標準機能です。文字にタグをいれると色やサイズが変更できます。

タグの参考例

<color=#FDBA2A>5<size=72>G</size></color>

  • Font Sizeは104、Textに下記のようなテキストとタグを入れています。
  • 数値のPivotは右、別テキストの所持金はPivot左合わせでにして子に。数値を増やして動かしてみました。

タグの種類

タグは4種類

  • 太文字<b></b>
  • イタリック<i></i>
  • サイズ変更<size=10></size>
  • カラー変更<color=#00ffffff></color>
参考 リッチテキストUnity

uGUIでビットマップフォントを表示する方法

uGUIの通常のテキストは、アウトラインやドロップシャドウはつけられるものの、装飾としてはまだまだ足りない物があります。

ですので、Photoshopなどで装飾した文字画像をフォントとして表現できるビットマップフォントを作成してみました。

STEP.1
素材の作成

Photoshopのレイヤースタイルで、加工した数字を作成します

Noto Sans CJK JPに境界線+光彩(内側)+グラデーションオーバーレイ+ドロップシャドウを追加

文字が分けやすいように、少しだけ文字間隔調整

STEP.2
ShoeBoxのインストール

下記のURLからShoeBoxをインストールします

参考 ShoeBoxShoeBox
STEP.3
ShoeBoxでビットマップフォント作成

1. ソフトを起動し、GUIタブを開き、Bitmap Fontに向かって、画像をドラッグ&ドロップ
2. 新しいウィンドウが起動、**Auto fit Settings**ボタンを押して、スプライトを分割する
3. その他設定。Settingsを開く
4. Template>Modifiedを「FNT-xml Staling」に
5. 「File Name」を変更
6. 画像に振り分けられている文字の調整 「Txt Chars」 を調整
7. 画像を見て、設定が良さそうであれば、「Save Font」ボタンで出力(.xmlとpng)

STEP.4
Unityで設定する方法
Unityを開き、ShoeBox Tools for Unity(無料)のアセットをインポート

参考 自作ケーブルキットAsset Store

1. Assetsに先程出力した**xmlファイル**を置く
2. メニュー Assets>ShoeBox Tools>Import Bitmap Fontsを選択し、XMLファイルを選択

STEP.4
確認

あとはuGUIのテキストを作成し、文字を入力。生成したフォントとシェーダーを適応するとビットマップフォントとして機能することを確認します

参考 Bitmap FonBitmap Fon 参考 ShoeBoxでビットマップフォントを作るdevlog 参考 ShoeBoxを使用してフォントを作成して表示する。chrooot 参考 uGUIでビットマップフォントを使ってみようQiita

unitettcでフォント(.ttc)を分割して.ttfにして使用する方法

unitettcでフォントを分割する方法です。

複数フォント格納されている.ttcフォントをUnityで使いたい時は.ttcに分割して使用します。

※Unityは.ttcをサポートしていないので、.ttfに変換!
※プロポーショナルフォントや等幅フォントが格納されているフォントを分割して、容量削減!

フォントの拡張子について

まずフォントの拡張子3つについて調べてみました。
代表的な拡張子は.otf, .ttf, .ttcの3つです。

  • .otf
    Type1がベースのフォントの拡張子。Macからの派生

  • .ttf
    TrueTypeフォントの拡張子。Windowsからの派生
    「単体」のフォントファイル

  • .ttc
    TrueTypeフォントの拡張子。
    プロポーショナルフォントや等幅フォントなどの類似する「複数のフォントファイル」を収納したもの

※「Unityでは使えない」(Unityでサポートしているフォント形式はTrueType(.ttf) と OpenType(.otf))

参考 OpenTypeフォントの拡張子って?教えて!goo

unitettcを使った、フォントの分割と結合方法

STEP.1
unitettcをダウンロード
参考 UniteTTCUniteTTC

仮にデスクトップにファイルを置きます。

STEP.2
フォントを分割する方法

複数フォント格納しているttcを分割してttfにする方法です。

・`C:\Users\ユーザー名\Desktop\unitettc`の中に.ttcファイル(仮に游ゴシック 太字:YuGothB.ttc)を置きます。
・ Windowsの検索で`cmd`と打ってコマンドプロンプトを起動します
・ `cd C:\Users\ユーザー名\Desktop\unitettc`とコマンド
・ `unitettc64.exe YuGothB.ttc`とコマンド

以上で、3つの.ttfフォントに分割されました。

STEP.2
フォントを結合する方法
おまけです。さきほど3つに分けたttfを1つに結合して戻してみます。

・ コマンドプロンプトを起動
・ `cd C:\Users\ユーザー名\Desktop\unitettc`とコマンド
・ `unitettc64.exe Test.ttc YuGothB001.ttf YuGothB002.ttf YuGothB003.ttf`

以上でTest.ttcというフォントが生成されます
.ttcのフォントを分割して.ttfにすれば、Unityで使用することができます。

フォント「Font Awesome」を使ってアイコンを表示する方法

数百個のアイコンが格納されているフォント「Font Awesome」を使ってアイコンを表示する方法です。

これを上手く使うと、アイコン探さなくてもすぐに仮素材できるのではと思い試してみました。

STEP.1
フォントのダウンロード

下記からダウンロード
参考 Font AwesomeFont Awesome

STEP.2
解凍

「fontawesome-free-5.0.2use-on-desktop」に3種のフォントが格納されています。

STEP.2
チートシートについて

Unityで表示する方法は下記のチートシートからアイコンをコピーしuGUIのTextへ、ペーストすれば表示されます。

参考 Font Awesome Free's CheatsheetFont Awesome
STEP.2
アイコン部分をコピー

下記はロックアイコン`fa-lock []`のところのアイコン部分をコピー

STEP.2
Unicodeで表示する方法

InspectorのTextエリアには何も表示されないまま、使うのはあれなので、Unicodeで文字を表示してみます。

下記のスクリプトを作成します。


STEP.2
表示方法

uGUIのTextコンポーネントは外し、代わりにTextUnicode.csをアタッチします。

あとは先程のチートシートから、Unicodeを打ち込めばOK

例えば、ロックアイコンであれば、`fa-lock []`をいう表記を探して、**xf023**と打ち込む

参考 Font AwesomeUnity3D UI Typography

すいみん

uGUIに関するエディタ拡張は下記の記事にまとめました!
eyecatch-unity-ui-editor-extensions 【Unity】UI制作に便利!エディタ拡張まとめ13選[uGUI]

すいみん

UI制作に関するシェーダーは下記の記事にまとめました!
eyecatch-unity-ui-shader 【Unity】UI制作に役に立つシェーダー6選[uGUI]

以上、すいみん(@cg_method)でした!