คู่มือ ZEPETO build it Templat...
8. สร้างโลก 2D
19 นาที
เปิดตัว 2d world ที่ช่วยให้คุณสร้างโลกได้เร็วและง่ายยิ่งขึ้น เพียงแค่มีรูปภาพพื้นหลังของคุณเองและการเชื่อมต่อพอร์ทัล ก็สามารถสร้างและปล่อยโลกได้อย่างรวดเร็วและง่ายดาย สามารถติดตั้งแพ็กเกจ 2d world ในโปรเจกต์ปลั๊กอิน unity buildit เดิมเพื่อใช้งานได้เลย! วิธีการใช้งาน ใน unity hub ให้เลือกโฟลเดอร์ปลั๊กอิน buildit แล้วกดปุ่ม open 📘 note หากเป็นครั้งแรก ให้ทำตาม docid\ muhvt1zpdyrjc 0eknpjw เพื่อติดตั้งปลั๊กอิน 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 ใส่ id บัญชี zepeto ที่จะใช้ dialogue id ใส่ dialogue id ที่จะใช้ dialogue id คือค่าระบุตัวตนเฉพาะของ dialogue ที่สร้างด้วย npc dialogue editor รายละเอียดเพิ่มเติมให้ดูส่วน ตั้งค่า npc dialogue ด้านล่าง ตั้งค่า npc dialogue ด้วย npc dialogue system สามารถตั้งค่าว่าจะให้ npc ที่วางไว้สนทนาอย่างไรได้ เลือก zepeto 2d > edit npc dialogue ที่แถบด้านบน ใน npc dialogue editor ที่ถูกเปิดใช้งาน คุณสามารถตั้งค่าบทสนทนา npc ได้ npc gameobject ใส่ npc ที่ต้องการตั้งค่า dialogue dialogue id ค่าระบุเอกลักษณ์เฉพาะที่ dialogue มีอยู่ npc ที่มี dialogue id เดียวกันจะแสดงบทพูดเดียวกัน npc name ใส่ชื่อ npc what npc says ใส่ประโยคแรกที่ npc จะพูด questions & answers question ใส่คำถามที่จะปรากฏเป็นตัวเลือก answer ใส่คำตอบของ npc สำหรับคำถามนั้น remove ลบบทสนทนานั้น add option เพิ่มจำนวนคำถามได้ คำถามจะแสดงได้ครั้งละ สูงสุด 3 ข้อ เท่านั้น หากสร้างคำถามไว้ 4 ข้อขึ้นไป จะมี 3 ข้อถูกสุ่มมาแสดง save dialogue บันทึก dialogue ที่ตั้งค่าไว้ หลังแก้ไขอย่าลืมกด! reload โหลด dialogue ณ จุดที่บันทึกล่าสุด delete ลบ dialogue นั้น เพิ่ม sprite npc ด้วยฟีเจอร์ sprite npc คุณสามารถทำให้รูปที่นำเข้าเป็น npc ได้ เลือก zepeto 2d > create spritenpc ที่แถบด้านบน ใน hierarchy ให้เลือก spritenpc ที่ถูกสร้างขึ้น sprite สามารถตั้งค่า sprite ที่จะใช้เป็น npc ได้ นำภาพที่อยากใช้เป็น npc ใส่ไว้ใน project ใช้ภาพ png ที่ไม่มีพื้นหลัง ขนาดภาพที่แนะนำ 720 720 แม้ไม่ใช่ขนาดที่แนะนำ ก็สามารถปรับขนาดใน unity ได้ผ่านการทดสอบ เลือกภาพที่นำเข้า แล้วเปลี่ยนเป็น inspector > texture type > sprite (2d and ui) หลังเปลี่ยน สามารถกด apply ด้านล่างเพื่อใช้งานการเปลี่ยนแปลงได้ เปลี่ยนค่า inspector > sprite renderer > sprite ของ sprite npc ให้เป็น sprite ที่นำเข้า หากต้องการเปลี่ยนขนาด npc ให้ลองเปลี่ยนค่า transform > scale > x, y สามารถกลับด้านภาพในแกน x, y ได้ด้วย inspector > sprite renderer > flip กด play เพื่อตรวจสอบว่า sprite npc ที่สร้างจากภาพคัสตอมแสดงผลได้ดีหรือไม่ หากต้องการปรับระยะการโต้ตอบกับ npc ให้เลือก 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 docid\ ibdp92a9dfdfjzdn61zw8 เคล็ดลับการสร้างโลก 2d แนะนำให้ล็อกพิกัด z ของแต่ละแผนที่ไว้ที่ค่าเริ่มต้น 100 แล้วปรับพิกัด x,y เพื่อจัดวาง หากแผนที่ซ้อนกันใน scene ในโหมดมัลติเพลย์ ผู้เล่นจากแผนที่อื่นอาจปรากฏบนหน้าจอได้ จึงจำเป็นต้องเว้น ระยะห่างระหว่างแผนที่ ตามตัวอย่างด้านล่าง สามารถใช้ภาพที่สร้างด้วย ai ได้ เมื่อต้องปล่อยบน zepeto studio โปรดระบุในคำอธิบายโลกว่าเป็นภาพ ai 💡 หากต้องการสร้างภาพ ai ที่ให้ความรู้สึกมีมิติของพื้นที่ ลองใช้พรอมป์ต์ต่อไปนี้ ฉากของ \[คอนเซ็ปต์พื้นที่] ด้วยองค์ประกอบภาพที่ให้ความรู้สึกกว้างและลึก มุมมองกล้องไหลนำสายตาเข้าสู่ด้านในของพื้นที่อย่างเป็นธรรมชาติ เน้นมุมมองระยะ (จุดรวมสายตา/vanishing point) ที่ทำให้สายตาไปรวมที่กึ่งกลางหรือจุดหนึ่ง สื่อความลึกของพื้นที่อย่างสมจริงผ่านแสงสะท้อนบนพื้น หมอกหรือแสงเป็นลำในอากาศ และความเปรียบต่างของเงา ผสานแสงที่มีมิติและพื้นผิววัสดุที่สมจริงให้บรรยากาศของพื้นที่ถ่ายทอดอย่างมีชีวิตชีวา องค์ประกอบแบบซีนีมาติกและแสงสมจริง รายละเอียดพื้นผิวคมชัด ความละเอียดสูง มุมมองลึก และเอฟเฟ็กต์โฟกัสที่เบลอด้านหน้า หลังอย่างเป็นธรรมชาติ ลองสร้างพื้นที่ของคุณเองแบบง่าย ๆ ด้วยการเพิ่มรูป เชื่อมต่อพอร์ทัล และ bgm เท่านั้น!

