ZEPETOキャラクターに車両を適用する

zepetoキャラクターにオブジェクトを取り付けるガイドを適用することで、キャラクターが車や飛行機、ペットなどに乗っているかのように、乗り物を実装できます。 📘 以下のガイドを参照してください \[ zepetoキャラクターにオブジェクトを取り付ける docid 3bs1kblctl2wpppah2 ws ] アニメーターの設定 1\) プロジェクト > 作成 > アニメーターコントローラーに移動してアニメーターコントローラーを作成し、名前をvehiclezepetoanimatorに変更します。 2\) アニメータータブで、create state > emptyを選択して空の状態を作成します。 3\) インスペクターで適切に名前を変更し、モーションにアニメーションクリップを割り当てます。 希望するアニメーションクリップファイルを使用するには、カスタムアニメーションガイドを参照してください。 📘 次のガイドを参照してください \[ カスタムアニメーションを適用する方法 docid\ htbui3cjugc8jeiah7uvx ] 4\) vehiclezepetoanimatorをzepetoplayersにドラッグ＆ドロップして設定します。 👍 ヒント カメラの高さが車両のサイズに応じて変更する必要がある場合、zepetoplayersでcamera lookoffsetの値をプリセットできます。 サンプルコード 1\) プロジェクト > 作成 > zepeto > typescript に移動して typescript を作成し、ridevehicle に名前を変更します。 2\) 以下のようにサンプルスクリプトを書きます。 この例の vehicle transform 値は、実際に適用する際に vehicle prefab に合わせて調整する必要があります。 import { zepetoscriptbehaviour } from 'zepeto script'; import { zepetocharacter, zepetoplayers } from 'zepeto character controller'; import { transform, animator, gameobject, humanbodybones, object, vector3, quaternion } from 'unityengine'; export default class ridevehicle extends zepetoscriptbehaviour { public vehicleprefab gameobject; public bodybone humanbodybones; private localcharacter zepetocharacter; private vehicle gameobject; start() { zepetoplayers instance onaddedlocalplayer addlistener(() => { // find the local player and set it to localcharacter this localcharacter = zepetoplayers instance localplayer zepetoplayer character; // get the localcharacter's animator component const animator animator = this localcharacter zepetoanimator; // get the position of the bone to attach the object to const bone transform = animator getbonetransform(this bodybone); // create the vehicle prefab this vehicle = object instantiate(this vehicleprefab, bone) as gameobject; // set vehicle transform this vehicle transform localposition = new vector3(0 5, 0,0); this vehicle transform localrotation = quaternion euler(0, 0,90); }); } } 3\) スクリプトの作成が完了したら、スクリプトをシーン内のgameobjectに追加します。 4\) インスペクターで、車両のプレハブリソースと取り付けるボディボーンを割り当てます。 5\) プレイボタンをクリックすると、zepetoキャラクターが車両に乗っているのが見えます。 👍 ヒント 車両のプレハブとキャラクターのアニメーションクリップを変更するだけで、さまざまな車両を作成できます。 アイテムを消費したときのサイズ変更の例 ここに楽しいアプリケーションの例があります：キャラクターが車両に乗っているときにアイテムを消費するとサイズが変わるコンテンツを実装します。 1\) この例では、2種類のプレハブを用意し、消費時にサイズが増加するアイテムのタグを「increase」、サイズが減少するアイテムのタグを「decrease」と設定しました。 2\) 各アイテムにコライダーを追加し、istriggerをチェックしてください。 3\) プロジェクト > 作成 > zepeto > typescript に移動して typescript を作成し、changeobjectsize に名前を変更します。 4\) 以下のようにサンプルスクリプトを書きます。 import { collider, gameobject, vector3 } from 'unityengine'; import { zepetoscriptbehaviour } from 'zepeto script'; export default class changeobjectsize extends zepetoscriptbehaviour { public vehicle gameobject; start() { } ontriggerenter(collider collider) { if (collider tag === "increase") { this gameobject transform localscale += new vector3(0 1, 0 1, 0 1); gameobject destroy(collider gameobject); } if (collider tag === "decrease") { const decreaseamount = new vector3(0 1, 0 1, 0 1); const newscale = this gameobject transform localscale decreaseamount; gameobject destroy(collider gameobject); // 例外処理 スケールが (1, 1, 1) より小さくならないようにします if (newscale x >= 1 && newscale y >= 1 && newscale z >= 1) { this gameobject transform localscale = newscale; } } } } コードの重要な部分は、各アイテムに触れたときにzepetoキャラクターのサイズを変更するためにlocalscaleを修正することです。 サイズ変更のための数値を自由に調整してください。 ただし、スケールが(1,1,1)より小さくならないように例外を処理することを確認してください。 5\) このスクリプトは、ランタイムで作成されたzepetoキャラクターに追加する必要があります。 したがって、次のように車両を取り付けるridevehicleスクリプトを修正してください。 import { zepetoscriptbehaviour } from 'zepeto script'; import { zepetocharacter, zepetoplayers } from 'zepeto character controller'; import { transform, animator, gameobject, humanbodybones, object, vector3, quaternion } from 'unityengine'; import changeobjectsize from ' /changeobjectsize'; export default class ridevehicle extends zepetoscriptbehaviour { public vehicleprefab gameobject; public bodybone humanbodybones; private localcharacter zepetocharacter; private vehicle gameobject; start() { zepetoplayers instance onaddedlocalplayer addlistener(() => { // ローカルプレイヤーを見つけて、 localcharacterに設定します。 this localcharacter = zepetoplayers instance localplayer zepetoplayer character; // localcharacterのアニメーターコンポーネントを取得します。 const animator animator = this localcharacter zepetoanimator; // オブジェクトを取り付けるためのボーンの位置を取得します。 const bone transform = animator getbonetransform(this bodybone); // vehicleプレハブを作成します。 this vehicle = object instantiate(this vehicleprefab, bone) as gameobject; // vehicle transformを設定します this vehicle transform localposition = new vector3(0 5, 0,0); this vehicle transform localrotation = quaternion euler(0, 0,90); // charactercontrollerにスクリプトを追加します const sizescript = this localcharacter gameobject addcomponent\<changeobjectsize>(); // スクリプトのインスペクタに車両を追加します sizescript vehicle = this vehicle; }); } } 実行時にchangeobjectsizeスクリプトを追加するコードが追加されました。 6\) 再生ボタンをクリックすると、アイテムを消費するたびにキャラクターのサイズが変わるのが見えます。 車両とのインタラクション インタラクションガイドを適用することで、車両とインタラクションした後に希望の場所で乗車することが可能です。 📘 以下のガイドを参照してください。 \[ オブジェクトとの相互作用 docid 3llqxagczebuwoxm9num4 ] 設定 1\) インタラクションガイドと同様に、dockpointオブジェクトとuiプレハブを車両プレハブに設定します。 2\) unityエディタで、上部のトランスフォームギズモトグルボタンがローカルに設定されていることを確認し、z軸（青い矢印）がオブジェクトの外側を指すように回転させます。 3\) コライダーコンポーネントを追加し、istriggerオプションをチェックします。 4\) プレイヤーがオブジェクトと対話できる範囲内にコライダーのサイズを調整します。 5\) 階層 > 空のオブジェクトを作成に進み、dockpointの子として空のオブジェクトを作成し、iconposに名前を変更します。 6\) preficoncanvasをオブジェクトインタラクションガイドと同様に設定し、それをプレハブにします。 7\) 追加ステップ 降車ボタンを作成する hierarchy > ui > buttonに移動して、車両オブジェクトの子としてボタンを作成し、それを「降車ボタン」と名前を変更します。 車両に乗車アニメーションを追加する キャラクターが車両に乗ったり降りたりする際には、自然なアニメーター設定が必要です。 以下のガイドは、乗車または降車に必要なアニメーター設定を手助けします。 カスタムアニメーションを適用するガイドを参照して、カスタムアニメーターに座っているアニメーション状態を追加します。 📘 以下のガイドを参照してください。 \[ カスタムアニメーションを適用する方法 docid\ htbui3cjugc8jeiah7uvx ] 1\) 追加したアニメーションステートを右クリックし、make transitionをクリックしてidleからsittingへの遷移を作成し、sittingからidleへの遷移も作成します。作成した遷移を選択し、has exit timeオプションのチェックを外します。 2\) カスタムアニメーター → パラメータ → \[ + ] で、bool条件を追加し、isridingに名前を変更します。 3\) sittingからidleステートへの遷移について、conditions → \[ + ]をクリックし、isriding条件を追加し、オプションをfalseに設定します。 4\) idleからsittingステートへの遷移について、conditions → \[ + ]をクリックし、isriding条件を追加し、オプションをtrueに設定します。 スクリプト interactionicon tsスクリプトを作成します。これは、車両プレハブのトリガーエリアに入るとインタラクションuiを表示するものです。 書かれたinteractionicon zepetoscriptをdockpointオブジェクトに追加し、インスペクタでpref icon canvasとicon positionを割り当てます。 uiと対話した後に車両に乗る方法についてのサンプルコードは、以下のridevehicleexampleを参照してください。 import { animator, gameobject, humanbodybones, physics, transform, vector3, waitforendofframe } from 'unityengine'; import { zepetoscriptbehaviour } from 'zepeto script'; import { zepetoplayers, zepetocharacter, characterstatemachine } from "zepeto character controller"; import { button } from 'unityengine ui'; import interactionicon from ' /interactionicon'; export default class ridevehicleexample extends zepetoscriptbehaviour { @serializefield() private bodybone humanbodybones; public isriding bool; public getoffbtn button; public vehicleobj gameobject; private interactionicon interactionicon; private localcharacter zepetocharacter; private playersittingposition vector3; private animator animator; private start() { zepetoplayers instance onaddedlocalplayer addlistener(() => { this localcharacter = zepetoplayers instance localplayer zepetoplayer character; this animator = this localcharacter zepetoanimator; }); this interactionicon = this transform getcomponent\<interactionicon>(); this interactionicon onclickevent addlistener(() => { // インタラクションアイコンがクリックされたとき、アイコンを隠してインタラクションを実行する this interactionicon hideicon(); this dointeraction(); }); // getoffbtn（車両から降りるボタン）のクリックイベントを設定します。 this getoffbtn onclick addlistener(() => { if(this isriding) { this stopinteraction(); this interactionicon showicon(); } }); this getoffbtn gameobject setactive(false); } //乗車ロジックを実行するメソッド private dointeraction() { // animatorの遷移値を設定して、現在のアニメーション状態を座っている状態に切り替えます。 this animator setbool("isriding", true); this startcoroutine(this snapbone()); // 現在のアニメーションを修正するために、animatorを無効にします。 this localcharacter statemachine constraintstateanimation = true; // 車両オブジェクトの親をローカルキャラクターに設定します。 this vehicleobj transform parent = this localcharacter transform; // getoffbuttonをアクティブにします。 this getoffbtn gameobject setactive(true); this isriding = true; } private stopinteraction() { // animatorの遷移値を設定して、アニメーション状態をアイドルに切り替えます。 this animator setbool("isriding", false); // animatorを再度アクティブにします。 this localcharacter statemachine constraintstateanimation = false; this isriding = false; // vehicle objectの親をnullに設定します。 this vehicleobj transform parent = null; // getoffbuttonを無効にします。 this getoffbtn gameobject setactive(false); } // 車両にボーンをスナップするためのコルーチン private snapbone() { const animator animator = this localcharacter zepetoanimator; const bone transform = animator getbonetransform(this bodybone); let idx = 0; while (true) { // ボーンとキャラクターの位置の距離を計算します。 const distance = vector3 op subtraction(bone position, this localcharacter transform position); const newpos vector3 = vector3 op subtraction(this transform position, distance); // プレイヤーの座っている位置を更新し、キャラクターの位置と回転を設定します。 this playersittingposition = newpos; this localcharacter transform position = this playersittingposition; this localcharacter transform rotation = this transform rotation; yield new waitforendofframe(); idx++; // アニメーションの5フレーム中に位置を調整します。 if (idx > 5) { return; } } } } スクリプトの流れは次のとおりです： 開始() アイコンがクリックされると、this interactioniconが無効化され、dointeraction()関数が呼び出されます。 dointeraction() アニメーターの遷移値を設定して、座っているアニメーションを再生します。 snap bone()コルーチンを開始して、zepetoキャラクターのbodyboneをtargettransformに接続します。 この関数を使用して、this localcharacter statemachine constraintstateanimation = true; 現在のアニメーターの遷移を無効にし、現在再生中のアニメーションをロックします。 車両オブジェクトの親がzepetoキャラクターに変更されます。 右上のget offボタンが有効化されます。 stopinteraction() アニメーターの遷移値を設定して、idleアニメーションを再生します。 状況に応じて適切なアニメーションが再生されるように、アニメーターの遷移を再有効化します。 車両オブジェクトの親をnullに設定します。 get offボタンを無効化します。 this getoffbtn onclick stopinteraction()関数が呼び出されます。 this interactioniconが有効化されます。 書かれた ridevehicleexample zepetoscript を dockpoint に追加し、インスペクタで get off ボタンと車両プレハブを割り当てます。 \[▶︎(再生)] 車両に乗るために再生ボタンを押してください。 結果画面 👍 ヒント 上記のサンプルは、マルチプレイヤー同期の対象とならないコンテンツの例です。 マルチプレイヤー同期を実装するには、各プレイヤーがどの車両に乗っているか、車両のサイズと位置などの情報を同期する必要があります。