create-playcanvasで始める
create-playcanvasは、コードベースのPlayCanvasプロジェクト向け公式スキャフォールディングツールです。PlayCanvas Engine、React、またはWeb Components用のViteとTypeScriptプロジェクトを、実行可能なスターターシーンとともに作成します。
プロジェクトを作成する
使用するパッケージマネージャーでcreatorを実行します。
# npm
npm create playcanvas@latest
# pnpm
pnpm create playcanvas@latest
# Yarn
yarn create playcanvas
# Bun
bun x create-playcanvas@latest
プロンプトに従ってプロジェクト名、オーサリング形式、スターターを選択します。npm、pnpm、Yarnを使用する場合、creatorにはNode.js 22.23.2以降が必要です。
ファイルが作成されたら、依存関係をインストールしてVite開発サーバーを起動します。
cd my-playcanvas-project
npm install
npm run dev
デプロイの準備ができたら、npm run buildを実行してプロダクションビルドを作成します。URLは相対パスなので、ドメインのルートだけでなく、サーバー上のどのフォルダーからでも動作します。
形式を選択する
すべての形式でTypeScriptを使用し、Vite、ESLint、Prettier、プロダクションビルドが含まれます。
| 形式 | 適している用途 |
|---|---|
| Engine | playcanvas APIを直接使用する場合。 |
| React | @playcanvas/reactを使用してReactアプリケーションを構築する場合。 |
| Web Components | @playcanvas/web-componentsの宣言的なカスタム要素を使用する場合。 |
スターターを選択する
creatorでは、すべての形式で同じ実行可能なスターターを利用できます。
| カテゴリ | スターター |
|---|---|
| 基本 | Spinning Cube、Interactive Sphere |
| ビューアー | Model Viewer、Splat Viewer、Product Configurator |
| ゲーム | Physics Playground、First-Person Controller、Third-Person Controller、Sprite Game、Snapchat Web Lens |
| ツール | Scene Editor |
| XR | VR Starter、AR Placement |
構築するアプリケーションに最も近いスターターを選び、まず変更せずに実行してから、アセットと動作を段階的に置き換えます。
Snapchat Web Lensスターターは、Snapchatに公開できるように設定された縦向きのゲームです。Snapchat Web Lensを構築するを参照してください。
Inspectorでデバッグする
開発サーバーは、実行中のアプリケーション用にInspectorを読み込みます。バッククォートキー（`）で表示と非表示を切り替え、F9で一時停止し、F10で1フレームずつ進めます。Inspectorはプロダクションビルドには含まれません。
プロンプトを省略する
プロジェクト名、形式、スターターを指定すると、対話なしでプロジェクトを作成できます。
npm create playcanvas@latest my-viewer -- -f react -s model-viewer
AIコーディングエージェントや自動ビルドがコマンドを実行する場合のように、プロンプトに答えるターミナルがないときは、--yesと同様に、指定しなかったオプションにはデフォルトを使用します。ただし、--overwriteを指定せずに空でないターゲットディレクトリを選んだ場合など、安全なデフォルトがない選択ではエラーで停止します。
| オプション | 短縮形 | 用途 |
|---|---|---|
--format <name> | -f | engine、react、web-componentsから選択します。 |
--starter <name> | -s | 上記のスターターから選択します。 |
--yes | -y | デフォルトのEngineとSpinning Cubeを使用します。 |
--no-skills | デフォルトで含まれるPlayCanvas Skillsを除外します。 | |
--overwrite | 空でないターゲットディレクトリのファイルを置き換えます。 | |
--help | -h | 現在のコマンドオプションを表示します。 |
--overwriteはターゲットディレクトリ内の既存ファイルを削除します。内容を置き換える意図がない限り、新しいディレクトリを使用してください。
含まれるPlayCanvas Skills
新しいプロジェクトには、.claude/skills/と.agents/skills/にPlayCanvas Skillsが含まれます。対応するAIコーディングエージェントは、アプリケーションのセットアップ、アセット、シーン、アニメーション、ライティング、エフェクト、レンダリングの検証、パフォーマンス、実行時の検査に関するPlayCanvas固有のワークフローを利用できます。
プロジェクトでAIコーディングエージェントを使用しない場合、または別の方法でSkillsを管理する場合にのみ、--no-skillsを指定してください。
次のステップ
- Engine APIを直接使用する場合は、Engineをスタンドアロンで使用するに進みます。
- Reactの場合は、シーンの構築に進みます。
- Web Componentsの場合は、シーンの構築に進みます。
- ゲームをSnapchatに公開する場合は、Snapchat Web Lensを構築するを参照してください。