![見出し画像](https://assets.st-note.com/production/uploads/images/140364813/rectangle_large_type_2_4a4016afb3cd9771858721f299b9d625.png?width=1200)
【Unity】TextMeshProで任意のスプライト画像を表示する【Sprite Asset】
チュートリアルの説明を書く時にコントローラのアイコンがテキストに表示出来たら良いのになーと思ったのですがTextMeshProには任意のスプライト画像をテキストとして表示出来るSprite Assetと言う仕組みがあり、Sprite Assetを使用すると好きな画像を登録して表示する事が出来ました。
まずは表示したい画像を1枚の画像に纏めます。
![](https://assets.st-note.com/img/1715496589102-ZX0x5mbYAx.png?width=1200)
アイコン画像はkenney様で配布されているInput Promptsを使用させて頂きました。XBOX,PS,Switch,Steamなどのボタンアイコンが収録されており使いやすいです。
作成した画像をUnityの任意のフォルダにコピーします。
![](https://assets.st-note.com/img/1715496926066-275etIwmZI.png?width=1200)
コピーした画像を選択して
①Texture TypeをSprite(2D and UI)に
②Sprite ModeをMultipleに
③Sprite Editorをクリックしてスプライトエディタを立ち上げます。
④Type をGrid By Cell Sizeに
⑤Pixel Sizeを使用した画像のサイズに
⑥Sliceをクリックすると指定したサイズに分割されます。
⑦Applyを押して保存します。
![](https://assets.st-note.com/img/1715497193037-xXH1lk7q0p.png)
次にSprite Asset化したい画像を右クリック→Create→TextMeshPro→SpriteAssetをクリックするとSpriteAssetが作成されます。
![](https://assets.st-note.com/img/1715497336456-wF0R6vPoMS.png?width=1200)
![](https://assets.st-note.com/img/1715497355310-RkoTUFrU4S.png)
![](https://assets.st-note.com/img/1715497421749-mKSm9siWCk.png?width=1200)
スプライトアセットはIDで管理されていて順番にID:0、ID:1、ID:2・・・と続いて行きます。
Sprite Glyph Tableで大きさや表示位置の調整も可能です。
スプライトアセットを表示させたいテキストを選択してExtra SettingにあるSprite Assetに作成したスプライトアセットを選択します。
![](https://assets.st-note.com/img/1715498244246-yW2czVn4Fd.png?width=1200)
テキストエリアに例えば<sprite=0>と書けばID:0のスプライト画像を表示してくれますので対応したIDを<sprite=ID>で書けば任意のスプライト画像をテキストとして表示できます。
![](https://assets.st-note.com/img/1715498275727-9MIwORjtiR.png?width=1200)
(余談ですが僕の大好きなフォントであるマルモニカにはコントローラ画像も収録されていますので、そのままコントローラアイコンを表示出来ます)
![](https://assets.st-note.com/img/1715496481440-sW625ygDc0.png)