【Unity】TextMeshPro-日本語表示とスクリプト制御

本記事を読むと以下の実行ができます

TextMeshProで日本語表示して、画面押下でテキストを変更する。

Unityでテキストを扱うときに、「TextMeshPro」と「legacy Text」があります。
Unity公式によると、現在のテキストは、「TextMeshPro」を使用することが推奨されています。
※TextMeshPro – Unity マニュアル

しかし、いざTextMesh Proを使おうとしても、警告ウィンドウが表示されたり、日本語が四角(□)に化けたりなど課題点が多いです。

本記事では、「TextMeshPro」の導入方法と日本語の表示、スクリプトでテキストを制御する方法を紹介します。

本記事は次の人におすすめ

TextMeshProの使い方を知りたい。
日本語表示を知りたい。
スクリプトで操作する方法を知りたい。

ブログを始めるならConoHaがおすすめ！

ConoHa WING キャンペーン実施中！

ConoHaWing開設方法｜アリッシア
 技術ブログを書くべき理由｜アリッシア

TextMeshPro
画面にテキストを表示
- リッチテキスト
- グラデーション
スクリプトで文字を変える
- ソースコード
- 解説
実行
- 日本語の表示
- スクリプトでテキスト改行方法
まとめ

TextMeshPro

TextMeshProは、Unity公式が提供する文字アセットです。
従来の文字は、滲んでいて無機質な表現しかできませんでした。
scaleやフォントの大きさを適切に調整する必要がありました。

しかし、文字を鮮やかに表現できて、Bold（太字）・Italic（斜体）・Underline（下線）などの基本機能が搭載されています。

加えて、文字・行・段落の間隔調整（カーニング）や文字揃え機能（上下左右・中央・両端ぞろえ）、文字にエフェクトを付加することもできます。

数学関数で文字にアニメーションを付けることで、様々な表現が実現できます。
自動で、文字を改行してくれるので非常に便利です。

画面にテキストを表示

Hierarchyウィンドウから「UI>Text-TextMeshPro」を選択します。

TMP Importer ウィンドウが表示されますので、「Import TMP Essentials」をクリックしてTextMeshProの使用を有効にしてください。

リッチテキスト

TextMeshProの装飾は、リッチテキストで行います。

公式は、HTMLとは別物と言及していますが、基本的には同じなのでHTMLを使ったことがあると馴染みやすいです。

マークアップシステムは HTML にヒントを得ていますが、標準 HTML とは完全に別のものです。基本的な考え方はテキストの一部はマッチングするタグのペアにより閉じられるということです。
リッチテキスト – Unity マニュアル

例えば、リッチテキストをHTML風に記述すると、画像のように表示できます。

<align="center"><color=black>Alicia</color><s>ign</s><b>ing</b></align>
<align="left"><u>Left

グラデーション

Inspectorウィンドウの「Color Gradient」にチェックマークを入れます。
モードを「Four Corners Gradient」にすると、グラデーションが機能します。

スクリプトで文字を変える

画面をクリックすると、TextMeshProが変化する制御をします。
「Input.GetMouseButtonDown」は、マウスで画面押下すると処理されます。

画面押下についてまとめています。

【Unity】マウス操作をゲームに導入する画面クリックで処理

UnityでCSVのテキストをマウスクリックで１つずつ進めるには、if文でメソッド「Input.GetMouseButtonDown(0)」を使用します。ノベルゲームは画面のクリック回数に応じてテキストを表示するシステムに近づきます。

また、次のテキスト表示には、csvファイルをUnityのプロジェクトに読み込みます。

csvの作成方法とUnityにロードする方法をまとめています。

【Unity】CSVファイルを読み込み、テキストを画面に表示する

UnityでのCSVファイルの読み込み方法を解説します。エクセルやGoogleスプレッドシートでcsvを作成し、データのインポート・読み書き・外部ファイル読み込みを簡単に実装する方法を紹介。

ソースコード

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.IO;
using TMPro;


public class output : MonoBehaviour
{
    private TextAsset csvFile; 　// CSVファイル
    private List<string[]> csvData = new List<string[]>(); 　// CSVファイルを入れるリスト
    public TextMeshProUGUI textMeshPro;     //テキスト
    int i;      //現在地
    void Start()
    {
        //csvファイル処理
        csvFile = Resources.Load("test") as TextAsset; 
        StringReader reader = new StringReader(csvFile.text);
        while (reader.Peek() != -1)
        {
            string line = reader.ReadLine();    
            csvData.Add(line.Split(','));       
        }
    }

    void Update()
    {
        if (Input.GetMouseButtonDown(0))    //マウス左
        {
            textMeshPro.text = csvData[i][0];
            i+=1;
        }
    }
}

ブログを運営するメリット

