TextMeshProで日本語を表示するチュートリアル【Unity 6】

広告

Unity 6のTextMeshProで日本語フォントを設定し、文字化けを解消するチュートリアル

本記事はUnity 6（6000系）を前提に、TextMeshPro で日本語を表示し、スクリプトから文字列を変更するところまでを、新しいプロジェクトで最初から最後まで通して進めるチュートリアルです。

TextMeshPro は、そのままでは日本語が表示されません。この記事では、まず日本語が表示されないことを確かめ、日本語フォントを用意し、表示されるようにするまでを順番に進めます。

この記事の進め方

  • 新しいプロジェクトを作って、上から順に進めてください（プロジェクト名：TMPJapaneseSample、テンプレート：Universal 2D）
  • 作る順番：準備 → ポイント1（日本語が出ないことを確認）→ ポイント2（フォントを用意）→ ポイント3（フォントアセットを作る）→ ポイント4（テキストに設定）→ ポイント5（スクリプトで変更）
  • Unity の基本操作（Hierarchy で右クリックしてオブジェクトを作る、Inspector で値を設定する）ができれば進められます

準備　プロジェクトを作成して TextMeshPro を使えるようにする

  1. Unity Hub で新しいプロジェクトを作成します。テンプレートは Universal 2D、プロジェクト名は TMPJapaneseSample にします
  2. メニューの Window ＞ TextMeshPro ＞ Import TMP Essential Resources を選び、表示されたウィンドウの Import をクリックします
  3. インポートが終わったら、ウィンドウを閉じます

【画像：Import TMP Essential Resources のウィンドウ（Import ボタン付近だけを切り抜き）】

ポイント1　日本語が表示されないことを確認する

最初に、標準の状態で日本語を表示するとどうなるかを確かめます。

  1. Hierarchy で右クリックし、UI (Canvas) ＞ Text – TextMeshPro を選びます。Canvas も一緒に作られます
  2. 作られたテキストの名前を UIText に変更します
  3. Inspector の Text Input 欄に「日本語を表示します」と入力します

Scene ビューや Game ビューを見ると、文字が四角（□）になって、日本語が表示されません。Console にも、文字が見つからないという警告が出ます。

【画像：Text Input に日本語を入力して、四角（□）になっている Scene ビュー（Inspector の入力欄と表示部分だけを切り抜き）】

考えてみよう

なぜ、日本語が表示されないのでしょうか。

答え：TextMeshPro は、文字の画像をフォントアセットにまとめて描画します。標準のフォントアセットには日本語の文字が入っていないため、表示できません。日本語の文字が入ったフォントアセットを自分で作る必要があります。

ポイント2　日本語フォントを用意する

  1. Web ブラウザーで Google Fonts を開き、Noto Sans JP を検索してダウンロードします（SIL Open Font License で配布されていて、ゲームにも使えます）
  2. ダウンロードした zip ファイルを解凍し、中の static フォルダーにある NotoSansJP-Regular.ttf を使います
  3. Unity の Project ウィンドウで Assets の下に Fonts フォルダーを作り、NotoSansJP-Regular.ttf をドラッグ＆ドロップで入れます

【画像：Project ウィンドウの Fonts フォルダーに、フォントファイルが入った状態（Project ウィンドウだけを切り抜き）】

ポイント3　TextMeshPro 用のフォントアセットを作る

取り込んだフォントを、TextMeshPro が使える形（フォントアセット）に変換します。

  1. Project ウィンドウで、ポイント2で入れたフォント（NotoSansJP-Regular）を選びます
  2. メニューの Assets ＞ Create ＞ TextMeshPro ＞ Font Asset ＞ SDF を選びます
  3. Fonts フォルダーに、NotoSansJP-Regular SDF というフォントアセットができます
  4. できたフォントアセットを選ぶと、Inspector の Atlas Population Mode が Dynamic になっています

【画像：Assets ＞ Create ＞ TextMeshPro ＞ Font Asset ＞ SDF のメニューと、Fonts フォルダーにできたフォントアセット（必要な部分だけを切り抜き）】

