Uploaded byUnity Technologies Japan K.K.

PPTX, PDF4,696 views

【Unity道場スペシャル 2017札幌】カッコいい文字を使おう、そうtext meshならね

2017/10/8に開催されたUnity道場札幌スペシャル2の講演動画です。講師：山村達彦（ユニティ・テクノロジーズ・ジャパン合同会社）講演動画：https://youtu.be/MbtHP_d0apg 最近、無料で利用可能になったテキストレンダリングアセット「TextMesh Pro」。この大人気アセットを使用することで、単純な文字の表示だけでなく、綺麗な演出や面白い表現が可能になりました。このセッションではTextMesh Proの機能紹介だけでなく、TextMesh Proを使ったオモシロ表現方法について紹介します。こんな人におすすめ・TextMesh Proでフォント表現の幅を広げたい方得られる知見・TextMesh Proの使い方・TextMesh Proで出来る事 Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards

Technology◦

カーニング？
●文字の組み合わせで
文字のスペースを詰める
●フォントの文字同士の
間隔（アキ）を調整する技法
●文字の形状に合わせて
個別に文字間の距離を微調整する
タイポグラフィ手法

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

① 拡大してもフォントが滲まない
② 様々なレイアウト調整機能
③ 文字に表情を付ける効果が良い
④ 文字に凹凸感のある演出
⑤ タグによるリッチテキスト制御
すごいぞTextMeshPro!

39
フォント Text Mesh
コンポーネント
1 2 3
変換登録
Font Asset

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

43
ttf/otf
ゲームが使用してる文字をフォントから取得
一杯になったら一旦リセット
uGUIは？

44
フォント Font Asset Text Mesh
コンポーネント
1 2 3
変換登録

50
フォント
Font Asset Text Mesh
コンポーネント
1 2 3
変換登録

53
フォント Text Mesh
コンポーネント
1 2 3
変換登録
Font Asset

フォントテクスチャの再構築による
スパイクが無い
ズームしても輪郭が綺麗
事前に使用する文字を登録する必要がある
解像度が一致してれば綺麗
ダイナミックフォント対応
（フットプリントが最小限）
フォント更新時（追加時ではない）
にスパイクが起こる
uGUI
禁則処理とかアイコン表示が出来る

既にUGUIで作ってるなら…
TextMeshProReplacerReplace box with image
https://github.com/jackisgames/TextMeshProReplacer

【Unity道場スペシャル 2017札幌】カッコいい文字を使おう、そうtext meshならね

