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

テキストからスプラットへ

GsplatTextスクリプトは、非透明ピクセルごとに1つのスプラットとしてテキストをGaussian splatsでレンダリングします。これにより、スプラットベースのシーンにシームレスに統合されるテキストラベルが作成されます。

ベータ機能

GsplatTextは現在ベータ版です。問題が発生した場合は、PlayCanvas Engine GitHubリポジトリで報告してください。

注記

この機能は統合レンダリングモードが必要です。

概要​

GsplatTextは以下を行うScriptコンポーネントです：

  • 標準CSSフォントを使用してキャンバスにテキストをレンダリング
  • 可視ピクセルごとに1つのスプラットを作成
  • XZ平面（Y=0）にテキストを表示
  • フィルカラー、ストローク、カスタムフォントをサポート

エンティティのトランスフォームを使用して、シーン内でテキストをスケールおよび配置します。

基本的な使い方​

// スクリプトをインポート
const { GsplatText } = await import('path/to/gsplat-text.mjs');

// エンティティにスクリプトコンポーネントを追加
entity.addComponent('script');
const textSplat = entity.script.create(GsplatText);

// テキストを設定
textSplat.text = 'Hello World';
textSplat.fontSize = 64;
textSplat.fillStyle = '#ffffff';

// エンティティのトランスフォームを使用して配置とスケール
entity.setLocalPosition(0, 0, 0);
entity.setLocalScale(0.15, 0.15, 0.15);

属性​

属性型デフォルト説明
textstring''レンダリングするテキスト文字列
fontSizenumber64ピクセル単位のフォントサイズ
fontFamilystring'sans-serif'CSSフォントファミリー
fillStylestring'#ffffff'テキストのフィルカラー（CSSカラー文字列）
strokeStylestring'rgba(0,0,0,0)'ストロークカラー（CSSカラー文字列）
strokeWidthnumber0ピクセル単位のストローク幅
paddingnumber0ピクセル単位のテキスト周りのパディング

スタイリングの例​

基本的な白いテキスト​

textSplat.text = 'Score: 100';
textSplat.fontSize = 48;
textSplat.fillStyle = '#ffffff';

アウトライン付きテキスト​

textSplat.text = 'GAME OVER';
textSplat.fontSize = 72;
textSplat.fillStyle = '#ff0000';
textSplat.strokeStyle = '#000000';
textSplat.strokeWidth = 3;

カスタムフォント​

textSplat.text = 'Fancy Text';
textSplat.fontFamily = 'Georgia, serif';
textSplat.fontSize = 56;

自動更新​

スクリプトは任意の属性が変更されると自動的にリビルドします。プロパティを変更するだけで、スプラットは次のフレームで更新されます。

// 実行時にテキストを更新
textSplat.text = 'New Score: 200';

座標系​

GsplatImageと同様に、テキストはXZ平面にレンダリングされます：

  • X軸：左から右
  • Z軸：上から下（+Yから見た時にテキストが正しく読める）
  • Y軸：常に0

テキストは1x1ユニットの領域に収まるようにサイズ調整され、エンティティのトランスフォームでスケールされます。

パフォーマンスの考慮事項​

スプラット数は以下に依存します：

  • フォントサイズ（大きい = より多くのピクセル）
  • テキストの長さ
  • ストローク幅（より多くのピクセルを追加）

多くの文字を持つラベルや大きなフォントサイズの場合、スプラット数は大きくなる可能性があります。

ライブサンプル​

CADスタイルの可視化で寸法ラベルにGsplatTextを使用する方法を示すProcedural Shapesサンプルを参照してください。

スクリプトの場所​

スクリプトはPlayCanvas Engineリポジトリで利用可能です：

scripts/esm/gsplat/gsplat-text.mjs

関連項目​