NGUIで日本語を使う方法       - Mac編 -   日本Androidの会 秋葉原支部            Unity部       yasuyuki.kamata            1
はじめに                  CAUTION• ツールにお金がかかります• でも比較的簡単(のはず)• とりあえず装飾無しの文字で作ります•   一部typoしてますが許してください m(_ _)m                ...
手順• フォントのAtlasを作る• NGUIで使えるようにする          3
フォントのAtlasを作る使用するソフト• Glyph Designer • http://glyphdesigner.71squared.com/ • $29.99 (2012/6/19 現在)                  4
フォントのAtlasを作るGlyph Designerの使い方            5
フォントのAtlasを作る > Glyph Designerの使い方1. 日本語フォントを選択する        フォント一覧から      使いたい日本語フォントを          選択する    (今回はヒラギノ角ゴシックPro)    ...
フォントのAtlasを作る > Glyph Designerの使い方2. 文字の大きさを変更する        デフォルトの 64 だと         生成される画像が        大きくなってしまうため          32 に変更する...
フォントのAtlasを作る > Glyph Designerの使い方3. 文字の色を変更する       Glyph Fill の中の    Fill Type -> Solid に   Solid Color -> White に      ...
フォントのAtlasを作る > Glyph Designerの使い方4. 文字のアウトラインを削除する     Glyph Outline の中の    Outline のチェックを外す                9
フォントのAtlasを作る > Glyph Designerの使い方5. 文字の影を削除する    Glyph Shadow の中の   Shadow のチェックを外す               10
フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する     ここに必要な文字列を         入れる              11
フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する• 第1水準までの漢字があればたぶん大丈夫• プレーンテキストどこかにあるよね?              12
フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する• 案外なかった               13
フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する• なので、スクレイピングしてぶっこ抜いたも のをDropboxに上げました • http://db.tt/j4LnR996  •   ...
フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する     txtの内容をこの欄に          追加して     Update をクリックし      しばらく待ちます      ...
フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する プレビューの画像が   大きくなり               Texture Atlas の中の               Wid...
フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する      うまくいっているかどうか         確認したい場合は    先程チェックを外した Outline に        チ...
フォントのAtlasを作る > Glyph Designerの使い方7. エクスポートする                   Export のボタンを                       押します              18
フォントのAtlasを作る > Glyph Designerの使い方7. エクスポートする                       Export type を                    .txt (EZ GUI Text) に ...
フォントのAtlasを作る > Glyph Designerの使い方7. エクスポートする               xxx.png と xxx.txt               ができていればOKです              20
手順• フォントのAtlasを作る• NGUIで使えるようにする          21
NGUIで使えるようにする1. Unityにファイルをインポート 生成された2ファイルを Unityにインポートする             22
NGUIで使えるようにする1. GameObjectを作る            GameObject -> Create Empty            で空っぽのゲームオブジェクトを                       作る   ...
NGUIで使えるようにする > UIAtlas   2. UIAtlas Component を追加   作ったゲームオブジェクトに                                         Material がCompo...
NGUIで使えるようにする > UIAtlas3. Material を作る         Material を新規作成して               25
NGUIで使えるようにする > UIAtlas4. Material に Texture を貼る   インポートした画像を    ドラッグ&ドロップ             26
NGUIで使えるようにする > UIAtlas5. Material の Shader を変える                    Shader を                  透過するモノに変える            (今回は M...
NGUIで使えるようにする > UIAtlas6. UIAtlas に Material を登録              最初に作ったゲームオブジェクト                の Inspector に戻り、             ...
NGUIで使えるようにする > UIAtlas6. UIAtlas に Material を登録             Inspectorの表示が変わり          押せと言わんばかりのボタンが出るので            New S...
NGUIで使えるようにする > UIAtlas7. Sprite を作る           さらにInspectorの表示が変わる                Edit Name に             インポートしたファイルと    ...
NGUIで使えるようにする > UIFont   8. UIFont を追加 最初に作ったゲームオブジェクトに                       UIAtlas がComponent -> NGUI -> UI -> Font    ...
NGUIで使えるようにする > UIFont9. UIFont に UIAtlas を登録  Atlas ボタンを押すと Select UIAtlas という ウィンドウが現れるので                          選択肢の中...
NGUIで使えるようにする > UIFont10. UIFont に Text を登録   Import Font にインポートした.txtファイルを  ドラッグ&ドロップ               33
NGUIで使えるようにする > UIFont10. UIFont に Text を登録   Inspector にプレビューが現れ、Console に         Imported xxxx characters             と...
NGUIで使えるようにする > Prefab化11. ゲームオブジェクトを Prefab化     このゲームオブジェクトをPrefab化します     (Prefab化したら元のGameObjectは消してしまっても大丈夫です)       ...
NGUIで使えるようにする > 文字を出す12. NGUIの Label を作る     *NGUIの UI Root の出し方については割愛            作ったPrefabを    Widget Tool の Atlas と Fon...
NGUIで使えるようにする > 文字を出す 12. NGUIの Label を作るTemplate を Label にして   Add To をクリック                       37
NGUIで使えるようにする > 文字を出す13. Label に日本語を入力する               ここに日本語を入れてみる          38
NGUIで使えるようにする > 文字を出す14. Label の色を変える                   Color Tint で                全体の文字色を変更できる           39
NGUIで使えるようにする > 文字を出す15. Label の色を変える(一部)     文字列の中に [ff0000] などを入れると   一部の色が変更できる               40
NGUIで使えるようにする > 文字を出すGlyph Desiner の装飾次第で デザイン済みの文字も使える    わ..わざと派手にしただけなんだからねっ   41
about us•       日本Androidの会 秋葉原支部    •    http://android-akihabara.info/•       日本Androidの会 秋葉原支部 Unity部    •    https://w...
Upcoming SlideShare
Loading in …5
×

20120620 ngui japanese

7,414 views

Published on

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

Published in: Technology
1 Comment
16 Likes
Statistics
Notes
No Downloads
Views
Total views
7,414
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
64
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 20120620 ngui japanese

    1. 1. NGUIで日本語を使う方法 - Mac編 - 日本Androidの会 秋葉原支部 Unity部 yasuyuki.kamata 1
    2. 2. はじめに CAUTION• ツールにお金がかかります• でも比較的簡単(のはず)• とりあえず装飾無しの文字で作ります• 一部typoしてますが許してください m(_ _)m 2
    3. 3. 手順• フォントのAtlasを作る• NGUIで使えるようにする 3
    4. 4. フォントのAtlasを作る使用するソフト• Glyph Designer • http://glyphdesigner.71squared.com/ • $29.99 (2012/6/19 現在) 4
    5. 5. フォントのAtlasを作るGlyph Designerの使い方 5
    6. 6. フォントのAtlasを作る > Glyph Designerの使い方1. 日本語フォントを選択する フォント一覧から 使いたい日本語フォントを 選択する (今回はヒラギノ角ゴシックPro) 6
    7. 7. フォントのAtlasを作る > Glyph Designerの使い方2. 文字の大きさを変更する デフォルトの 64 だと 生成される画像が 大きくなってしまうため 32 に変更する 7
    8. 8. フォントのAtlasを作る > Glyph Designerの使い方3. 文字の色を変更する Glyph Fill の中の Fill Type -> Solid に Solid Color -> White に 変更する *色をWhiteにするのは Unity側で色を変更しやすく するため 8
    9. 9. フォントのAtlasを作る > Glyph Designerの使い方4. 文字のアウトラインを削除する Glyph Outline の中の Outline のチェックを外す 9
    10. 10. フォントのAtlasを作る > Glyph Designerの使い方5. 文字の影を削除する Glyph Shadow の中の Shadow のチェックを外す 10
    11. 11. フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する ここに必要な文字列を 入れる 11
    12. 12. フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する• 第1水準までの漢字があればたぶん大丈夫• プレーンテキストどこかにあるよね? 12
    13. 13. フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する• 案外なかった 13
    14. 14. フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する• なので、スクレイピングしてぶっこ抜いたも のをDropboxに上げました • http://db.tt/j4LnR996 • 2byte文字を集めただけです 14
    15. 15. フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する txtの内容をこの欄に 追加して Update をクリックし しばらく待ちます 15
    16. 16. フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する プレビューの画像が 大きくなり Texture Atlas の中の Width と Height が 自動的に変更されます (この数字は後で使うので控えておく) 16
    17. 17. フォントのAtlasを作る > Glyph Designerの使い方6. Atlasに含める文字列を入力する うまくいっているかどうか 確認したい場合は 先程チェックを外した Outline に チェックを入れると どんな感じか見れます (確認できたらまたチェックを外しましょう) 17
    18. 18. フォントのAtlasを作る > Glyph Designerの使い方7. エクスポートする Export のボタンを 押します 18
    19. 19. フォントのAtlasを作る > Glyph Designerの使い方7. エクスポートする Export type を .txt (EZ GUI Text) に 変更して 名前をつけて Save します 19
    20. 20. フォントのAtlasを作る > Glyph Designerの使い方7. エクスポートする xxx.png と xxx.txt ができていればOKです 20
    21. 21. 手順• フォントのAtlasを作る• NGUIで使えるようにする 21
    22. 22. NGUIで使えるようにする1. Unityにファイルをインポート 生成された2ファイルを Unityにインポートする 22
    23. 23. NGUIで使えるようにする1. GameObjectを作る GameObject -> Create Empty で空っぽのゲームオブジェクトを 作る 23
    24. 24. NGUIで使えるようにする > UIAtlas 2. UIAtlas Component を追加 作ったゲームオブジェクトに Material がComponent -> NGUI -> UI -> Atlas 必要っぽい で UIAtlas コンポーネントを追加 24
    25. 25. NGUIで使えるようにする > UIAtlas3. Material を作る Material を新規作成して 25
    26. 26. NGUIで使えるようにする > UIAtlas4. Material に Texture を貼る インポートした画像を ドラッグ&ドロップ 26
    27. 27. NGUIで使えるようにする > UIAtlas5. Material の Shader を変える Shader を 透過するモノに変える (今回は Mobile/Particles/Alpha Blended ) Preview で 透過できていることを確認 27
    28. 28. NGUIで使えるようにする > UIAtlas6. UIAtlas に Material を登録 最初に作ったゲームオブジェクト の Inspector に戻り、 作った Material を 登録すると・・ 28
    29. 29. NGUIで使えるようにする > UIAtlas6. UIAtlas に Material を登録 Inspectorの表示が変わり 押せと言わんばかりのボタンが出るので New Sprite をクリックする 29
    30. 30. NGUIで使えるようにする > UIAtlas7. Sprite を作る さらにInspectorの表示が変わる Edit Name に インポートしたファイルと 同じ名前をつける (今回の場合、 hiraginokakugochicpro32 ) フォント画像の大きさを Width と Height に 入力する 30
    31. 31. NGUIで使えるようにする > UIFont 8. UIFont を追加 最初に作ったゲームオブジェクトに UIAtlas がComponent -> NGUI -> UI -> Font 必要っぽい で UIFont コンポーネントを追加 31
    32. 32. NGUIで使えるようにする > UIFont9. UIFont に UIAtlas を登録 Atlas ボタンを押すと Select UIAtlas という ウィンドウが現れるので 選択肢の中から UIAtlasを持っている ゲームオブジェクト を選ぶ (この場合は自分自身) 32
    33. 33. NGUIで使えるようにする > UIFont10. UIFont に Text を登録 Import Font にインポートした.txtファイルを ドラッグ&ドロップ 33
    34. 34. NGUIで使えるようにする > UIFont10. UIFont に Text を登録 Inspector にプレビューが現れ、Console に Imported xxxx characters と出ていればOKです 34
    35. 35. NGUIで使えるようにする > Prefab化11. ゲームオブジェクトを Prefab化 このゲームオブジェクトをPrefab化します (Prefab化したら元のGameObjectは消してしまっても大丈夫です) 35
    36. 36. NGUIで使えるようにする > 文字を出す12. NGUIの Label を作る *NGUIの UI Root の出し方については割愛 作ったPrefabを Widget Tool の Atlas と Font へ それぞれドラッグ&ドロップ ( Atlas , Font のボタンを押して選択肢から選んでも可) 36
    37. 37. NGUIで使えるようにする > 文字を出す 12. NGUIの Label を作るTemplate を Label にして Add To をクリック 37
    38. 38. NGUIで使えるようにする > 文字を出す13. Label に日本語を入力する ここに日本語を入れてみる 38
    39. 39. NGUIで使えるようにする > 文字を出す14. Label の色を変える Color Tint で 全体の文字色を変更できる 39
    40. 40. NGUIで使えるようにする > 文字を出す15. Label の色を変える(一部) 文字列の中に [ff0000] などを入れると 一部の色が変更できる 40
    41. 41. NGUIで使えるようにする > 文字を出すGlyph Desiner の装飾次第で デザイン済みの文字も使える わ..わざと派手にしただけなんだからねっ 41
    42. 42. about us• 日本Androidの会 秋葉原支部 • http://android-akihabara.info/• 日本Androidの会 秋葉原支部 Unity部 • https://www.facebook.com/groups/android.akb.unity/ 42

    ×