สร้างโลกของคุณเอง
ผู้เล่นและตัวละคร: ขั้นสูง

การสร้างและการควบคุม NPC

42min

ศึกษาวิธีสร้าง NPC ตัวละคร ZEPETO

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

สร้าง NPC

ใช้ ZEPETO ID ในการสร้าง NPC

Document image




❗️คำเตือน

  • รูปลักษณ์ของ NPC และไอเทมที่ใส่จะตรงกับ ZEPETO ID ที่ป้อน
  • แนะนำให้ตั้งค่าตัวละคร ZEPETO ที่มีรูปลักษณ์พิเศษก่อน แล้วค่อยสร้าง NPC



ตั้งค่าวัตถุในตำแหน่งที่จะสร้าง NPC



  • สร้างโค้ดสำหรับสร้างตัวละคร ZEPETO แบบพื้นฐานใน Scene

📘 กรุณาอ้างอิงจากคู่มือต่อไปนี้ [สร้างตัวละคร ZEPETO]



  • เลือก Hierarchy > Create Empty Object เพื่อสร้างวัตถุ แล้วเปลี่ยนชื่อเป็น NPC
    • วัตถุสำหรับบันทึกตำแหน่งที่จะสร้าง NPC
    • ตั้งค่า Position และ Rotation
Document image




เขียนสคริปต์สร้าง NPC



  1. เลือก Project > Create > ZEPETO > TypeScript เพื่อสร้างสคริปต์ แล้วเปลี่ยนชื่อเป็น NPCCreator
  2. เขียนสคริปต์ตัวอย่างดังด้านล่าง
TypeScript


การทำงานของสคริปต์จะเป็นไปดังนี้

  • Start()
    • ใช้ฟังก์ชัน ZepetoCharacterCreator.CreateByZepetoId() สร้าง NPC ในตำแหน่งวัตถุ NPC จากนั้นบันทึกลงใน _npc
  1. หลังจากเขียนสคริปต์เสร็จเรียบร้อยแล้ว เพิ่มสคริปต์ลงในวัตถุ NPC
  2. กำหนด Zepeto Id ใน Inspector
    • Zepeto Id : ZEPETO ID ของ NPC
Example Script Setting Screen
Example Script Setting Screen




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


ติดป้ายชื่อให้ NPC



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

Document image




สร้าง Prefab ของ Canvas ป้ายชื่อ

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

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

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


เขียนสคริปต์ป้ายชื่อ NPC

  1. เลือก Project > Create > ZEPETO > TypeScript และสร้าง จากนั้นเปลี่ยนชื่อเป็น NPCCreatorWithNameTag
  2. เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
TypeScript


การทำงานของสคริปต์จะเป็นไปดังนี้

  • Start()
    • เรียกฟังก์ชันคัสตอม SetNameTag()
  • SetNameTag()
    • สร้างป้ายชื่อ NPC และปรับตำแหน่งป้ายชื่อที่สร้างให้อยู่บนหัว NPC
    • ตั้งค่าข้อความในป้ายชื่อ
  • Update()
    • เรียกใช้ฟังก์ชันคัสตอม UpdateCanvasRotation() เพื่อหมุน Canvas ให้ตรงกับกล้อง
  1. หลังจากเขียนสคริปต์เสร็จแล้ว เพิ่มสคริปต์ลงในวัตถุ NPC
  2. กำหนด 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 ของวัตถุแคนวาสป้ายชื่อ ซึ่งสามารถปรับระยะห่างระหว่างตัวละครและป้ายชื่อเมื่อให้ป้ายชื่อปรากฏบนหัวตัวละครได้
Example Script Setting Screen
Example Script Setting Screen




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


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



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

กระโดด



Document image




ใช้ ZEPETO Character API เพื่อทำให้ NPC กระโดด

สามารถใช้ ZEPETO Character API สร้างการเคลื่อนไหวให้หลากหลายมากขึ้นได้

📘 กรุณาอ้างอิงจากคู่มือต่อไปนี้ . [ZEPETO Character]

เขียนสคริปต์ NPC กระโดด

  1. เลือก Project > Create > ZEPETO > TypeScript แล้วสร้างสคริปต์ จากนั้นเปลี่ยนชื่อเป็น NPCJump
  2. เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
TypeScript


การทำงานของสคริปต์จะเป็นไปดังนี้

  • Start()
    • เรียกใช้ Coroutine "JumpCoroutine()"
  • JumpCoroutine()
    • เรียกใช้ Method "Jump()" เพื่อให้ NPC กระโดดทุก 5 วินาที
  1. หลังจากเขียนสคริปต์เสร็จเรียบร้อยแล้ว เพิ่มสคริปต์ลงในวัตถุ NPC
  2. กดปุ่ม play เพื่อให้ NPC กระโดด

ท่าทาง

Document image




ใช้ Animator Controller เพื่อทำให้ NPC ทำท่าทาง

สามารถใช้ Animator Controller สร้างท่าทางให้หลากหลายมากขึ้นได้



เตรียมคลิปอนิเมชัน

  • เตรียมคลิปอนิเมชันท่าทางที่จะให้ NPC ทำโดยอ้างอิงจากคู่มือต่อไปนี้

