Game Hub 0 コーディングチュートリアル - 日本語

各セクションの全体的な流れ(プロンプト生成コードとして利用可能):

1. プレイヤーの移動ロジックとUI生成部分

  1. GameLogic コンポーネントはゲームのコアロジック管理コンポーネントとして機能し、すべてのイベントは GameLogic に渡され、そこから対応するコンポーネントにディスパッチされることで、コードの結合度を低減します。
  2. プレイヤーがBoxColliderを持つ「召喚器」に近づくと、その Transponder コンポーネントが GameLogic コンポーネントにプレイヤーが近づいたイベントを渡し、UIFactory コンポーネントがプロンプトを入力するためのUIパネルをインスタンス化します。
  3. UIパネルにはInputDialogコンポーネントがアタッチされ、プレイヤーのキーボード入力をリッスンします。プレイヤーがEnterキーを押すと、入力ボックスがアクティブになり、キーボード入力を受け付けます。プレイヤーが入力完了後、再度Enterキーを押すと、プレイヤーの入力データがイベントとして GameLogic に渡されます。
  4. プレイヤーが「召喚器」から離れると、UIパネルが破棄されます。

2. モデル生成とボーンマッピング部分(TripoSDKが提供)

  1. GameLogicがプレイヤーのプロンプトを受け取ると、そのプロンプトを TripoClient コンポーネント(TripoAPIKeyの入力が必要)に渡します。
  2. TripoClientは TripoAPI コンポーネントを呼び出し、プロンプトをTripoサーバーに渡します。この時 TripoAPI はリクエストの組み立て、リクエストの送信、サーバー応答のポーリングを完了します。応答が成功すると、サーバーはモデルのTaskIDを返します。モデルの生成が完了すると、TripoAPI はモデルのTaskIDを再度Tripoサーバーに渡してボーンを生成します。
  3. ボーンのバインドが完了すると、TripoAPI はモデルのURLを TripoClient コンポーネントに渡し、TripoClient はGLTFfastプラグインを介してこのGLB形式のモデルをロードおよび解析します。
  4. その後、モデルに RuntimeHumanoidAvatarBuilder コンポーネントをアタッチします。このコンポーネントはGLB形式のモデルボーンをUnityAvatarシステムにマッピングし、アニメーションリターゲットを実現します。
  5. 最終的に、TripoClient はモデルをシーンにインスタンス化します。この時点で、開発者は既存のヒューマノイドアニメーションリソースを使用してモデルを駆動できます。

3. 制御権切り替え部分

GameLogicはプレイヤーのキーボード入力をリッスンし、モデルとプレイヤーのカメラ優先度、およびThirdPersonControllerの応答ターゲットを切り替えます。プレイヤーがFキーを押すと、モデルを操作できます。Fを再度押すと、プレイヤーはモデルから離れます。ゲームとしては、モデルを非常に大きくしたり小さくしたりして、プレイヤーがさまざまな障害物を通過できるようにしたり、外観を置き換えたりして、低コストで似たようなキャラクターカスタマイズやスキンのシステムを実現することもできます。

全体的なコードロジック:
主要なGameObject

具体的な実装手順:

  • バージョン:Unity 2022.3.55

  • ソースコードとシーンは、ソースファイルの Assets-LowPoly Environment Pack-Demo-Demo1 にあります。

プロジェクトのセットアップとアセットのインポート:

