メインコンテンツへスキップ
バージョン: v8.x

テキスト

ハイスコアであろうと図のラベルであろうと、テキストはプロジェクトで情報を伝えるための最良の方法であることがよくあります。驚くべきことに、WebGL でテキストを画面に描画するのは非常に複雑なプロセスであり、組み込みのサポートはまったくありません。PixiJS が提供する価値の 1 つは、この複雑さを隠し、数行のコードで多様なスタイル、フォント、色のテキストを描画できるようにすることです。さらに、これらのテキストはスプライトと同じようにシーンオブジェクトです。テキストの色合いを変更したり、回転させたり、アルファブレンドしたり、その他のグラフィカルオブジェクトのように扱うことができます。

これがどのように機能するかを詳しく見ていきましょう。

3種類のテキストがあります​

WebGL でのテキストの取り扱いの課題のため、PixiJS は 3 つの非常に異なるソリューションを提供します。このガイドでは、プロジェクトのニーズに合った選択をするのに役立つように、両方の方法について詳しく説明します。誤ったテキストタイプを選択すると、プロジェクトのパフォーマンスと外観に大きな悪影響を与える可能性があります。

Textオブジェクト​

テキストを画面に描画するには、Text オブジェクトを使用します。内部的には、このクラスはブラウザの通常のテキストレンダリングを使用してテキストをオフスクリーンバッファに描画し、そのオフスクリーンバッファをテキストオブジェクトを描画するためのソースとして使用します。事実上、これは、テキストを作成または変更するたびに、PixiJS がそのテキストの新しいラスタライズされたイメージを作成し、それをスプライトのように扱うことを意味します。このアプローチにより、レンダリング速度を高く保ちながら、非常にリッチなテキスト表示が可能になります。

したがって、Text オブジェクトを操作する場合、位置、回転などの標準表示オブジェクトオプションの 2 つのオプションセットがあります。これらはテキストが内部的にラスタライズされた後に機能し、テキストスタイルのオプションはラスタライズ中に使用されます。テキストがレンダリングされると基本的にスプライトになるため、標準オプションを確認する必要はありません。代わりに、テキストのスタイル設定方法に焦点を当てましょう。

テキストのサンプルコードをご覧ください。

テキストスタイル​

利用可能なテキストスタイルオプションはたくさんありますが（TextStyleを参照）、それらは 5 つの主要なグループに分類されます

フォント: 使用するウェブフォントを選択するための fontFamily、描画するテキストのサイズを指定するための fontSize、フォントの太さ、スタイル、バリアントのオプション。

外観: fill で色を設定したり、グラデーション塗りつぶしのオプションを含め、stroke アウトラインを追加します。

ドロップシャドウ: dropShadow でドロップシャドウを設定し、オフセット、ぼかし、不透明度などを指定するための関連オプションが多数あります。

レイアウト: wordWrap および wordWrapWidth で有効にし、lineHeight および align または letterSpacing をカスタマイズします。

ユーティリティ: 必要に応じて、padding または trim の余分なスペースを追加して、奇妙なフォントファミリを処理します。

テキストスタイルの機能をインタラクティブにテストするには、このツールをご覧ください。

フォントの読み込みと使用​

PixiJS が Text オブジェクトを構築できるようにするには、使用したいフォントがブラウザによってロードされていることを確認する必要があります。これは、Assets を使用すると簡単に実現できます。

// load the fonts
await Assets.load('short-stack.woff2');

// now they can be used!

const text = new Text({
  text:'hello',
  style:{
    fontFamily:'short-stack'
  }
})

注意点と落とし穴​

PixiJS はテキストの操作を容易にしますが、注意すべき点がいくつかあります。

まず、既存のテキスト文字列を変更するには、そのテキストの内部レンダリングを再生成する必要があります。これは、各フレームで多数のテキストオブジェクトを変更する場合、パフォーマンスに影響を与える可能性のある遅い操作です。プロジェクトで画面上に頻繁に変更されるテキストが多数必要な場合は、テキストが変更されたときに再生成する必要がない固定ビットマップフォントを使用する BitmapText オブジェクト（下記で説明）の使用を検討してください。

次に、テキストを拡大縮小する場合は注意が必要です。テキストオブジェクトのスケールを > 1.0 に設定すると、テキストはシャープに見えるのに必要な高解像度で再レンダリングされないため、ぼやけたりピクセル化されたりして表示されます。テキストは生成されたときと同じ解像度です。これを解決するには、代わりに、より高い初期サイズでレンダリングして縮小することができます。これにより、より多くのメモリが使用されますが、テキストを常にクリアで鮮明に見せることができます。

BitmapText​

プロジェクトにテキストを追加する標準の Text アプローチに加えて、PixiJS はビットマップフォントもサポートしています。ビットマップフォントは、使用したいすべての文字の事前レンダリングされたバージョンを含む単一の画像で構成されているという点で、TrueType またはその他の汎用フォントとは大きく異なります。ビットマップフォントでテキストを描画する場合、PixiJS はフォントグリフを一時バッファにレンダリングする必要はありません。マスターフォントイメージから文字列の各文字をコピーしてスタンプするだけで済みます。

このアプローチの主な利点は速度です。テキストの頻繁な変更ははるかに安価であり、共有ソーステクスチャにより、追加のテキストのレンダリングははるかに高速になります。

ビットマップテキストのサンプルコードをご覧ください。

BitmapFont​

  • サードパーティソリューション
  • BitmapFont.from の自動生成

正しいアプローチの選択​

テキスト

  • 静的なテキスト
  • 少数のテキストオブジェクト
  • 高忠実度テキストレンダリング（カーニングなど）
  • テキストレイアウト（行間と文字間隔）

BitmapText

  • 動的なテキスト
  • 多数のテキストオブジェクト
  • 低メモリ

HTMLText

  • 静的なテキスト
  • HTML形式が必要