(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]


本ブログの運営者kan.kikuchiが個人で開発した新作VRソフトです!


TextMesh Proでテキストの中に画像(Sprite Asset)を表示する方法【Unity】【TextMesh Pro】


このエントリーをはてなブックマークに追加


この記事でのバージョン
Unity 2020.3.11f1


はじめに

今回は言わずと知れたTextMesh Proを使って、



テキストの中に画像を表示する方法の紹介記事です!

f:id:kan_kikuchi:20210708064731j:plain


ちなみに、記事中では以下のアセットを使っています。(画像だけ)

Corgi Engine - 2D + 2.5D Platformer | Systems | Unity Asset Store




SpriteAsset

まずテキストの中に表示したい各画像を一枚の画像にまとめる必要があります。

f:id:kan_kikuchi:20210711084300j:plain


そのまとめた画像をUnityにインポートしたらTexture TypeをSpriteにし、

Sprite ModeをMultipleにした後Sprite Editorボタンを押します。

f:id:kan_kikuchi:20210708063917j:plain


そして開いたSprite Editorウィンドウで各画像を矩形で選択し、右下のNameで名前を付けます。

f:id:kan_kikuchi:20210708063933j:plain


さらにその画像を選んだ状態でProjectの+ボタンから

TextMeshPro/Sprite Assetを選択し、Sprite Assetを作成、

f:id:kan_kikuchi:20210708064135j:plain


そのSprite AssetをTextMeshProのExtra SettingsにあるSprite Assetに設定すれば準備完了です。

f:id:kan_kikuchi:20210708064550j:plain


ちなみにTMP SettingsのDefault Sprite Assetに配置場所のパスと共に設定すると、

上記の各TextMeshProのSprite Assetへの設定は必要なくなります。

f:id:kan_kikuchi:20210708065749j:plain


実際には使う時はSprite Editorで設定した名前か、画像の番号を使ってタグ付けするだけ。

ちなみに画像部分はTextMeshProの色やマテリアルの影響は受けません。

Corgi_0 : <sprite name="Corgi_0"> is Corgi !
sprite=0 : <sprite=0> is Corgi !
f:id:kan_kikuchi:20210708064731j:plain


なお、各画像の細かい表示位置等はSprite Assetから変更可能です。

f:id:kan_kikuchi:20210708064910j:plain