ゲーム化!tomo_manaのブログ

ゲーム化!tomo-manaのブログ

Unityでゲームを作る方法について紹介しています

Unity/C# TextMeshProUGUI に絵文字を追加する(Unity2020.3)

TextMeshProで絵文字(自作アイコン)を使用する方法(Unity2020.3を使用しています)

※最近のTextMeshProUGUI だと登録方法がまた違うようなのですが、もし古いUnityバージョンを使用している方であれば参照いただけます。

アトラス画像の作成

Unity2020.3 で TextMeshProUGUI に絵文字を追加するには、使用したい絵文字を1枚の画像(アトラス画像)に結合する必要があります。

画像はペイントソフトなどでも結合できますが、オンライン上でも結合できるサイトがいくつかありそうでした。

私はここのサイトを使わせていただきました。
画像結合ツール|フォトコンバイン


(参考)アトラス画像の作成について、先ほどのサイト(フォトコンバイン)を使ったときの画像の結合方法を書いておきます。直感的に操作できるサイトで、使いやすかったです。

入力欄に、使用したい画像をドラッグアンドドロップします。

アイコンの追加(フォトコンバイン)

出力欄は、パターン、解像度、クロップを設定して、画像の展開方法を指定します。

パディング・出力設定(フォトコンバイン)

背景を透明色にする場合は、背景欄 → カラーを選択して、カラーコード入力欄の7-8文字目に00を入力します。

背景透明色の指定(フォトコンバイン)

作成したアトラス画像はUnityに取り込みます。

上記指定後、ダウンロードします。

(フォトコンバインの説明、ここまで)


結合した画像のUnityへの取り込みは、いつもどおり Project フォルダにドラッグアンドドロップしてください。

特定のフォルダに入れないといけないというのは無さそうです。

画像の分割

Unityに取り込んだ画像を分割します。

画像の分割設定は、他のサイトでもかなり紹介されていますので、さらっとだけ触れます。


まず、Projectウィンドウ上で取り込んだアトラス画像を選択します。

取り込んだ画像の選択(Project ウィンドウ → Inspector ウィンドウ)

Inspectorウィンドウで以下を設定します。
●Texture Type:Sprite (2D and UI)
●Sprite Mode:Multiple

上記をApplyで適用した後、Sprite Editor を開きます。

Slice > Grid By Cell Size で画像を分割します。
例:Cell Size = 48×48、Offset = 0、Padding = 0

Sprite Editor での操作(分割まで)

Apply を押して保存します。

Sprite Editor での操作(画面右上にある Apply を押して)

アトラス画像を Font Asset 形式に変換する

分割した画像を、TextMeshProUGUI が読み込める形式に変換します。

先ほど分割した画像を選択した状態で、メニューから Asset > Create > TextMeshPro > Font Asset を選択します

Sprite Asset の作成

すると、先ほど分割したデータと同じ名前の Font Asset が作成されます。

TMP Sprite Asset が作成された


さて、このFont AssetをTMP Settings.assetという設定ファイルに関連付けたいのですが…

TMP Settings.asset はどこにある?

まず TMP Settings.asset がダウンロードされているかどうか確認します。

TMP Settings.asset は Window → TextMeshPro → Import TMP Essential Resoureces を開いて、Import Unity Package ウィンドウを開きます。

Essentialの中に、TMP Setting.assetsがありますので、選択してDownloadします。

Import TMP Essential Resources を開く(Window → TextMeshPro → Import TMP Essential Resources)

このとき、TextMeshProに影響を及ぼす他のアセットを組み込んだプロジェクトの場合、TMP Settings.assetのアドレスが変わっている場合があります。

TMP Settings.asset のありかを確認しよう(Import TMP Essential Resources)

そのため、このウィンドウでTMP Settings.assetのアドレスを確認します。

私の場合、Fungus の影響で、以下のアドレスに展開されました。

TMP Settings.asset を発見

TMP Settings に絵文字を組み込む

TMP Settings.assetを見つけることができたら、いよいよ先ほど分割しておいたアトラス画像を関連付けます。

TMP Settimgs.assetのDefault Sprite Assetに先ほどのアトラス画像をText Assetに変換したデータをドラッグアンドドロップします。

TMP Settings に絵文字を設定する


なお、設定した絵文字を読み出す時は、先ほど分割時に指定した名前で呼び出します。

絵文字の読出し

並び順で呼び出す場合:

"<sprite=0>" + text

付けた名前で読み出す場合:

"<sprite name=datas_0>" + text

うまく表示されたでしょうか?

絵文字の呼び出し例


私は、うまく表示できるまでに、もう少し作業が必要でしたので、以下はトラブルシューティングとしてまとめておきます。

トラブルシューティング

テキストの位置と合ってない

アイコンを呼び出した時に、テキストとアイコンのアライメントが合ってないことがあります。

アイコンと文字の位置がずれる(スクショ撮り忘れましたがもっとずれる)

その場合は、取り込んだアトラス画像から生成したText Asset を選択して、Inspector ウィンドウから Sprite Glyph Table を修正します。

アイコンの表示位置の変更(TMP_Sprite Asset > Sprite Glyph Table)

グレーアウトしているため、クリックできないように見えますが、クリックするとアクティブになりますので、編集可能です。

X、Yを変更すると表示位置(アライメント)を変更できます。単位はRectTransformのpositionと同じピクセル単位です。

色が付かない

テキスト(TextMeshProUGUI)の色を変えても、アイコンの色だけ変わらないことがあります。

アイコンの色が付かない

その場合は、アイコン専用のオブジェクトに対して、直接色を指定します。

ただこの指定方法は弱点があって、すべてのアドレス画像に一律に適用されてしまうため、表示する度に色を指定することになります。


色の指定方法ですが、

一度でもアイコンが表示されたテキスト(TextMeshProUGUI)には、その下の階層に TMP_Sub Mesh UI ゲームオブジェクト が生成されます。

TextMeshProUGUI ゲームオブジェクトの下に TMP_Sub Mesh UI ゲームオブジェクトが生成される

ここにある Tint を変更したら色が変わります。

アイコンの色を変更する(TMP_Sub Mesh UI → Tint)

ソースコードからは以下にアクセスします。

var subMeshes = tmp.GetComponentsInChildren<TMP_SubMeshUI>();
foreach (var subMesh in subMeshes)
{
    subMesh.meshRenderer.material.SetColor("_Color", Color.green);
}

先述の通り、Tint はアトラス画像全体に適用されるため、表示するタイミングでコードから色変更を指示する必要があります。


お疲れ様でした。

※冒頭にも書きましたが、TextMeshProUGUI は Unityバージョンでも挙動が異なる部分があるようなので、2020.3 以降では解消されてより使い勝手がよくなっている部分も多々あると思います。

(以上)