Unity Tips編 #16 Unity CLI + Unity Pipelineを導入してClaude CodeでUnityを操作できるようにする

どうも蒼水です。
AI編にするか迷ったんですが前回記事からの続きなのでUnityTipsとして書きます。
前回の記事に引き続きUnity CLI + Unity Pipelineが導入された環境を前提としてClaude CodeでUnityエディタを操作できるようにしたのでその導入記録です。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

前回の記事で導入したUnity CLI とUnity PipelineでAI AgentがUnityエディタを操作するための準備は整っているので彼らが実際に操作できるようにすることを目的とします。
なお筆者はClaude Codeを使用しているので今回の内容ではClaude Codeでの連携になりますので予めご了承ください。
前回記事が必須になっているため、これらを導入していない方は先に以下の記事を参照してください。
atelier-aomi.hatenablog.com

前提：Claude Codeが必要とするもの

UnityとClaude Codeが連携するためには必要なものが３つほどあるようなので一旦それらをまとめておきます。
これらをを用意することで実行可能なコマンド等をClaude Codeは必要に応じて呼び出すことができるようになります。

Unity Pipeline用のSkills

Claude CodeはUnity CLIやUnity Pipelineをことを事前に理解しているわけではありません。
そのためUnityを操作するにあたり、彼らがそれらを理解するための前提知識をSkillsとして用意して常に読みに行くような環境を構築します。

CLAUDE.md への記述

CLAUDE.mdは Claude に永続的な指示を与え、自動メモリで Claude が自動的に学習を蓄積するためのものです。
ここに関連知識を追記しておく必要があります。

code.claude.com

Setting.json への記述

Settings.jsonでは実行できるコマンドの許可リストを記述できます。破壊的なコマンドを都度許可制ににしたり常に許可するコマンド等を記述しておきます。

必要なものを用意する

前項で記述した3つが必要になりますがこんなもの自分で書いてられないのでClaude Codeに丸投げします。
前回の記事までで自分のプロジェクトにはUnity CLIとUnity Pipelineは導入してローカルHTTPサーバーも立てられているのでそれらをClaude Codeに以下のプロンプトで読ませてみました。

• このプロジェクトでClaudeCodeと連携するためにUnity CLIとUnity Pipelineを導入してある。これからClaudeCodeがこれらが持つコマンドを理解してそれらを自動で実行できるようにしたい。

その結果として以下の3つが作成されました。これが前項で説明した3つの必要なものです。

ローカルHTTPサーバーと接続を確認する

前回までの記事で各種設定が済んでいればUnityエディタを起動していれば自動的にローカルHTTPサーバーが立ち上がります。
以下のコマンドで接続の確認は可能です。

unity pipeline list

以下のように表示されていれば準備はできているのでClaude CodeはUnityを操作できる状態になっています。

Claude Codeに直接聞いてしまっても良いです。

• 今ってUnityのローカルHTTPサーバーと接続できてる？

実際にClaude Codeで操作してみる

Transformを操作する

Transform等を制御する例として上動画ではキャラモデルを後ろ向きになるようにY軸で180度回転させる操作をClaude Codeにさせてみました。
注：動画では思考中が長いのでカットしています。

アセットを配置する

次にアセットの配置例として上動画ではキャラモデルと同じ位置にプリミティブなキューブを配置させてみました。
今回はキューブを配置していますが、あらかじめ用意したアセットとかを指定の位置に配置することも問題なくできます。

マテリアルを設定する

最後に上画像ではキャラモデルを取得してそのモデルが持つマテリアルをすべて取得し、Base Colorを赤に設定してみました。
Claude CodeはRendererを探索しそれが持つマテリアルをすべて取得したのちに該当プロパティを見つけ全てのマテリアルに対して順に実行している様子が確認できます。

簡単なゲームを作ってみる

上動画のゲームは人が一切手を入れることなく横スクロールの障害物を避けるゲームを作ってくれというゴールを決めてClaude Codeに作らせたものです。
ビジュアル周りは人が整えるとして、ゲームの基本的な設計/ロジック周りはやらせても問題ないかなぁという気持ちですね。
ざっくり基礎だけ作らせて人間が詰めていくみたいなフローや、とりあえず触れるプロトをさっと作ってしまうとかは全然アリな気がします。

