8. สร้างโลก 2D

17 นาที

เปิดตัว 2D World ที่ช่วยให้คุณสร้างโลกได้เร็วและง่ายยิ่งขึ้น

เพียงแค่มีรูปภาพพื้นหลังของคุณเองและการเชื่อมต่อพอร์ทัล ก็สามารถสร้างและปล่อยโลกได้อย่างรวดเร็วและง่ายดาย

สามารถติดตั้งแพ็กเกจ 2D World ในโปรเจกต์ปลั๊กอิน Unity Buildit เดิมเพื่อใช้งานได้เลย!

วิธีการใช้งาน

ใน Unity Hub ให้เลือกโฟลเดอร์ปลั๊กอิน Buildit แล้วกดปุ่ม Open

📘 Note หากเป็นครั้งแรก ให้ทำตาม 1. การติดตั้ง1. การติดตั้ง เพื่อติดตั้งปลั๊กอิน Unity Buildit ก่อน และเรียนรู้การควบคุมพื้นฐาน

เมื่อเปิดโปรเจกต์ปลั๊กอิน Buildit แล้ว ให้เลือกที่แถบด้านบน ZEPETO > Buildit Plugin Package Manager > แล้วเลือก 2D World

กด Import เพื่อนำเข้าทุกองค์ประกอบ

เมื่อทำขั้นตอนที่ 3 เสร็จ จะมีโฟลเดอร์ Assets > Zepeto 2D World ถูกสร้างขึ้น

ดับเบิลคลิกไฟล์ 2DWorldScene ที่อยู่ในโฟลเดอร์เพื่อเปิด

หลังจากล็อกอินบัญชีด้านบนแล้ว ให้เปิด (On) เซิร์ฟเวอร์มัลติเพลย์ และกดปุ่ม Play เพื่อเล่นโลก 2D ได้

ฟีเจอร์ของโลก 2D

สามารถใช้ ฟังก์ชันโมดูลพื้นฐาน ของปลั๊กอิน Buildit ได้

สามารถใช้ฟังก์ชันแชตเสียง, ควิกแชต, ท่าทาง, แคปหน้าจอ/บันทึกหน้าจอ, ตู้เสื้อผ้า และ BGM ได้

มี ฟังก์ชันสลับโหมดแนวนอน/แนวตั้ง

สามารถเปลี่ยน หน้าจอโหลด

สามารถเปลี่ยน พื้นหลัง ของแผนที่

สามารถเพิ่มแผนที่ได้เท่าที่ต้องการ และเชื่อมต่อด้วย พอร์ทัล เพื่อสร้างพื้นที่สร้างสรรค์ได้

จำนวนแผนที่ไม่จำกัด แต่เมื่อต้องปล่อยบน Zepeto Studio ไฟล์บิลด์ต้องมีขนาดไม่เกิน 1GB และค่าต่าง ๆ ต้องไม่เกินแนวทางการปรับแต่งประสิทธิภาพ

สามารถเปลี่ยน เพลงพื้นหลัง (BGM) ได้

เนื่องจากเป็นโลก 2D การวางอ็อบเจ็กต์ 3D จึงไม่เข้ากันและไม่แนะนำ

เป้าหมายคือการสร้างโลกได้รวดเร็วและง่าย ด้วยเพียงพื้นหลังและการเชื่อมต่อพอร์ทัล

สร้างโลก 2D

โครงสร้างพื้นฐานของ 2DWorldScene

โดยพื้นฐานจะมีตัวอย่างที่ประกอบด้วยหน้าจอโหลด และแผนที่ 2 แผนที่ที่เชื่อมต่อกันด้วยพอร์ทัล

เพื่อความสะดวกในการทำงาน โปรดคลิกเมนู 2D ใน Scene ของ Unity Editor

หน้าจอโหลด

หากคุณติ๊กเปิดใช้งานอ็อบเจ็กต์ Managers > LoadingScreen ใน Inspector จะสามารถใช้ฟังก์ชันหน้าจอโหลดได้

ลากภาพที่ต้องการใช้เป็นภาพโหลดไปไว้ใน Assets เปลี่ยน Texture Type เป็น Sprite(2D and UI) แล้วกด Apply

เลือก Managers > LoadingScreen > Image

