UnityのTextMesh Proをマスターする(2/3)

TextMesh Pro スクリプト操作編

Posted by 51n1 on 16 Sep, 2021
  1. Home
  2. Unity Tips

もくじ

1. TextMesh Pro 基本編
2. TextMesh Pro スクリプト操作編

C#スクリプトの作成

ソフトウェアのバージョンは以下の通りです。

  • Unity 2021.1.20f1
  • TextMesh Pro 3.0.6

C#スクリプトでTextMesh Proのテキストを操作してみたいと思います。簡単な例として画面クリックで数字をカウントアップするデモを作ります。

まずはTextMesh ProのTextゲームオブジェクトをCount Textという名前で作成します。これをカウントアップさせる数字とします。適当にテキストのサイズや色を設定します。よくわかるようにテキストサイズを大きめに変更しシーンの中心に配置します。( 2.1)

2.1 Text - TextMesh Pro

次にC#スクリプトを作成します。Assetsフォルダ配下にScriptsフォルダを作成し、CountUpという名前で新規にC#スクリプトファイルを作成します。( 2.2)

そしてCount Textに作成したCountUpスクリプトをアタッチし、CountUpスクリプトをダブルクリックして既定のエディタで開きます。( 2.3)

2.2 Create CountUp Script

2.3 Add CountUp Script

CountUpスクリプトの主なポイントと全体のコードは以下となります。

  1. TextMesh ProのNamespaceを追加します。
    using TMPro;
  2. TextMeshProUGUI参照用の変数を宣言します。
    TextMeshProUGUI countText;
  3. Startメソッド内でGetComponentを使いTextMeshProUGUIを参照させます。
    countText = GetComponent<TextMeshProUGUI>();
  4. Updateメソッド内にTextMesh Proのテキスト書き替えの処理を書きます。
    countText.text = count.ToString(); 
// CountUp.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro; // ----- (1)

public class CountUp : MonoBehaviour
{
  TextMeshProUGUI countText; // ----- (2)
  int count = 0;

  private void Start()
  {
    countText = GetComponent<TextMeshProUGUI>(); // ----- (3)
    countText.text = count.ToString();
  }

  private void Update()
  {
    if (Input.GetMouseButtonDown(0))
    {
      count++;
      countText.text = count.ToString(); // ----- (4)
    }
  }
}

テキストにグラデーションを付けてみましたが、実行すると以下のビデオのような感じになります。( 2.4)

2.4 C# Script - TextMesh Pro

グラデーションはColor GradientにチェックをしてColor Modeでグラデーションのタイプを選択してカラーを設定することができます。( 2.5)

2.5 Color Gradient - TextMesh Pro

Visual Scriptingグラフの作成

さらに先ほどのC#スクリプトで実装した処理をVisual Scriptingのグラフで作成してみたいと思います。

最初にTextMesh ProをVisual Scriptingで使用するための設定をします。Unity Editorの上部メニューからEdit → Project Settings...をクリックし、Project Settingsウィンドウを表示させ、左ペインからVisual Scriptingを選択します。( 2.6, 2.7)

2.6 Show Projects Settings Window

2.7 Visual Scripting - Project Settings

Node Libraryを開き「+」ボタンをクリックして「Unity.TextMeshPro」を追加し、「Regenerate Units」ボタンをクリックします。Regenerate Units Completedというポップアップウィンドウが表示されたら「OK」ボタンをクリックします。( 2.8, 2.9)

2.8 Node Library - Visual Scripting

2.9 Visual Scripting - Project Settings

先ほどCount Textゲームオブジェクトに追加したCountUpスクリプトコンポーネントは不要なためチェックを外して無効化しておきます。( 2.10)

2.10 Inactive C# Script Component

Count TextゲームオブジェクトにScript Machineコンポーネントを追加します。( 2.11)

今回はSourceをメニューからEmbedにしておきます。「Edit Graph」をクリックし、Script Graphウィンドウを表示させます。( 2.12)

2.11 Add Script Machine

2.12 Edit Graph

Script GraphウィンドウのBlackboardパネルでカウント用の変数を定義します。ここではGraph Variablesとしてint型のcount変数を作成します。変数名にcountと入力し「+」をクリックし追加します。Typeメニューより「Integer」を選択します。( 2.13, 2.14)

2.13 Add Graph Variables

2.14 Change Type to Integer

Script GraphウィンドウでText Mesh Pro UGUIのSet Textユニットを追加し、Start Eventと繋ぎます。次に先ほど定義したcount変数をドラッグ&ドロップでグラフウィンドウに追加しInteger To Stringユニットを間に挟んでSet Textユニットと繋ぎます。( 2.15)

同様にUpdate Eventからユニットを繋いでいきますが、画面をマウスでクリックする度にcount変数をインクリメントする処理を入れてTextMesh Proのテキストを更新します。( 2.16)

2.15 Start Event Process

2.16 Update Event Process

ゲームプレイボタンをクリックし、Visual Scriptingで実装した処理を実行します。Visual Scriptingの利点の一つとしてはScript Graphウィンドウに見られるように視覚的にプログラムのプロセスが見えることです。( 2.17)

2.17 Visual Scripting - TextMesh Pro

以上、簡単ですが、TextMesh ProのテキストをC#スクリプトもしくはVisual Scriptingで操作する方法を実践してみました。本記事ではTextMesh Proのtextプロパティの変更のみを操作しましたがそれ以外の要素についても変更可能です。変更可能なプロパティについては参考URLのScripting APIの情報を参照してください。（ 参考URL: #6 and #9）

次はTextMesh Proのテキストの見た目をマテリアルシェーダーやテクスチャの設定を変更してもう少し凝ったデザインにしてみたいと思います。

Photo by Juan Camilo on Unsplash