みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

UE4のフォントで足りない文字を補充する

文字が足りなくて困ったことはありませんか?私はあります。

アンリアルエンジンではフォントをアセット化して、適時ラスタライズして画面に表示してくれますが、グリフ(字形)がそのフォントに含まれていないと無いとブランク文字が表示されます。

ゲーム開発で必ずと言っていいほど見かける以下の記号。

 

f:id:hiyokosabrey:20180522014222p:plain

 

 これらが入っていないフォントがまだ多くあります。特に作られた年度が古いフォントは入っていない率高いです。(ユーロの記号もそうですね)。権利表記で使われる記号なので、出さないわけにはいきませんし、(C)とか(R)のように括弧書きもOKなんですが、ちょっとカッコ悪いですよね。

 UE4ではフォントのグリフが足りない場合にサブフォントを登録して解決することができます。ところがフォントごとにデザインやパラメータが違うので、文字を並べたときに高さが揃わなかったりしてうまく並ばないことが多いのです。

 なので、たかが3文字程度作ってしまえ~、ということで今回フォントを作るところから書いていきます。といってもUE4に持っていく流れ程度ですけども。

  

 さて、フォント作成ツールを探してみて、なじみの武蔵システムさんのOTEdit を使おうと思ったのですが、気軽にオススメできる値段じゃないので、今回はFontForge というフリーのアウトラインフォント作成ツールを使ってみることにしました。

 

f:id:hiyokosabrey:20180522231610p:plain

公式には日本語版が見当たらないので、日本語版のセットアップ方法についてはこちらの記事を参考にしました。

この夏はフリーソフトでフォント作成に挑戦してみよう:ちはやろぐ.aep - ブロマガ

基本的な使い方については、上の記事にだいたい載ってるので省略します。

 

起動して「新規」を選択すると下のようなウィンドウが開きます。これがメインのウィンドウです。

f:id:hiyokosabrey:20180522232413p:plain

このウィンドウを閉じると終了してしまうのでご注意を。

四角の中にグレーのバッテンが書かれているのがグリフが無い状態。上の小さな文字がサンプルの文字です。(C)と(R)はすぐに見つけられるので、ダブルクリックしてグリフを作っていきます。↓グリフエディタはこんな感じ。

f:id:hiyokosabrey:20180522233813p:plain

外側の輪っかはコピぺできるので、(R)の方は少しラクができました。

f:id:hiyokosabrey:20180522235732p:plain

 

さて、ここまできて TM が作れないことが判明します。

デフォルトのエンコーディングが  ISO 8859-1 になっていて 255文字分しかエディットできないのです。そこでエンコーディングを変えます。

メニューから

エンコーディングエンコーディング変換  と進むとリストが出てくるので、

ISO 10646-1 を選択します。

f:id:hiyokosabrey:20180522235104p:plain

これで、メインのウィンドウから U+2122 のところまでスクロールすることができるようになります。

f:id:hiyokosabrey:20180522235625p:plain

とりあえず3つ作ることができたので、フォント情報を設定します。

メニューから、 エレメント > フォント情報 を選択します。

設定用のウィンドウに、フォント名や著作者情報を入力していきます。

f:id:hiyokosabrey:20180523001315p:plain

AddSymbと名付けてみたけど、なんか関数名みたいw

 

ちなみに文字ごとの幅を設定するのは、メニューから メトリック を選択すると設定可能です。

いったん作業データを保存します。拡張子が sfd になります。

次回に引き続き編集する際はこの SFD形式のファイルを開けば継続できます。

 

で、いざフォント書き出しです。

ファイル > フォントを出力 を選択するとウィンドウがポップアップします。

f:id:hiyokosabrey:20180523002901p:plain

OpenTypeを選択して、生成ボタンをクリックします。

下のようなダイアログがポップアップしますが、気にせず生成ボタンをクリックします。

f:id:hiyokosabrey:20180523003129p:plain

 

うまく書き出せたらフォント完成です。

f:id:hiyokosabrey:20180523003333p:plain

このフォントをUE4に持っていきます。

 

フォントのインポート方法は公式サイトが丁寧で詳しいので、今回は説明は省きます。

Unreal Engine | フォントのインポート

 

 まずメインのフォントをアセットにします。

まずサブフォント無しの状態。

f:id:hiyokosabrey:20180525014008p:plain

 UMGのキャンバスにTextBlockを置いてみます。

表示内容は以下。ちょっと文字が小さくに見にくいですが

f:id:hiyokosabrey:20180525014048p:plain

でキャンバスはというと

結果はこうなりました。

f:id:hiyokosabrey:20180525014135p:plain

見事にグリフが足りてないですね。

そこで、サブフォントにFontForgeで作ったフォントをセットします。

f:id:hiyokosabrey:20180525014915p:plain

まずサブフォントを追加するボタンをクリックしてから、Add Character  Rangeボタンと、Add Font ボタンをクリックして、Unicodeを入力します。

f:id:hiyokosabrey:20180525015925p:plain

ハイフンのあるところにUncode(ユニコード)を2か所に同じ値を入力します。

Range(レンジ)=範囲 なので、「ここから~ここまで」という指定ができるのですが、今回3文字しか作ってないのと、途中のグリフがないので、3文字分を単品で追加します。

 

Uniodeを入力する際は、U+00a9 という表記を16進数表記に直して入力します。

といっても、すでに 0x0000 となっているので、xの右側 4桁を書き替えるだけです。

f:id:hiyokosabrey:20180525014622p:plain

一応文字コード番号の調べ方は、Windowsだと、文字コードを使うと確認できます。

f:id:hiyokosabrey:20180525015539p:plain

 

サブフォントがセットできたら、保存してUMGのキャンバスを確認してみると、

f:id:hiyokosabrey:20180525020804p:plain

おお、いい感じになりました。

 

ここで、高さがおかしかったらFontForgeで調整すれば、どんなフォントが来てもバッチリです。

あまり見かけないですが、SM (ServiceMark)U+2120 というのも場合によったら必要になるかもしれません。

 

意外と手軽にグリフを補充できました。割と需要がありそうなので、このまま開発のたびにマイフォントとして育てていければいいなと思ってます。

 

おまけ

Photoshopをお使いのUIデザイナーの皆様にはぜひともご確認いただきたい設定があります。

環境設定(Ctrl+K)の「テキスト」という設定項目についてです。

f:id:hiyokosabrey:20180525022702p:plain

ここに、「見つからない字形の保護を有効にする」という項目があるのですが、デフォルトで チェックが付いているので、チェックを外しておくことを強くお勧めします。

これは表示しようとしたグリフを持たないフォントでも、代替フォントで表示して文字化けや、文字の欠けを防ぐ仕様です。ゲーム開発では、フォントの利用についていろいろ権利関係が厳しいので、チェックを付けない方が安全なのです。SonyさんやNintendoさんのハード向けのタイトルにうっかり Arial や MSゴシック が混入してたことが発覚したら・・・。チェックを外しておくことでグリフの有無を確認できるので、ローカライズ作業などでもメリットはあります。

 

 

ではでは

今回はこの辺で

ステキなフォントライフを!