この記事は【NGUIでフォントを設定 その2】の続き。
NGUIの設定については【こちら】

今回は前回作成したFontAtlasを利用してラベルの作成とインプットの作成に挑戦

1.フォント画像の作成
2.Altalの準備
3.フォントの使用

スクリーンショット 2012-04-16 22.18.51

■ラベルの作成


1.[NGUI]→[Create a Widget]でWidget Toolを開く。

2.[Atlas]と[Font]に前回作成したFontAtlasを登録。

3.[Add To]でラベルを作成。

スクリーンショット 2012-04-16 22.16.11   スクリーンショット 2012-04-16 22.16.53

なお、ラベルの中身はUILabelの入力欄を書き換えれば変更できる。
しかも、文章の中に「[色コード]」と書くことで、文章の色も変えられる!

これは便利

スクリーンショット 2012-04-16 22.18.16


なお、何度も書いているとおりフォント画像に含まれていない文字は使用できない。
(例えば「abcあいうえお」のみだと、Yes You Canはcaしか表示されない)
とは言え、文字の量が多いとpngが2048を超えてしまう。

第一水準文字だけで2965字、ユーザー入力に使うなら第2水準漢字まで欲しいので、
・入力はフォントサイズが小さい+全文字を含む画像
・他のフォントは大きめ+必要最低限の文字を含む画像
みたいな感じで分けると良いんじゃないかと。



■インプットの作成

1.[NGUI]→[Create a Widget]でWidget Toolを開く。

2.[Atlas]と[Font]に前回作成したFontAtlasを登録。

3.Templateに[Input]を選択。

4.[Add To]でインプットを作成。

スクリーンショット 2012-04-16 22.29.11

ちなみにインプットは入力内容を表示するLabelと入力するSlicedspriteで構成される。
表現がLabelなので、UILabelのEncodingにチェックを入れると、
入力時に「[色コード]」を入れると文字色が変化してしまう。

NGUIの色変更で文字の色を変更したい場合は、入力にも注意を。

フォローボタン