add-effects について
PlayCanvas Engine のコンポーネントやマテリアルを使って視覚効果を追加する開発スキルです。効果の種類に応じた Engine の構成要素とサンプルを示し、実装と実行時の確認を案内します。
主な機能
- 01効果別に Engine 構成要素を選択
- 02パーティクルシステムとシェーダーを利用
- 03実行時メッシュとワイドラインを作成
- 04全画面効果とスプラット効果を追加
- 05エミッターとメッシュを再利用
- 06トリガーとエンティティ数を確認
活用シーン
- 01アプリへのパーティクル効果の追加
- 02表面シェーディングやジオメトリのカスタマイズ
- 03カメラの全画面効果の実装
- 04効果の連続トリガーの検証
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ playcanvas/ skills --skill add-effectsインストール後、Claude Code で/add-effectsを入力して読み込まれたか確認します。
詳細
エフェクト
まず Engine の構成要素を選び、find-examples で最も近い公式サンプルを応用します。
- パーティクルシステム:
particlesystemコンポーネント(graphics/particles-*のサンプル)。 - 既存の表面へのカスタムシェーディング:
StandardMaterialのチャンクオーバーライド(override-shader-chunks)、または独自のシェーダーペアが必要なエフェクトにはShaderMaterial。 - プロシージャルジオメトリや毎フレーム更新するジオメトリ:
renderコンポーネント上のランタイム更新されるMesh(graphics/mesh-*のサンプル)、または幅のある線にはWideLineRenderer。 - 全画面エフェクト:
CameraFrame(light-scene)。 - Gaussian スプラットエフェクト:付属の gsplat スクリプト(
reuse-scripts)。
Engine の注意点
CurveSetはチャンネルごとにキー配列を1つ受け取ります。フラット化した配列は型チェックを通過しますが、テクスチャのアップロード時に失敗します。- エミッターとメッシュはロード時に作成して再利用します。エミッターを実行するには、
reset()の後にplay()を呼び出します。単発のエフェクトにはloop: falseを使用します。 - シェーダーの初回使用時には1フレーム停止します。ローディング画面の背後で各エフェクトを1回ずつレンダリングします。
- 値のアニメーションには
setParameterを使用し、毎フレームmaterial.update()を呼び出すのは避けます。 - カスタムメッシュ上のライティング対応マテリアルには法線が必要です。法線がない場合は、ライティング非対応マテリアルを使用します。
各エフェクトをアプリの実際の入力で実行し、繰り返し実行してもエンティティ数が一定に保たれることを確認します。
コメント
Markdown 対応