メインコンテンツまでスキップ

Font

Fontアセットは、TextタイプのElementコンポーネントを通してテキストを描画します。エンティティにElementコンポーネントを追加し、タイプをTextに設定して、FontアセットをコンポーネントのFontスロットにドラッグアンドドロップします。

フォントは固定サイズのビットマップではなく、マルチチャンネル符号付き距離フィールド (MSDF) のアトラスとして保存されます。そのため1つのアセットがあらゆるサイズで鮮明さを保ち、書体ごとに1つのアセットを用意すれば十分です。この技術は書体によって向き不向きがあります。

フォントのインポート​

.ttf、.ttc、.otf、.dfont ファイルをEditorにドラッグします。アトラスはブラウザ内で生成され、結果としてファイル名を冠したフォルダーに4つのアセットが作成されます。

Font import folder

アセットタイプ内容
myfont.otfソースアップロードしたフォントファイル。再生成のために保持されます。破線の枠で表示されます。
myfont.jsonJSONMSDFディスクリプタ。グリフのメトリクスとアトラスのレイアウトを保持します。
myfont.pngテクスチャアトラスのページ。文字数が多い場合は myfont1.png、myfont2.png と続きます。
myfont.otfフォントFontアセット本体。JSONとテクスチャを参照するだけなので、アトラスが重複して保存されることはありません。

ソースファイルとFontアセットは同じ名前になります。Text要素に割り当てるのはFontアセット、つまりサムネイルに書体のプレビューが表示されている方です。

インポート時には印字可能なASCII (0x20–0x7E) が含まれます。文字を追加する場合は、以下の手順で再生成してください。

注記

参照先を差し替えた場合、または参照しているJSONやテクスチャアセットを編集した場合、フォントはただちに再構築されます。ビューポートのテキストとアセットのサムネイルは、Editorを再読み込みせずに更新されます。

Editorを使っていない場合

Engine、React、Web Componentsのプロジェクトでは、font-tools を使ってEditorなしで同種のアセットを生成できます。Editorと同じジェネレーターを使用しています。

プロパティ​

Font Asset

ソースファイル (Source Files)​

フォントの元となるJSONディスクリプタとアトラステクスチャです。どちらも通常のアセットなので、アセットピッカーで差し替えできます。他のツールで生成したアトラスを指定する場合に便利です。

プロパティ説明
JSONMSDFディスクリプタ。差し替えるとフォントが再構築されます。
Texturesアトラスのページ。ディスクリプタが参照する順序で指定します。1ページ目、2ページ目、という順です。

手動で編集する場合、次の2点に注意してください。

  • ページの順序には意味があります。 ディスクリプタはアトラスのページをインデックスで参照するため、順序が違うと別のグリフが描画されます。ピッカーは末尾に追加するだけで並べ替えができないため、順序が崩れた場合はフォントを再生成して復元してください。
  • アトラステクスチャを他の用途と共有しないでください。 フォントの読み込み時にMSDF用の設定 (sRGBなし、ミップマップなし、リニアフィルタリング) に変更されるため、他の場所で使用しているテクスチャを指定すると、そのテクスチャの見え方が変わります。

参照から有効なフォントを構成できない場合、このパネルが警告を表示します。参照が空の場合、JSONアセットが有効なディスクリプタでない場合、ページ数がディスクリプタと一致しない場合です。参照が壊れたフォントは読み込みに失敗するのではなく空白として描画されるため、この警告が唯一の手がかりになります。

文字プリセット (Character Presets)​

プリセットをクリックすると、その文字がフォントに追加されます。プリセットは現在の選択を置き換えるのではなく、追加します。

カスタム文字範囲 (Custom Character Range)​

特定の範囲を含める場合は、開始と終了を16進数で入力し、+ ボタンをクリックして文字の選択に追加します。

フォント (Font)​

プロパティ説明
Charactersフォントに生成される文字です。数字だけが必要なら、それ以外を含める必要はありません。文字数が少ないほどアトラスも小さくなります。含めるにはソースフォントにその文字が存在する必要があり、存在しない文字は再生成後に一覧表示されます。
Invert生成されるアトラスを反転します。変更後は再生成してください。

フォントアセットの再生成 (Regenerate Font Assets)​

文字の選択や Invert オプションを変更したら、REGENERATE FONT ASSETS をクリックします。生成はブラウザ内で実行され、既存のJSONアセットとテクスチャアセットが上書きされます。そのため参照は有効なまま保たれ、フォントのIDも変わらないので、そのフォントを使用しているText要素はそのまま動作します。新しい文字セットでページが増える場合は、追加のアセットが作成されます。

必要なページ数が以前より少なくなった場合、余ったテクスチャアセットは削除されずフォルダーに残されます。まだ必要な場合に備えた動作で、参照されなくなった数がEditorに表示されます。不要であれば手動で削除してください。

Editor内生成より前に作成されたフォントの変換​

Editorがアトラスを生成するようになる前にインポートされたフォントには、JSONアセットとテクスチャアセットがありません。そのため、代わりに CONVERT TO REFERENCED FONT と表示されます。変換すると、ディスクリプタとアトラスが個別のアセットとして生成され、フォントがそれらを参照するようになります。アセットIDとテキストへの割り当てはすべて保持されます。

変換はフォントのデータとファイルを置き換えるため、取り消すことができません。そのため事前に確認が表示されます。

Convert font confirmation

変換されるまで、フォントは PROPERTIES パネルに Intensity プロパティを保持します。

プロパティ説明
Intensity符号付き距離フィールドから読み取った値をブーストします。0はブーストなし、1が最大です。デフォルトではエッジがきれいに描画されない場合や、小さいサイズで描画する場合に有用です。

JSONとテクスチャの参照を持つフォントは、ディスクリプタからintensityを取得するため、このパネルは表示されません。