講演者：中村　剛(ユニティ・テクノロジーズ・ジャパン合同会社) 最近、無料で使用可能になったテキストレンダリングアセット「TextMesh Pro」。この大人気アセットの機能紹介と主な機能の実演を行います。フォントデータの作り方などの基本的な機能の紹介から文章の途中に絵文字を表示するという少し凝った使い方までご紹介!! まだまだ日本語の情報は少ないですがこの講演で是非マスターして下さい。 講演動画：https://youtu.be/Dx2l1-w7KEM イベントページ：https://eventon.jp/6941

1. TextMesh Proを使いこなす
ユニティ・テクノロジーズ・ジャパン合同会社 中村 剛

2. 基本

3. テキスト種類は2つ
• 3D Object(3Dテキスト)
TextMeshPro クラス
• UI(uGUI向け)
TextMeshProUGUI クラス

4. テキストを使用した装飾はHTMLと同様なタグを使用
<align=center>中央表示</align>
<align=left>左寄せ</align>
<align=right>右寄せ</align>
<b>Bold(太字)</b>
<i>Italics(斜体)</i>
<u>Underline(アンダーライン)</u>
<s>Strikethrough(打ち消し)</s>
^{Superscript(上付き文字)}
_{Subscript(下付き文字)}
<mark=#ffff00aa>マーカーを引く</mark>
使用可能なタグはこちらを参照
http://digitalnativestudios.com/textmeshpro/docs/rich-text/

5. タグによるフォントサイズ指定
%指定、相対値、絶対値で指定可能
<size=100%>AAA</size>
<size=+10>BBB</size>
<size=30>CCC</size>

6. 定義済みのスタイルを適用
TMP Default Style Sheet.asset に
定義されているスタイルを使用可能。
もちろん、スタイルは追加や削除可能
。
<style=H1>ABC</style>【記述例】

7. フォントAsset

8. フォントAsset
TextMesh Proではフォントファイルから直接レン
ダリングする事は出来ません。フォントファイル
のデータから作成した Font Asset(.asset) ファイル
の情報を使用します

9. 作成方法
メニューから Window > TextMeshPro > Font
Asset Creator と選択

10. 日本語フォントで作成する時のポイント
• Font Size は Custom Size を使用
• 32pointくらいであれば 4096x4096
に収まる
• 使用する文字の範囲は Shift JIS と
同じでほとんどの場合にはOK

11. テキストの途中に Sprite を挟む

12. テキストの途中に Sprite を挟む
タグを使ってテキストの途中に Sprite を挟む事が可能です(
使用可能な Sprite は事前に Sprite Asset(.asset) として作成
したもののみ)

13. <sprite="Emoji" index=0>
<sprite="Emoji" name="EmojiOne_0">
タグの記述方法
デフォルトの Sprite Asset を使用する場合には
Sprite Asset 名は省略可能
<sprite index=0>

14. チャットアプリ
Slack など最近のチャットアプリで使用可能な :smail: などの
記述での絵文字入力が出来るアプリも作成可能

15. 1. ユーザが「よろしくお願いします:smail:」と入力
2. 「よろしくお願いします<sprite="Emoji" name=":smail:">
」に置換
3. 画面には「よろしくお願いします＋絵文字」が表示される
チャットアプリ

16. テキストの途中で他のフォントを使用す
る

17. テキストの途中で他のフォントを使用する
<font="FOT-TsukuMinPr6-D SDF">ABC</font>
使用したいフォントの Font Asset 名を記述

18. Material

19. Material
• Face：色やテクスチャを設定
• Outline：枠線
• Underlay：エンボス(凹形状な表現)や影
• Bevel：ベベル(凸形状な表現)
• Lighting：ライトの色や角度

20. 長文テキスト向けの機能

21. テキストの流し込み

22. テキストの流し込み
Linked に設定 次にテキストを流し込む
TextMeshProUGUI を指定
TextMeshProUGUI の Inspector の以下の部分で設定

23. ページ送り
特定の位置でページを切り替えた
い時には <page> タグを差し込む

24. ページ送りのプログラム
textInfo.pageCount：全ページ数
pageToDisplay：表示中のページ
public class PaginationSample : MonoBehaviour {
public TextMeshProUGUI TextMeshProUGUI;
int pageCount;
void Start() {
pageCount = TextMeshProUGUI.textInfo.pageCount;
}
public void NextPage () {
int page = TextMeshProUGUI.pageToDisplay;
page++;
if (page > pageCount) {
page = pageCount;
}
SetPage (page);
}

25. マニアックな機能

26. アジア圏の改行処理
Line Breaking Resources for Asian languages に
して設定(デフォルトで設定済み)

27. Leading Characters
LineBreaking Leading Characters.txt で設定
([｛〔〈《「『【〘〖〝‘“｟« などの行末禁則文字を
が設定済み

28. Following Characters
LineBreaking Following Characters.txt で設定
,)]｝、〕〉》」』】〙〗〟’”｠» などの行頭禁則文
字が設定済み

29. まとめ
• uGUIのTextの代わりに使うことが出来る
• タグで文字ごとに装飾が出来る
• テキストの途中に Sprite が使える
• テキストの流し込みが可能
• ベベルやエンボスの表現も可能

30. おまけ

31. 参考資料

32. 参考資料
TextMesh Pro の公式ドキュメント
http://digitalnativestudios.com/textmeshpro/docs/
TextMesh Pro のAPIリファレンス
http://digitalnativestudios.com/textmeshpro/docs/ScriptReference/Text
MeshPro.html
TextMesh Pro の公式サイト
http://digitalnativestudios.com/

33. 参考資料
Shift JIS に含まれる文字の一覧を含んだテキストファイル - 強火で進め
http://d.hatena.ne.jp/nakamura001/20120913/1347553798

34. Sprite Asset の作り方

35. Sprite Asset の作成
Sprite Asset化したい Texture( Type は Sprite のもの) を右クリックし、
Create > TextMeshPro > Sprite Asset と選択

36. Sprite Asset の作成
1つのテクスチャに複数の Sprite が存在する場合には Sprite Mode を
Multiple にした後に Sprite Editor ボタンを押して編集
※基本的にはパフォーマンスの面から1つのテクスチャに1つの Sprite では無く、
その画面で同時に使用する可能性の有る Sprite 全てを含める様にしましょう

37. 注意点
• Sprite Asset化したファイルは専用のフォルダに配置する
• デフォルトでは Assets/TextMesh Pro/Resources/Sprite Assets

38. 複数の画像ファイルから Multiple Sprite を作成
Sprite Asset 作成の為に複数の画像ファイルから Multiple Sprite な Sprite
を作成したい場合には Simple Sprite Packer(http://u3d.as/9CY)という無料
のアセットがオススメです。