LoginSignup
5
2

More than 3 years have passed since last update.

uGUIのTextMeshPro

Posted at

概要

Unityのバージョンは2018.4LTS版

uGUIのTextMeshProについてのメモです。一通りの機能についての解説します。
Text - TextMeshPro を追加すると画面上のCanvasの子に Text(TMP) が追加されます。
TextMesh Pro がダウンロードされてない場合はメッセージが表示されるのでダウンロードする。
ダウンロードするとAssetにTextMesh Proフォルダが作られます。(TMP Examples&Extras の方はサンプル)
Text Mesh Pro UGUI のコンポーネントの内容は以下の通りです。

Text Mesh Pro UGUIコンポーネント

  • Text(テキストはリッチテキストタグをサポート)
  • Enable RTL Editor(文字の左右反転)
  • Font Asset(テキストのレンダリングに使用されるフォントアセット)
  • Material Preset(テキストのマテリアル)
  • Font Style(フォントのスタイル、大文字小文字設定もある)
  • Font Size(フォントサイズ)
    • Auto Size(拡大縮小されたときの最大と最低サイズを設定できる)
  • Vertex Color(ベースカラー)
  • Color Gradient(テキストにグラデーションを設定)
    • Color Preset(カラーデータをセットできる。一括設定するのに向いてる)
    • Color Mode(グラデーションの方向を設定)
    • Colos(カラーを設定)
  • Override Tags(使用用途不明)
  • Spacing Options(文字の間、行間、などの設定)
  • Alignment(文字の整列位置)
  • Wrapping(自動で改行するか)
  • Overflow(Wrapping=Disabled, Overflow=Ellipsis に設定するとはみ出した文字は...になる。他は使用方法が不明)
  • Horizontal Mapping(使用用途不明)
  • Vertical Mapping(使用用途不明)

Shader

  • Face
    • Color(文字色)
    • Texture(テクスチャの設定。Speedでアニメーションさせることができる)
    • Softness(輪郭をぼやかす)
    • Dilate(文字の太さ)
  • Outline
    • Color(アウトラインの色)
    • Texture(アウトラインにテクスチャ設定)
    • Thickness(アウトラインの太さ)
  • Underlay
    • Underlay Type(Innerの設定は効果不明)
    • Color
    • Offset X(影の基準位置)
    • Offset Y(影の基準位置)
    • Dilate(文字の太さ)
    • Softness(輪郭をぼやかす)
  • Lighting
    • Bevel(面取り設定)
    • Local Lighting(照明設定)
    • Bump Map(法線マップ)
    • Environment Map(環境マップ)
  • Glow(グロー効果)
  • Debug Setting(使用用途不明)

マニュアルは Asset > TextMesh Pro > Documentation のフォルダにPDFがあります。(ただし英語)
Examples & Extras にサンプルが入っているのでこれである程度使い方がわかる

設定項目がTextよりだいぶ多いので最低限設定するといい項目をあげる
- Vertex Color → 基本白(ほかのところでカラーを設定する)
- Color Gradient → グラデーションをつける
- Spacing Options → 文字間などを調整
- Shader > Face → 文字にテクスチャを設定。文字の太さを調整
- Shader > Outline → アウトラインをつける
- Shader > Underlay → 影をつける

Textとの比較

  • メリット
    • Textと違い拡大しても文字がぼやけない
    • アウトラインや影が奇麗につけられる
    • 文字の太さや間隔を調整できグラデーションカラーやアニメーションがつけられる
  • デメリット
    • フォントデータをそのまま使うわけではなく、フォントアセットを作成する必要がある
    • フォントアセットを使用するため使う文字をあらかじめ登録しないといけない(日本語入力に向いてない)

使い分けるとしたら
Text → どんな文字が入るかわからない場所(InputFeildの入力文字、お知らせ、利用規約など)
TextMeshPro → 定型文、ロゴ、スコア表示など

フォントアセットの作り方

Window > TextMeshPro > Font Asset Creator を選択

  • Font Settings
    • Source Font File(フォントファイル)
    • Sampling Point Size(テクスチャ生成のためのフォントサイズ)
    • Padding(文字間のパディング。512x512テクスチャーの場合、5のパディングで十分)
    • Packing Method(パッキング。高速 or 最適)
    • Atlas Resolution(アトラス解像度。解像度を高くするとグラデーションが細かくなる)
    • Character Set(フォントアセットに必要な文字を設定)
    • Render Mode(レンダリングのモード)
    • Get Kerning Pairs(特定文字の文字詰め情報を取得)

Generate Font Atlas を押すとフォントアセットの見本が表示される
Save を押してファイルに保存する

TextMeshProのSprict制御

  using TMPro;

  // テキスト文字の設定方法
  this.GetComponent<TextMeshProUGUI>().SetText("<size=50%>HP </size> {0}", 100);

参考になりそうなサイトやAsset

今後の課題

使いこなすにはある程度グラフィックの知識もいる
全機能を詳しく調べたわけではないので使用用途がわからないものがある
パフォーマンスについては未調査

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2