สร้างอนิเมเตอร์

  1. เลือก Project > Create > Animator Controller แล้วสร้าง จากนั้นเปลี่ยนชื่อเป็น NPCAnimatorController
Document image




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

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


เขียนสคริปต์ท่าทาง NPC

  1. เลือก Project > Create > ZEPETO > TypeScript แล้วสร้างสคริปต์ จากนั้นเปลี่ยนชื่อเป็น NPCGesture
  2. เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
TypeScript


การทำงานของสคริปต์จะเป็นไปดังนี้

  • Start()
    • นำเข้า Animator Component ของวัตถุ NPC แล้วตั้งค่าให้เป็น Animator Controller ที่กำหนดด้วยตัวแปร npcAnimator
  1. หลังจากเขียนสคริปต์เสร็จแล้ว เพิ่มสคริปต์ลงในวัตถุตำแหน่งที่จะสร้าง NPC
  2. กำหนด Zepeto Id, Npc Animator ใน Inspector
    • Npc Animator : Animation Controller ของ NPC
Document image




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

สร้างกรอบคำพูดด้านบน NPC

สามารถสร้างกรอบคำพูดได้โดยการสร้าง Canvas บนหัว NPC และแสดงรูปภาพหรือข้อความ

Document image




สร้าง Prefab แคนวาสกรอบคำพูด

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




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




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




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


เขียนสคริปต์กรอบคำพูด NPC

  1. เลือก Project > Create > ZEPETO > TypeScript และสร้างสคริปต์ จากนั้นเปลี่ยนชื่อเป็น NPCSpeechBubble
  2. เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
TypeScript


การทำงานของสคริปต์จะเป็นไปดังนี้

  • Start()
    • เรียกใช้ฟังก์ชันคัสตอม SetBubble()
  • SetBubble()
    • สร้างแคนวาสกรอบคำพูด (speechBubblePrefab) และปรับให้ตำแหน่งของกรอบคำพูดที่สร้างไปอยู่บนหัวของ NPC
    • เรียกใช้ฟังก์ชันคัสตอม SetBubbleText() เพื่อตั้งค่าข้อความในกรอบคำพูด
  • SetBubbleText()
    • เปิดใช้งานแคนวาสกรอบคำพูดของ (_speechBubbleObject)
    • แสดง string ที่ให้มาเป็นพารามิเตอร์ (bubbleText) ในกรอบคำพูด
  • Update()
    • เรียกใช้ฟังก์ชันคัสตอม UpdateCanvasRotation() เพื่อหมุน Canvas ให้ตรงกับกล้อง



  1. หลังจากเขียนสคริปต์เสร็จแล้ว เพิ่มสคริปต์ลงในวัตถุตำแหน่งที่จะสร้าง NPC
  2. กำหนด 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 แคนวาสกรอบคำพูด ซึ่งสามารถปรับระยะห่างระหว่างตัวละครและกรอบคำพูดเมื่อมีกรอบคำพูดปรากฏบนหัวของตัวละครได้
Example Script Setting Screen
Example Script Setting Screen

  1. เมื่อกดปุ่ม play เพื่อรัน จะเห็นกรอบคำพูดปรากฏบนหัวของ NPC

Interaction กับ NPC

สามารถสร้างคอนเทนต์น่าสนใจได้มากมายโดย Interaction กับ NPC

ในคู่มือนี้ จะใช้ตัวอย่างสร้างกรอบคำพูดที่จะเปลี่ยนไปเมื่อเข้าใกล้ NPC

Document image


ตั้งค่า Colider

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

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


เขียนสคริปต์ Interaction กับ NPC

  1. เลือก Project > Create > ZEPETO > TypeScript และสร้างสคริปต์ จากนั้นเปลี่ยนชื่อเป็น NPCInteraction
  2. เขียนสคริปต์ตัวอย่างตามด้านล่างนี้
TypeScript


การทำงานของสคริปต์จะเป็นไปดังนี้

  • OnTriggerEnter(), OnTriggerExit()
    • เรียกใช้ฟังก์ชันคัสตอม SetBubbleText() เพื่อตั้งข้อความในกรอบคำพูดเป็น changedSpeechBubbleText เมื่อเข้ามาในขอบเขต Collider แล้วตรวจจับทริกเกอร์
    • เรียกใช้ฟังก์ชันคัสตอม SetBubbleText() เพื่อตั้งข้อความในกรอบคำพูดเป็น speechBubbleText เมื่อออกไปนอกขอบเขต Collider
  1. หลังจากเขียนสคริปต์เสร็จแล้ว เพิ่มสคริปต์ลงในวัตถุตำแหน่งที่จะสร้าง NPC
  2. กำหนด 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 ของ
Example Script Setting Screen
Example Script Setting Screen




  1. หลังจากกดปุ่ม play เพื่อรันแล้ว ข้อความในกรอบคำพูดจะเปลี่ยนเมื่อเข้าใกล้ NPC

ใช้การโต้ตอบกับ NPC

หากต้องการสร้างรูปแบบไดอะล็อก ให้สร้าง UI โดยใช้แผง

ต่อไปนี้เป็นตัวอย่างของกล่องโต้ตอบง่ายๆ ที่ประกอบด้วยแผงและปุ่มต่างๆ

Document image


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

ใช้สิ่งนี้เพื่อปรับใช้เนื้อหาที่น่าสนใจ

TypeScript