1. 新しいプロジェクトの作成
Unity を開き、「New Project」(新規プロジェクト)をクリックします。
URPパイプライン(Universal Render Pipeline)を選択し、TripoRuntimeTutorial と命名して「Create」(作成)をクリックします。
2. アセットパッケージのインポート
ブラウザを開き、「Unity Asset Store」を検索します。Unity Asset Store で以下のリソースを検索してダウンロードします(すべて無料)。提供されているプロジェクトでも対応するファイルを見つけることができます。
Starter Assets - ThirdPerson Unity 公式提供。基本的な三人称キャラクター制御を提供します(初回インポート時に再起動を促された場合は、指示に従って再起動し、再度インポートしてください)。
Military FREE - Low Poly 3D Models Pack シーンの小道具リソースを提供します。
LowPoly Environment Pack 砂漠のシーンの基本を構築します。
「My Assets」に追加し、後続のポップアップウィンドウで「Open in Unity」をクリックしてダウンロードします。
ダウンロードが完了したら、Unity の上部メニュー「Assets」>「Import Package」>「Custom Package」をクリックし、上記の各アセットパッケージを順番にインポートし、すべて「Import」(インポート)をクリックします。
3. URPマテリアルへの変換
すべてのマテリアルファイルをフィルタリングするか、シーン内のピンク色の異常なモデルをすべて選択し、「Editor」-「Rendering」-「Materials」-「Convert to URP Materials」で、マテリアルをURPマテリアルに変換します。
4. 依存ライブラリ glTFast のダウンロード(GLBモデルの解析用)
方法1:Git経由でダウンロード(ローカルにgit環境が必要)
上部メニュー「Window」>「Package Manager」をクリックし、ポップアップウィンドウで「+」>「Add package from git URL」をクリックします。URL:https://github.com/atteneder/glTFast.git を入力し、「Add」(追加)をクリックして glTFast プラグインのインポートを待ちます。
方法2:Tripo公式サイトからUnityプラグインをダウンロードする。これにはglTFastプラグインが含まれています。
公式サイトの「recourse」でUnityプラグインを見つけ、ダウンロード後、パッケージ内のチュートリアルビデオに従ってUnityにインポートしてください。
5. 基本シーンを開く
Unity 左側のファイルリストで、パス Assets > LowPoly Environment Pack > Demo > Demo1 を見つけ、ダブルクリックしてそのシーンを開きます。Assets > ithappy フォルダーからいくつかのモデル(戦車、石など)をシーンにドラッグして、簡単な環境を配置します。

プレイヤー移動制御の実装:プレイヤーがシーン内を移動できるようにする

1. プレイヤー関連のプレハブを追加
Unity 左側のファイルリストで、パス Assets > StarterAsset > ThirdPersonController > Prefabs を見つけます。以下の3つのプレハブをシーンにドラッグします。
MainCamera(メインカメラ)
PlayerFollowCamera(プレイヤー追跡カメラ)
PlayerArmature(プレイヤーキャラクターモデル)
2. カメラパラメータの設定
シーン内の PlayerFollowCamera を選択し、右側のプロパティパネル(Inspector)で CinemachineVirtualCamera コンポーネントを見つけます。Follow と Look At フィールドの両方を PlayerArmature の下の PlayerCameraRoot(PlayerArmature の子オブジェクトで見つけることができます)に設定します。
これらはUnity公式が提供する三人称制御スクリプトです。この時点で、Unityツールバーの「Play」(再生)ボタンをクリックし、WASDキーを使用してキャラクターを移動させると、キャラクターとカメラは正常に追従移動するはずです。

プロンプトパネルの生成:プレイヤーが特定のオブジェクトに近づくと入力パネルを表示し、離れると非表示にする

1. トリガー領域の作成
Assets-ithappy-Military FREE-perfab からモデル(戦車など)を一つ選択し、そのモデルを右クリック > 「Create Empty Child」(空の子オブジェクトを作成)を選択し、「Trigger」と命名します。
Trigger を選択し、右側のプロパティパネルで「Add Component」>「Box Collider」をクリックしてコリジョンを追加します。
「Is Trigger」(トリガー)オプションをチェックし、「Edit Collider」をクリックして、シーン内でコリジョンのハンドルをドラッグし、モデルの2倍のサイズ(モデルの周囲を覆う)にします。
2. トリガーイベントスクリプトの作成
Unity 左側のファイルリストの Assets を右クリック > Create > C# Script を選択し、「Transponder」と命名して、Cursor でスクリプトを開きます。プレイヤーがコリジョンに進入/退出した際に、そのメッセージを GameLogic コンポーネントに渡すことを目指します。Cursor でモデルを選択し、参考プロンプトを入力します。

プレイヤーがコリジョンに進入/退出した際にイベントをトリガーするUnity C#スクリプトを生成してください。

要件:コンポーネント名は Transponder とし、TagがPlayerのGameObjectがコリジョンに進入した際にOnPlayerEnterイベントをトリガーし、プレイヤーが退出した際にOnPlayerExitイベントをトリガーします。

スクリプトを保存した後、Transponder スクリプトを Trigger オブジェクトにドラッグします。
3. ゲームロジックマネージャーの作成
シーンで右クリック > Create Empty を選択し、「GameLogicManager」と命名して、ロジックコンポーネントのコンテナとします。
GameLogicManager の下に空の子オブジェクトを作成し、「GameManager」と命名します。
さらに2つ目のスクリプトを作成し、「GameManager」と命名して、ゲームの主要なロジックを処理します。
Transponder コンポーネントを参照し、プレイヤーの進入/退出イベントをリッスンします。参考プロンプトは以下の通りです。

