ゲーム制作   Unity ソフトウエア 

Unity ソフトウエアでゲーム制作#1モグラたたき編(18.TextMeshPro準備編)

キャッチ画像モグラたたきTextMeshPro準備編

本投稿は2024年9月時点の内容になります。アップデートにより変更となる場合があります。また環境によって違いがあると思いますのであくまで参考として、ご了承ください。

様々な書籍、ブログや動画を参考にさせていただきました。多すぎて一つ一つはtお紹介できませんが感謝です。

初心者の自分がUnity ソフトウエアでゲームを作ってみました。とりあえずシンプルなものということでモグラたたきに挑戦です。ゲーム作ってみるかという感じになったときに、いいタイミングで某ゲームのイベントシナリオ内ミニゲームにモグラたたきが実装されていたのでUIとかエフェクトとか、諸々の仕様をぱくって参考にして作ってみましたよ。様々なHowToの中の選択肢のひとつとして、同じ初心者さんの参考になればよいです。

\ チェック /

UI作成で使えるようにフォントの準備をしよう

UIを作ってゲームらしくしていきたいと思います。その中で一番使うであろうフォントの設定をしていきたいと思います。

本記事のポイント

  • フォントを使用する際の注意点
  • フォントの使い方
  • TextMeshPro フォントアセットクリエイターの使い方

フォントデータの準備

まずはフォントデータの準備をします。今回は

数英字記号のみのフォントとして「ユニティちゃん2D」アセットでも使用されていた「SilkscreenFont」と、見た目がかわいかった「Hyper-Stiff Round-Bootied Oposs Font」を

日本語ドットフォントとして定番「美咲フォント」を

採用してみました。フォントクリエイターの方感謝です。

ちなみに英数字記号は「FontSpace」から「美咲フォント」は公式「LittleLimit」からダウンロードさせていただきました。※フォントデータをダウンロード、使用は自己責任でお願いします。

フォントデータを使う際の注意点

ここでフォントデータを使わせていただくときの注意点です。ずばりライセンスです。

紙媒体や画像素材としての使用が認められているからといって、フォントのデータをアプリやゲームに組込みフォントとして使ったり、再配布していいわけではない!

フォントデータを使う際の注意点

  • 紙媒体や画像素材としての使用が認められているからといって、フォントのデータをアプリやゲームに組込みフォントとして使ったり、再配布していいわけではない! 大事なことなので2回書きました。
  • フリーフォントでも個人使用のみ商業利用不可などある
  • とくに注意なのが、月額利用でロゴや出版物につかえる「AdobeFont」。支払ってるから自由だろと思ってはいけません。組込NGです。組込むためには別途フォントメーカーのライセンスを確認し、契約する必要があります。

それではどんなフォントがOKなのか。

使えるフォントデータてどんなの?

  • Freewareのフォント(気に入ったらDonateしてあげてもOK)
  • 「SIL Open Font License(SILオープンフォントライセンス)のフォント、およびその派生フォント(派生したフォントもSILオープンフォントライセンスを引き継いでいる)
  • SILオープンフォントライセンスで日本語が使える有名なフォントには「M+Font」や、あのLINEが提供している「LINE seed」などがあります。
  • 今回使う「美咲フォント」も「M+Font」の派生です。

というわけで使用には注意しましょう。

フォントを使ってみよう

フォントデータの使い方

  1. フォントデータの整理のために「Fonts」フォルダーを作成。
  2. ダウンロードしたフォントデータを(圧縮されている場合は解凍して)フォルダーにドラッグアンドドロップします。
  3. これでUIの古い機能(Legacy)のテキストでフォントが使えるようになりました。

次により装飾が可能な「TextMeshPro」を使うための準備のため、「フォントアセットクリエイター」を使っていきます。

TextMeshProを使うための準備 フォントアセットクリエイターの使い方

フォントアセットクリエイターを使ってTextMeshProを使うためのマテリアルを作っていきます。

フォントアセットクリエイターの使い方

  1. 上部メニューから「ウインドウ」>「TextMeshPro」>「フォントアセットクリエイター」をクリック
  2. 今回が最初の場合「TMP Importer」開くので「Import TMP Essentials」をクリックします。
  3. アセットに「TextMesh Pro」というフォルダーが作成されたと思います。
  4. 次に「Font Asset Creater」のセッティングです。あくまでマケイヌがうまくいってる設定です。うまくいかなかったときはいろいろ試してみてください。

英数フォントの設定例

  1. SourceFontFile:使いたいフォントデータを選択
  2. SamplingPointSize:「72」このくらい大きくするとレンダリングの精度保証できそう 小さいとビットフォントの場合、大きいサイズで角が丸くなりがち
  3. Padding:「10」上の2の数字を大きく設定してるのでこのくらい余裕があるといい感じ
  4. PackingMethod:とりあえず「高速」OK。「Optimum」にするといい感じに隙間を詰めてくれるが時間がかかる。製品版などでは「Optimum」の方がいいかも
  5. AtlasResolution:英数なら「1024×1024」でほぼ大丈夫。作成後の「Excluded characters」が0ならOK。
  6. CharacterSet:英数ならASCIIでOK
  7. RenderMode:SDF16でほぼ行ける。結果が滲んでいるようなら他も試してみる
  8. GetKerningPairs:とりあえずチェックしておく
  9. GenerateFontAtlas します
  10. 結果が良ければSaveします 保存場所はUnityプロジェクトで用意してくれている「TextMeshPro」>「Resources」>「FontsAndMaterials」とかでOKです。

