メニュー
\ 最大15%ポイントアップ! /

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

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

目次

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 - マニュアル: リッチテキスト Unity のマニュアルは、Unityの使い方を学ぶ手助けとなります。Unityを使って 2D や 3D ゲームを作成したり、ゲーム以外のアプリを作成したりして多くの経験を積みましょう...

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

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

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


STEP.1
素材の作成

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

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

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


STEP.2
ShoeBoxのインストール

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

あわせて読みたい


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(無料)のアセットをインポート

あわせて読みたい
ShoeBox Tools for Unity | Sprite Management | Unity Asset Store Get the ShoeBox Tools for Unity package from project|JACK and speed up your game development process. Find this & other Sprite Management options on the Unity A...

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


STEP.4
確認

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


あわせて読みたい

devlog [naru design]
etc:ShoeBoxでビットマップフォントを作る | devlog [naru design] 以前、ShoeBoxを使ったStarling向けビットマップフォントの作り方を書きましたが、最近アプリ用にフォントを作っている時に注意すべき内容がいくつか見つかリました。 改め...

あわせて読みたい
chrooot: ShoeBoxを使用してフォントを作成して表示する。 chrootとは、UNIXオペレーティングシステムにおいて、現在のプロセスとその子プロセス群に対してルートディレクトリを変更する操作である。(wiki抜粋)

Qiita
uGUIでビットマップフォントを使ってみよう - Qiita はじめに この記事の内容は、Textコンポーネントで使うフォントについてよく知らない方も対象に入れて書かれています。 uGUIでビットマップフォントを扱う時の具体的な...

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))

教えて!goo
OpenTypeフォントの拡張子って? 素朴な疑問です。WindowsXP添付の「Arial」や「Courier New」などの欧文フォントはOpenTypeですが、ファイル拡張子はTrueTypeと同じ「ttf」になっています。しかし、Mac出...

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


STEP.1
unitettcをダウンロード

あわせて読みたい

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


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 Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.


STEP.2
解凍

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


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

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

あわせて読みたい
Cheatsheet | Font Awesome Need the glyph, name, or unicode value of a Font Awesome icon? Use this cheatsheet for quick copying and pasting.


STEP.2
アイコン部分をコピー

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


STEP.2
Unicodeで表示する方法

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

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




STEP.2
表示方法

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

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

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

あわせて読みたい


すいみん

uGUIに関するエディタ拡張は下記の記事にまとめました!
あわせて読みたい
【Unity】UI制作に便利!エディタ拡張まとめ13選[uGUI] 【UI制作に便利!エディタ拡張まとめ[uGUI]】 実際につかってみて便利だったエディタ拡張を紹介します。 Unityから直接Photoshopを開く UI組み込み後も画像の修正をPh...

すいみん

UI制作に関するシェーダーは下記の記事にまとめました!
あわせて読みたい
【Unity】UI制作に役に立つシェーダー6選[uGUI] 【UI制作に役に立つシェーダーまとめ】 UnityのUI表現で使ったシェーダー記事をまとめました。 スプライトをシェーダーで明るくしたり暗くしたりする方法 昔使っていた...
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

すいみんのアバター すいみん CGデザイナー・テクニカルアーティスト

技術的なことが好きなフリーランスのデザイナー。
ブログが好きで月間20万PVの技術ブログを運営。
書籍のお仕事もしています。
・「Unity デザイナーズ・バイブル」
・「Unityゲーム プログラミング・バイブル 2nd Generation」
ご依頼はこちらから!

この記事も読まれてます

目次