1.
1 文字でカッコいい画面を作ろう。そう…TextMesh Proならね
2.
2 ユニティ・テクノロジーズ・ジャパン山村達彦 @tsubaki_t1
3.
文字、拘ってますか？
4.
4
5.
5 フォントは意外と重要
6.
6 ゲームの雰囲気を伝える
7.
7 カッコいい vs 読みやすい
8.
8
9.
9 文字は意味を伝える
10.
10 文字のレイアウトで見栄えが変わる
11.
フォントを揃える事で統一感を出す
12.
12 文字…フォント…大事…大事…
13.
13 uGUIでは不十分
14.
14
15.
Text Mesh Proってどんな事が出来るの？
16.
16 TextMeshProの凄い所
17.
17 ① 拡大してもフォントが滲まない
18.
18 ① 拡大しても輪郭がボケずに綺麗
19.
19 uGUI TextMeshPro uGUI TextMeshPro
20.
20 ② 様々なレイアウト調整機能
21.
21 ② 様々なレイアウト調整機能カーニング有カーニング無
22.
カーニング？ ●文字の組み合わせで文字のスペースを詰める ●フォントの文字同士の間隔（アキ）を調整する技法 ●文字の形状に合わせて個別に文字間の距離を微調整するタイポグラフィ手法
23.
23 文字の間隔調整
24.
24 禁則処理
25.
25 ③ 文字に表情を付ける効果が良い
26.
26 ③ 文字に表情を付ける効果が良いフワっとした影アウトライングロー模様
27.
アウトライン TextMeshPro uGUI
28.
28 設定・変更は即座に反映される
29.
29 ④ この素晴らしい文字に演出を
30.
30 ④ この素晴らしい文字に演出を
31.
31 Lightからの影響を受けるオプションも
32.
32 ⑤ タグによるリッチテキスト制御
33.
33 ⑤ タグによるリッチテキスト制御 • 太字 •イタリック • アンダーライン • 取り消し線 • 文字の大きさ • マージン • ハイライト • アイコン表示
34.
34 文字にアイコンを埋め込むことも出来る
35.
35 自作タグ
36.
① 拡大してもフォントが滲まない ② 様々なレイアウト調整機能 ③文字に表情を付ける効果が良い ④ 文字に凹凸感のある演出 ⑤ タグによるリッチテキスト制御すごいぞTextMeshPro!
37.
どうやって使うの？
38.
38
39.
39 フォント Text Mesh コンポーネント 12 3 変換登録 Font Asset
40.
40 ゲームアプリの数学@GREE GameDevelopers' Meetup
41.
41 x1 x1.5 x2x3
42.
42
43.
43 ttf/otf ゲームが使用してる文字をフォントから取得一杯になったら一旦リセット uGUIは？
44.
44 フォント Font AssetText Mesh コンポーネント 1 2 3 変換登録
45.
45
46.
46
47.
47
48.
48
49.
49
50.
50 フォント Font Asset TextMesh コンポーネント 1 2 3 変換登録
51.
51
52.
52
53.
53 フォント Text Mesh コンポーネント 12 3 変換登録 Font Asset
54.
54
55.
55
56.
56 マテリアルを増やす
57.
57
58.
58
59.
59
60.
60
61.
61
62.
どんな風に使うの？
63.
63
64.
64
65.
65
66.
66
67.
67
68.
68
69.
69 アウトラインで、背景に依存せず綺麗に見える左の桁が前面に表示される
70.
70
71.
71
72.
72
73.
73 1 2 3
74.
74
75.
75
76.
76
77.
uGUIとText Mesh Proの使い分け
78.
78 VS
79.
フォントテクスチャの再構築によるスパイクが無いズームしても輪郭が綺麗事前に使用する文字を登録する必要がある解像度が一致してれば綺麗ダイナミックフォント対応（フットプリントが最小限）フォント更新時（追加時ではない）にスパイクが起こる uGUI 禁則処理とかアイコン表示が出来る
80.
既にUGUIで作ってるなら… TextMeshProReplacerReplace box withimage https://github.com/jackisgames/TextMeshProReplacer
81.
81
82.
Q&A フォント協力：モリサワ

Editor's Notes