コンポーネント名が GameManager の Unity C#スクリプトを生成してください。

要件:Transponder の OnPlayerEnter および OnPlayerExit イベントをリッスンし、OnPlayerEnter の際に UIFactory スクリプトを呼び出し、プロンプトUIプレハブをインスタンス化します。OnPlayerExit の際に、このUIプレハブを破棄します。

スクリプトを保存後、GameManager スクリプトを GameManager オブジェクトにドラッグし、Transponder コンポーネントを Transponder フィールドにドラッグします。これでプレイヤーの進入/退出イベントのリスニングが完了しました。
4. UIパネルプレハブの作成
Hierarchy パネル(シーンオブジェクトリスト)を右クリック > UI > Panel を選択し、UIパネルを作成します。
パネルの下に2つの子オブジェクト:Text(ヒントテキスト)と InputField(入力ボックス)を作成し、それらの位置とサイズを調整します(Game ウィンドウでプレビューできます)。
パネル全体を選択し、Unity 左側のファイルリストの Assets ディレクトリにドラッグして、プレハブを生成します(InputDialogPrefab と命名)。
注意:Unity TextMeshPro を使用する場合、中国語をサポートするフォントアセットを生成する必要があります。そうしないと、中国語フォントが四角で表示されます。提供されている NotoSansSC SDF アセットを直接使用し、Text コンポーネントでフォントを NotoSansSC SDF に変更することもできます。
5. InputDialog スクリプトの作成:UIパネルの初期化とプレイヤーのキーボード入力の監視
InputDialog スクリプトを作成し、Cursor で参考プロンプトを入力します。

Unity C#スクリプトを生成してください。コンポーネント名は InputDialog です。

要件:TMP_Text でプロンプトを表示し、TMP_InputField で入力を受け取る、TMP入力ボックス付きのダイアログシステムを作成します。

Enterキーで2つのモードを切り替えます。

最初のEnter:入力ボックスをアクティブにし、プレイヤーの移動コントローラ(ThirdPersonControllerなど)を無効にします。

2回目のEnter:入力内容を送信し、ダイアログボックスを破棄します。

入力が空の場合はフォーカスを維持します。

InputDialog コンポーネントを UI パネルプレハブにアタッチし、Text と InputField をパネルの依存関係にドラッグします。
6. UIFactory スクリプトの作成:UIパネルの生成
新しいC#スクリプトを作成し、「UIFactory」と命名します。UIプレハブを生成するインターフェースを提供し、コード間の結合を避けるための中間層として機能することを目的とします。参考プロンプトは以下の通りです。

UIFactory というC#スクリプトを作成し、UIダイアログのファクトリーパターン生成機能を実装してください。具体的な要件は以下の通りです。既存のUIプレハブがあり、関数がUIを生成する位置と回転を受け取り、指定された位置にUIをインスタンス化し、インスタンス化されたUIのInputDialogコンポーネントを返します。

7. コンポーネントの依存関係の関連付け
コンポーネントの依存関係が正しく関連付けられているか再度確認します。PlayerArmature の Inspector パネルの Tag が Player に設定されていることを確認します。
GameManager オブジェクトを選択し、右側のプロパティパネルで、Transponder フィールドにシーン内の Trigger オブジェクト上の Transponder コンポーネントをドラッグして割り当てます。
UIFactory フィールドに GameLogicManager オブジェクト上の UIFactory コンポーネントをドラッグして割り当てます。
ゲーム開始後、Trigger を設定したオブジェクトに近づくとUIパネルが表示され、離れるとUIパネルは自動的に破棄されます。注意:ソースファイルではパネルの生成位置が固定されているため、選択した Trigger の Transform プロパティに基づいてこの値を変更してください。または、UIプレハブの Canvas コンポーネントの RenderMode を ScreenSpace-Overlay に設定すると、UIはスクリーン空間のデータとして扱われ、ワールド空間には入りません。

プロンプトをTripo APIに送信

この段階では、まだプロンプトをTripoサーバーに送信することはできません。しかし、開発者が記述する必要のあるコードはほぼ完了しており、その後のネットワークリクエスト、モデル生成、ボーンバインド、マッピングと適応、アニメーションリターゲットは、すでにスクリプトが記述されており、将来的にTripo For Unityプラグインに統合される予定です。
必ず最初にシーンにUIEventを作成してください。そうしないと、UIは応答しません!

