メニュー
\ 最大12%ポイントアップ! / 詳細を見る

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

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

海外でフリーランスをしているテクニカルアーティスト
ゲーム開発・映像制作・WEB制作等を請け負っています。
当ブログは作業効率化のための技術ブログです。

目次

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などで装飾した文字画像をフォントとして表現できるビットマップフォントを作成してみました。

[timeline]
[tl label=’STEP.1′ title=’素材の作成’]

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

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

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

[/tl]
[tl label=’STEP.2′ title=’ShoeBoxのインストール’]

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

あわせて読みたい

[/tl]
[tl label=’STEP.3′ title=’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)

[/tl]
[tl label=’STEP.4′ title=’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ファイルを選択

[/tl]
[tl label=’STEP.4′ title=’確認’]

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

[/tl]
[/timeline]

http://renderhjs.net/shoebox/bitmapFont.htm
http://narudesign.com/devlog/etc-shoebox-bitmap-font/
https://joujaku845.blog.fc2.com/blog-category-28.html
https://qiita.com/barasixi/items/2729e52ae3d420fe76ab

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を使った、フォントの分割と結合方法

[timeline]
[tl label=’STEP.1′ title=’unitettcをダウンロード’]

あわせて読みたい

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

[/tl]
[tl label=’STEP.2′ title=’フォントを分割する方法’]

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

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

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

[/tl]
[tl label=’STEP.2′ title=’フォントを結合する方法’]
おまけです。さきほど3つに分けたttfを1つに結合して戻してみます。

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

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

[/tl]
[/timeline]

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

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

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

[timeline]
[tl label=’STEP.1′ title=’フォントのダウンロード’]

下記からダウンロード
https://fontawesome.com/

[/tl]
[tl label=’STEP.2′ title=’解凍’]

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

[/tl]
[tl label=’STEP.2′ title=’チートシートについて’]

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

あわせて読みたい
Find the Perfect Icon for Your Project | Font Awesome Search all the icons and match your project with a look and feel that's just right, including the all-new Sharp Solid Icons, now available in Font Awesome 6.

[/tl]
[tl label=’STEP.2′ title=’アイコン部分をコピー’]

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

[/tl]
[tl label=’STEP.2′ title=’Unicodeで表示する方法’]

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

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

[open title=’TextUnicode.cs’]

[/open]

[/tl]
[tl label=’STEP.2′ title=’表示方法’]

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

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

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

http://blog.appmixable.com/post/112089190250/unity3d-ui-typography-font-awesome

[/tl]
[/timeline]

uGUIに関するエディタ拡張は下記の記事にまとめました!

[card2 id=”17346″ target=”_blank”]

UI制作に関するシェーダーは下記の記事にまとめました!

[card2 id=”17307″ target=”_blank”]

全記事一覧

  • URLをコピーしました!

Unityに関する参考記事・ツール・書籍のまとめ

Unityの参考書籍

著:北村 愛実
¥2,673 (2024/11/28 20:36時点 | Amazon調べ)
\最大12%ポイントアップ!/
Amazon
著:吉谷幹人, 著:布留川英一, 著:一條貴彰, 著:西森丈俊, 著:藤岡裕吾, 著:室星亮太, 著:車谷勇人, 著:湊新平, 著:土屋つかさ, 著:黒河優介, 著:中村優一, 著:牙竜, 著:コポコポ, 著:かせ, 著:hataken, 著:monmoko
¥4,400 (2024/11/30 07:00時点 | Amazon調べ)
\最大12%ポイントアップ!/
Amazon
著:森哲哉, 著:布留川英一, 著:西森丈俊, 著:車谷勇人, 著:一條貴彰, 著:打田恭平, 著:轟昂, 著:室星亮太, 著:井本大登, 著:細田翔, 著:西岡陽, 著:平井佑樹, 著:コポコポ, 著:すいみん, 著:Maruton, 著:karukaru, 著:ハダシA, 著:notargs, 著:EIKI`, 著:おれんじりりぃ, 著:黒河優介, 著:中村優一, 著:藤岡裕吾
¥8,408 (2024/11/28 20:36時点 | Amazon調べ)
\最大12%ポイントアップ!/
Amazon
ボーンデジタル
¥5,060 (2024/11/25 16:33時点 | Amazon調べ)
\最大12%ポイントアップ!/
Amazon
技術評論社
¥4,620 (2024/11/28 20:36時点 | Amazon調べ)
\最大12%ポイントアップ!/
Amazon

Unityの人気アセット

目次