【Unity】TextのFont StyleでBoldを使うときの注意点はこれだ!

【Unity】TextのFont StyleでBoldを使うときの注意点はこれだ!

Textコンポーネントを使わずにゲームを作るってことも中々なくて、多分みんなが使ったことあるコンポーネントだと思います。

そのTextコンポーネント内で、Font Styleとして『Bold』や『Italic』を選択できるのは周知の事実ですが、これを使うときには注意が必要です。

しかも自分でフォントをインポートするときになってから気付きやすい問題点なので、「なんじゃこりゃああああ!」とビビること請け合い。

 

環境

macOS 10.13 High Sierra

Unity2018.1.0f2

どんな現象が起こるか

まずはこちらをご覧いただこう。Unityデフォルトで使われるフォントである『Arial』を使って表示したText。Font Styleは『Normal』でセットしています。

キメラ感が出てる
キメラ感が出てる

 

そしてこちらはFont Styleを『Bold』にしたもの。お分かりいただけただろうか。

Boldは特に闇を感じる
Boldは特に闇を感じる

 

正解は、英字部分はちゃんとBoldになっているのに、その他の部分は横に拡大されてしまう、でした。

フォントのインポートについては上の記事で扱ったのですが、これを書き終わった後、インポートしたフォントで『Bold』を選択しても同じように横に拡大されたので「うわぁ……Arialが残念だからインポートの話をしたのに、そのフォントでBold選んでも残念じゃん……やべぇよやべぇよ」と焦って調査したのが今回の出発点。

というかArialだとなんで英字だけ太字になってるのさ。

上の記事の中で使ってみた『M+ 1p』をBoldにするとこんな感じに。

3行目だけBoldに
3行目だけBoldに

 

3行目だけ横幅が拡がっています。『M+ 1p』を使った場合、Arialとは違い英字部分も横に拡大されました。なんじゃこりゃあ……。

上の例では『M+ 1p』のRegularを使っていたので、単純にBoldが見つからなかったのかも。そう思って『M+ 1p』のBoldをインポートして再挑戦。

Boldをインポート
Boldをインポート

 

……が、変わらず。

Fontのフィールドに対してダイレクトに『M+ 1p』のBoldを設定すればいい、ってのは確かにそうなんだけど、リッチテキストでBoldタグを含めたいときに上と同じ現象が起きちゃうので避けたいところ。

ボールドのフォントファイルをセットする手も
ボールドのフォントファイルをセットする手も

 

できればFont StyleのフィールドでRegularとBoldを切り替えたいんです。

 

Font Styleの動き

調べてみると、どうやらシステムにインストールされたフォントの中に有るか無いかが鍵のようで。

上のUnity Forumでも同じような現象に行き合った人がいました。

Unityのデフォルトで設定されているフォント・Arialの場合、WindowsやMacでは標準フォントとして元からインストールされているので、そのBoldスタイルを見にいっているみたい。

Arialフォント自体は英字のフォントなので、UnityでFont StyleとしてBoldを選んだ場合、システムのArialの英字部分だけ読み取って太字で表示しているようです。

日本語部分は謎のフォントだったらしく、私のMacには存在せず、太字にはなりませんでした。

フォントをインストールして実験

試しに『M+ 1p』のBoldをMacにインストールしてみることに。

フォントファイルを使ってインストールを行い、FontBookでインストールされたことを確認。Windowsだとコントロールパネルのフォントから確認できます。

Font Book
Font Book

 

続いてUnityを再起動。どうやら起動時にシステムにインストールされたフォントを見に行ってるようで、エディタを開きっぱなしだと反映されませんでした。

再起動後、Textコンポーネントの設定を以下のようにしました。

Font StyleをBoldに
Font StyleをBoldに

 

リッチテキストで一部をBoldに
リッチテキストで一部をBoldに

 

上記設定で画面に表示したものがこちら。

できた!
できた!

 

意図通りにBoldになってくれました。

これで問題解決!

……。

……そんなふうに考えていた時期が私にもありました。

 

リリースするときどうするの?

エディタ上ではうまくいっていますが、リリースするときはどうなるんでしょうね?

ポイントとなるのは、ゲームの実行環境にフォントがインストールされているかどうか。

試しに上記のテキストコンポーネントを表示するゲームをビルドしてみます。

『M+ 1p』のBoldがインストールされている状態なのでエディタと同じように表示されました。

フォントがシステムに存在する状態
フォントがシステムに存在する状態

 

続いて、Unity側の設定を変更せず、インストールされたフォントから『M+ 1p』のBoldをアンインストールした上で同じゲームファイルを実行します。すると横広がり現象が再発。

フォントがシステムに存在しない状態
フォントがシステムに存在しない状態

 

この結果から言えることは、TextコンポーネントのFont StyleでBold(またはBold Italic)を選択する場合は、ゲームの実行環境に該当のフォントファミリー、そのBoldがインストールされている必要があるということ。

例えばUnityデフォルトのArialの場合、Windows、Macには標準フォントとしてインストールされています。iOSもインストールされていますが、Androidだと入っていないことも多いです。

となると、デフォルトのArialですら、Androidアプリでは正しくBoldを表示してくれないことに。むーん。

なんとキツイ条件でしょうか。

「このゲームを遊ぶには、フォントをインストールしてね!」

なんて感じでリリースしたら各方面から怒られそう。

Boldのフォントを表示したいときには

TextコンポーネントのFont Styleを使うのではなく、プロジェクトにBold用のフォントファイルをインポートしてしまうのが無難かな。

Font Styleの設定だってTextコンポーネント毎のものだから、フォントファイルの違うコンポーネントがあるのと同じです。

動的に変えたいときはスクリプトから変更可能なので、Textフィールドの値を変えるときに一緒にフォントを変えておけば良さそう。

ただ、リッチテキストを使って文中でBoldにするのはちょっと難しいかも。

あとBold用のフォントファイルをインポートする分、ビルドしたゲームの容量が大きくなるのも目を瞑る必要があります。日本語フォントだとファイルサイズが大きいので結構ダメージが……。

まとめ

TextコンポーネントでBoldを使うときに気をつけるべきことをピックアップ。

システムにインストールされたフォントに依存するまさかの仕様だったので、最悪リリースしてから気付くこともあるかも。

最初からBoldのファイルをインポートするのが無難そうです。

アプリ公開までの攻略チャートを作りました!

CTA-IMAGE

「スマホ向けのアプリを作ってみたいけど、何から手を付けていいか分からない!」


そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験から手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。


アプリをリリースする観点から書いているので各アプリストア向けの作業が入っていますが、企画、設計、開発、テスト部分については他のプラットフォームでも使える知識が満載です。


無料で入手できるのでぜひお早めにゲットして、開発をブーストさせてください!