これらはあくまでも一例となりますが理論上人間が手動で操作できる操作はほぼほぼ操作できると思われ、タスクを設定してあとはお任せしてしまう、ということが可能です。

おわりに

最近IDEも触らなくなってきているしUnityエディタもあまり触らなくても開発ができてしまう時代が来てしまうのだろうか...。
さすがにビジュアルに関するアセットとかは人の手入れたいけどコードとか設計はLLMに任せてしまっても良さそうな気がしますねぇ。
寝る前とかに指示だけしておいて起きたら出来てる、とかそういうのができてしまうので便利ですね。
Unity7から本格的にAIが導入されていく雰囲気があるのでしっかり追いかけて適応していきたいですね。

次回記事

＜記事ができ次第追加＞

Unity Tips編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク

Unity Tips編 #15 Unity CLIとUnity Pipelineをインストールして使用する

どうも蒼水です。
AI時代が進みゆく中Unity7からよりAIを使用を前提としたような機能が追加されていきそうな感じになっているのでこれからのために少しずつ導入を進めていこうかと思います。
前回のUnity Tips記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

今回はUnity7の到来に備えてUnity6以降から使用可能になっているUnity CLIというものを自分のプロジェクトに導入し、コマンドラインから実際操作して理解を深めることを目的とします。
なお、今後進めていくLLMと組み合わせた使用方法までは進めず、まずはUnity CLIのみで何ができるのかを理解することを目的とします。
ClaudeCode等のAI Agentとの組み合わせについては次回記事で執筆します。

Unity CLIとは？

Unity CLIとはUnity Command-lineInterfaceのことで従来のように通常Unityエディタを操作して何かするのではなく、コマンドライン（WindowsだとPowerShell等）から操作するためのインターフェースです。
これを使用することでいつものようにUnityエディタを手動で操作するのではなくコマンドラインからあらゆる操作を実行することができるようになります。
なお、Unity CLIはUnity6以降で使用可能なもののためそれ以前のエディタでは使用できてない点に注意してください。
これはClaudeやCodex等のLLMにUnityを操作させる際に非常に役に立ちます。
docs.unity.com

Unity CLI をインストールする

docs.unity.com
上記のドキュメントを見つつ進めていきます。なお、筆者はWindosなのでその前提で書きます（MacOSの方は上サイトから確認できます。）
先に以下のcdコマンドを使用してPowerShellで使用するプロジェクトに移動しておきましょう。
自分の場合は以下のパスに本ブログ用のプロジェクトを作成しているので以下のように移動しておきました。ここは自分のプロジェクトに合わせてください。

cd D:\GitProjects\TeckBlog

次にUnity CLIを以下のコマンドでインストールします。

$env:UNITY_CLI_CHANNEL='beta'; irm https://public-cdn.cloud.unity3d.com/hub/prod/cli/install.ps1 | iex

コマンドが実行されると数秒かけてインストールが実行され、無事完了すれば下画像のようになります。
再起動してくれと指示されているのでPowerShellを再起動しましょう。

次に公式の記事にあるように以下のコマンドを実行してコマンド一覧を取得できるか確認してみましょう。

unity help

無事実行できれば下画像のような状態になります。

ここに表示されているものがUnity CLIで実行できるコマンド一覧となります（画面外にたくさんあるので各自確認してください）
試しにバージョン確認のコマンドを実行してみましょう。

unity --version

実行するとインストールしたUnity CLIのバージョンが確認できますね。現在Unity CLIはbetaとして公開されていることがわかります。

一旦これでUnity CLIを使用してUnityをコマンドラインから直接操作する基礎部分を構築することができる環境が整いました。

Unity CLIのコマンドを使用して実際に操作してみる。

では本題。ここから実際にUnity CLIを使用してUnityエディタを操作してみましょう。

Unityアカウントにログインする

認証で引っかかるとアレなので先にUnityアカウントのログインをしておきます。これもUnity CLIから可能となっており以下のコマンドから認証できます。

unity auth login

このコマンドを実行するとブラウザが立ち上がりログインを求められます。
ブラウザ側でログインすることでUnityアカウント認証を行えます。

ログインの許可が求められたらAllowします。

これで無事認証が完了しているのでPowerShellの方の戻ると「サインインしました。」と出ていれば認証成功いることを確認できます。

任意のプロジェクトを開く

プロジェクトを開くには以下のコマンドを実行します。

unity open

