2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ApplibotAdvent Calendar 2022

Day 13

TextMeshProでSpriteを表示する

Last updated at Posted at 2022-12-12

はじめに

こちらは「Applibot Advent Calendar 2022」13日目の記事になります。

TextMeshProはUnityで文字(テキスト)を描画するコンポーネントです。
文字の中に画像を表示したい機会があったのでまとめてみました。

作業環境

Unity 2022

文字コードに対応したSpirteを表示する

Spriteの作成

文字の中に表示したい画像は1つにまとめる必要があります。

画像のTextureTypeはMultipleに設定してSpriteEditorからSpriteを設定します。

SpriteAssetの作成

Projectウィンドウ内の作成したSpriteを選択して右クリック「Create/TextMeshPro/Sprite Asset」を選択します。

SpriteAssetが出来上がりました。

文字コードの設定

完成したSpriteAssetを選択してInspectorから設定します。

「SpriteCharacterTable」に表示されているSpriteの「Unicode」を設定していきます。

TextMeshProへ設定

Inspetor上でExtraSettingを押して隠れている項目を表示します。
作成したSpriteAssetを設定します。

実際に入力してみた

表示されました!
表示されるSpriteとはTextMeshProの色の影響を受けない点に注意が必要です。

リッチテキストで表示する

今度はリッチテキストを使ってSpriteを指定する方法で表示します。
SpriteAssetを作成するところまでは同じです。

Spriteの名前の設定

SpriteAssetを選択してInspector上で設定します。
「SpriteCharacterTable」に表示されているSpriteの「Name」を設定します。

TextMeshProへ設定

こちらはUnicodeで設定した際と同じなので省略します。

リッチテキストのタグ設定

タグの設定方法は2種類で「名前(Name)」と「番号(Index)」で指定できます。

名前で設定する方法

""にSpriteAssetに設定した「Name」を設定します。

<sprite name="image_0">

番号(Index)で設定する方法

SpriteAssetの「Index」を=の後ろに設定します。

<sprite=0>

実際に表示してみる

表示されました!

まとめ

  • SpriteからSpriteAssetを作成してTextMeshProに設定する
  • TestMeshProでSpriteを表示する方法は3種類
    • Unicodeで表示
    • SpriteのNameをリッチテキストタグを使って表示
    • SpriteのIndexをリッチテキストタグを使って表示

以上,「Applibot Advent Calendar 2022」 13日目の記事でした。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?