NGUIで日本語を出力できるようになるまでをSS付きで（Mac編） 備忘録的な意味で作成

1. NGUIで日本語を使う方法
- Mac編 -
日本Androidの会 秋葉原支部
Unity部
yasuyuki.kamata
1

2. はじめに
CAUTION
• ツールにお金がかかります
• でも比較的簡単（のはず）
• とりあえず装飾無しの文字で作ります
• 一部typoしてますが許してください m(_ _)m
2

3. 手順
• フォントのAtlasを作る
• NGUIで使えるようにする
3

4. フォントのAtlasを作る
使用するソフト
• Glyph Designer
• http://glyphdesigner.71squared.com/
• $29.99 (2012/6/19 現在)
4

5. フォントのAtlasを作る
Glyph Designerの使い方
5

6. フォントのAtlasを作る > Glyph Designerの使い方
1. 日本語フォントを選択する
フォント一覧から
使いたい日本語フォントを
選択する
（今回はヒラギノ角ゴシックPro）
6

7. フォントのAtlasを作る > Glyph Designerの使い方
2. 文字の大きさを変更する
デフォルトの 64 だと
生成される画像が
大きくなってしまうため
32 に変更する
7

8. フォントのAtlasを作る > Glyph Designerの使い方
3. 文字の色を変更する
Glyph Fill の中の
Fill Type -> Solid に
Solid Color -> White に
変更する
＊色をWhiteにするのは
Unity側で色を変更しやすく
するため
8

9. フォントのAtlasを作る > Glyph Designerの使い方
4. 文字のアウトラインを削除する
Glyph Outline の中の
Outline のチェックを外す
9

10. フォントのAtlasを作る > Glyph Designerの使い方
5. 文字の影を削除する
Glyph Shadow の中の
Shadow のチェックを外す
10

11. フォントのAtlasを作る > Glyph Designerの使い方
6. Atlasに含める文字列を入力する
ここに必要な文字列を
入れる
11

12. フォントのAtlasを作る > Glyph Designerの使い方
6. Atlasに含める文字列を入力する
• 第1水準までの漢字があればたぶん大丈夫
• プレーンテキストどこかにあるよね？
12

13. フォントのAtlasを作る > Glyph Designerの使い方
6. Atlasに含める文字列を入力する
• 案外なかった
13

14. フォントのAtlasを作る > Glyph Designerの使い方
6. Atlasに含める文字列を入力する
• なので、スクレイピングしてぶっこ抜いたも
のをDropboxに上げました
• http://db.tt/j4LnR996
• 2byte文字を集めただけです
14

15. フォントのAtlasを作る > Glyph Designerの使い方
6. Atlasに含める文字列を入力する
txtの内容をこの欄に
追加して
Update をクリックし
しばらく待ちます
15

16. フォントのAtlasを作る > Glyph Designerの使い方
6. Atlasに含める文字列を入力する
プレビューの画像が
大きくなり
Texture Atlas の中の
Width と Height が
自動的に変更されます
（この数字は後で使うので控えておく）
16

17. フォントのAtlasを作る > Glyph Designerの使い方
6. Atlasに含める文字列を入力する
うまくいっているかどうか
確認したい場合は
先程チェックを外した Outline に
チェックを入れると
どんな感じか見れます
（確認できたらまたチェックを外しましょう）
17

18. フォントのAtlasを作る > Glyph Designerの使い方
7. エクスポートする
Export のボタンを
押します
18

19. フォントのAtlasを作る > Glyph Designerの使い方
7. エクスポートする
Export type を
.txt (EZ GUI Text) に
変更して
名前をつけて
Save します
19

20. フォントのAtlasを作る > Glyph Designerの使い方
7. エクスポートする
xxx.png と xxx.txt
ができていればOKです
20

21. 手順
• フォントのAtlasを作る
• NGUIで使えるようにする
21

22. NGUIで使えるようにする
1. Unityにファイルをインポート
生成された2ファイルを
Unityにインポートする
22