プログラマーがブログを運営するメリットは沢山あります。
エンジニアはブログを運営するべき理由｜アリッシア

アウトプットによるスキル向上
メモ帳代わり
ポートフォリオ（案件獲得）

ブログを始めるためには、「テーマ」・「ドメイン」・「サーバー」の3つが必要です。
３つはブログ運営の基盤となる要素ですが、これら全て自分で用意しなければいけません。

面倒で難しくブログ開設を断念してしまう人が多いです。

ConoHa Wingの「WordPressかんたんセットアップ」は
最短10分で契約可能！

WordPressかんたんセットアップの手順を紹介しています。

【ブログ】WordPressの始め方｜ConoHa Wing契約手順

初心者でも簡単に始められるWordPressブログの立ち上げ手順を解説。学割があり大学生におすすめなConoHa WINGを使い、ガクチカとしての使い方や収益化方法も紹介します。

ConoHa WINGから契約をすれば、独自ドメイン、サーバーの用意、WordPressとの連携も簡単にできます。

さらに、２つの独自ドメインが永久無料の特典もあり、
月660円からの破格価格にもかかわらず、表示速度は国内最速です。

ConoHa WINGの詳細を見てみる

解説

名前空間

「using UnityEngine;」ーUnityのクラスや機能を使用するために必要です。Unityエンジンの各種コンポーネントや関数などにアクセスできるようになります。
「using System.Collections.Generic;」ージェネリックなコレクションクラスを使用するために必要でListのために用意します。
「using System.IO;」ーファイル入出力操作に必要なクラスを使用するために必要です。StringReaderを使用してCSVファイルを読み込んでいます。
「using TMPro;」ーTextMeshProを使用するために必要です。このコードがないとテキストが扱えません。

フィールド（メンバ変数）

「TextAsset csvFile;」ーCSVファイルのテキストデータを保持するための変数です。
「List csvData;」ーCSVファイルのデータを格納するためのリストです。各行のデータは文字列の配列として保持されます。
「TextMeshProUGUI textMeshPro;」ーテキストを表示するためのTextMeshProUGUIコンポーネントへの参照です。
「i;」ー現在のCSVデータの位置を追跡するための変数です。

Startメソッド

「Resources.Load(“test”) as TextAsset;」を使用して、Resourcesフォルダ内のtest.csvをcsvFile に読み込みます。
StringReaderを使用して、csvFile.text からテキストを読み取り、各行をコンマ(,)で区切ってcsvDataリストに追加します。

Updateメソッド

Input.GetMouseButtonDown(0) でマウスの左ボタンが押されたかどうかをチェックします。
マウスの左ボタンが押された場合、csvData リストから現在の位置 i の要素を取得し、textMeshPro.text に設定します。
その後、iをインクリメントします。

実行

ソースコードをHierarchyウィンドウにアタッチし、textMeshProを添付します。

再生ボタンを押して、ゲーム画面をマウスの左クリックをすると、文字が変化します。
しかし、日本語が□になってしまいます。

原因は、「LiberationSans SDF」は日本語対応していない言語だからです。
TextMeshProで日本語表示するには、対応したフォントをロードする必要があります。

日本語の表示

日本語の導入には、Noto Sans Japaneseを使用することをおすすめします。
執筆時点では商用利用可能ですが、規約が変更する場合があるので使用の際には確認してください。

ダウンロードしたotfファイルをUnityに入れます。
メニュー「Window>TextMeshPro>Font Asset Creator」に進みます。

Font Settings

Source Font File：使用するフォントに設定
Atlas Resolution：2つとも「8192」
Character Set：「Custom Characters」を選択

日本語の文字コードは、GitHubで公開してくださっている方のデータを使用します。
Custom Character Listの枠にjapanese_full.txtをコピー＆ペーストします。

Generate Font Atlasをクリックして、処理の完了を待機します。
完了後、Saveに進んでassetファイルを保存します。

InspectorウィンドウのFont Assetを確認すると、インポートしたフォントが使用できるようになり、日本語表示が可能になります。

スクリプトでテキスト改行方法

TextMeshProでスクリプトからテキストに改行を挿入するには、\n を使用します。

また、UnityのTextMeshProコンポーネントをスクリプトから操作するには、TMPro.TextMeshProUGUI や TMPro.TextMeshPro のプロパティにアクセスしてテキストを設定します。

using TMPro; // TextMeshProを使用するための名前空間

public class Example : MonoBehaviour
{
    public TextMeshProUGUI textMeshPro;

    void Start()
    {
        // スクリプトからテキストに改行を含めて設定
        textMeshPro.text = "Hello World!\nThis is a new line.";
    }
}

テキストに直接改行文字を挿入するだけで、
スクリプトから改行を設定することができます。