Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】uGUIのTextの使い方【ひよこエッセンス】

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.0.0f4 Personal(2015年5月)

 

f:id:hiyotama:20150504205926p:plain

 

ひよこエッセンスの時間です〜

Unity開発でよく出てくるパターンをエッセンスとしてまとめておきます〜

今回はuGUIのTextについてです〜

uGUIのTextまとめ 

 

まずはHierarchyからCreate>UI>Textを選択します〜

f:id:hiyotama:20150506160151p:plain

Create>UI>Text

 

すると、Canvas、Text、Event Systemというオブジェクトが作られます〜今回説明するTextのInspectorビューを御覧ください〜

 

f:id:hiyotama:20150506160433p:plain

TextのInspectorビュー

 

uGUIの位置や大きさ等を調整するRectTransformについては、以下のエッセンスをご参照下さい〜

 

 

①Text

それではText(Script)欄についてひとつずつ説明していきます〜まずはTextですが、文字通り表示するテキストを編集できます〜

改行もできます〜

 

f:id:hiyotama:20150506160657p:plain

改行も可

 

②Font

フォントの設定ができます〜

使える拡張子は「ttf(True Type Font)」「otf(Open Type Font)」「dfont(Mac OS X datafork font)」とあります〜

フォントはAsset Storeにて「font」と検索するとたくさん出てきます〜無料のフォントもたくさんありますので、ぜひご活用下さい〜

 

③Font Style

Normalが普通、Boldが太字、Italicが斜体、Bold and Italicがその組み合わせです〜

 

④Font Size

文字の大きさです〜1~300までは大きくできることを確認しました〜

Font SizeがRect TransformのWidthとHeightを超えると文字が表示されないので注意が必要です〜(後述のHorizontal Overflow、Vertical Overflowで対応できます〜)

 

⑤Line Spacing

行間のサイズです〜2にすると1行空けで、また、少数点もいけます〜

 

f:id:hiyotama:20150506161510p:plain

Line Spacing:2

 

f:id:hiyotama:20150506161546p:plain

Line Spacing:0.5

 

⑥Rich Text

Rich Textを有効にすると、htmlタグを使うことができます〜

 

f:id:hiyotama:20150506162121p:plain

途中まで青色、文字サイズ20pxのhtmlタグ

 

f:id:hiyotama:20150506162208p:plain

タグ通りに表示

 

⑦Alignment

枠内での文字の位置を設定できます〜左寄せ・真ん中・右寄せと、上寄せ・真ん中・下寄せが選べます〜

 

f:id:hiyotama:20150506162427p:plain

右下寄せにしてみた

 

⑧Horizontal Overflow

Rect TransformのWidth(横幅)をテキストが超えた時の対応方法を設定します〜Wrapだとテキストは表示されず、OverflowだとWidthを超えて表示します〜

 

f:id:hiyotama:20150506165303p:plain

Horizontal Overflow:Overflow

 

⑨Vertical Overflow

Rect TransformのHeight(高さ)をテキストが超えた時の対応方法を設定します〜Truncateだとテキストは表示されず、OverflowだとHeightを超えて表示します〜

 

f:id:hiyotama:20150506165435p:plain

Vertical Overflow:Overflow

 

⑩Best Fit

テキストボックスの大きさ(WidthとHeight)に合わせて、文字サイズを変更してくれます〜Best Fitにチェックを入れるとMin SizeとMax Sizeが表れますので、例えばMin Sizeを5、Max Sizeを30にし、Widthを150、Heightを30にしますと、非常に小さな文字が表示されます〜

 

f:id:hiyotama:20150506165057p:plain

枠に合わせて小さな文字を表示

 

次にWidthを150、Heightを150にしますと、非常に大きな文字が表示されます〜

 

f:id:hiyotama:20150506165144p:plain

枠に合わせて大きな文字を表示

 

⑪Color

文字色を設定します〜

 

⑫Material

Materialを設定します〜

 

以上、ひよこエッセンスでした〜

ありがとうございました〜