なぜ Dynamic にするのか

フォントアセットの作り方は、大きく2つあります。

  • Static：使う文字をすべて先に指定して、文字の画像を作っておく方式。日本語は文字数が多いので、ファイルが大きくなります
  • Dynamic：表示するときに、必要な文字だけを作る方式。文字を先に指定する必要がありません

最初の一歩としては、手順が少ない Dynamic が適しています。Unity 6 の Create メニューで作ったフォントアセットは、最初から Dynamic になっています。表示した文字は、フォントアセットの中の画像（アトラス）に、少しずつ追加されていきます。

ポイント4　テキストにフォントアセットを設定する

  1. Hierarchy で UIText を選びます
  2. Inspector の Font Asset 欄に、ポイント3で作ったフォントアセット（NotoSansJP-Regular SDF など）をドラッグ＆ドロップします

Scene ビューのテキストが、日本語で表示されれば成功です。文字が折り返されて見づらいときは、Rect Transform の Width を 600 くらいに広げます。

【画像：Font Asset を設定して、日本語が表示された Scene ビュー（Inspector の Font Asset 欄と表示部分だけを切り抜き）】

ポイント5　スクリプトで文字列を変更する

ここまでは Inspector に入力した文字を表示しました。今度は、スクリプトから文字列を変更します。

  1. Project ウィンドウの Assets で右クリックし、Create ＞ MonoBehaviour Script を選んで、名前を TextChanger にします
  2. TextChanger をダブルクリックして開き、次のコードにします
  3. Hierarchy で右クリックし、Create Empty で空のオブジェクトを作って、名前を TextManager にします
  4. TextChanger を TextManager にドラッグ＆ドロップして付けます
  5. TextManager の Inspector に表示された Ui Text 欄へ、Hierarchy の UIText をドラッグ＆ドロップします
using TMPro;
using UnityEngine;

public class TextChanger : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI uiText;

    void Start()
    {
        uiText.text = "髙橋さん、こんにちは！";
    }
}

Play ボタンを押して、Game ビューに「髙橋さん、こんにちは！」と表示されれば完成です。

【画像：TextManager の Inspector（Ui Text 欄に UIText を接続した状態）と、Play 中の Game ビュー（必要な部分だけを切り抜き）】

コードのポイント

  • using TMPro;：TextMeshPro のクラスを使うために必要です
  • TextMeshProUGUI：UI 用の TextMeshPro の型です
  • [SerializeField]：Inspector から UIText を接続できるようにします
  • uiText.text = "…";：text に文字列を代入すると、表示が変わります

発展　自分で試してみよう

  1. "髙橋さん、こんにちは！" を、自分の名前や好きな言葉に書き換えて、Play で表示を確かめます
  2. Hierarchy で右クリックし、3D Object ＞ Text – TextMeshPro で 3D のテキストを作ります。スクリプトのフィールドには、どの型を使えばよいでしょうか

3D のテキストの答え

3D のテキストは TextMeshPro 型です（UI 用は TextMeshProUGUI）。[SerializeField] private TextMeshPro text3D; のようにフィールドを作り、同じように text に代入します。3D のテキストにも、ポイント4と同じ手順で Font Asset を設定してください。

うまくいかないとき

  • 日本語が四角（□）のまま：ポイント4で、UIText の Font Asset 欄にフォントアセットが設定されているか確認します
  • Play のあとに、フォントアセットが変更されたと表示される：Dynamic 方式では、表示した文字がフォントアセットに追加されるためです。詳しくは下のまとめ記事を参照してください

まとめ

日本語を表示するには、日本語の文字が入ったフォントアセットを作って、テキストに設定します。Dynamic 方式なら、文字を先に指定せずに始められます。

Static 方式、JIS 第1・第2水準の文字セット、Fallback フォント、Git での管理など、さらに詳しい内容は「TextMeshProのテキストで全ての日本語を表示したい場合」にまとめています。

訪問数 8 回, 今日の訪問数 8回

広告

Unity

Posted by hidepon