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