【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす
1.4K Views
June 16, 17
スライド概要
講演者：中村 剛(ユニティ・テクノロジーズ・ジャパン合同会社)
最近、無料で使用可能になったテキストレンダリングアセット「TextMesh Pro」。この大人気アセットの機能紹介と主な機能の実演を行います。フォントデータの作り方などの基本的な機能の紹介から文章の途中に絵文字を表示するという少し凝った使い方までご紹介!! まだまだ日本語の情報は少ないですがこの講演で是非マスターして下さい。
講演動画：https://youtu.be/Dx2l1-w7KEM
イベントページ：https://eventon.jp/6941
リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。
関連スライド
各ページのテキスト
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> <sup>Superscript(上付き文字)</sup> <sub>Subscript(下付き文字)</sub> <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 index=0> デフォルトの Sprite Asset を使用する場合には Sprite Asset 名は省略可能
チャットアプリ 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：ライトの色や角度
長文テキスト向けの機能
テキストの流し込み
テキストの流し込み TextMeshProUGUI の Inspector の以下の部分で設定 Linked に設定 次にテキストを流し込む TextMeshProUGUI を指定
ページ送り 特定の位置でページを切り替えた い時には <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/ TextMesh Pro の公式ドキュメント http://digitalnativestudios.com/textmeshpro/docs/ TextMesh Pro のAPIリファレンス http://digitalnativestudios.com/textmeshpro/docs/ScriptReference/Text MeshPro.html
参考資料 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)という無料 のアセットがオススメです。