การสร้างและการควบคุม NPC
ศึกษาวิธีสร้าง NPC ตัวละคร ZEPETO
นำสคริปต์ตัวอย่างแต่ละฟังก์ชันที่มีให้มาใช้ในการเพิ่ม NPC ที่ต้องการลงในเวิลด์
ใช้ ZEPETO ID ในการสร้าง NPC

❗️คำเตือน
- รูปลักษณ์ของ NPC และไอเทมที่ใส่จะตรงกับ ZEPETO ID ที่ป้อน
- แนะนำให้ตั้งค่าตัวละคร ZEPETO ที่มีรูปลักษณ์พิเศษก่อน แล้วค่อยสร้าง NPC
- สร้างโค้ดสำหรับสร้างตัวละคร ZEPETO แบบพื้นฐานใน Scene
📘 กรุณาอ้างอิงจากคู่มือต่อไปนี้ [สร้างตัวละคร ZEPETO]
- เลือก Hierarchy > Create Empty Object เพื่อสร้างวัตถุ แล้วเปลี่ยนชื่อเป็น NPC
- วัตถุสำหรับบันทึกตำแหน่งที่จะสร้าง NPC
- ตั้งค่า Position และ Rotation

- เลือก Project > Create > ZEPETO > TypeScript เพื่อสร้างสคริปต์ แล้วเปลี่ยนชื่อเป็น NPCCreator
- เขียนสคริปต์ตัวอย่างดังด้านล่าง
การทำงานของสคริปต์จะเป็นไปดังนี้
- Start()
- ใช้ฟังก์ชัน ZepetoCharacterCreator.CreateByZepetoId() สร้าง NPC ในตำแหน่งวัตถุ NPC จากนั้นบันทึกลงใน _npc
- หลังจากเขียนสคริปต์เสร็จเรียบร้อยแล้ว เพิ่มสคริปต์ลงในวัตถุ NPC
- กำหนด Zepeto Id ใน Inspector
- Zepeto Id : ZEPETO ID ของ NPC

- เมื่อกดปุ่ม play เพื่อรัน NPC ที่มีป้ายชื่อจะถูกสร้างขึ้น
- สามารถสร้าง NPC ต่างๆ ได้อย่างง่ายๆ โดยการเพิ่มวัตถุในตำแหน่ง NPC ด้วยวิธีเดียวกัน และเพิ่มสคริปต์ NPC

สามารถแยกผู้เล่นและ NPC ได้โดยการติดป้ายชื่อให้ NPC

- เลือก Hierachy > UI > Canvas และสร้าง จากนั้นเปลี่ยนชื่อเป็น PrefNameTagCanvas
- ตั้งค่า Render Mode เป็น World Space

- เลือก Hierachy > UI > Text แล้วสร้างให้เป็น Child ของ PrefNameTagCanvas จากนั้นเปลี่ยนชื่อเป็น NameTagText
- ข้อความที่จะปรากฏเป็นชื่อ
- เพิ่ม Component "Content Size Fitter" เพื่อทำให้ข้อความมีขนาดเหมาะสม

- เมื่อตั้งค่าเสร็จเรียบร้อยแล้ว ลากไปยังหน้าต่าง Project เพื่อสร้างเป็น Prefab จากนั้นลบ PrefNameTagCanvas ที่ยังเหลืออยู่ใน Hierachy

- เลือก Project > Create > ZEPETO > TypeScript และสร้าง จากนั้นเปลี่ยนชื่อเป็น NPCCreatorWithNameTag
- เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
การทำงานของสคริปต์จะเป็นไปดังนี้
- Start()
- เรียกฟังก์ชันคัสตอม SetNameTag()
- SetNameTag()
- สร้างป้ายชื่อ NPC และปรับตำแหน่งป้ายชื่อที่สร้างให้อยู่บนหัว NPC
- ตั้งค่าข้อความในป้ายชื่อ
- Update()
- เรียกใช้ฟังก์ชันคัสตอม UpdateCanvasRotation() เพื่อหมุน Canvas ให้ตรงกับกล้อง
- หลังจากเขียนสคริปต์เสร็จแล้ว เพิ่มสคริปต์ลงในวัตถุ NPC
- กำหนด Zepeto Id, Name Tag, Name Tag Prefab และ Name Tag Y Offset ใน Inspector
- Name Tag : ชื่อที่จะแสดงในป้ายชื่อ NPC
- Name Tag Prefab : Prefab แคนวาสป้ายชื่อ
- Name Tag Y Offset : ตัวแปรบันทึกค่า Offset แกน y ของวัตถุแคนวาสป้ายชื่อ ซึ่งสามารถปรับระยะห่างระหว่างตัวละครและป้ายชื่อเมื่อให้ป้ายชื่อปรากฏบนหัวตัวละครได้

- เมื่อกดปุ่ม play เพื่อรัน NPC ที่มีป้ายชื่อจะถูกสร้างขึ้น

สามารถควบคุมการเคลื่อนไหวของ NPC ได้

