
TextMeshProで絵文字(自作アイコン)を使用する方法(Unity2020.3を使用しています)
※最近のTextMeshProUGUI だと登録方法がまた違うようなのですが、もし古いUnityバージョンを使用している方であれば参照いただけます。
アトラス画像の作成
Unity2020.3 で TextMeshProUGUI に絵文字を追加するには、使用したい絵文字を1枚の画像(アトラス画像)に結合する必要があります。
画像はペイントソフトなどでも結合できますが、オンライン上でも結合できるサイトがいくつかありそうでした。
私はここのサイトを使わせていただきました。
画像結合ツール|フォトコンバイン
(参考)アトラス画像の作成について、先ほどのサイト(フォトコンバイン)を使ったときの画像の結合方法を書いておきます。直感的に操作できるサイトで、使いやすかったです。
入力欄に、使用したい画像をドラッグアンドドロップします。

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

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

作成したアトラス画像はUnityに取り込みます。
上記指定後、ダウンロードします。
(フォトコンバインの説明、ここまで)
結合した画像のUnityへの取り込みは、いつもどおり Project フォルダにドラッグアンドドロップしてください。
特定のフォルダに入れないといけないというのは無さそうです。
画像の分割
Unityに取り込んだ画像を分割します。
画像の分割設定は、他のサイトでもかなり紹介されていますので、さらっとだけ触れます。
まず、Projectウィンドウ上で取り込んだアトラス画像を選択します。

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

Apply を押して保存します。

アトラス画像を Font Asset 形式に変換する
分割した画像を、TextMeshProUGUI が読み込める形式に変換します。
先ほど分割した画像を選択した状態で、メニューから Asset > Create > TextMeshPro > Font Asset を選択します

すると、先ほど分割したデータと同じ名前の Font 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します。

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

そのため、このウィンドウでTMP Settings.assetのアドレスを確認します。
私の場合、Fungus の影響で、以下のアドレスに展開されました。

TMP Settings に絵文字を組み込む
TMP Settings.assetを見つけることができたら、いよいよ先ほど分割しておいたアトラス画像を関連付けます。
TMP Settimgs.assetのDefault Sprite Assetに先ほどのアトラス画像をText Assetに変換したデータをドラッグアンドドロップします。

なお、設定した絵文字を読み出す時は、先ほど分割時に指定した名前で呼び出します。
絵文字の読出し
並び順で呼び出す場合:
"<sprite=0>" + text
付けた名前で読み出す場合:
"<sprite name=datas_0>" + text
うまく表示されたでしょうか?

私は、うまく表示できるまでに、もう少し作業が必要でしたので、以下はトラブルシューティングとしてまとめておきます。
トラブルシューティング
テキストの位置と合ってない
アイコンを呼び出した時に、テキストとアイコンのアライメントが合ってないことがあります。

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

グレーアウトしているため、クリックできないように見えますが、クリックするとアクティブになりますので、編集可能です。
X、Yを変更すると表示位置(アライメント)を変更できます。単位はRectTransformのpositionと同じピクセル単位です。
色が付かない
テキスト(TextMeshProUGUI)の色を変えても、アイコンの色だけ変わらないことがあります。

その場合は、アイコン専用のオブジェクトに対して、直接色を指定します。
ただこの指定方法は弱点があって、すべてのアドレス画像に一律に適用されてしまうため、表示する度に色を指定することになります。
色の指定方法ですが、
一度でもアイコンが表示されたテキスト(TextMeshProUGUI)には、その下の階層に 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 以降では解消されてより使い勝手がよくなっている部分も多々あると思います。
(以上)