#3 自己紹介を。自分はユニティテクノロジーズジャパンの山村と言いますフィールドエンジニアをしながら、Unityのエヴァンジェリストをしています。
#4 フォント、変えてますか？文字には拘ってますか？
#5 これはUnityの提供する最も雑なアセットですが、UIも雑ですがフォントも適当に貼られてます。物にもよりけりですが、割と初めの方はフォントに意識を割かれる事が少なく、そのままArialが使われる事も多いです。
#6 しかし、フォントには大きな可能性がある
#7 フォントはゲームの雰囲気を伝える
#8 また、もう一つ重要な要素は、読みやすいフォントとカッコいいフォントがあるという事です。左上は見た目が良い文字です。ただ、見た目にキレイなフォントと、読みやすいフォントという物があります。
#9 とりあえずの大分類はコレ。読みやすいものは明朝、認識しやすい物はゴシック
#10 文字は記号である。同じ言語権の人に限られますが、内容を一瞬で誤解なく連絡できる魔法のツールです。言語によっては複数文字で表現するものもあります。
#11 文字の配置で受ける印象も変わるデザインの本とかを呼んでみると、タイポグラフィ、文字の配置方法で画面の印象を大きく変化させるテクニックが多く紹介されています。
#12 複数のフォントを無理やり使うと、チグハグな画面が作られる。
#13 フォントは単なる「言葉を伝えるもの」という物だけでなく、画面やゲームの雰囲気を作ったり、レイアウトしたり色々と良い。さぁ、みんな使おう！　となる所ですが、
#14 ただ、Unityの伝統的なUI機能は単純に文字を出すだけで満足しており、フォントの力を100％引き出す事が出来ない。
#15 ということで、今回フォントの魅力を100％出しやすくするアセットである、 Text Mesh Proを紹介しよう。
#16 Text Mesh Pro
#17 Text Mesh Proには5つの特徴
#19 拡大しても滲まない
#20 これはuGUIのテキストとTextMeshProのテキストを拡大スケールした時に分かりやすく差が出る。 uGUIのフォント解像度は画面解像度からよく見える物を選択するので、大抵の場合は問題とならないが、VRやUIをスケールするようなケースでは、かなりボケてしまう問題が、TextMeshProなら回避出来る。
#22 沢山のレイアウト調整機能例えばカーニングしたり、
#24 範囲内で文字が埋まるように、等間隔で並べたり
#25 禁則処理を行ったり。
#27 アウトライン・色の滲み・表面模様等の文字に表情を付ける効果
#28 特にアウトラインは素晴らしい。 uGUI、Unity標準のUIシステムのアウトラインは太くすると変なシルエットが出てしまうが、 TextMeshProはかなり綺麗に出る。あとパフォーマンスが良い。
#29 変更したら即座に反映される
#31 身の回りのテキスト表現を見てみると、結構あるのが　こういった文字の凹凸感を表現するエフェクト。
#32 単純な方角のみだけでなく、実際にライトの影響を受けて凹凸表現を行うオプションもある。
#34 リッチテキストによる制御
#35 Spriteを登録すれば、アイコンも使える
#36 独自にタグを作る事も出来ます。便利便利
#37 ここが凄いText Mesh Pro！どうです？少し興味が出てきたり…？
#38 まぁ色々と機能がある事は分かった。じゃぁ、実際どうやって使えば良いの？
#39 TextMeshProはStandardAssetsや基本機能としては含まれていないので、AssetStoreから入手します。
#40 作業の流れは3つのステップ。基本的にText Mesh Proは、uGUIと比較して、少し面倒な手順が必要になります。フォントをTextMeshAssetに変換（利用するフォントを登録） TextMeshのコンポーネントにTextMeshAssetを登録使用する材質を選択使う
#41 何故面倒な事をしてるのかという話ですが、 Text Mesh ProはUnityのUIシステムと異なり、ダイナミックフォントではなくDistance Fieldという特別なフォーマットを使用して文字を表現しています。
#42 Text Mesh Proがズームしても滑らかなのは、これが理由です。他にもアウトライン等にも活用してるっぽいですが。
#43 ただ、この計算はかなり負荷の高い事前計算が必要になるため、Text Mesh Proではフォントを利用する前に使用するフォントの選択や、データの変換が必要です。
#44 ではuGUIは？
#45 話を戻しまして、実際に操作をやってみます。まず、フォントの変換から。今回はせっかくなので、モリサワさんのフォントを変換してみます。
#46 フォントコンバーターを表示し、フォントを選択します。
#47 後は使用するテキストの範囲を入力します。日本語の範囲を入力する場合は、
#48 レンジを選択して、日本語の文字コードを含めます。含める文字コードの範囲は、Text Mesh Pro+日本語とかで検索すれば、素晴らしい記事が見つかります。
#49 コンバート、あっという間に終わりました。これ5,000倍速です。ちなみに、日本語の殆どを入れてるせいで時間がかかります。最低限に抑えれば、本当に一瞬で終わります。
#50 コンバート完了したら、Font Assetを保存します。
#51 これで事前準備が完了しました。後はText Mesh Pro（3D Text）や、Text Mesh Pro（uGUI対応）に変換して使用します。例えばuGUI対応版の場合、こんな感じ。
#52 UIを作って、FontAssetを先程作成した物に差し替えるだけです。
#53 後はテキストをセットすれば文字が表示されます。
#54 後は使うだけではあります
#55 が、一つだけややこしい問題があります。 TextMeshProのエフェクトはマテリアルに格納されています。このマテリアルを切り替える事でエフェクトを表現しています
#56 このマテリアル、生成時は一つしか作られません。そのため、一つ変更すれば全てのフォントが影響を受けてしまいます。
#57 ので、コレマテリアルを増やして複数種類のエフェクトを持てるようにします。
#58 上のテキストのエフェクトだけを書き換えたい
#59 マテリアルを増やすには、マテリアルのCreate Material Presetという機能を使用します。
#60 マテリアルを増やせば、TextMeshProが指定のフォントに対して使用できるエフェクトの数が増えます。実際に上と下のエフェクトの種類を分けて
#61 かたっぽだけにエフェクトを加えます。こんな感じで、ユニークなエフェクトが必要な場合はマテリアルを量産します。
#62 さて、準備は整いました。実際に色々と試してみましょう。
#63 さっそく使っていきましょう。そこで気になるのが、何処に何をどんなふうに使うのか…という話です。今回3つ考えてみました。
#64 例えばボタンのUIを作ってみます。こんな酷いUIではなく、少しの工夫を加えたものです。
#65 難しい事はありません、基本的にはTextMeshやuGUIのTextと同じように使えます。
#66 まずはUIを用意して、TextMeshProをTextの変わりに登録します。
#67 フォントを選択します。どんなフォントを選択するのかはゲームに寄りますが、ボタンなら読みやすいフォントより見た目の良いフォントを選択しても良いかもしれません。
#68 後はUIにうっすらと影をつけちゃったりしたり色々です。
#69 見出し用のフォント等もどんどん使って良さそうです。昨今のゲームUIを見てると、アウトラインが付いてる事が多いです。場合によってはブラーもかかっています。
#70 ゲーム内の文字。特に値が変動する数値はTextureが少し面倒な部分なので、出来ればフォントで行きたい。 <<クリック>> また、読むことは出来ますが、背景の色が固定では無いので、アウトラインが欲しいこちらはよく動くオブジェクトになるハズなので、uGUIではなく3D Textベースがオススメです。
#71 という事で、アウトラインを付けます。アウトラインは内側に伸びていくので、FaceのDilateで文字自体を広げてやると割とバランスが取れます。
#72 それと、文字と文字の間を詰めて表示します。この際、文字の表示順を桁数が多い順に設定しておくと良いです。
#73 あと、せっかくなのでタイトルロゴ的なものもやってみます。映画のパンフレットとか見てみると、意外とコレ多いんですよね。もっとロゴロゴしてるかと思いましたが、そうでもなく。
#74 まずは文字の幅を調整します。今回調整するのは、2つのアプローチで行っています。一つはspacing optionで文字間の位置を調整もう一つがmspaceタグでより文字の間を詰める
#75 ちなみに、フォントがカーニングの設定を持っている場合、Font Asset作る時にカーニング設定が作られます。一応後付でも可能
#76 一応後付でカーニング設定…つまり、指定の順番でフォントが並んだら文字列の間を詰める処理は追加出来るみたいです。
#77 そしてLightingの項目で立体感を与えました。
#78 最後にText Mesh ProとuGUIの使い分けについてです。
#79 実際、TextMeshProの話をするとどうしても気になるのが、「どちらが良いの?」この結論としては、ケースバイケースです。
#80 Text Mesh ProとuGUIの一番の明確な違いは、フォントがダイナミックかどうか。ダイナミックなフォントを利用したい場合は、uGUIに軍配が上がる。含まれる文字が既に決まっているならば、Text Mesh Proはすごく有効
#81 TextMesh Replacer、一気にuGUIのテキストをTextMeshProに変換する
#82 もし、この非常に面白い機能のTextMesh Pro、さらに興味があったら、この2つのスライドを参考にしてみて下さい。

【Unity道場スペシャル 2017札幌】カッコいい文字を使おう、そうtext meshならね

More Related Content

What's hot

Viewers also liked

Similar to 【Unity道場スペシャル 2017札幌】カッコいい文字を使おう、そうtext meshならね

More from Unity Technologies Japan K.K.

Recently uploaded

【Unity道場スペシャル 2017札幌】カッコいい文字を使おう、そうtext meshならね

Editor's Notes