ลากภาพโหลดที่เพิ่งเพิ่มไปใส่ในพร็อพเพอร์ตี้ SourceImage ของอ็อบเจ็กต์ Image เพื่อเปลี่ยนภาพโหลด

เลือก Managers > LoadingScreen > Text(TMP)

พิมพ์ข้อความโหลดในส่วน TextMeshPro-Text(UI) หากไม่ต้องการข้อความ สามารถเว้นว่างไว้ได้

Managers > LoadingScreen > Delay After Ready คือเวลาที่หน้าจอโหลดจะคงอยู่หลังจากสร้างตัวละคร Zepeto แล้ว (หน่วยวินาที) ค่าเริ่มต้นคือ 0.1

เปลี่ยนความเร็วการเคลื่อนที่ของตัวละคร

Managers: สามารถปรับความเร็วการเคลื่อนที่ของตัวละครได้

Run Speed: ปรับความเร็วการวิ่งของตัวละคร

Walk Speed: ปรับความเร็วการเดินของตัวละคร

ฟังก์ชัน กระโดด ไม่สามารถใช้ได้ ในโลก 2D

แก้ไขแผนที่

สามารถเปลี่ยนภาพพื้นหลังของแผนที่, พอร์ทัล, พื้นที่ที่ตัวละครเดินได้, BGM และชื่อแผนที่ได้

เปลี่ยนภาพพื้นหลัง

ใน Hierarchy ให้เลือกอ็อบเจ็กต์ ZEPETO2D_BG

Sprite Renderer > Sprite: สามารถลากภาพที่ต้องการเพื่อเปลี่ยนพื้นหลังได้

Rebuild Borders2D: หากเปลี่ยนภาพแล้ว ต้องคลิกปุ่มนี้ เสมอ ระบบจะ สร้าง BoxCollider2d ซึ่งเป็นพื้นที่ที่เดินได้ตามขอบนอกให้พอดีกับขนาดภาพ

ย้าย Border2D-Top ด้วย Move tool ให้ไปอยู่ตำแหน่งขอบพื้น (พื้นดิน) ในภาพ

Border อื่น ๆ ไม่จำเป็นต้องแก้ไขเพิ่มเติม

ขนาดแผนที่จะถูกสร้างตามขนาดภาพต้นฉบับ แต่สามารถปรับให้เป็นขนาดที่ต้องการได้ด้วยการใส่ค่า Scale ใน Transform

ขนาดภาพต้นฉบับที่แนะนำ: 3400×1530px เป็นขนาดภาพพื้นหลัง 2D ที่เลื่อนในแนวนอนได้ แม้ขนาดภาพจะต่างจากที่แนะนำก็ไม่เป็นปัญหาในการสร้างโลก

เชื่อมต่อพอร์ทัล

ใน Hierarchy ให้เลือกอ็อบเจ็กต์ ZEPETO2D_BG

Linked Portal Obj: เมื่อตัวละครเข้าไปในบริเวณ Box Collider ของพอร์ทัล พอร์ทัลจะทำงาน และเมื่อกดปุ่มจะย้ายไปยังปลายทางที่เชื่อมต่อไว้ ให้ลากพอร์ทัลปลายทางมาใส่เพื่อเพิ่ม

Interact Button Text: ข้อความที่แสดงบนปุ่มพอร์ทัล หากไม่มีพอร์ทัลที่เชื่อมต่อ ข้อความจะไม่แสดง

Show Map Title Toast: หากติ๊ก จะให้แสดง Map Title ที่ใส่ไว้ตอนย้ายผ่านพอร์ทัล

Map Title: ข้อความชื่อ

สามารถสร้างพอร์ทัลเพิ่มเติมได้ผ่าน ZEPETO2D_BG > Create Portal2D(Child)

เปลี่ยน BGM

ใน Hierarchy ให้เลือกอ็อบเจ็กต์ ZEPETO2D_BG > BGM

ลากเพลงที่ต้องการไปใส่ใน BGM Audio Source เพื่อเปลี่ยนเพลง สามารถตั้ง BGM ให้แตกต่างกันในแต่ละแผนที่ได้

แก้ไข UI ชื่อแผนที่

ปรับตำแหน่งที่ชื่อแผนที่แสดงได้โดยแก้ค่า Rect Transform ของ Managers > UIToolbar > MapTitleToast

