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

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

f:id:snoopopo:20180218121252p:plain

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

はじめに

この記事での環境

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

関連記事

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

snoopopo.hatenablog.com

準備:Sprite Assetを作ろう

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

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

f:id:snoopopo:20180218114337p:plain

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

テクスチャの設定は、

f:id:snoopopo:20180218114637p:plain

  • Texture TypeSprite(2D and UI)
  • SpriteModeMultiple

しておきます。

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

f:id:snoopopo:20180218114848p:plain

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

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

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

f:id:snoopopo:20180218115341p:plain

Sprite Assetの設定

SpriteListの設定を行います。

f:id:snoopopo:20180218124717p:plain

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

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

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

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

f:id:snoopopo:20180218125259p:plain

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

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

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

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

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

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

f:id:snoopopo:20180218122215p:plain

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

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

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

f:id:snoopopo:20180218121252p:plain

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

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

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

f:id:snoopopo:20180218123514p:plain

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

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

f:id:snoopopo:20191220150111p:plain f:id:snoopopo:20191220150406p:plain