はじめに
TextMeshProを使うことでテキスト内に画像を絵文字のように表示できます。
本記事では、テキスト内に画像やアイコンを表示する方法を紹介します。
検証環境
Unity
2022.3.12f1
TextMeshPro
3.0.6
Sprite Assetの作成
テキスト内に表示したい画像を準備します。
![画像の設定](https://uuma-memo.xyz/wp-content/uploads/2023/11/image-9.png)
Textuer Type を Sprite(2D and UI)に変更します。
Applyボタンを押します。
これで画像の準備OKです。
画像を選択した状態で右クリック
Create > TextMeshPro > Sprite Asset を選択します。
![Sprite Assetの作成方法](https://uuma-memo.xyz/wp-content/uploads/2023/11/image-10-1024x724.png)
Sprite Assetが作成されました。
これをTextMeshProに設定することで、テキスト内に画像を表示できます。
Sprite Assetの設定
画像を表示する際には Name か Index を指定します。
Sprite Assetの Sprite Character Table から、Name や Index が確認できます。
![Sprite Character Tableの説明](https://uuma-memo.xyz/wp-content/uploads/2023/11/image-12.png)
次の項目 Sprite Glyph Table からは表示位置や大きさを設定できます。
![Sprite Glyph Tableの説明](https://uuma-memo.xyz/wp-content/uploads/2023/11/image-14.png)
TextMeshProの設定
シーンなどに配置したTextMeshProを設定していきます。
TextMeshProのExtra Settingsを開き
Sprite Assetに先ほど用意したSprite Assetを指定します。
これで表示の準備は完了です。
プロジェクト全体に反映させる
プロジェクト全体のTextMeshProで画像を使用したい場合、
全てのTextMeshProにこの設定を毎回するのは大変なので
デフォルトで使用するSprite Assetを変更しましょう。
Edit > Project Settings を開き
Project Settings > TextMeshPro > Settings を選択します。
![Default Sprite Assetの設定場所](https://uuma-memo.xyz/wp-content/uploads/2023/11/image-18.png)
Default Sprite AssetにSprite Assetを指定することで、各TextMeshProの設定が不要となります。
![Path: Resources/の説明](https://uuma-memo.xyz/wp-content/uploads/2023/11/image-19.png)
また、Path: Resources/ で指定したフォルダ内にSprite Assetを配置することで複数のSprite Assetを使用することができます。
ここで指定したフォルダはResources以下に配置する必要があります。
動作確認
Text InputにNameかIndexを以下のように指定することで表示ができます。
Nameの場合<sprite name=Name>
Indexの場合<sprite=Index>
![絵文字表示確認](https://uuma-memo.xyz/wp-content/uploads/2023/11/image-22.png)
また、タグの中にカラーコードを指定することで色を変更できます。<sprite name=Name color=#FFFFFF>
![絵文字に色を指定](https://uuma-memo.xyz/wp-content/uploads/2023/11/image-21.png)
colorからカラーコードへの変換方法は以下で紹介しています。
コメント