Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす

28,875 views

Published on

2017/6/3に開催されたUnity道場スペシャル 2017博多の講演スライドです。
講師:中村剛(ユニティ・テクノロジーズ・ジャパン合同会社)

TextMesh Proを使いこなすためのヒントを紹介します。
・TextMesh Proとは何か、
・TextMesh Proを使うと(uGUIと比較して)何が良いのか
・どのように使うのか

講演動画:https://www.youtube.com/watch?v=Dx2l1-w7KEM

Unityのイベント資料はこちらから:
https://www.slideshare.net/UnityTechnologiesJapan/clipboards

Published in: Technology
  • Be the first to comment

【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす

  1. 1. Text Mesh Proを使いこなす
  2. 2. #Unity道場
  3. 3. 山村 達彦 Unity Technologies Japan GK @tsubaki_t1
  4. 4. Unityしか話しません。 ほぼ
  5. 5. 20173月某日
  6. 6. TextMesh Pro FREE
  7. 7. それは 何? どうやって使う? TextMeshとは 操作手順uGUIとの比較 何が 良いの? Text Mesh Pro
  8. 8. Text Mesh Proって何? ?
  9. 9. はアセット
  10. 10. アセットは の機能を強化する 「強化パーツ」のような物
  11. 11. は 文字 を 表現 するアセット
  12. 12. リッチなテキストの表現
  13. 13. ズームしてもエッジが なめらかなフォント
  14. 14. 文字のアウトライン 色の滲み 表面の模様
  15. 15. 凹凸表現 光表現 影を落とす
  16. 16. リッチテキスト • 太字 • イタリック • アンダーライン • 取り消し線 • 文字の大きさ • マージン • ハイライト • アイコン表示
  17. 17. 文字のグラデーション 柔軟なスペーシング uGUI/TextMeshの どちらでも代替可能
  18. 18. は 文字 を 綺麗に表現 するアセット
  19. 19. TextMeshProを使うと、何が良いの? uGUI Text vs TextMeshPro
  20. 20. SDFベースの 滑らかなフォント
  21. 21. Unityのフォント 画像を直接使用す る
  22. 22. Unityのフォント 必要に応じて 追加
  23. 23. 使用するフォントのサイズが 解像度と一致しないと、 ボケる。
  24. 24. Unity UI(uGUI)の動作 必要に応じて 追加 画面解像度に 応じてサイズを 決定
  25. 25. フォントのサイズを 複数使用すると、 大きさの異なる同じ文字が 作られる
  26. 26. SDFでフォントを表現 文字が滑らかにな るように計算
  27. 27. ゲームアプリの数学@GREE GameDevelopers' Meetup SDF?
  28. 28. 文字のエッジが滑らかに (ズームしてもクッキリ)
  29. 29. (解像度の割に  綺麗に見えるという事)
  30. 30. SDFでフォントを表現 要)事前に用意
  31. 31. 複数のフォントサイズ時に有利 テクスチャの再構築が無い エッジが綺麗 「フォントの再配布」の ルールに抵触しないかもしれない※ ファイル生成の手順が必要 フォントが含まれない場合 表示出来ない (要フォントのライセンス確認)
  32. 32. アウトラインも 高速で綺麗 uGUI TMP
  33. 33. 1 2 3 4 uGUIのアプローチ
  34. 34. uGUIのアプローチ すみっこが カクカクしてる
  35. 35. TMPのアプローチ 滑らか
  36. 36. アウトライン表現は シェーダー任せ 描画回数も 抑えられる 色が濃い所は 何度も描画してる
  37. 37. 表面の模様 アウトライン エンボス:凹表現や影 ベベル:凸表現 グロー ライティング フォントの機能
  38. 38. 3D的な質感
  39. 39. アルファマスクも使える
  40. 40. テキストに模様を付けるのが楽 エッジが綺麗 uGUIのルールとは若干異なる (内側に滲む) オーバードローにならない
  41. 41. 文字の位置
  42. 42. 禁則処理も対応 ([{〔〈《「『【〘〖〝‘“⦅«$—…‥〳〴〵[({£¥"々〇〉》」$⦆ ¥₩ # )]}〕〉》」』】〙〗〟’”⦆»ヽヾーァィゥェォッャュョヮ ヵヶぁぃぅぇぉっゃゅょゎ ゕゖㇰㇱㇲㇳㇴㇵㇶㇷㇸㇹㇺㇻㇼㇽㇾㇿ々〻‐゠–〜 ?!‼⁇⁈⁉・、%,.:;。!?]):;=}¢°"†‡℃ 〆%,. 行頭禁則文字 行末禁則文字
  43. 43. リッチテキスト
  44. 44. HTMLタグと 同じようなタグ TextMesh Pro Documentation
  45. 45. テキストに仕込み 表示内容を更新
  46. 46. 独自のタグを事前に定義 +
  47. 47. フォントサイズ等は %、相対値、絶対値で指定が可能
  48. 48. %指定 絶対値 相対値
  49. 49. アイコンも使える (要・アイコンの事前登録)
  50. 50. リッチテキスト、 何が良くなったの? • 滑らかなフォント表現 • 綺麗なエフェクト • 強力なレイアウト • より良いタグ
  51. 51. TextMeshPro、 どうやって使うの? ?
  52. 52. Step 1 Text Mesh Proを入手Replace box with image
  53. 53. Step 2 FontAssetを作成するReplace box with image
  54. 54. Step 3 TextMeshProUGUIを追加Replace box with image
  55. 55. Step 4 テキストの レイアウトを調整 Replace box with image
  56. 56. Step 5 必要に応じて エフェクトを設定 Replace box with image
  57. 57. ね、簡単でしょう?
  58. 58. Omake.txt
  59. 59. 既にUGUIで作ってるなら… TextMeshProReplacerReplace box with image https://github.com/jackisgames/TextMeshProReplacer
  60. 60. 文字を一文字ずつ表示 Replace box with image maxVisibleCharactersを使う
  61. 61. ページ分割 Replace box with image <page>タグで区切る pageToDisplayで出したいページを指定
  62. 62. オートサイズを使用して 文字列がズレるのを防ぐ。 もしくは、WrappingやOverflowをOFF 理想 現実 妥協

×