この際openの次にプロジェクトパスを指定する必要があるようですが、cdコマンドで既にプロジェクトの階層にいるのでopenだけで開くことができます。
任意のunityプロジェクトのパスを指定すればそのプロジェクトを開くことができます。
コマンドが成功すると「現在のディレクトリのプロジェクトを開いています」と出て、そのあとUnityプロジェクトが起動したことがわかります。

なお、openをはじめとした実行できるコマンドはこちらにリファレンスがあるのでunity help以外でもこちらで確認することもできます。
docs.unity.com

Unity Pipeline パッケージをインストールする

次にコマンドラインからUnityエディタをローカルHTTPサーバー経由で制御するためのツールであるUnity Pipelineパッケージをインストールしておきます。
インストールはコマンドラインから行うことになるので以下のコマンドを実行します。

unity pipeline install

無事インストールできれば下画像のようになりインストールされたことが確認できます。
Packages/manifest.jsonに追加、とあるのでエディタに戻るとインストールの読み込みが走ります。

読み込みが終わってPackageManagerを確認するとUnity Pipelineパッケージが発見できます。
これでコマンドラインからUnityエディタを操作する準備が整いました。
この状態になればエディタを起動した際にローカルHTTPサーバーが立ち上がりUnityエディタを操作できるようになります。

次にローカルHTTPサーバーの状態を確認するために以下のコマンドを実行します。

unity pipeline list

Unity Pipelineパッケージが正しくンストールされ、問題なければサーバーの状態が下画像のように表示されます。
これで全ての準備が整いました。

以下のコマンドを実行するとunity pipelineで実行可能なコマンド一覧を取得できます。

unity command

これからのコマンドのうち使いやすそうなものをいくつか実行してみましょう。

シーンを再生/停止する

シーンを再生するには以下のコマンドを実行します。
なお、Unity Pipleline パッケージのコマンド実行にはかならずunity cmdあるいはunity commandのあとに続けて書くようにします。

unity cmd editor_play

逆に停止する際は以下のコマンドで停止できます。

unity cmd editor_stop

おわりに

このようにUnity CLI + Unity Pipelineパッケージを使用することでUnityエディタを手動で触ることなくコマンドラインから実行できる環境を構築することができます。
今回は理解をするために手動でコマンドを実行したりしていましたが、実際のワークフローではこの環境をベースにClaude CodeやCodex等のLLMと連携し彼らAI Agent自身がコマンドを実行できるようにすることでUnityでのAIを使用したワークフローの構築に役立てます。
なので実際に手動でコマンドを人間が実行するわけではなく、これらのコマンドをLLMが認識して必要に応じてあらゆるコマンドを彼らが自動で実行するというのが実際想定しているワークフローとなります。
次回記事ではここまでで構築した環境をもとにClaude CodeやCodexといったLLMとの連携を行い実際にAI AgentにUnity開発を行わせてみます。

次回記事

atelier-aomi.hatenablog.com

Unity Tips編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク

Unity UI編 #10 ボタンのUIを理解する

どうも蒼水です。
今回は画像、テキストと触ってきて次はボタンのUIについての理解を深めていきます。
前回のUI記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

今回はボタンUIを実際に配置して機能を設定し、実行するところまでを触りながら理解を深めることを目的とします。
ボタンを押したときの挙動は予め自分で機能を定義することができるので結構いろいろなことができます。
ボタンはこれまでの画像とテキストの組み合わせであり、スクリプトとの連携も必要になるので前回までの内容が理解できている方が良いので必要あれば前回までの記事を参照してください。

ボタンを配置する

ボタンUIを配置するにはヒエラルキーで右クリック -> UI -> Button - TextMeshPro を選択して配置することができます。
あとはマニピュレータかRect Transformで位置を設定して任意の場所に配置します。

ボタンのオブジェクト構成を理解する

配置したボタンの中身を見てみましょう。
前回までの記事で画像やテキストを理解してきたわけですが、ボタンのUIはこれまで扱ったそれらを組み合わせたものになっています。
また、ボタン独自のコンポーネントとしてButtonというコンポーネントがアタッチされており、ボタンを押したときの挙動を設定することができます。

Button コンポーネントを理解する

ここからはButtonコンポーネントにフォーカスしていきます。
理解しておくべき箇所はボタンのルックを定義するColor関連とOn Click()の2か所が特に重要となります。
それぞれ確認していきましょう。

