1

Text Mesh Proを使いこなす

2

＃Unity道場

3

山村 達彦Unity Technologies Japan GK @tsubaki_t1

4

Unityしか話しません。

ほぼ

5

20173月某日

6

TextMesh Pro

FREE

7

それは何？

どうやって使う？

TextMeshとは 操作手順uGUIとの比較

何が良いの?

Text Mesh Pro

8

Text Mesh Proって何？

？

9

はアセット

10

アセットは の機能を強化する

「強化パーツ」のような物

11

は

文字 を 表現 するアセット

12

13

14

リッチなテキストの表現

15

ズームしてもエッジがなめらかなフォント

16

文字のアウトライン

色の滲み

表面の模様

17

凹凸表現

光表現

影を落とす

18

リッチテキスト• 太字• イタリック• アンダーライン• 取り消し線• 文字の大きさ• マージン• ハイライト• アイコン表示

19

文字のグラデーション

柔軟なスペーシング

uGUI/TextMeshのどちらでも代替可能

20

は

文字 を 綺麗に表現 するアセット

21

TextMeshProを使うと、何が良いの？

uGUI Text vs TextMeshPro

22

SDFベースの滑らかなフォント

23

Unityのフォント画像を直接使用す

る

24

Unityのフォント

必要に応じて追加

25

使用するフォントのサイズが解像度と一致しないと、

ボケる。

26

Unity UI(uGUI)の動作

必要に応じて追加

画面解像度に応じてサイズを

決定

27

フォントのサイズを複数使用すると、大きさの異なる同じ文字が作られる

28

SDFでフォントを表現

文字が滑らかになるように計算

29

ゲームアプリの数学@GREE GameDevelopers' Meetup

SDF?

30

文字のエッジが滑らかに（ズームしてもクッキリ）

31

（解像度の割に　綺麗に見えるという事）

32

SDFでフォントを表現

要）事前に用意

33

複数のフォントサイズ時に有利

テクスチャの再構築が無い

エッジが綺麗

「フォントの再配布」のルールに抵触しないかもしれない※

ファイル生成の手順が必要

フォントが含まれない場合表示出来ない

（要フォントのライセンス確認）

34

アウトラインも高速で綺麗

uGUI

TMP

35

1 2 3 4uGUIのアプローチ

36

uGUIのアプローチ

すみっこがカクカクしてる

37

TMPのアプローチ

滑らか

38

アウトライン表現はシェーダー任せ描画回数も抑えられる

色が濃い所は何度も描画してる

39

40

表面の模様

アウトライン

エンボス：凹表現や影ベベル：凸表現

グロー

ライティング

フォントの機能

41

3D的な質感

42

アルファマスクも使える

43

テキストに模様を付けるのが楽

エッジが綺麗 uGUIのルールとは若干異なる（内側に滲む）

オーバードローにならない

44

文字の位置

45

46

禁則処理も対応

([｛〔〈《「『【〘〖〝‘“｟«$—…‥〳〴〵\［（{£¥"々〇〉》」＄｠￥￦ #

)]｝〕〉》」』】〙〗〟’”｠»ヽヾーァィゥェォッャュョヮヵヶぁぃぅぇぉっゃゅょゎ

ゕゖㇰㇱㇲㇳㇴㇵㇶㇷㇸㇹㇺㇻㇼㇽㇾㇿ々〻‐゠–〜?!‼⁇⁈⁉・、%,.:;。！？］）：；＝}¢°"†‡℃

〆％，．

行頭禁則文字

行末禁則文字

47

48

リッチテキスト

49

HTMLタグと同じようなタグ

TextMesh Pro Documentation

50

テキストに仕込み表示内容を更新

51

独自のタグを事前に定義

+

52

フォントサイズ等は％、相対値、絶対値で指定が可能

53

％指定

絶対値

相対値

54

アイコンも使える（要・アイコンの事前登録）

55

リッチテキスト、何が良くなったの？

• 滑らかなフォント表現• 綺麗なエフェクト• 強力なレイアウト• より良いタグ

56

TextMeshPro、どうやって使うの？

？

57

Step 1

Text Mesh Proを入手Replace box with image

58

Step 2

FontAssetを作成するReplace box with image

59

Step 3

TextMeshProUGUIを追加Replace box with image

60

Step 4

テキストの

レイアウトを調整

Replace box with image

61

Step 5

必要に応じて

エフェクトを設定

Replace box with image

62

ね、簡単でしょう？

63

Omake.txt

64

既にUGUIで作ってるなら…

TextMeshProReplacerReplace box with image

https://github.com/jackisgames/TextMeshProReplacer

65

文字を一文字ずつ表示Replace box with image maxVisibleCharactersを使う

66

ページ分割

Replace box with image

<page>タグで区切るpageToDisplayで出したいページを指定

67

オートサイズを使用して

文字列がズレるのを防ぐ。

もしくは、WrappingやOverflowをOFF

理想

現実

妥協