13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

uGUIのText

Last updated at Posted at 2015-11-29

#概要
Unityのバージョンは5.2.3f1

uGUIのTextについてのメモです。一通りの機能についての解説します。
Textを追加すると画面上にCanvasの子にTextが追加されます。
Textのコンポーネントの内容は以下の通りです。

  • Text
  • Font
  • Font Style
  • Font Size
  • Line Spacing
  • Rich Text
  • Alignment
  • Horizontal Overflow
  • Vertical Overflow
  • Best Fit
  • Color
  • Material
  • Raycast Target *マニュアルに書いてないみたいだが、チェックを外すとタッチ判定が消えるらしい。

内容はマニュアルを見ると詳しく載っています。
http://docs.unity3d.com/ja/current/Manual/script-Text.html

#Textに関してのちょっとしたノウハウ
マニュアルを見ればTextのできることはほぼ載っているので、
少し凝った表現や文字表示のノウハウについて解説します。(少し参考になるかもといった程度の情報です)

##1.文字に影を追加する
Add ComponentでUI>Effects>Shadowを選択すると、テキストに影が表示される。
原理は同じ文字をずらして表示しているだけ。
色と位置を調整できる。
http://docs.unity3d.com/ja/current/Manual/script-Shadow.html

注)
同じ文字をずらしているだけなので、ずらしすぎると影に見えなくなる。
半透明にすると影っぽくなる。
水面に写っているような文字はShadowではできないので、Textを2つ作って片方を子オブジェウトに追加して、スケールで縮めてRotationで反転させると表現できる。

##2.文字にアウトラインを追加する
Add ComponentでUI>Effects>Outlineを選択すると、テキストにアウトラインが表示される。
原理は同じ文字を4つ表示して上下左右にずらして表示しているだけ。
色と位置を調整できる。
http://docs.unity3d.com/ja/current/Manual/script-Outline.html
2つアウトラインを追加するとさらに文字が強調できる。(これに影を追加するとさらに良くなる)

注)
同じ文字をずらしているだけなので、ずらしすぎるとおかしくなる。
文字に対して4つ重ねてるので、たくさん使うと結構負荷がかかる。

##3.文字のサイズと行間
スマホでの文字サイズは最小で14~16pxくらいにする。
文字の行間は1.2~1.6くらいにする。
上下左右に余白を20~30pxくらいとる。
読みやすいフォントを選ぶ。
以上のことに注意してTextを使うと文字が読みやすくなる。
(主にWebサイトや資料作成のノウハウが参考になる)
http://tsutawarudesign.web.fc2.com/index.html
文字サイズは小さすぎるとぼやけてしまうが、文字サイズを大きくしてスケールで縮小すると綺麗に表示される。(アウトラインを使う時は特に有効)

##4.文字のサイズに黄金比、白銀比を利用する
基準の文字サイズを決めて、そのサイズから黄金比などの比率を使ってサイズパターンを決める。
http://www.modularscale.com

#TextのSprict制御

TextTest
  using UnityEngine.UI;

  Text text1;
  text1 = GetComponent<Text>();  // コンポーネントを取得
  text1.text = "文字を代入";
  text1.enabled = false;         // 文字を非表示

#その他のメモ
ノベルゲームのノウハウが参考になる。(他のゲームにも役立つかも)

  • 文字を1文字づつ表示
  • クリックすると全て表示
  • さらにクリックすると次の文章を表示
  • 一定時間経つと次の文章を表示するオート機能
  • 行頭禁則の処理

ゲーム終了時のエンドロールの表現が参考になる

  • 文字の移動と回転
  • フェードイン、フェードアウトの表現
  • 鏡文字

ゲーム中の文字表現

  • スコアを徐々にカウントアップ
  • 効果音と同じ文字を表示する演出
  • 3D空間上に表示されているキャラクタに追従する文字(ユーザー名の表示など)

CMの企業タイトルロゴの演出(表現としては参考になるかも)

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

#今後の課題
Materialを使った表現が上手くいかない。(参考になりそうなサイトもなさそう)
ShadowとOutlineのUse Graphic Alphaは、使いどころがいまいちわからない。
Position as UV1の使い方がいまいちわからない。
Textを光らせたり、テクスチャをあてた文字にしたり、凹凸がある文字にしたり、グラデーションをかけた文字にしたり、などの方法がわからない。(Scriptもしくはシェーダを書くとできそう?)
カスタムフォントは時間かかりそうなので気が向いたら試す。
Textを使ったアニメーションについてはanimatorの記事で書く予定。
文字サイズに合わせてサイズの修正やTextを自動で並べる方法などはLayoutの記事で書く予定。

13
11
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
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?