TextMeshPro - テキスト内に画像を入れる【Unity】

TextMeshPro のrichTextタグで文章内に簡単に画像を含ませることができます！

今回はその方法を書きます。

はじめに

この記事での環境

• Unity 2017.3.0f3 Personal(64bit)
• TextMemsh Pro - Beta 0.1.44

関連記事

前回の記事の続きなので、TextMeshPro自体の導入方法やざっくりの機能は以下をみてください。

snoopopo.hatenablog.com

準備：Sprite Assetを作ろう

文章内に画像を含ませるには、まず含ませたい画像からTextMeshPro Sprite Asset を作成する必要があります。

今回はこのような↓1つの画像に複数の画像が入った画像を用意しました。

あらかじめAssetsフォルダ配下に入れておきます。

テクスチャの設定は、

• Texture TypeをSprite(2D and UI)に
• SpriteMode をMultipleに

しておきます。

このテクスチャをSpriteEditorで開いてあらかじめ1画像ずつに分割しておきましょう。

テクスチャを選択した状態で

右クリック(またはメニューバー) -> Create -> TextMeshPro -> Sprite Asset

を選択すると、同フォルダにTextMeshProのSprite Asset が生成されます。

Sprite Assetの設定

SpriteListの設定を行います。

richTextタグで指定する、idやnameを設定できます。

また、文字に対しての画像の位置や、スケール設定なども行えます。

• X Y W H スプライトアトラス内のこの画像の位置xyと大きさwh
• OX OY 文字に対する画像の位置
• Adv. この画像の大きさ。この画像が埋め込んだ位置の次の文字はここで指定したサイズ分開けられて表示される。
• SF. 画像のスケール

一番下の方にglobalな設定があるのでここで一括で設定することもできます。

richTextタグで作ったSprite Assetを使おう

準備ができたので今度は作ったSprite Assetの使い方です。

Text Mesh Pro の Textゲームオブジェクトを作ります。

ヒエラルキーで右クリック -> UI -> TextMeshPro - Text

作成されたゲームオブジェクトの、

①Text Mesh Pro UGUI コンポーネントのEXTRA SETTINGSのSprite Assetに先ほど作ったSpriteAssetを設定します。

②Text Mesh Pro UGUI コンポーネントのTEXT INPUT BOXに

<sprite>というタグ名で先ほど Sprite Assetの設定で設定されたname、またはidで指定すると表示されます。

SLIME<sprite name="slime1_7"> is Enemy!<sprite=7>

複数のSprite Assetから画像を取得したい場合

上記の①で設定したSpriteAsset以外にも複数のSpriteAssetを使いたい場合は、SpriteAsset名も指定することができます。

SLIME<sprite name="slime1_7"> is Enemy!<sprite=7><sprite="EmojiOne" index=1>

（これは自分で作って①で設定したSpriteAssetと、EmojiOne というSpriteAssetの2つを使っている例です。）

ただしここで指定できるSpriteAssetは、 (インポートした)TextMesh Pro / Resources / TMP Settings の Default Sprite Assetで指定されたパス配下に配置しておく必要があります。