ที่ Managers > UIToolbar > MapTilteToast>Background สามารถแก้ Color หรือใช้ภาพคัสตอม และปรับขนาดพื้นที่พื้นหลังได้ด้วยการแก้ค่า Rect Transform

เลือก Managers > UIToolbar > MapTilteToast>Background>Text(TMP) เพื่อเปลี่ยนสีตัวอักษรด้วย Font Size และ Vertex Color

เพิ่มแผนที่

กด ZEPETO 2D > Create BG ที่แถบด้านบนเพื่อเพิ่มแผนที่ใหม่

สำหรับแผนที่ที่เพิ่มใหม่ ให้เปลี่ยนรูปและเชื่อมต่อพอร์ทัลด้วยวิธีเดียวกัน

การเพิ่ม NPC

ในโลก 2D คุณสามารถใช้ NPC ที่สามารถพูดคุยด้วยได้

คุณสามารถแก้ไข NPC ที่วางอยู่ในฉากตัวอย่าง หรือคลิก ZEPETO 2D > Create ZepetoNPC จากเมนูด้านบนเพื่อเพิ่ม Zepeto NPC ตัวใหม่

ในหน้าต่าง Hierarchy ให้เลือก ZepetoNPC ที่สร้างขึ้น

Zepeto ID : ป้อน Zepeto ID บัญชีที่คุณต้องการใช้งาน

Npc Name : ป้อนชื่อ NPC ที่จะแสดงบนหน้าจอ

Dialogue ID : ป้อน Dialogue ID ที่จะใช้งาน

Dialogue ID คือค่าเฉพาะ (Unique Value) ของบทสนทนาที่ถูกสร้างขึ้นจากเครื่องมือ NPC Dialogue Editor

📘 Note สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่าบทสนทนา โปรดดูที่ ตั้งค่า NPC Dialogueㅇ

การเพิ่ม Sprite NPC

ด้วยฟีเจอร์ Sprite NPC คุณสามารถนำรูปภาพใดๆ ก็ได้ที่คุณอิมพอร์ตเข้ามาแปลงให้กลายเป็น NPC

เลือก ZEPETO 2D > Create SpriteNPC จากเมนูด้านบน

ในหน้าต่าง Hierarchy ให้เลือก SpriteNPC ที่สร้างขึ้น

Sprite: คุณสามารถกำหนด Sprite ที่จะนำมาใช้เป็น NPC ได้

เพิ่มรูปภาพที่คุณต้องการใช้เป็น NPC ลงในหน้าต่าง Project

โปรดใช้รูปภาพนามสกุล PNG ที่โปร่งใส (ไม่มีพื้นหลัง)

ขนาดรูปภาพที่แนะนำ: 720*720

แม้ว่าภาพจะไม่ได้ขนาดตามที่แนะนำ คุณก็สามารถปรับขนาดภาพ (Scale) ใน Unity ได้อย่างง่ายดายในขณะที่ทดสอบ

เลือกรูปภาพที่อิมพอร์ตเข้ามา แล้วเปลี่ยนที่ Inspector > Texture Type ให้เป็น Sprite (2D and UI)

คลิก Apply ที่ด้านล่างเพื่อบันทึกการเปลี่ยนแปลง

ไปที่หน้าต่างของ Sprite NPC แล้วเปลี่ยนที่ Inspector > Sprite Renderer > Sprite โดยใส่ Sprite ตัวใหม่ที่คุณเพิ่งอิมพอร์ตเข้ามา

หากคุณต้องการปรับขนาดของ NPC ลองปรับแก้ที่ค่า Transform > Scale > X, Y

คุณสามารถพลิกภาพในแนวนอนหรือแนวตั้งได้โดยใช้ Inspector > Sprite Renderer > Flip

กด Play เพื่อตรวจสอบดูว่า Sprite NPC รูปภาพของคุณสามารถแสดงผลได้อย่างถูกต้องหรือไม่

หากคุณจำเป็นต้องปรับระยะห่างในการปฏิสัมพันธ์ (Interaction Distance) ให้เลือก Sprite NPC ที่คุณต้องการตั้งค่า แล้วปรับแก้ไขตัวเลขที่ Inspector > Box Collider > Size > X, Y, Z