Color関連

Color関連にはいろいろとありますが、要するにマウスの挙動に合わせてボタンのルックを定義するものです。
上動画ではマウスカーソルを動かしてボタンUIに重ねる→クリック（長押し）→離して別の場所をクリック（非選択状態にする）
という流れの動画です。以下の各色の説明と合わせて理解してみてください。

Normal Color	通常時の色
Highlighted Color	マウスカーソルと重なっているときの色
Pressed Color	クリックされている状態（押しっぱなしにされているとき）の色
Selected Color	クリックして選択された状態の色
Disable Color	無効化されている状態の色

On Click()

ボタンにおいて最も重要になるのがこのOn Click()です。
こちらはスクリプトとの連携が必須にはなるのですが、スクリプト側で設定した挙動をボタンを押したときにに発火させるための機能となります。
この後はサンプルスクリプトと一緒に説明していきます。

On Click()に機能を設定するためには機能を予め設定したスクリプトを用意します。
今回は以下のようにText Mesh Proのテキストを更新するスクリプトを用意しました。機能としてはText Mesh ProのTextを参照し書き換える機能となります。
ここで大事なこととしては関数はPublicに設定し、外部から呼び出せるようにしておく必要があります。また戻り値もvoid（戻り値無し）にしておきます。
引き数も1つに限り設定することができますが、それはこの後別途説明します。

public class ButtonSample : MonoBehaviour
{
    [SerializeField] TextMeshProUGUI textMeshPro;
    
    public void OnClickSample1()
    {
        textMeshPro.text = "1番目のボタンを押しました。";
    }

    public void OnClickSample2()
    {
        textMeshPro.text = "2番目のボタンを押しました。";
    }
}

このスクリプトをどこでも良いのでアタッチします。今回はわかりやすくButtonそのものにアタッチしてみました。
On Click()の＋ボタンを押すとスクリプトを参照する場所が出てくるのでスクリプトを参照し、先ほど設定した関数を選択することでその機能を呼び出すことができます。
この設定をしたボタンを押したときの挙動が下動画になります。押したボタンによってテキストが書き換えられていることがわかると思います。

また、ボタン機能には前述のように1つに限り引き数を取ることもできます。
分岐処理を１つの関数として下のような書き方をすることもできます。
ボタンの番号に合わせて処理を分岐させる処理となります。

public class ButtonSample : MonoBehaviour
{
    [SerializeField] TextMeshProUGUI textMeshPro;
    
    public void OnClickSampleAll(int num)
    {
        switch (num)
        {
            case 1:
                textMeshPro.text = "1番目のボタンを押しました。";
                return;
            case 2:
                textMeshPro.text = "2番目のボタンを押しました。";
                return;
            default:
                return;
        }
    }
}

引き数が設定されている場合On Click()の中に引き数を設定できるフィールドが表示されるのでそこに必要な値を設定することで対象の関数に引き数を渡すことができます。
書き方は違えど挙動としては同じになるのでその辺は自分のプロジェクトでどういった設計にするかで使い分けるのが良いと思います。

ボタンのルックを変更する

標準のボタンのルックはさすがにアレなので独自のものに変更してみましょう。
今回独自のものとして上画像のような画像を用意してSprite Editorで対応したものを用意しました。
今回は枠の追加とドロップシャドウを追加しています。


用意出来た画像をButtonについているImageコンポーネントの参照に入れ替えることでルックを変更することができます。
ルックがおかしくなった場合はPixels Per Unit Multiplierの値を調整すると改善することがあります。

おわりに

これでボタンUIの基本的な設定方法は理解できたと思います。
ボタン機能は自分でスクリプトを書かないといけないのでデザイナーだとちょっと敷居が高い気もしますが、昨今はAIもあるのでClaudeとかに機能作ってもらって設定するとかもアリだと思います。
ボタンのルックはプロジェクトに合わせて良い感じの素材を用意して設定しましょう。
今回さらっとスクリプトとUIの繋ぎこみをやりましたが、このへんの話はUIの基本周り網羅したら別途記事を執筆予定です。

次回記事

＜記事ができ次第追加＞

Unity UI編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク

AI編 #逆引きまとめ

AI編記事の概要の逆引きでまとめていますので目的に応じてご利用ください。
記事が更新されるたびこちらのまとめ記事も随時更新されていきます。

Claude / Claude Codeの基本的なあれこれ