ใช้ ZEPETO Character API เพื่อทำให้ NPC กระโดด
สามารถใช้ ZEPETO Character API สร้างการเคลื่อนไหวให้หลากหลายมากขึ้นได้
📘 กรุณาอ้างอิงจากคู่มือต่อไปนี้ . [ZEPETO Character]
- เลือก Project > Create > ZEPETO > TypeScript แล้วสร้างสคริปต์ จากนั้นเปลี่ยนชื่อเป็น NPCJump
- เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
การทำงานของสคริปต์จะเป็นไปดังนี้
- Start()
- เรียกใช้ Coroutine "JumpCoroutine()"
- JumpCoroutine()
- เรียกใช้ Method "Jump()" เพื่อให้ NPC กระโดดทุก 5 วินาที
- หลังจากเขียนสคริปต์เสร็จเรียบร้อยแล้ว เพิ่มสคริปต์ลงในวัตถุ NPC
- กดปุ่ม play เพื่อให้ NPC กระโดด

ใช้ Animator Controller เพื่อทำให้ NPC ทำท่าทาง
สามารถใช้ Animator Controller สร้างท่าทางให้หลากหลายมากขึ้นได้
📘 Unity Animator Controller https://docs.unity3d.com/Manual/class-AnimatorController.html
- เตรียมคลิปอนิเมชันท่าทางที่จะให้ NPC ทำโดยอ้างอิงจากคู่มือต่อไปนี้
📘 Please refer to the following guide.
- เลือก Project > Create > Animator Controller แล้วสร้าง จากนั้นเปลี่ยนชื่อเป็น NPCAnimatorController

- เปิดแท็บ Animator จากนั้นเลือก Create State > Empty และสร้าง

- เปลี่ยนชื่อให้เหมาะสมใน Inspector และกำหนดคลิปอนิเมชันใน Motion

- เลือก Project > Create > ZEPETO > TypeScript แล้วสร้างสคริปต์ จากนั้นเปลี่ยนชื่อเป็น NPCGesture
- เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
การทำงานของสคริปต์จะเป็นไปดังนี้
- Start()
- นำเข้า Animator Component ของวัตถุ NPC แล้วตั้งค่าให้เป็น Animator Controller ที่กำหนดด้วยตัวแปร npcAnimator
- หลังจากเขียนสคริปต์เสร็จแล้ว เพิ่มสคริปต์ลงในวัตถุตำแหน่งที่จะสร้าง NPC
- กำหนด Zepeto Id, Npc Animator ใน Inspector
- Npc Animator : Animation Controller ของ NPC

- เมื่อกดปุ่ม play เพื่อรัน จะสามารถตรวจสอบผลลัพธ์ในการทำท่าทางของ NPC ได้
- สามารถนำไปปรับใช้ในการทำให้ NPC มีการเคลื่อนไหวที่หลากหลายมากขึ้นนอกเหนือจากการกระโดดและการทำท่าทางได้
สามารถสร้างกรอบคำพูดได้โดยการสร้าง Canvas บนหัว NPC และแสดงรูปภาพหรือข้อความ

- เลือก Hierachy > UI > Canvas เพื่อสร้าง จากนั้นเปลี่ยนชื่อเป็น PrefSpeechBubbleCanvas
- ตั้งค่า Render Mode เป็น World Space

- เลือก Hierachy > UI > Image และสร้างให้เป็น Child ของ PrefSpeechBubbleCanvas จากนั้นเปลี่ยนชื่อเป็น SpeeachBubbleImage
- รูปภาพที่จะใช้เป็นพื้นหลังของกรอบคำพูด

- เลือก Hierachy > UI > Text และสร้างให้เป็น Child ของ SpeeachBubbleImage จากนั้นเปลี่ยนชื่อเป็น SpeeachBubbleText
- ข้อความในกรอบคำพูด
- เพิ่ม Component "Content Size Fitter" เพื่อทำให้ข้อความมีขนาดเหมาะสม

- เมื่อตั้งค่าเสร็จแล้ว ลากไปยังหน้าต่าง Project เพื่อสร้างเป็น Prefab จากนั้นลบ PrefSpeechBubbleCanvas ที่ยังเหลืออยู่ใน Hierachy

