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

เปิดตัว 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 ที่จะใช้ npc name ใส่ชื่อ npc ที่จะแสดงบนหน้าจอ dialogue id ใส่ dialogue id ที่จะใช้ dialogue id คือค่าระบุตัวตนเฉพาะของ dialogue ที่สร้างด้วย npc dialogue editor รายละเอียดเพิ่มเติมให้ดูส่วน ตั้งค่า npc 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 อื่น ๆ ตั้งค่า npc dialogue ด้วยการใช้ npc dialogue system ใหม่ คุณสามารถเพิ่ม npc ที่สนุกและมีชีวิตชีวายิ่งขึ้นในโลกของคุณเอง! นอกเหนือจากการสนทนาแบบตอบสั้นๆ แล้ว คุณสามารถใช้ ความต่อเนื่องของบทสนทนา โดยที่เรื่องราวจะดำเนินต่อไปตามตัวเลือกของผู้ใช้ และสร้างระบบบทสนทนาที่สมจริงซึ่งสื่อสารกับผู้ใช้ทั่วโลกผ่าน การรองรับหลายภาษา (localization) ระบบนี้ประกอบด้วยสามองค์ประกอบหลักเพื่อช่วยให้ครีเอเตอร์กำหนดค่าและปรับใช้บทสนทนาได้อย่างง่ายดาย dialogue editor , dialogue helper และ npc (zepetonpc component) 1\ การใช้ dialogue helper dialogue helper คือจุดควบคุมส่วนกลาง (central control point) ที่ช่วยสร้างบทสนทนาและกำหนด npc เลือก zepeto 2d > npc dialogue helper จากเมนูด้านบนเพื่อเปิดหน้าต่าง ฟิลด์ npc แสดง npc ที่เลือกอยู่ปัจจุบันใน scene จะอัปเดตอัตโนมัติหากคุณเลือก gameobject ที่มี zepetonpc component (หากไม่อัปเดตอัตโนมัติ ให้คลิก refresh ) ฟิลด์ dialogue แสดงบทสนทนาที่กำหนดอยู่ปัจจุบัน และเมื่อคลิก จะมีหน้าต่างตัวเลือกปรากฏขึ้นซึ่งคุณสามารถกำหนด asset บทสนทนา (node graph asset) ได้ ปุ่ม export แปลงและแยกข้อมูลเพื่อให้สามารถใช้ในรันไทม์โลก 2d ได้หลังจากตั้งค่าบทสนทนา คุณต้องคลิกปุ่มนี้หลังจากแก้ไข asset โฟลเดอร์ dialogue เปิดโฟลเดอร์ที่เก็บ asset บทสนทนาทั้งหมด create new สร้าง asset บทสนทนาใหม่ 2\ การใช้ dialogue graph editor (node editor) หากคุณคลิก create new ใน dialogue helper หรือเปิด asset บทสนทนา dialogue graph editor จะปรากฏขึ้น editor นี้เป็นเครื่องมือที่ให้คุณออกแบบโฟลว์บทสนทนาที่ซับซ้อนได้อย่างเป็นธรรมชาติผ่านการเชื่อมต่อ node แบบกราฟิก ประเภทโหนดหลัก (node) start node จุดเริ่มต้นของบทสนทนา (ต้องมีเพียง 1 โหนดต่อกราฟเท่านั้น) npc node โหนดหลักที่คุณจะใส่บทสนทนาของ npc และการตอบสนองของผู้เล่น (ตัวเลือก) what the npc says เขียนบทสนทนาที่ npc จะแสดงบนหน้าจอ answer options คุณสามารถเพิ่มคำตอบหลายรายการให้ผู้เล่นเลือกเพื่อสร้างการแยกย่อยของบทสนทนา (branching) end node ระบุจุดสิ้นสุดของบทสนทนา เมื่อผู้เล่นเลือกตัวเลือกที่เชื่อมต่อกับโหนดนี้ บทสนทนาจะจบลง การแก้ไขและเชื่อมต่อกราฟ คุณสามารถสร้างและเชื่อมต่อโหนดบนแคนวาสบทสนทนาได้ด้วยวิธีดังต่อไปนี้ คุณสามารถ คลิกขวา ที่พื้นที่ว่างบนแคนวาสเพื่อสร้างโหนดใหม่ ( create node ) หรือคัดลอกและลบโหนดที่มีอยู่ได้ ลากพอร์ต output ทางด้านขวาของตัวเลือก (answer options) และเชื่อมต่อไปยังพอร์ต input ของโหนดถัดไปเพื่อสร้างโฟลว์บทสนทนา (flow) ให้สมบูรณ์ tips คุณสามารถเลื่อนหน้าจอการนำทางได้ด้วยวิธีดังต่อไปนี้ ลากพร้อมกด เมาส์วีล (mouse wheel) ค้างไว้ ปุ่ม option (mac) / windows + คลิ๊กซ้ายเมาส์แล้วลาก การตั้งค่าการรองรับหลายภาษา (localization) การตั้งค่าในหน้าต่าง inspector คลิก asset บทสนทนาที่สร้างขึ้น (node graph asset) และดูที่หน้าต่าง inspector เพื่อทำเครื่องหมายภาษาที่จะรองรับ (english, korean, japanese ฯลฯ) การใช้ทูลบาร์ editor คุณสามารถพิมพ์ข้อความแปลที่เหมาะสมสำหรับแต่ละภาษาได้โดยตรงโดยเปลี่ยนภาษาผ่าน language selector ที่ด้านซ้ายบนของหน้าต่าง editor 3\ สร้าง npc dialogue ใหม่ สร้างบทสนทนา คลิก create new ในหน้าต่าง dialogue helper ใน dialogue editor ที่เปิดขึ้นโดยอัตโนมัติ ให้แก้ไขโหนด (บทสนทนา npc) และการตอบสนองของผู้เล่น (ตัวเลือก) ได้อย่างอิสระเพื่อกำหนดค่าโหนดบทสนทนา กำหนด npc คลิกอ็อบเจ็กต์ npc ที่จะเพิ่มบทสนทนาในหน้าต่าง hierarchy ตรวจสอบว่าอ็อบเจ็กต์นั้นมี zepetonpc component ในหน้าต่าง inspector หรือไม่ กำหนด npc ที่จะนำบทสนทนาไปใช้ในฟิลด์ 'npc' ใน npc dialogue helper กำหนดบทสนทนาและ export คลิก ฟิลด์ dialogue ใน dialogue helper และเชื่อมโยง asset บทสนทนาที่คุณเพิ่งสร้างขึ้น เมื่อใช้งานเสร็จแล้ว ให้คลิกปุ่ม export เพื่อให้สามารถทำงานในเกมได้ การตรวจสอบ inspector ขั้นสุดท้าย ตรวจสอบว่าการตั้งค่าในหน้าต่าง inspector ( zepetonpc component) ของ npc ถูกต้องหรือไม่ npc ยืนยันว่านี่คือ asset npc ที่ถูกต้อง dialogue id ตรวจสอบว่าสตริงของ dialogue id ตรงกับ asset บทสนทนาที่เลือก tips คุณสามารถนำ asset บทสนทนา npc เดิมกลับมาใช้กับ npc หลายตัวได้อย่างง่ายดาย เพื่อให้แน่ใจว่าการแก้ไขบทสนทนาของคุณจะแสดงในเกมจริงอย่างถูกต้อง โปรดทำการ export บ่อยๆ หลังจากแก้ไขบทสนทนา faq เมื่อบทสนทนาไม่ปรากฏบนหน้าจอ ตรวจสอบว่าคุณได้ทำการ export หรือไม่ และตรวจสอบว่าใส่ dialogue panel และ dialogue id อย่างถูกต้องใน inspector แล้ว เมื่อข้อมูล npc ไม่เปลี่ยนในทูล กดปุ่ม refresh ในหน้าต่าง dialogue helper หรือคลิก npc ใน hierarchy อีกครั้ง วาง 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 เท่านั้น!