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

基本

テキスト種類は2つ

• 3D Object(3Dテキスト)

TextMeshPro クラス

• UI(uGUI向け)

TextMeshProUGUI クラス

テキストを使用した装飾は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/

タグによるフォントサイズ指定

%指定、相対値、絶対値で指定可能

<size=100%>AAA</size>

<size=+10>BBB</size>

<size=30>CCC</size>

定義済みのスタイルを適用

TMP Default Style Sheet.asset に定義されているスタイルを使用可能。もちろん、スタイルは追加や削除可能。

<style=H1>ABC</style>【記述例】

フォントAsset

フォントAsset

TextMesh Proではフォントファイルから直接レン

ダリングする事は出来ません。フォントファイル

のデータから作成した Font Asset(.asset) ファイル

の情報を使用します

作成方法

メニューからWindow > TextMeshPro > Font

Asset Creator と選択

日本語フォントで作成する時のポイント

• Font Size は Custom Size を使用

• 32pointくらいであれば 4096x4096

に収まる

• 使用する文字の範囲は Shift JIS と

同じでほとんどの場合にはOK

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

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

タグを使ってテキストの途中に Sprite を挟む事が可能です(

使用可能な Sprite は事前に Sprite Asset(.asset) として作成

したもののみ)

<sprite="Emoji" index=0>

<sprite="Emoji" name="EmojiOne_0">

タグの記述方法

デフォルトの Sprite Asset を使用する場合には

Sprite Asset 名は省略可能<sprite index=0>

チャットアプリ

Slack など最近のチャットアプリで使用可能な :smail: などの

記述での絵文字入力が出来るアプリも作成可能

1.ユーザが「よろしくお願いします:smail:」と入力

2.「よろしくお願いします<sprite="Emoji" name=":smail:">

」に置換

3.画面には「よろしくお願いします＋絵文字」が表示される

チャットアプリ

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

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

<font="FOT-TsukuMinPr6-D SDF">ABC</font>

使用したいフォントの Font Asset 名を記述

Material

Material

• Face：色やテクスチャを設定

• Outline：枠線

• Underlay：エンボス(凹形状な表現)や影

• Bevel：ベベル(凸形状な表現)

• Lighting：ライトの色や角度

長文テキスト向けの機能

テキストの流し込み

テキストの流し込み

Linked に設定 次にテキストを流し込む

TextMeshProUGUI を指定

TextMeshProUGUI の Inspector の以下の部分で設定

ページ送り

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

ページ送りのプログラム

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);

}

マニアックな機能

アジア圏の改行処理

Line Breaking Resources for Asian languages に

して設定(デフォルトで設定済み)

Leading Characters

LineBreaking Leading Characters.txt で設定

([｛〔〈《「『【〘〖〝‘“｟« などの行末禁則文字を

が設定済み

Following Characters

LineBreaking Following Characters.txt で設定

,)]｝、〕〉》」』】〙〗〟’”｠» などの行頭禁則文

字が設定済み

まとめ

• uGUIのTextの代わりに使うことが出来る

• タグで文字ごとに装飾が出来る

• テキストの途中に Sprite が使える

• テキストの流し込みが可能

• ベベルやエンボスの表現も可能

おまけ

参考資料

参考資料

TextMesh Pro の公式ドキュメント

http://digitalnativestudios.com/textmeshpro/docs/

TextMesh Pro のAPIリファレンス

http://digitalnativestudios.com/textmeshpro/docs/ScriptReference/Text

MeshPro.html

TextMesh Pro の公式サイト

http://digitalnativestudios.com/

参考資料

Shift JIS に含まれる文字の一覧を含んだテキストファイル -強火で進め

http://d.hatena.ne.jp/nakamura001/20120913/1347553798

Sprite Asset の作り方

Sprite Asset の作成

Sprite Asset化したい Texture( Type は Sprite のもの) を右クリックし、

Create > TextMeshPro > Sprite Asset と選択

Sprite Asset の作成

1つのテクスチャに複数の Sprite が存在する場合には Sprite Mode を

Multiple にした後に Sprite Editor ボタンを押して編集

※基本的にはパフォーマンスの面から1つのテクスチャに1つの Sprite では無く、

その画面で同時に使用する可能性の有る Sprite 全てを含める様にしましょう

注意点

• Sprite Asset化したファイルは専用のフォルダに配置する

• デフォルトでは Assets/TextMesh Pro/Resources/Sprite Assets

複数の画像ファイルから Multiple Sprite を作成

Sprite Asset 作成の為に複数の画像ファイルから Multiple Sprite な Sprite

を作成したい場合には Simple Sprite Packer(http://u3d.as/9CY)という無料

のアセットがオススメです。