- เลือก Project > Create > ZEPETO > TypeScript และสร้างสคริปต์ จากนั้นเปลี่ยนชื่อเป็น NPCSpeechBubble
- เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
การทำงานของสคริปต์จะเป็นไปดังนี้
- Start()
- เรียกใช้ฟังก์ชันคัสตอม SetBubble()
- SetBubble()
- สร้างแคนวาสกรอบคำพูด (speechBubblePrefab) และปรับให้ตำแหน่งของกรอบคำพูดที่สร้างไปอยู่บนหัวของ NPC
- เรียกใช้ฟังก์ชันคัสตอม SetBubbleText() เพื่อตั้งค่าข้อความในกรอบคำพูด
- SetBubbleText()
- เปิดใช้งานแคนวาสกรอบคำพูดของ (_speechBubbleObject)
- แสดง string ที่ให้มาเป็นพารามิเตอร์ (bubbleText) ในกรอบคำพูด
- Update()
- เรียกใช้ฟังก์ชันคัสตอม UpdateCanvasRotation() เพื่อหมุน Canvas ให้ตรงกับกล้อง
- หลังจากเขียนสคริปต์เสร็จแล้ว เพิ่มสคริปต์ลงในวัตถุตำแหน่งที่จะสร้าง NPC
- กำหนด Zepeto Id, Speech Bubble Text, Speech Bubble Prefab และ Speech Bubble Y Offset ใน Inspector
- Speech Bubble Text : ตัวแปรที่บันทึกบทสนทนาของตัวละคร NPC ที่จะให้ปรากฏในกรอบคำพูด โดยจะบันทึกบทสนทนาเหมือนกับ "Hello World" ในตัวอย่าง
- Speech Bubble Prefab : ตัวแปรที่บันทึก Prefab ของ GameObject แคนวาสกรอบคำพูด
- Speech Bubble Y Offset : ตัวแปรที่บันทึกค่า offset แกน y ของ GameObject แคนวาสกรอบคำพูด ซึ่งสามารถปรับระยะห่างระหว่างตัวละครและกรอบคำพูดเมื่อมีกรอบคำพูดปรากฏบนหัวของตัวละครได้

- เมื่อกดปุ่ม play เพื่อรัน จะเห็นกรอบคำพูดปรากฏบนหัวของ NPC
สามารถสร้างคอนเทนต์น่าสนใจได้มากมายโดย Interaction กับ NPC
ในคู่มือนี้ จะใช้ตัวอย่างสร้างกรอบคำพูดที่จะเปลี่ยนไปเมื่อเข้าใกล้ NPC

- เพิ่ม Colider Component ลงในวัตถุเพื่อ Interaction กับ NPC จากนั้นกดเช็ก isTrigger

- ปรับขนาด Colider ให้มีขอบเขตเท่าที่ต้องการให้ผู้เล่นสามารถมี Interaction กับ NPC ได้

- เลือก Project > Create > ZEPETO > TypeScript และสร้างสคริปต์ จากนั้นเปลี่ยนชื่อเป็น NPCInteraction
- เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
การทำงานของสคริปต์จะเป็นไปดังนี้
- OnTriggerEnter(), OnTriggerExit()
- เรียกใช้ฟังก์ชันคัสตอม SetBubbleText() เพื่อตั้งข้อความในกรอบคำพูดเป็น changedSpeechBubbleText เมื่อเข้ามาในขอบเขต Collider แล้วตรวจจับทริกเกอร์
- เรียกใช้ฟังก์ชันคัสตอม SetBubbleText() เพื่อตั้งข้อความในกรอบคำพูดเป็น speechBubbleText เมื่อออกไปนอกขอบเขต Collider
- หลังจากเขียนสคริปต์เสร็จแล้ว เพิ่มสคริปต์ลงในวัตถุตำแหน่งที่จะสร้าง NPC
- กำหนด Zepeto Id, Speech Bubble Text, Speech Bubble Prefab, Speech Bubble Y Offset และ Changed Speech Bubble ใน Inspector
- Speech Bubble Text : ตัวแปรที่บันทึกบทสนทนาของตัวละคร NPC ที่จะให้ปรากฏในกรอบคำพูด โดยจะบันทึกบทสนทนาเหมือนกับ "Hello World" ในตัวอย่าง
- Speech Bubble Prefab : ตัวแปรที่บันทึก Prefab ของ GameObject แคนวาสกรอบคำพูด
- Speech Bubble Y Offset : ตัวแปรที่บันทึกค่า offset แกน y ของ GameObject แคนวาสกรอบคำพูด ซึ่งสามารถปรับระยะห่างระหว่างตัวละครและกรอบคำพูดเมื่อมีกรอบคำพูดปรากฏบนหัวของตัวละครได้
- Changed Speech Bubble : บันทึกบทสนทนาที่จะแสดงในกรอบคำพูดของ NPC เมื่อผู้เล่นเข้าไปใน Colider ของ

- หลังจากกดปุ่ม play เพื่อรันแล้ว ข้อความในกรอบคำพูดจะเปลี่ยนเมื่อเข้าใกล้ NPC
หากต้องการสร้างรูปแบบไดอะล็อก ให้สร้าง UI โดยใช้แผง
ต่อไปนี้เป็นตัวอย่างของกล่องโต้ตอบง่ายๆ ที่ประกอบด้วยแผงและปุ่มต่างๆ

นี่คือสคริปต์ตัวอย่างที่เปิดกล่องโต้ตอบเมื่อโต้ตอบกับ NPC และประมวลผลเมื่อกดปุ่มแต่ละปุ่ม
ใช้สิ่งนี้เพื่อปรับใช้เนื้อหาที่น่าสนใจ

