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

Fonts

テキストエレメント (Text Element) は、Fontアセット を使用して文字列をレンダリングします。Fontアセットは、マルチチャンネルのサインドディスタンスフィールド (MSDF) のアトラスで、.json ファイル（グリフのメトリクス）と1つ以上の .png テクスチャページで構成されます。グリフは固定サイズのビットマップではなくディスタンスフィールドとして格納されるため、1つのFontアセットであらゆるサイズでも鮮明さを保ちます。したがって、書体ごとに必要なアセットは1つだけです。

このページでは、Fontアセットを作成する2つの方法と、各ランタイムでの読み込み方法について説明します。

Fontアセットの作成​

Editorで作成する​

.ttf、.ttc、.otf、.dfont ファイルをEditorにドラッグすると、自動的にMSDFのFontアセットに変換されます。含める文字を選択して結果を調整し、Process Font をクリックして再生成できます。オプションの一覧については Fontアセットのインスペクター を参照してください。

Editorを使わない場合 — font-tools​

Editorを使わずにEngine、React、Web Componentsで開発している場合は、font-tools を使用して、Editorと同じ .json + .png アセットを生成できます。使用方法は2通りあります。

  • ウェブアプリ — playcanvas.github.io/font-tools を開き、TTFまたはOTFをドラッグし、文字セットとグリフサイズを選択し、実際のPlayCanvasテキストで結果をプレビューして、ファイルをダウンロードします。すべてブラウザ内で実行され、フォントがアップロードされることはありません。

  • コマンドライン — ターミナルから離れずにアセットを生成できます。

    npx @playcanvas/font-tools MyFont.ttf --charset latin-ext -o assets/fonts/myfont

    これにより myfont.json と myfont.png が書き出されます（大きな文字セットは追加のページに分割されます: myfont1.png、myfont2.png など）。

Open Source

font-tools は MITライセンスの下でGitHubにてオープンソース化されています。CLIオプションの全一覧と、プログラムからフォントを生成するためのJavaScript APIについては、READMEを参照してください。

Fontアセットの使用​

.json とその .png ページは、同じベース名で同じ場所に置いてください。ローダーはJSONのURLからテクスチャのURLを導出し、ページを自動的に取得します。

// myfont.json + myfont.png (from font-tools) sit side by side;
// loading the .json pulls in the .png page(s) automatically.
const asset = new pc.Asset('myfont', 'font', { url: '/assets/fonts/myfont.json' });
app.assets.add(asset);

asset.ready(() => {
    // A 2D screen to hold the text
    const screen = new pc.Entity('screen');
    screen.addComponent('screen', { screenSpace: true });
    app.root.addChild(screen);

    const text = new pc.Entity('text');
    text.addComponent('element', {
        type: 'text',
        fontAsset: asset.id,
        text: 'Hello, World!',
        fontSize: 32,
        anchor: [0.5, 0.5, 0.5, 0.5],
        pivot: [0.5, 0.5]
    });
    screen.addChild(text);
});

app.assets.load(asset);