1. Tripoプラグインスクリプトのインポート
Unity 左側のファイルリストで、ダウンロードしたソースファイル内の TripoClient.cs、TripoAPI.cs、および RuntimeHumanoidAvatarBuilder.cs スクリプトを見つけ、Assets/Scripts フォルダーにドラッグします。
上記のコード TripoClient、TripoAPI はネットワークリクエストの送受信を処理し、RuntimeHumanoidAvatarBuilder はモデルのボーンをUnityのボーンシステムにマッピングします。TripoClient と TripoAPI は、Tripo For Unity プラグインの簡易版であり、ボーンバインド機能が補完されています。このバージョンも間もなく更新され、より便利なプロセスが提供される予定です。
2. Tripoクライアントオブジェクトの作成
GameLogicManager の下に空の子オブジェクトを作成し、「TripoClient」と命名します。
TripoClient.cs と TripoAPI.cs スクリプトをこのオブジェクトにドラッグします。
右側のプロパティパネルで、TripoClient コンポーネントの API Key フィールドを見つけ、Tripo API キーを入力します(事前にTripo公式サイトでアカウント登録が必要です。ユーザーは毎月600ポイントの無料クレジットを利用できます)。
3. プロンプト伝達ロジックの関連付け
プレイヤー入力イベントが追加されたため、GameManager に新しいリスニングロジックを追加する必要があります。この時点で GameManager のコードは OnPlayerEnter と OnPlayerExit イベントをすでにリッスンしているはずです。
提供されたコード例では、GameManager が UIFactory にインスタンス化呼び出しを発行する際に、コールバック関数がすでに定義されています。もちろん他の解決策もありますが、この例では、このロジックを補完するためのプロンプト例は以下の通りです。コンポーネント間に依存関係がある場合、以前に生成されたコードをAIにコンテキストとして提供することが最善です。
GameManager スクリプトに新しいロジックを追加します。OnPlayerEnter がトリガーされたときに、UIFactory を呼び出して以前の InputDialog プレハブをインスタンス化します。OnPlayerExit がトリガーされたときに、生成されたプレハブを破棄します。プレイヤーが入力確認後、プレイヤーのプロンプトを既存の TripoClient スクリプトに渡し、tripoClient.TextToModel(prompt, pos); の例で呼び出します。関連するスクリプトを修正します。
GameManager.cs スクリプトを開き、OnPromptConfirmed メソッド(入力確認を処理する関数)を見つけて、内部コードを補完します。注意:tripoClient フィールドが GameManager コンポーネントで TripoClient オブジェクトに割り当てられていることを確認してください。
4. モデルコンテナの作成
シーンに空の子オブジェクトを作成し、「ModelContainer」と命名して、生成されるモデルの親ノードとします。
この時点でゲームを実行し、パネルにプロンプトを入力すると、プロンプトがTripoサーバーに正常にアップロードされていることがわかります。Unity下部のDebugバーとTripoAPIの「入力/進捗」で、生成の進捗を確認できます。あなたのモデルを生成してみましょう!

アニメーションリターゲット

モデル生成後の次のステップは、既存のアニメーションリソースをモデルのボーンにマッピングすることです。RuntimeHumanoidAvatarBuilder スクリプトがプロジェクトにコピーされていることを確認してください。このスクリプトはヒューマノイドGLBボーンからUnityAvatarへのマッピングを完了し、TripoClient スクリプトはこれを生成されたモデルに自動的にアタッチします。
プロジェクトの構造と依存関係を整理しましょう。この時点で、環境オブジェクトを除いて、自分で作成したGameObjectはゲーム開始前の状態が以下のようになるはずです。各スクリプトを展開し、すべてに値が割り当てられているか確認してください。予期せぬ事態が発生した場合は、ソースファイルと照合して、コンポーネントの割り当てに誤りがないか確認してください。また、このケースではモデルが戦闘機甲であるため、その Scale プロパティはすべて10倍に拡大されており、Controller 関連のプロパティも同様です。

1. モデル制御コンポーネントの追加
ModelContainer オブジェクトを選択し、以下のコンポーネントを順番に追加します(すべて Starter Assets リソースパックから)。
Character Controller(キャラクターコントローラー)
Player Input(プレイヤー入力)
Third Person Controller(三人称コントローラー)
Third Person Controller コンポーネントで、Camera フィールドをシーン内の MainCamera に設定します。
2. モデルカメラの設定
空の子オブジェクトを作成し、「ModelCamera」と命名して、CinemachineFreeLook コンポーネントを追加します(Cinemachine プラグインのインポートが必要です。Starter Assets リソースパックにはすでに含まれています)。
ModelContainer の下に子オブジェクト CameraRoot を作成し、その Y 座標を 5(モデルの腰の高さ)に調整します。
ModelCamera の Follow と LookAt フィールドの両方を CameraRoot に設定します。これでカメラがモデルの動きに追従します。

