01 / 概要
概要
このチュートリアルでは、Claude Opus 5.5、Godot、Tripo CLI を組み合わせて、プレイ可能な GTA 風の街のプロトタイプを作る実践的なワークフローを紹介します。このワークフローでは、ゲームプレイのプロトタイピングと 3D アセットの制作を分けます。Claude が Godot プロジェクトを構築・テストし、Tripo がキャラクター、車両、環境アセットを作成して、あとからシーンに取り込みます。
この分担によって、反復をより速く、より確実に進められます。まずプリミティブなジオメトリで街のレイアウトと主要なインタラクションを検証し、その後プロジェクト全体を作り直すことなく、プレースホルダーを 1 つずつ本番品質の GLB アセットに置き換えられます。
02 / 概要
このワークフローで作れるもの
このチュートリアルを終えると、次の要素を備えた GTA 風の海辺の街のプロトタイプを実行できる Godot 4 プロジェクトが完成します。
- 道路、トンネル、高架構造物、ウォーターフロントを備えた街路。車両は双方向に周回して走り、プレイヤーは
Fを押して車両に乗り込み、運転できます。 - Tripo で参照画像から生成し、リギングして 7 つのアニメーションを付けた操作可能なキャラクター。
Vで切り替える三人称・一人称カメラと、Tで切り替える昼夜の環境。- 円形のミニマップと、時刻、体力とアーマー、所持金、手配度を表示する HUD。
03 / 概要
なぜ Tripo と Claude Opus 5.5 を併用するのか
2 つのツールは互いに補い合う役割を担います。Claude Opus 5.5 は Godot MCP 経由で Godot に接続し、シーンと GDScript を作成し、プロジェクトを実行して結果を確認します。ゲームの構想を動くプロトタイプにするのが Claude の役割です。Tripo はアセット制作を担当します。キャラクター、車両、小物はすべて Tripo CLI で GLB ファイルとして生成でき、キャラクターは同じワークフローの中でリギングとアニメーションまで行えます。
まずプリミティブなジオメトリから始めて、街のレイアウトとゲームプレイを早い段階でテストします。プロトタイプが動いたら、同じリソースパスのままプレースホルダーを Tripo アセットに置き換えます。あるアセットの生成タスクが失敗しても、シーンのほかの部分に影響を与えずにそのアセットだけを再試行できます。
04 / 概要
始める前に
- 生成ツールをインストールする：
npm install -g tripo-cliで Tripo CLI をインストールします。このチュートリアルでは CLI で一括生成を行います。 - Tripo の認証を行う：
tripo loginを実行し、ブラウザで認可を完了します。tripo whoamiとtripo balanceでアカウントと利用可能なクレジットを確認します。API キーをチャットやプロジェクトファイルに貼り付けないでください。 - Godot プロジェクトを準備する：Godot 4 をインストールし、キャラクターの参照画像を用意して、Claude がプロジェクトディレクトリにアクセスできることを確認します。
- Godot MCP を接続する：Godot MCP を使うと、Claude が Godot エディターに接続してノードの作成、シーンの編集、プロジェクトの実行を行えます。Node.js 18 以降をインストールしたら、Claude Code で
claude mcp add godot -- npx @coding-solo/godot-mcpを実行します。ほかの MCP クライアントでは、npx @coding-solo/godot-mcpをその設定に追加します。Claude にシーンの変更を頼む前に、MCP が Godot に接続されていることを確認してください。
05 / 概要
ステップ 1：Claude でゲームを試作する
まず Claude Opus 5.5 に、Godot のノード、プリミティブなジオメトリ、マテリアル、ライト、カメラ、スクリプトだけを使って、実行可能な GTA 風の海辺の街のプロトタイプを作るよう依頼します。この段階で重視するのは、街のブロックアウト、道路、建物、トンネル、高架道路、ウォーターフロント、仮の車両、昼夜の切り替え、一人称・三人称のカメラ操作です。目的は、最終的な 3D アセットを導入する前に構図とインタラクションを検証することです。
Inspect the current Godot project and build a runnable GTA-style coastal city prototype. Use only native Godot nodes and primitive geometry such as BoxMesh, PlaneMesh, and CylinderMesh, together with road meshes, collision bodies, materials, lights, cameras, and GDScript. Create walkable roads, buildings, elevated roads, tunnels, a waterfront and water surface, placeholder palm trees and street lamps, and simple placeholder vehicles. First complete an explorable city blockout with basic collision, a day/night toggle, and first-person/third-person camera switching. Run the project and verify that the overall scene and interactions match the reference image. Create all nodes, scripts, and scenes inside the Godot project. Save the scene as res://scenes/neon_coast.tscn and keep the structure ready for Tripo-generated GLB assets to replace nodes or resources at matching names and paths. Do not rebuild unrelated systems and do not generate or import final 3D models at this stage.
先に進む前にシーンを実行します。プレイヤーが街の中を移動できること、コリジョンが正しく機能すること、カメラと昼夜の操作が動作することを確認してください。これで、アセットと環境を仕上げる工程の土台となる安定したゲームプレイが整います。
06 / 概要
ステップ 2：Tripo CLI で 3D アセットを生成して取り込む
Claude にキャラクターの参照画像とアセットのチェックリストを渡し、Tripo CLI のタスクを一括で送信し、完了を待って、すべての結果を確認するよう指示します。キャラクターには画像からの 3D 生成を使い、その後マテリアル、リグ、アニメーションを処理します。車両と小物は個別のアセットとして生成します。街のスクリーンショット 1 枚から街全体を作ろうとしないでください。独立したアセットのほうが、テスト、差し替え、再試行がしやすくなります。
- キャラクター：
hero_male。 - 車両：
car_sedan、car_sports、car_convertible。 - 小物：
hotel_facade、motel_sign、palm_tree、street_lamp。
Use Tripo CLI to prepare the assets for this Godot project. Generate hero_male from the provided character reference image, then complete its materials, rig, and these seven animations: idle, walk, run, sprint, jump_start, jump, and jump_land. Generate car_sedan, car_sports, car_convertible, hotel_facade, motel_sign, palm_tree, and street_lamp as separate assets. Save the task status, final model, and failure information for every item. Confirm that each final GLB exists, then organize the assets under matching directories in res://assets/tripo/. If a task fails, retry only that task instead of repeating the entire batch.
キャラクターモデルとそのアニメーションは Tripo で生成し、hero_male ディレクトリにまとめて保存してください。
検収チェック：各項目の CLI ステータスと最終 GLB を確認します。Godot でキャラクター、セダン、ヤシの木をプレビューし、テクスチャ、スケール、向きを確認したうえで、hero_male の 7 つのアニメーションをすべて 1 つずつ再生します。
07 / 概要
ステップ 3：街、交通、昼夜の効果を仕上げる
この工程ではキャラクターを接続しません。CityStreetStylizedPack の環境をベースに、ビーチと水面を仕上げ、palm_tree、street_lamp、hotel_facade、motel_sign を配置し、HOTEL DIXON、OCEAN DRIVE、JUICE CAFE、Vice Beach、BAR、BURGER などの看板を追加します。
car_sedan、car_sports、car_convertible を追加します。スケール、向き、車線、コリジョン、ヘッドライト、双方向の周回交通をそろえます。ステップ 1 の昼夜システムの上に 2 つの環境を作り込み、切り替えキーは T のままにします。昼のバージョンでは道路と建物のディテールを残し、夜のバージョンではネオン、霧、ヘッドライト、路面の反射を強調します。
Complete the city in the neon_coast scene without connecting the character yet. Use CityStreetStylizedPack as the base environment. Add the waterfront and water surface, place palm_tree, street_lamp, hotel_facade, and motel_sign, and add signs for HOTEL DIXON, OCEAN DRIVE, JUICE CAFE, Vice Beach, BAR, and BURGER. Use car_sedan, car_sports, and car_convertible to create two-way looping traffic. Correct the vehicle scale, orientation, lane placement, collision, and headlights. Refine the existing T-controlled day/night environments: preserve road and building detail during the day, and emphasize neon, fog, headlights, and road reflections at night. Run the scene and check each part before connecting the character.
08 / 概要
ステップ 4：キャラクター、カメラ、HUD を追加
街と交通の工程の検収が通ってから、hero_male をカプセル形のコリジョンボディを持つ CharacterBody3D としてシーンに追加します。ステップ 2 で生成した idle、walk、run、sprint、jump_start、jump、jump_land の各アニメーションを接続し、足と地面の接地を調整します。
ステップ 1 のカメラを、キャラクターに追従するカメラに変更します。三人称視点には SpringArm3D を使い、プレイヤーが V で一人称と三人称を切り替えられるようにします。キャラクターが車両に近づいたら、F を押すと乗り込んで運転できるようにします。最後に、円形のミニマップと、時刻、体力とアーマー、所持金、手配度を表示する HUD を追加し、昼と夜の両モードで読みやすさを確認します。
The city, roads, vehicles, and day/night environments are complete. Now connect res://assets/tripo/hero_male to the project. Add the character as a CharacterBody3D, calibrate the feet and capsule collision body, and connect the idle, walk, run, sprint, jump_start, jump, and jump_land animations. Use a third-person SpringArm3D that follows the character, and let V switch between first-person and third-person views. When the character is near a vehicle, pressing F should enter vehicle-driving mode. Add a circular minimap, a time display, health and armor bars, money, and a wanted-level HUD. Preserve the completed city, traffic, and day/night logic; do not rebuild the scene.
09 / 概要
ステップ 5：昼夜の最終検収を行う
res://scenes/neon_coast.tscn を実行し、キャラクターの移動とジャンプ、カメラの切り替え、車両の交通、F での乗車、コリジョン、昼夜の効果をテストします。最終的な昼と夜のビューを比較し、キャラクター、街路、HUD、ライティング、反射を一つの体験として確認します。
10 / 概要
最終チェックリスト
- プロジェクトが
res://scenes/neon_coast.tscnから開けて実行できる。 - キャラクターが移動・ジャンプでき、7 つのアニメーションすべてが切り替わる。
Vでカメラの視点が、Tで環境が切り替わる。- 車両が双方向に周回し、
Fで乗り込める。 - 取り込んだ GLB のコリジョン、スケール、向き、ライティング、マテリアルが正しい。
- ミニマップと HUD が昼夜どちらのシーンでも読みやすい。
このワークフローなら、Claude がプロジェクト構成とゲームプレイの反復を担い、Tripo が 3D コンテンツを提供できます。その結果、確認やテストがしやすく、車両、ミッション、キャラクター、街区を追加して拡張しやすいモジュール式のプロトタイプが得られます。