Your SlideShare is downloading. ×
20120620 ngui japanese
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

20120620 ngui japanese

6,653
views

Published on

NGUIで日本語を出力できるようになるまでをSS付きで(Mac編) …

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

Published in: Technology

1 Comment
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,653
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
59
Comments
1
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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で使えるようにする > UIAtlas3. Material を作る Material を新規作成して 25
    • 26. NGUIで使えるようにする > UIAtlas4. Material に Texture を貼る インポートした画像を ドラッグ&ドロップ 26
    • 27. NGUIで使えるようにする > UIAtlas5. Material の Shader を変える Shader を 透過するモノに変える (今回は Mobile/Particles/Alpha Blended ) Preview で 透過できていることを確認 27
    • 28. NGUIで使えるようにする > UIAtlas6. UIAtlas に Material を登録 最初に作ったゲームオブジェクト の Inspector に戻り、 作った Material を 登録すると・・ 28
    • 29. NGUIで使えるようにする > UIAtlas6. UIAtlas に Material を登録 Inspectorの表示が変わり 押せと言わんばかりのボタンが出るので New Sprite をクリックする 29
    • 30. NGUIで使えるようにする > UIAtlas7. Sprite を作る さらにInspectorの表示が変わる Edit Name に インポートしたファイルと 同じ名前をつける (今回の場合、 hiraginokakugochicpro32 ) フォント画像の大きさを Width と Height に 入力する 30
    • 31. NGUIで使えるようにする > UIFont 8. UIFont を追加 最初に作ったゲームオブジェクトに UIAtlas がComponent -> NGUI -> UI -> Font 必要っぽい で UIFont コンポーネントを追加 31
    • 32. NGUIで使えるようにする > UIFont9. UIFont に UIAtlas を登録 Atlas ボタンを押すと Select UIAtlas という ウィンドウが現れるので 選択肢の中から UIAtlasを持っている ゲームオブジェクト を選ぶ (この場合は自分自身) 32
    • 33. NGUIで使えるようにする > UIFont10. UIFont に Text を登録 Import Font にインポートした.txtファイルを ドラッグ&ドロップ 33
    • 34. NGUIで使えるようにする > UIFont10. 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