--- title: การนำยานพาหนะมาใช้กับตัวละคร ZEPETO slug: world-sdk-guide-th/H6c1-zepeto docTags: createdAt: 2024-09-02T08:34:13.134Z --- โดยการใช้คู่มือในการติดวัตถุเข้ากับตัวละคร ZEPETO คุณสามารถทำให้ตัวละครขี่ยานพาหนะ เช่น รถยนต์ เครื่องบิน สัตว์เลี้ยง ฯลฯ ได้เหมือนกับว่าตัวละครกำลังขี่มันอยู่ :::hint{type="info"} **📘 **กรุณาอ้างอิงไปที่คู่มือต่อไปนี้ \[[การแนบวัตถุกับตัวละคร ZEPETO](docId\:hoJE6kdwJoddW48r0MQb0)] ::: ## การตั้งค่า Animator ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-NKEJxzlJFdOiobXRRrQQj-20240904-102415.png "เพื่อเปลี่ยนท่าทางของตัวละคร ZEPETO เมื่อขี่ยานพาหนะตามที่อธิบายข้างต้น คุณต้องปรับแต่ง Animator และตั้งค่าไว้ภายใต้ ZEPETOPlayers.") 1\) สร้าง Animator Controller โดยไปที่ Project > Create > Animator Controller และเปลี่ยนชื่อเป็น VehicleZepetoAnimator. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_NgMGB0NPsZIXIO0VgFgQ-20240904-102415.png) 2\) ในแท็บ Animator ให้สร้างสถานะว่างโดยเลือก Create State > Empty. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-9ePXPw9ZhCJMPE2vpXtxN-20240904-102415.png) 3\) เปลี่ยนชื่อให้เหมาะสมใน Inspector และกำหนดคลิปอนิเมชันให้กับ Motion. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-dxacA_alzjnTRS_FtP6mp-20240904-102415.png) - ในการใช้ไฟล์คลิปอนิเมชันที่คุณต้องการ โปรดดูคู่มืออนิเมชันแบบกำหนดเอง :::hint{type="info"} **📘 **โปรดดูคู่มือต่อไปนี้ \[[ใช้อนิเมชันแบบกำหนดเอง](docId\:JknF6QjPOD9QMWELYYZYk)] ::: 4\) ลากและวาง VehicleZepetoAnimator ลงบน ZEPETOPlayers เพื่อทำการตั้งค่า ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-My8G3RFas8Cqos_ZSfKGa-20240904-102415.png) :::hint{type="success"} **👍 เคล็ดลับ** - หากความสูงของกล้องต้องเปลี่ยนแปลงขึ้นอยู่กับขนาดของรถ คุณสามารถตั้งค่าค่าของ Camera LookOffset ใน ZEPETOPlayers ได้ ::: ## ตัวอย่างโค้ด 1\) สร้าง TypeScript โดยไปที่ Project > Create > ZEPETO > TypeScript และเปลี่ยนชื่อเป็น RideVehicle. 2\) เขียนสคริปต์ตัวอย่างตามที่แสดงด้านล่าง. - โปรดทราบว่าค่าการแปลงของยานพาหนะในตัวอย่างนี้ควรปรับให้ตรงกับ Vehicle Prefab เมื่อใช้งานจริง. ```typescript 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\) ใน Inspector ให้กำหนดทรัพยากร prefab ของรถและกระดูกตัวถังที่จะติดตั้ง 5\) คลิกปุ่มเล่น แล้วคุณจะเห็นตัวละคร ZEPETO ขี่อยู่บนรถ ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-MAj3hddGtaJOiCsr3KwEn-20240904-102416.gif) :::hint{type="success"} **👍 เคล็ดลับ** - คุณสามารถสร้างรถยนต์หลายประเภทได้โดยการเปลี่ยน Prefab ของรถและคลิปอนิเมชันของตัวละคร ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7gV7D0SF1m1ik5oLtPDIS-20240904-102415.png) ::: ## ตัวอย่างการเปลี่ยนขนาดเมื่อบริโภคไอเทม นี่คือตัวอย่างการใช้งานที่สนุก: การนำเสนอเนื้อหาที่ขนาดของตัวละครเปลี่ยนไปเมื่อบริโภคไอเทมขณะขี่รถ 1\) ในตัวอย่างนี้ เราเตรียม prefab สองประเภทและตั้งแท็กของไอเทมที่เพิ่มขนาดเมื่อบริโภคเป็น "เพิ่ม" และไอเทมที่ลดขนาดเป็น "ลด" 2\) เพิ่ม Collider ให้กับแต่ละไอเทมและตรวจสอบให้แน่ใจว่าได้เลือก IsTrigger ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-odhbiMJtZC7hUwf-9KJE7-20240904-102415.png) ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-2oltB2KVfX1-OCZ7j_CTA-20240904-102415.png) 3\) สร้าง TypeScript โดยไปที่ Project > Create > ZEPETO > TypeScript และเปลี่ยนชื่อเป็น ChangeObjectSize. 4\) เขียนสคริปต์ตัวอย่างตามที่แสดงด้านล่าง. ```typescript 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); // Exception Handling: Ensure that the scale does not become smaller than (1, 1, 1) if (newScale.x >= 1 && newScale.y >= 1 && newScale.z >= 1) { this.gameObject.transform.localScale = newScale; } } } } ``` - ส่วนสำคัญของโค้ดคือการปรับเปลี่ยน localScale เพื่อเปลี่ยนขนาดของตัวละคร ZEPETO เมื่อมันสัมผัสกับแต่ละรายการ. - ปรับเปลี่ยนตัวเลขสำหรับการเปลี่ยนขนาดได้ตามต้องการ - แต่ต้องแน่ใจว่าจัดการข้อยกเว้นเพื่อป้องกันไม่ให้ขนาดเล็กกว่าค่า (1,1,1). 5\) สคริปต์นี้ควรเพิ่มไปยังตัวละคร ZEPETO ที่สร้างขึ้นในระหว่างการทำงาน. ดังนั้นให้ปรับเปลี่ยนสคริปต์ RideVehicle ที่แนบยานพาหนะดังนี้. ```typescript 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; // รับส่วนประกอบ animator ของ _localCharacter. const animator: Animator = this._localCharacter.ZepetoAnimator; // รับตำแหน่งของกระดูกเพื่อแนบวัตถุ. const bone: Transform = animator.GetBoneTransform(this.bodyBone); // สร้าง prefab ยานพาหนะ. this._vehicle = Object.Instantiate(this.vehiclePrefab, bone) as GameObject; // ตั้งค่า 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(); // เพิ่มยานพาหนะไปยัง inspector ของสคริปต์ sizeScript.vehicle = this._vehicle; }); } } ``` - ได้เพิ่มโค้ดเพื่อเพิ่มสคริปต์ ChangeObjectSize ในระหว่างการทำงานแล้ว 6\) คลิกที่ปุ่มเล่น และคุณจะเห็นขนาดของตัวละครเปลี่ยนแปลงทุกครั้งที่มันบริโภคไอเท็ม ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N--lB-ZVtXJPDluuvzhI0Eo-20240904-102416.gif) ## การโต้ตอบกับยานพาหนะ โดยการใช้คู่มือการโต้ตอบ จะสามารถดำเนินการขึ้นรถที่ตำแหน่งที่ต้องการหลังจากโต้ตอบกับมันได้ :::hint{type="info"} **📘 **โปรดดูคู่มือต่อไปนี้.\[[การโต้ตอบกับวัตถุ](docId\:G2x_LV_1ySILjA9_YrlBI)] ::: ### การตั้งค่า 1\) ตั้งค่าวัตถุ DockPoint และ UI prefab บน prefab ของยานพาหนะของคุณในลักษณะเดียวกับคู่มือการโต้ตอบ. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-gDbiGYX_71u17t1MoEW2M-20240904-102415.png "Slime Prefab ที่ตั้งค่า Dock Point") 2\) ใน Unity editor ให้แน่ใจว่าปุ่มสลับ gizmo การแปลงที่ด้านบนตั้งค่าเป็น Local และหมุนมันเพื่อให้แกน Z (ลูกศรสีน้ำเงิน) ชี้ออกจากวัตถุ. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-0_85030ExbJJtqqPxSRZ0-20240904-102415.png "Slime Prefab ที่ตั้งค่า Collider") 3\) เพิ่มคอมโพเนนต์ Collider และตรวจสอบตัวเลือก isTrigger. 4\) ปรับขนาดของ Collider ให้เหมาะสมกับช่วงที่ผู้เล่นสามารถโต้ตอบกับวัตถุได้. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-9YZO_8JW0wsNEB8Jy8xeU-20240904-102415.png "การตั้งค่าปุ่ม UI ที่เสร็จสมบูรณ์") 5\) สร้างวัตถุเปล่าเป็นลูกของ DockPoint โดยไปที่ Hierarchy > สร้างวัตถุเปล่า และเปลี่ยนชื่อเป็น IconPos. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-T26BGfsHwhLQ5na3HZ-BL-20240904-102415.png) 6\) ตั้งค่า PrefIconCanvas ในลักษณะเดียวกับคู่มือการโต้ตอบของวัตถุ จากนั้นทำให้มันเป็น prefab. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-uGw8CP1lpRxY75O5NzEN6-20240904-102415.png) 7\) ขั้นตอนเพิ่มเติม: สร้างปุ่มลงจากรถ - สร้างปุ่มเป็นลูกของวัตถุรถโดยไปที่ Hierarchy > UI > Button และเปลี่ยนชื่อเป็นปุ่มลงจากรถ. ### การเพิ่มอนิเมชันการขึ้นรถให้กับรถ เมื่อมีตัวละครขึ้นหรือลงจากรถ พวกเขาต้องมีการตั้งค่าอนิเมเตอร์ที่เป็นธรรมชาติเพื่อให้ตรงกัน. คู่มือด้านล่างจะช่วยคุณในการตั้งค่าอนิเมเตอร์ที่จำเป็นสำหรับการขึ้นหรือลง. โปรดดูคู่มือเกี่ยวกับการใช้อนิเมชันที่กำหนดเองเพื่อเพิ่มสถานะอนิเมชันนั่งให้กับอนิเมเตอร์ที่กำหนดเองของคุณ. :::hint{type="info"} **📘 **โปรดดูคู่มือต่อไปนี้. \[[การใช้อนิเมชันที่กำหนดเอง](docId\:JknF6QjPOD9QMWELYYZYk)] ::: 1\) คลิกขวาที่สถานะการเคลื่อนไหวที่เพิ่มเข้ามา คลิกที่ Make Transition เพื่อสร้างการเปลี่ยนแปลงจาก Idle ไปยัง Sitting และกลับจาก Sitting ไปยัง Idle เลือกการเปลี่ยนแปลงที่สร้างขึ้นและยกเลิกการเลือกตัวเลือก Has Exit Time. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Wyf3m0kg09o6DiN5PH1kO-20240904-102415.png) 2\) ใน Animator ที่กำหนดเอง → Parameters → \[ + ] เพิ่ม Bool Condition และเปลี่ยนชื่อเป็น isRiding. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-UMbvqF2bT7l2ZTZbtNxOH-20240904-102415.png) 3\) สำหรับการเปลี่ยนแปลงจากสถานะ Sitting ไปยัง Idle คลิกที่ Conditions → \[ + ] และเพิ่ม isRiding Condition โดยตั้งค่าตัวเลือกเป็น false. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-lO3v9ltDALiKSb7TWxI0j-20240904-102415.png) 4\) สำหรับการเปลี่ยนแปลงจากสถานะ Idle ไปยัง Sitting คลิกที่ Conditions → \[ + ] และเพิ่ม isRiding Condition โดยตั้งค่าตัวเลือกเป็น true. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-7QMiNzrOJIVZD8oMv63kA-20240904-102415.png) ### สคริปต์ เขียนสคริปต์ InteractionIcon.ts เช่นเดียวกับในคู่มือการโต้ตอบ ซึ่งจะแสดง UI การโต้ตอบเมื่อเข้าสู่พื้นที่กระตุ้นของ prefab ยานพาหนะ. เพิ่ม InteractionIcon ZEPETOScript ที่เขียนไว้ในวัตถุ DockPoint และกำหนด Pref Icon Canvas และ Icon Position ใน inspector. ดูตัวอย่างโค้ดใน RideVehicleExample ด้านล่างเพื่อดูวิธีการขึ้นรถหลังจากโต้ตอบกับ UI. ```typescript 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(); 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 เพื่อเปลี่ยนสถานะการเคลื่อนไหวเป็น Idle. this._animator.SetBool("isRiding", false); // เปิดใช้งาน Animator อีกครั้ง. this._localCharacter.StateMachine.constraintStateAnimation = false; this.isRiding = false; // ตั้งค่าพ่อแม่ของวัตถุยานพาหนะเป็น null. this.vehicleObj.transform.parent = null; // ปิดการใช้งานปุ่ม getOuntButton. this.getOffBtn.gameObject.SetActive(false); } // Coroutine สำหรับการ snap กระดูกไปยังยานพาหนะ 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() - ตั้งค่าค่าการเปลี่ยนแปลงของ animator เพื่อเล่นอนิเมชันนั่ง. - เริ่มต้น coroutine Snap Bone() เพื่อเชื่อมโยง bodyBone ของตัวละคร ZEPETO กับ targetTransform. - ใช้ฟังก์ชัน this.\_localCharacter.StateMachine.constraintStateAnimation = true; เพื่อปิดการเปลี่ยนแปลงของ animator ปัจจุบัน โดยล็อคอนิเมชันที่กำลังเล่นอยู่. - พ่อแม่ของวัตถุรถยนต์เปลี่ยนเป็นตัวละคร ZEPETO. - ปุ่มลงจากรถที่มุมขวาบนถูกเปิดใช้งาน. - หยุดการโต้ตอบ() - ตั้งค่าค่าการเปลี่ยนแปลงของ animator เพื่อเล่นอนิเมชันอยู่เฉยๆ. - เปิดใช้งานการเปลี่ยนแปลงของ animator อีกครั้งเพื่อให้อนิเมชันที่เหมาะสมเล่นตามสถานการณ์. - ตั้งค่าพ่อแม่ของวัตถุรถยนต์เป็น null. - ปิดการใช้งานปุ่มลงจากรถ. - this.getOffBtn.onClick - ฟังก์ชัน StopInteraction() ถูกเรียกใช้. - this.\_interactionIcon ถูกเปิดใช้งาน. เพิ่มสคริปต์ RideVehicleExample ที่เขียนไว้ลงใน DockPoint และกำหนดปุ่ม Get Off และ prefab ของยานพาหนะใน inspector. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-tX7QN01S_nG3jm2aBu39B-20240904-102415.png) \[▶︎(เล่น)] กดปุ่มเล่นเพื่อทดลองขึ้นรถ. ![หน้าจอผลลัพธ์](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-MVI0xatAB9KLTTaLJkpaw-20240904-102415.gif "หน้าจอผลลัพธ์") :::hint{type="success"} **👍 เคล็ดลับ** - ตัวอย่างข้างต้นเป็นตัวอย่างของเนื้อหาที่ไม่ถือว่ามีการซิงโครไนซ์แบบผู้เล่นหลายคน. - ในการดำเนินการซิงโครไนซ์แบบผู้เล่นหลายคน คุณต้องซิงโครไนซ์ข้อมูล เช่น รถที่ผู้เล่นแต่ละคนกำลังนั่งอยู่ ขนาดและตำแหน่งของรถ เช่น สถานะห้อง. :::