運動能力の補足:

この時点で、生成されたモデルはアイドルアニメーションを再生しているはずですが、まだ制御することはできません。
上記のコンポーネント、CharacterController、PlayerInput、ThirdPersonController、BasicRigidBody、StarterAssetsInputs はすべて Unity StarterAssets で提供されており、プレイヤーの入力を処理するために使用されます。Animator コンポーネントはアニメーションの制御に使用され、RuntimeHumanoidAvatarBuilder コンポーネントによって生成された Avatar もその avatar フィールドに自動的に割り当てられます。
テストとして、PlayerArmature コンポーネントとそのカメラを無効にした後、Tripoで生成され、ボーンがバインドされたGLBモデルをModelContainerの子オブジェクトとしてドラッグし、RuntimeHumanoidAvatarBuilder コンポーネントを追加します。ゲーム実行中に生成されたモデルを制御できるようになります。最後のステップは、制御権切り替えのロジックを処理することです。
GameLogic の Update 関数で下の図のロジックを更新します。ここで isLoad はモデルが生成されたかどうかを示し、生成されていない場合は処理する必要はありません。isInModel はプレイヤーが現在モデルを制御しているか、それとも本体を制御しているかを示します。
プレイヤーが本体からモデルに入ると、プレイヤーとプレイヤーのカメラが無効になり、この時点で Cinemachine プラグインは自動的にカメラを新しく作成した ModelCamera に切り替えます。そして ModelContainer をリセットすることで、移動スクリプトがモデルに適用されるようにします。
プレイヤーがモデルから本体に戻る場合、モデルは元の位置に留まり、プレイヤー本体は現在の位置に表示されるようにします。同時に、カメラとコントローラーをプレイヤー本体に切り替えます。
上記のコードを補完した後、モデルが存在する状態で F キーを押すと、プレイヤーはモデルに入り、モデルを制御します。再度 F キーを押すと、プレイヤー本体はモデルの位置に表示され、モデルは元の位置に留まります。

これでデモの主要部分が完成しました。より洗練された表現を望む場合は、いくつかの詳細なロジックを追加できます。例えば、プレイヤーがモデルに近づいたときに「Fを押してモデルを制御」というUIパネルをポップアップ表示したり、複数のモデルを生成し、プレイヤーがいずれかを選択して制御できるようにしたりなどです。
これで、このステップまででデモのすべての内容が実装されたはずです。自分の好きなように、自由にヒューマノイドモデルを生成して操作できます。
TripoV3.0のメジャーアップデートでは、四足動物、鳥類など、まったく新しい生物のボーンバインディングを提供し、既存のバインディングアルゴリズムを最適化する予定です。
ご質問やご提案がありましたら、お気軽にお問い合わせください!

ヒント:

  1. 現在のデモの目的は、TripoAPIのリアルタイムゲームアプリケーションシナリオを示し、開発者が遭遇する可能性のある問題を事前に解決することです。ゲームの詳細なデザインは参考としてのみ提供されます。
  2. ボーンバインディングが必要なため、現在のデモはヒューマノイドモデルの生成のみをサポートしています。また、AI生成モデルのボーンウェイトは不安定なため、アニメーションに異常が発生した場合は、Avatar Maskを使用して異常な部分のアニメーションの一部をマスクすることができます。ソースファイルではすでに手の部分のアニメーションがマスクされており、NoArmPerson Controllerで変更できます。
  3. 高速生成を希望する場合は、TripoV2/TripoV1Turboモデルを使用できます。TripoAPIスクリプトで、model_version = "v2.5-20250123" フィールドのバージョン番号を v2.0-20240919/Turbo-v1.0-20250506 に置き換えるだけです。
  4. FBX形式のモデルとGLBモデルでは正方向が異なり、Unity実行中にインポートされる依存関係も異なります。FBXでのインポートが必須の場合は、TriLibなどのプラグインを使用してモデルをロードし、対応する適応ロジックを処理できます。

Advancing 3D generation to new heights

moving at the speed of creativity, achieving the depths of imagination.