日本語フォントの設定はサイズが大きいので色々大変ですが、一度おこなってやり方を覚えてしまいましょう。

日本語フォントの設定例

  1. 5 AtlasResolution、6 CharacterSet 以外は上記と同じでだいたいOKです
  2. AtlasResolution:「8192×8192」
  3. CharacterSet:下記にまとめます。

日本語のCharacterSet設定例 その1UnicodeRange(Hex)を使う

  1. CharacterSet:「UnicodeRange(Hex)」 を選択
  2. 表示された「CharacterSequence(Hex)」に以下を加える
  3. 0000-04FF(ラテン文字【ASCII】他ギリシャ文字、キリル文字など)
  4. 2000-2BFF(一般句読点、囲み文字、記号など)
  5. 3000-303F(CJKの記号及び句読点)
  6. 3040-309F(平仮名)
  7. 30A0-30FF(片仮名)
  8. 3200-32FF(囲みCJK文字・月)
  9. 3300-33FF(CJK互換用文字)
  10. FF00-FFEF(半角・全角系)
  11. 4E00-9FFF(CJK統合漢字)
  12. まとめると 0000-04FF,2000-2BFF,3000-33FF,FF00-FFEF,4E00-9FFF
  13. GenerateFontAtlas して保存します
  14. 注意 この方法だと Unity Editorが メモリーリークの注意喚起をやたらとコンソールに吐いて落ちる場合がある。なんとなくUnity 自身の潜在的なバグぽい。うまくいかないときは再起動してやり直してみてください。
  15. それでもうまくいかないときは下記の他の方法を試してみてください

日本語のCharacterSet設定例 その2UnicodeRange(Hex)を使う軽量版

  1. 上記の1~10をまず行う
  2. まとめると 0000-04FF,2000-2BFF,3000-33FF,FF00-FFEF
  3. これで一旦 GenerateFontAtlas して保存します
  4. CharacterSet:「CustomCharacters」
  5. SelectFontAsset:3で保存したものを選択
  6. CustomCharacterListに使う漢字を入力して保存
  7. 使う漢字が増えるたびに追加する
  8. 更新作業がすこし煩わしいが簡単なコマンドのみのゲームなどにはこれで十分かも。ノベルゲームとかテキストが多いゲームには使えない

日本語のCharacterSet設定例 その3CharactersFromFile(先人の資料にタダ乗りする①)

  1. 日本語文字コード範囲指定(ascii・ひらがな・カタカナ・第一水準および第二水準(JIS-X0208-1997)に含まれる漢字)をテキスト化してくれている「japanese_full.txt」をダウンロードして使わせていただきます。
  2. ダウンロードしたテキストファイルは「TextMeshPro」>「Documentation」あたりに保存しておく
  3. CharacterSet:「CharactersFromFile」 を選択
  4. CharacterFile:先ほどダウンロードして保存したファイルを選択して
  5. GenerateFontAtlas して保存します

日本語のCharacterSet設定例 その4CharactersFromFile(先人の資料にタダ乗りする②)

  1. Adobeの日本語文字コレクション(Adobe-Japan1)をテキスト化してくれている「Adobe-Japan1-List」の「Adobe-Japan1-7.txt」ダウンロードして使わせていただきます。
  2. ダウンロードしたテキストファイルは「TextMeshPro」>「Documentation」あたりに保存しておく
  3. CharacterSet:「CharactersFromFile」 を選択
  4. CharacterFile:先ほどダウンロードして保存したファイルを選択して
  5. GenerateFontAtlas して保存します

これでTextMeshProを使う準備がでいました。次回からUIを作っていきます。

まとめ

まとめ

  • フォントデータを使う場合はライセンスに気を付ける
  • TextMeshProを使うにはFontAseetCreatorで各フォントのマテリアルを作成する
  • 日本語フォントの場合 「UnicodeRange」を使うか 文字のコレクションをテキスト化したファイルを使うといい
ユニティちゃん公式ホームページへ
ユニティちゃん公式ホームページ
ユニティちゃんライセンス
ユニティちゃんの画像、素材、ライセンスロゴはユニティちゃんライセンス条項を元に使用しています

\ 初学に使った書籍です /

動画×解説でかんたん理解! Unityゲームプログラミング超入門

大角 茂之/大角 美緒

マケイヌ的おすすめ度

わかりやすい度

提供素材がよくてテンション上がる度

〇おすすめポイント

素材が良くてモチベがあがります。

×よくないポイント

動画解説前提なので図版が小さいのが玉に瑕

おすすめ記事

 

プロフィール

マケイヌ

人生のメインストリームから外れた40代の♂。

90年代オルタナにはまり、文字通りメインストリームから逸脱。 その後もたびたび人生から逃亡。

心が動いた作品の紹介や 自分のちいさな経験、HowToを発信できればと日々模索中。

1年後までにイラストと写真のポートフォリオをつくりたい。

記:2019年12月

▼プロフィールはこちら

Follow me

アーカイヴ