【unity道場 博多スペシャル 2017】textmesh proを使いこなす
TRANSCRIPT
![Page 1: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/1.jpg)
TextMesh Proを使いこなすユニティ・テクノロジーズ・ジャパン合同会社中村剛
![Page 2: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/2.jpg)
基本
![Page 3: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/3.jpg)
テキスト種類は2つ
• 3D Object(3Dテキスト)
TextMeshPro クラス
• UI(uGUI向け)
TextMeshProUGUI クラス
![Page 4: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/4.jpg)
テキストを使用した装飾は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/
![Page 5: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/5.jpg)
タグによるフォントサイズ指定
%指定、相対値、絶対値で指定可能
<size=100%>AAA</size>
<size=+10>BBB</size>
<size=30>CCC</size>
![Page 6: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/6.jpg)
定義済みのスタイルを適用
TMP Default Style Sheet.asset に定義されているスタイルを使用可能。もちろん、スタイルは追加や削除可能。
<style=H1>ABC</style>【記述例】
![Page 7: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/7.jpg)
フォントAsset
![Page 8: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/8.jpg)
フォントAsset
TextMesh Proではフォントファイルから直接レン
ダリングする事は出来ません。フォントファイル
のデータから作成した Font Asset(.asset) ファイル
の情報を使用します
![Page 9: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/9.jpg)
作成方法
メニューからWindow > TextMeshPro > Font
Asset Creator と選択
![Page 10: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/10.jpg)
日本語フォントで作成する時のポイント
• Font Size は Custom Size を使用
• 32pointくらいであれば 4096x4096
に収まる
• 使用する文字の範囲は Shift JIS と
同じでほとんどの場合にはOK
![Page 11: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/11.jpg)
テキストの途中に Sprite を挟む
![Page 12: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/12.jpg)
テキストの途中に Sprite を挟む
タグを使ってテキストの途中に Sprite を挟む事が可能です(
使用可能な Sprite は事前に Sprite Asset(.asset) として作成
したもののみ)
![Page 13: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/13.jpg)
<sprite="Emoji" index=0>
<sprite="Emoji" name="EmojiOne_0">
タグの記述方法
デフォルトの Sprite Asset を使用する場合には
Sprite Asset 名は省略可能<sprite index=0>
![Page 14: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/14.jpg)
チャットアプリ
Slack など最近のチャットアプリで使用可能な :smail: などの
記述での絵文字入力が出来るアプリも作成可能
![Page 15: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/15.jpg)
1.ユーザが「よろしくお願いします:smail:」と入力
2.「よろしくお願いします<sprite="Emoji" name=":smail:">
」に置換
3.画面には「よろしくお願いします+絵文字」が表示される
チャットアプリ
![Page 16: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/16.jpg)
テキストの途中で他のフォントを使用する
![Page 17: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/17.jpg)
テキストの途中で他のフォントを使用する
<font="FOT-TsukuMinPr6-D SDF">ABC</font>
使用したいフォントの Font Asset 名を記述
![Page 18: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/18.jpg)
Material
![Page 19: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/19.jpg)
Material
• Face:色やテクスチャを設定
• Outline:枠線
• Underlay:エンボス(凹形状な表現)や影
• Bevel:ベベル(凸形状な表現)
• Lighting:ライトの色や角度
![Page 20: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/20.jpg)
長文テキスト向けの機能
![Page 21: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/21.jpg)
テキストの流し込み
![Page 22: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/22.jpg)
テキストの流し込み
Linked に設定 次にテキストを流し込む
TextMeshProUGUI を指定
TextMeshProUGUI の Inspector の以下の部分で設定
![Page 23: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/23.jpg)
ページ送り
特定の位置でページを切り替えたい時には <page> タグを差し込む
![Page 24: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/24.jpg)
ページ送りのプログラム
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);
}
![Page 25: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/25.jpg)
マニアックな機能
![Page 26: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/26.jpg)
アジア圏の改行処理
Line Breaking Resources for Asian languages に
して設定(デフォルトで設定済み)
![Page 27: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/27.jpg)
Leading Characters
LineBreaking Leading Characters.txt で設定
([{〔〈《「『【〘〖〝‘“⦅« などの行末禁則文字を
が設定済み
![Page 28: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/28.jpg)
Following Characters
LineBreaking Following Characters.txt で設定
,)]}、〕〉》」』】〙〗〟’”⦆» などの行頭禁則文
字が設定済み
![Page 29: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/29.jpg)
まとめ
• uGUIのTextの代わりに使うことが出来る
• タグで文字ごとに装飾が出来る
• テキストの途中に Sprite が使える
• テキストの流し込みが可能
• ベベルやエンボスの表現も可能
![Page 30: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/30.jpg)
おまけ
![Page 31: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/31.jpg)
参考資料
![Page 32: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/32.jpg)
参考資料
TextMesh Pro の公式ドキュメント
http://digitalnativestudios.com/textmeshpro/docs/
TextMesh Pro のAPIリファレンス
http://digitalnativestudios.com/textmeshpro/docs/ScriptReference/Text
MeshPro.html
TextMesh Pro の公式サイト
http://digitalnativestudios.com/
![Page 33: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/33.jpg)
参考資料
Shift JIS に含まれる文字の一覧を含んだテキストファイル -強火で進め
http://d.hatena.ne.jp/nakamura001/20120913/1347553798
![Page 34: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/34.jpg)
Sprite Asset の作り方
![Page 35: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/35.jpg)
Sprite Asset の作成
Sprite Asset化したい Texture( Type は Sprite のもの) を右クリックし、
Create > TextMeshPro > Sprite Asset と選択
![Page 36: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/36.jpg)
Sprite Asset の作成
1つのテクスチャに複数の Sprite が存在する場合には Sprite Mode を
Multiple にした後に Sprite Editor ボタンを押して編集
※基本的にはパフォーマンスの面から1つのテクスチャに1つの Sprite では無く、
その画面で同時に使用する可能性の有る Sprite 全てを含める様にしましょう
![Page 37: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/37.jpg)
注意点
• Sprite Asset化したファイルは専用のフォルダに配置する
• デフォルトでは Assets/TextMesh Pro/Resources/Sprite Assets
![Page 38: 【Unity道場 博多スペシャル 2017】Textmesh proを使いこなす](https://reader031.vdocuments.site/reader031/viewer/2022031517/5a6479837f8b9a3b568b4779/html5/thumbnails/38.jpg)
複数の画像ファイルから Multiple Sprite を作成
Sprite Asset 作成の為に複数の画像ファイルから Multiple Sprite な Sprite
を作成したい場合には Simple Sprite Packer(http://u3d.as/9CY)という無料
のアセットがオススメです。