23. NGUIで使えるようにする
1. GameObjectを作る
GameObject -> Create Empty
で空っぽのゲームオブジェクトを
作る
23

24. NGUIで使えるようにする > UIAtlas
2. UIAtlas Component を追加
作ったゲームオブジェクトに
Material が
Component -> NGUI -> UI -> Atlas
必要っぽい
で UIAtlas コンポーネントを追加
24

25. NGUIで使えるようにする > UIAtlas
3. Material を作る
Material を新規作成して
25

26. NGUIで使えるようにする > UIAtlas
4. Material に Texture を貼る
インポートした画像を
ドラッグ＆ドロップ
26

27. NGUIで使えるようにする > UIAtlas
5. Material の Shader を変える
Shader を
透過するモノに変える
（今回は Mobile/Particles/Alpha Blended ）
Preview で
透過できていることを確認
27

28. NGUIで使えるようにする > UIAtlas
6. UIAtlas に Material を登録
最初に作ったゲームオブジェクト
の Inspector に戻り、
作った Material を
登録すると・・
28

29. NGUIで使えるようにする > UIAtlas
6. UIAtlas に Material を登録
Inspectorの表示が変わり
押せと言わんばかりのボタンが出るので
New Sprite をクリックする
29

30. NGUIで使えるようにする > UIAtlas
7. Sprite を作る
さらにInspectorの表示が変わる
Edit Name に
インポートしたファイルと
同じ名前をつける
（今回の場合、 hiraginokakugochicpro32 ）
フォント画像の大きさを
Width と Height に
入力する
30

31. NGUIで使えるようにする > UIFont
8. UIFont を追加
最初に作ったゲームオブジェクトに UIAtlas が
Component -> NGUI -> UI -> Font 必要っぽい
で UIFont コンポーネントを追加
31

32. NGUIで使えるようにする > UIFont
9. UIFont に UIAtlas を登録
Atlas ボタンを押すと
Select UIAtlas という
ウィンドウが現れるので
選択肢の中から
UIAtlasを持っている
ゲームオブジェクト を選ぶ
（この場合は自分自身）
32

33. NGUIで使えるようにする > UIFont
10. UIFont に Text を登録
Import Font に
インポートした.txtファイルを
ドラッグ＆ドロップ
33

34. NGUIで使えるようにする > UIFont
10. UIFont に Text を登録
Inspector にプレビューが現れ、Console に
Imported xxxx characters
と出ていればOKです
34

35. NGUIで使えるようにする > Prefab化
11. ゲームオブジェクトを Prefab化
このゲームオブジェクトをPrefab化します
(Prefab化したら元のGameObjectは消してしまっても大丈夫です)
35

36. NGUIで使えるようにする > 文字を出す
12. NGUIの Label を作る
*NGUIの UI Root の出し方については割愛
作ったPrefabを
Widget Tool の Atlas と Font へ
それぞれドラッグ＆ドロップ
( Atlas , Font のボタンを押して選択肢から選んでも可)
36

37. NGUIで使えるようにする > 文字を出す
12. NGUIの Label を作る
Template を Label にして
Add To をクリック
37

38. NGUIで使えるようにする > 文字を出す
13. Label に日本語を入力する
ここに日本語を入れてみる
38

39. NGUIで使えるようにする > 文字を出す
14. Label の色を変える
Color Tint で
全体の文字色を変更できる
39

40. NGUIで使えるようにする > 文字を出す
15. Label の色を変える（一部）
文字列の中に
[ff0000] などを入れると
一部の色が変更できる
40

41. NGUIで使えるようにする > 文字を出す
Glyph Desiner の装飾次第で
デザイン済みの文字も使える
わ..わざと派手にしただけなんだからねっ
41

42. about us
• 日本Androidの会 秋葉原支部
• http://android-akihabara.info/
• 日本Androidの会 秋葉原支部 Unity部
• https://www.facebook.com/groups/android.akb.unity/
42