โปรดตรวจสอบให้แน่ใจว่าได้ วางตำแหน่ง NPC ให้ไม่ทับซ้อน กับพอร์ทัลหรือ NPC ตัวอื่นๆ

วาง AD Teleport 2D

วางอ็อบเจ็กต์ AD Teleport 2D เพื่อสร้างรายได้ในโลก 2D ได้ด้วย

ผ่าน Teleport ที่จะทำงานก็ต่อเมื่อผู้ใช้ชมโฆษณา ลองรับทั้งความสนุกและรายได้ไปพร้อมกันจากโลกที่คุณสร้างเอง

อ็อบเจ็กต์ AD Teleport2D เป็นอ็อบเจ็กต์เฉพาะสำหรับโลก 2D ที่ทำงานเหมือนกับอ็อบเจ็กต์ Advertisement เดิม

เลือกอ็อบเจ็กต์ AdTeleport2D ใน Build it Asset Browser > 2D

ลากไปวางในตำแหน่งที่ต้องการบน Scene

ใน Hierachy ให้นำอ็อบเจ็กต์ AdTeleport2D ที่วางไว้ ไปใส่ไว้ใต้ (เป็นลูกของ) BG ที่ต้องการวาง

วางอ็อบเจ็กต์ AdTeleport2D > Destination ไว้ที่ตำแหน่งที่ต้องการให้เป็นจุดปลายทาง

หากต้องการวางจุดปลายทางไว้ใน BG อื่น ให้สร้าง GameObject ว่างใต้ BG นั้น แล้วใส่ GameObject ว่าง ที่สร้างไว้ลงใน AdTeleport2D > Inspector > Zepeto Script > Destination เพื่อใช้เป็น Destination

การทดสอบอ็อบเจ็กต์ AdTeleport2D ไม่สามารถทำใน Unity ได้ ต้องทดสอบบนมือถือ โดยสามารถทำได้ด้วยการอัปโหลดไฟล์บิลด์ไปที่ Zepeto Studio

4. ทดสอบโลกของคุณ4. ทดสอบโลกของคุณ

เคล็ดลับการสร้างโลก 2D

แนะนำให้ล็อกพิกัด z ของแต่ละแผนที่ไว้ที่ค่าเริ่มต้น 100 แล้วปรับพิกัด x,y เพื่อจัดวาง

หากแผนที่ซ้อนกันใน Scene ในโหมดมัลติเพลย์ ผู้เล่นจากแผนที่อื่นอาจปรากฏบนหน้าจอได้ จึงจำเป็นต้องเว้น ระยะห่างระหว่างแผนที่ ตามตัวอย่างด้านล่าง

สามารถใช้ภาพที่สร้างด้วย AI ได้

เมื่อต้องปล่อยบน Zepeto Studio โปรดระบุในคำอธิบายโลกว่าเป็นภาพ AI

💡 หากต้องการสร้างภาพ AI ที่ให้ความรู้สึกมีมิติของพื้นที่ ลองใช้พรอมป์ต์ต่อไปนี้

ฉากของ [คอนเซ็ปต์พื้นที่] ด้วยองค์ประกอบภาพที่ให้ความรู้สึกกว้างและลึก มุมมองกล้องไหลนำสายตาเข้าสู่ด้านในของพื้นที่อย่างเป็นธรรมชาติ เน้นมุมมองระยะ (จุดรวมสายตา/vanishing point) ที่ทำให้สายตาไปรวมที่กึ่งกลางหรือจุดหนึ่ง สื่อความลึกของพื้นที่อย่างสมจริงผ่านแสงสะท้อนบนพื้น หมอกหรือแสงเป็นลำในอากาศ และความเปรียบต่างของเงา ผสานแสงที่มีมิติและพื้นผิววัสดุที่สมจริงให้บรรยากาศของพื้นที่ถ่ายทอดอย่างมีชีวิตชีวา องค์ประกอบแบบซีนีมาติกและแสงสมจริง รายละเอียดพื้นผิวคมชัด ความละเอียดสูง มุมมองลึก และเอฟเฟ็กต์โฟกัสที่เบลอด้านหน้า-หลังอย่างเป็นธรรมชาติ

ลองสร้างพื้นที่ของคุณเองแบบง่าย ๆ ด้วยการเพิ่มรูป เชื่อมต่อพอร์ทัล และ BGM เท่านั้น!