Claudeのパーソナライズについて知りたい

▶Claudeのパーソナライズについてはこちら
atelier-aomi.hatenablog.com

ClaudeのSkillsについて知りたい

▶Claudeのパーソナライズについてはこちら
atelier-aomi.hatenablog.com

Unityとの連携事例

Claude Codeを使用したUnityでのシステム開発事例

▶Claude Codeを使用したUnityでのシステム開発事例はこちら
atelier-aomi.hatenablog.com

AIを使ったツール開発事例（ツール公開あり）

テクスチャ生成ツール

▶テクスチャ生成ツールの事例はこちら
atelier-aomi.hatenablog.com

ノーマルマップ生成ツール

▶ノーマルマップ生成ツールの事例はこちら
atelier-aomi.hatenablog.com

Google WorkSpaceとの連携事例

GASで情報収集/統計を自動化した事例

▶GASで情報収集/統計を自動化した事例はこちら
atelier-aomi.hatenablog.com

以下記事追加予定地

随時追加

Unity UI編 #逆引きまとめ

Unity UI編記事の概要の逆引きでまとめていますので目的に応じてご利用ください。
記事が更新されるたびこちらのまとめ記事も随時更新されていきます。

基礎編

UIに関する基本的なことを知りたい

▶UIの基礎はこちら
atelier-aomi.hatenablog.com

Canvasについて知りたい

▶Canvasについてはこちら
atelier-aomi.hatenablog.com

UIと画面解像度の関係性を知りたい（Canvas Scaler）

▶UIと画面解像度の関係性についてはこちら
atelier-aomi.hatenablog.com

UIの当たり判定について知りたい（Raycast）

▶ UIの当たり判定についてはこちら
atelier-aomi.hatenablog.com

UIの位置や大きさの調整方法について知りたい（Rect Transform）

▶UIの位置や大きさの調整方法についてはこちら
atelier-aomi.hatenablog.com

画像編

画像を配置したい

▶画像の配置方法についてはこちら
atelier-aomi.hatenablog.com

Sprite Editorについて知りたい

▶Sprite Editorついてはこちら
atelier-aomi.hatenablog.com

テキスト編

テキストを配置したい（Text Mesh Pro）

▶Text Mesh Proの基本的な使い方ついてはこちら
atelier-aomi.hatenablog.com

テキストの描画周りについて知りたい

▶Text Mesh Proの基本的な使い方ついてはこちら
atelier-aomi.hatenablog.com

ボタン編

ボタンを配置と設定したい

▶ボタンの配置と設定方法についてはこちら
atelier-aomi.hatenablog.com

以下記事追加予定地

随時追加

Unity UI編 #9 TextMeshProの色やマテリアル設定を理解する

どうも蒼水です。
今回は前回に引き続きTextMeshProのお話でテキストのマテリアル周りの理解を深めていきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

前回の記事ではTextMeshProの基本的な使い方は理解できたのでそのあとのお話であるテキストUIのマテリアル周りについて掘り下げてテキストの見た目周りの設定を理解することを目的とします。

フォントのマテリアルについて

フォントのマテリアルは前回の記事で作成したFont Asset中に作成されており、それがTextMeshProが設定されているオブジェクトに自動でアサインされます。
このマテリアルの設定では色やアウトライン等テキストを加工できる設定があり、ここを調整すればある程度文字の加工を行うことができます。

フォントの色を設定する

フォントの色設定はTextMeshProコンポーネントとマテリアルとの2種類の設定方法がありますが、挙動が違うのでまずそこは理解しておきましょう。
上動画のようにTextMeshProコンポーネント側での色設定ではオブジェクト単位での設定になりますが、マテリアル側を設定する場合はそのフォントを使用しているすべてに影響する点に注意しましょう。
そのため原則はTextMeshProコンポーネント側での設定が推奨されます。

マテリアル側を設定するシチュエーションとしてはアプリケーション全体で使用する共通仕様として設定する場合になると思います。
例えば「基本テキストカラーは白である」「全ての文字はアウトラインやドロップシャドウが必要である」といった共通仕様である部分はマテリアルで設定するのが良いかなと。

単色を設定する

TextMeshProコンポーネントで設定する場合は特定の文字列だけ赤で強調したい、とかコンポーネント単位で共通仕様から逸脱した設定を行う場合に設定すると良いと思います。
例えば下画像のようにあえてTextMeshProコンポーネントを分けることで一部のテキストのみ色を変更したりする場合ですね。

