脱出系ゲームの作り方2（テキストの使い方）

皆さんこんにちは。今回は「テキストの使い方」について解説します。内容に間違いもあるかもしれませんが、その時は申し訳ないです。前置きが長いかもしれませんので、結論を急ぐ人は３章に直行しましょう。

用語説明

フォントと文字列とテキストという言葉があります。今更ではありますが、これらの違いを、筆者なりにはっきりさせておきます。

要するに、『文字列をフォントなどを使ってユーザーの目に見える形で表現したものがテキスト』というのが筆者の認識です。

ライセンスについて

フォントには著作権があります。このため、使用時には著作権者が定めたルール（つまりライセンス）を守らなければなりません。無料フォントとして有名なライセンスには、SIL Open Font License (OFL)があります。

ライセンスはややこしいですよね。嫌になります。でも、Unityにおいてはフォントはそのまま使用するわけではなく、画像に焼いてから使用する仕組みになっています。つまり、その画像を同梱してフォントファイルを同梱しなければ、著作権表示もライセンス本文も不要ということです。しかし、最低限の安全策として、著作権表示（クレジット表示）だけはしておいた方が無難でしょう。つまり、たとえば、Noto Sans Japaneseであれば、アプリ内の画面のどこかに以下のような文言を含めておくのが良いでしょう。

TextMeshProの導入

UnityではTextMeshProというツールを使ってテキスト表示をします。この導入を行いましょう。前回プロジェクトの作成を行いましたので、そのプロジェクトを開きましょう。ではまずは、Sceneの名称がSampleSceneでは味気ないのでTitleに改名しましょう。ProjectビューのAssets>Scenesの中にあるファイルの名称をTitleに改名してください。

次にHierarchy（ヒエラルキ）上のGlobal Light 2Dは、いらないので削除しましょう。

それと、TextMeshProを使用するのはCanvas上でなければなりません。ですから、まずはCanvasを作りましょう。Hierarchyの空いているところを右クリックして、メニューからCanvasを選び、Canvasを作成しましょう。（EventSystemが同時に作成されますが、必要なものなので削除してはいけません。）

Hierarchy上のCanvasをダブルクリックしてみましょう。SceneビューにCanvasの全体が表示されましたか？

HierarchyのCanvasを選択状態で、その上を右クリックし、メニューからText-TextMeshProを選びましょう。

すると、以下のようなダイアログが表示されますので、「Import TMP Essentials」ボタンを押しましょう。TextMeshProの導入処理が数秒続きますので、そのままお待ちください。（なお、TMPというのはTextMeshProの略記です。）

ProjectビューのAssetsフォルダの中にTextMesh Proというフォルダが生成されました。そして、TextMeshProのUIのテキストが表示されました。これで基本的な導入は終わりです。

TextMeshProの設定

Hierarchy上のText (TMP)というのが、TextMeshProのUIです。それを選択しましょう。選択状態でInspectorを見ると、以下のようになっていますね。

Text Inputが表示される文字列です。今は”New Text”と書かれていますので、UIにそのように表示されているわけです。Font Assetが『フォントファイルから焼いたフォントの画像』です。Font Assetを元に計算が行われ、画面に文字が描画されます。Font Sizeが表示される文字の大きさです。

試しに、Text Inputの”New Text”を”新しいテキスト”と書き換えてみてください。どうでしょうか？ちゃんと表示されましたか？表示されませんよね？以下のような四角が並んだ状態になりましたよね。これをTofu（豆腐）と言います。Text Inputの文字がFont Asset内に含まれない場合に、Tofuが発生します。Tofuを解消するためにはFont Assetを新しく焼く必要があります。

フォントファイルをダウンロードしよう

Font Assetを焼きたいところですが、元となるフォントファイルが必要です。Google FontsというGoogle公式のサイトがありますので、そこからダウンロードしましょう。サイトへ行って”Noto Sans Japanese”を検索し、Get fontボタンを押してください。次にDownload allボタンを押してください。それからダウンロードされたzipを解凍してください。フォルダの中が以下のようになっていることを確認してください。.ttfというのがフォントファイルです。OFL.txtというのがライセンス本文です。

フォントを焼こう！

さて、Font Assetを焼きましょう。作業をわかりやすくするためにAssetsフォルダの中にFontフォルダを作りましょう。

そして、前章でダウンロードしたファイルを以下のように配置させましょう。Editorフォルダは自分で作ってください。（Editorフォルダの中身はアプリのビルドから自動で除外されます。Unityはそのような仕組みになっているのです。つまり、.ttfがアプリに同梱されないということです。）

Assets/
└──Font/
    ├── OFL.txt
    └── Editor/
        └── NotoSansJP-VariableFont_wght.ttf

Window＞TextMeshPro＞Font Asset Creatorをクリックしてください。Font Asset CreatorのWindowが表示されたら、Source FontにNotoSansJP-VariableFont_wghtを指定してください。Select Font Assetは空（未指定）で大丈夫です。

そして、Custom Character Listに以下の文字列をコピーしてペーストしてください。

 !"#$%&'()*+,-./0123456789:;<=>?ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_abcdefghijklmnopqrstuvwxyz{}~¡¥©¿ÁÉÍÑÓ×Úáéíñó÷ú—―’“”…←↑→↓−、。々〇「」『』【】ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろわをんゔァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロワヲンヴ・ー一！％＆（）＋，／０１２３４５６７８９：；＝？ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ＼ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ新

最後に、Generate Font Atlasボタンを押してください。すると、焼かれたFont Assetがプレビューされます。Saveボタンを押して、先ほど作ったFontフォルダを指定して、Font Assetを保存しましょう。保存したらFont Asset Creatorは閉じて大丈夫です。

Font Assetファイルが作成されたことを確認してください。

Text (TMP)のInspectorのFont Assetにさきほど焼いたNotoSansJP-VariableFont_wght SDFを指定しましょう。

これで以下のようにTofuが解消されたなら成功です！おめでとうございます！

今後足りない文字がでてきたら、その都度、Font Asset Creatorを使ってFont Assetを焼き直してください。以上で解説は終了です。お疲れ様でした！