mcpField
A
add-effects

add-effects

github.com/playcanvasクリエイティブ・メディア31309 回インストール1 週間前に更新
リポジトリ

add-effects について

PlayCanvas Engine のコンポーネントやマテリアルを使って視覚効果を追加する開発スキルです。効果の種類に応じた Engine の構成要素とサンプルを示し、実装と実行時の確認を案内します。

主な機能

  1. 01効果別に Engine 構成要素を選択
  2. 02パーティクルシステムとシェーダーを利用
  3. 03実行時メッシュとワイドラインを作成
  4. 04全画面効果とスプラット効果を追加
  5. 05エミッターとメッシュを再利用
  6. 06トリガーとエンティティ数を確認

活用シーン

  1. 01アプリへのパーティクル効果の追加
  2. 02表面シェーディングやジオメトリのカスタマイズ
  3. 03カメラの全画面効果の実装
  4. 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() を呼び出すのは避けます。
  • カスタムメッシュ上のライティング対応マテリアルには法線が必要です。法線がない場合は、ライティング非対応マテリアルを使用します。

各エフェクトをアプリの実際の入力で実行し、繰り返し実行してもエンティティ数が一定に保たれることを確認します。

コメント