グラデーションを設定する

またColor Gradientにチェックを入れることでグラデーションを付けることができます。
このColor Gradientでは四隅を基準に指定した色をグラデーションさせることができます。

もっと凝りたいとき

もっと凝りたい...?そんな時はもはやTextMeshProを使用するべきではなく画像として貼ってしまえばよい場合もあります。
ロゴといったガッツリとデザインされた文字列はさすがにフォントで対応するのはなかなか難しいのでそこはもう素直にImageコンポーネントのUIで文字を表示させましょう。

アウトラインを付ける

アウトラインを付ける場合はマテリアル側で設定します。
TextMeshProコンポーネントにはアウトライン設定はないので共通仕様として必要になるのであればこちらで設定します。
アウトラインと次項のドロップシャドウ等はSDFという概念を使用します。
フォントのSDFについてはこちらに目を通しておくと良いと思います。
docs.unity3d.com
youtube.com

なお、SDFはFont Asset CreatorのRender ModeでSDFの設定ができるのでそこが有効になっていれば基本は問題ないと思いますが、Padding設定が０になってしまっているとSDFのための領域が確保されないためSDFに必要な部分が描画されないという問題が起こる点に注意してください。
のドロップシャドウも含めSDFが正常に描画されていない場合アウトラインもドロップシャドウも機能しない問題が発生します。

ドロップシャドウを付ける

ドロップシャドウを落とすにはマテリアル設定側のUndelayにチェックを入れ各種設定を行うことで影を落とすことができます。
開発しているアプリケーションの振ニキにもよりますが、個人的にはドロップシャドウを有効にするのは結構おすすめしています。
というのもドロップシャドウがあることで視認性の向上やややリッチ感を出すことができるのでUX向上という意味ではおすすめです。
フォトショでデザインしてるときとかもドロップシャドウはそこそこ使うのでその感覚でつけたりつけなかったりするのが良いと思います。

体感白背景に黒テキストの時はあった方が良いなーと感じます。逆に黒背景白文字の時はその恩恵はほぼないの気がしています。
黒い影ならそれはそうだし、あえて白い影的にずらしのような表現としても使えますが個人的にはうーんという感じ。

おわりに

TextMeshProはただテキストを配置するだけでなくある程度加工もできるのでフォトショ通さなくてもそれなりの文字デザインが可能になっています。
これやろうと思えば自分でテキスト用シェーダー描いておもろいこともできそうな気がしているのでそのうち試してみたいですね。

次回記事

atelier-aomi.hatenablog.com

Unity UI編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク

Unity UI編 #8 TextMeshProの使い方と日本語フォントに対応する

どうも蒼水です。
今回はテキストを表示するUIをTextMeshProを使用して作成していきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

今回はUnity標準で用意されているTextMeshProというものを使ってテキストUIを作成することを目的とします。
また、標準フォントでは日本語がサポートされていませんので日本語の扱い方も含め解説していきます。

Text Mesh Proの使い方

hierarchyで右クリック -> UI -> Text - TextMeshProがあるのでそこから作成できます。
作成するとText Mesh Proというコンポーネントがついているのでそこにテキストを入力することでUIとしてテキストを表示することができます。色やフォントサイズなどフォトショとかでできるような操作は概ねできるのとそんなに難しいものでもないのでここは割愛します。
Color Grading等色設定に関しては触れておきたいのでそれは次回記事で触れます。

使い方自体はとても簡単ですが、ちょーっとデフォルトだとダサさがやばいですね！というわけで次項以降でフォントの変更方法などにも触れていってみようと思います。

前提：使用するフォントについて

フォントはデフォルトではLiberationSansが使用できるようになっていますが、これを別のフォントにすることができます。
基本的に契約して使用するタイプのフォント類は結構いろいろめんどくさいので自分はよくGoogle FontsというGoogleが無料で提供してくれているフォントを使用しています。
もちろんゲームに使用することも可能になっているので非常に重宝しますので今回はこちらを使って解説していきます。
実際自分のプロジェクトで使えそうなフォントがあるならこちらからの取得をおすすめします。神です。
なお、ほとんどのGoogle FontsはSIL Open Font License (OFL)というライセンスが適用されています。商用利用やソフトウェアへの組み込みもOKです。
fonts.google.com

前提：日本語文字サポートについて

UnityのText Mesh Proは標準では日本がサポートされていません。
後述しますが、Font Assetを作成する際に必要な文字を羅列する必要があります。
ASCIIやJIS規格などいろいろありますがググると色々出てきますが、大体の日本語をサポートできる一覧をGithubにまとめてくださっている方がいらっしゃったのでこちらをいつも利用させていただいております（いつもありがとうございます）
gist.github.com

フォントを用意する

フォントの用意については前述したGoogleFontsに行き使用したいフォントをダウンロードして使用します。
今回はわかりやすくドット感のあるフォント（Dot Gothic16）を使ってみることにします。
右上のGet Fontをクリックして次に進みます。
fonts.google.com

すると遷移先のページからダウンロードができるので必要なフォントをダウンロードします。

zipファイルがダウンロードされるのでその中にある.ttfというものがフォント本体であり、これをUnityにインポートして使用します。
これでUnityに持ち込むところまでは完了です。OFLというファイルは入れなくても動作的には問題ないです（ライセンスが書かれたテキストファイルです）
次項で実際にUnityで使用するためのFont Assetというデータを作成していきます。

Font Assetを作成する

Font Assetを作成するには window ->Text Mesh Pro -> Font Asset Creatorで開くことができるFont Asset Creatorを使用する必要があります。

先ほどインポートしたttfファイルをSource Fontを参照させて諸々設定します。
基本デフォルトの設定でも問題ないですが目的の環境によって解像度とかは下げたりすることがあります。
準備ができたらGenerate Font Atlasボタンを押すと読み込みが始まるのでしばし待つと下画像のようになるのでSave as...で作成されたFont Assetを任意の場所に保存します。

保存先はデフォルトで入っているLiberationSansのFont Assetと同じ場所で良いと思います。
これでFのアイコンのFont Assetが作成できました。
このアセットがあることでUIで日本語フォントを使用できるようになります。

フォントを変更する

Font Assetの用意はできているのであとはText Mesh Proコンポーネントにあるフォントの参照をLibarationSansから今回用意したDot Gothic16に変更します。
これにより日本語もサポートされたFont Assetですので漢字である「蒼水家技術録」というテキストも正常に描画されてることが確認できます。
サポートされない文字は□□□□□のような描画になってしまうのでそれが解消されていますね。

なお、先ほどの日本語サポート文字一覧でも漏れている文字や記号があったりするのでそういった場合は先ほどの一覧に自分で必要な文字を追加することで対処可能です。
もし新しくフォントを今回の流れで導入した後でも□□□□□が現れた場合はサポートされていない文字が使用されている、ということなのでそこは適宜追加しましょう。

余談：Font Assetの最適化について

Font Assetの中身についてのお話になりますが、Font Assetにはサポートする全ての文字を含めたテクスチャとマテリアルが含まれます。
これは先ほどのFont Asset Creatorで設定できる解像度と関係があり、当然解像度が大きければ綺麗に文字を出せます。
一方で、あまりにも大きいとテクスチャサイズが大きくなりすぎてメモリを圧迫することがあります。フォントだけで数十MB持ってかれる場合もありアプリケーションを軽量にする意味でも解像度は適切に設定する必要があります。
また、文字数が多ければ多いほどきれいに出すための必要テクスチャサイズは大きくならざるを得ないのでアプリケーションで使用しない文字列は排除し、必要最低限の文字だけで構成することが望ましいです。
試作段階であったりする場合は気にしなくてよいと思いますがビルドして実機動作させる場合はこの辺りは最適化しておくと良いでしょう。

上画像は2048pix と1024pixの解像度でのFont Assetのルックの差になります。
あまりに小さくなりすぎると文字がボケボケになり、UXに支障をきたしますのであくまでも適切なサイズ感にとどめUXは保てる最低ラインを確保しましょう。

おわりに

最後にそれっぽい感じの会話テキスト表示を作ってみました。これでテキストUIの基本は理解できました。
また日本語のサポートもできたので概ねテキスト周りで困ることはなく開発が来出ると思います。
次回はテキストのマテリアル周りについて深堀していければと思います。
テキストにはアウトラインを付けたりドロップシャドウを付けたりすることができるようになっているのでそのあたり触れていければと思います。

次回記事

atelier-aomi.hatenablog.com

Unity UI編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク