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

เปิดตัว 2d world ที่ช่วยให้คุณสร้างโลกได้เร็วและง่ายยิ่งขึ้น เพียงแค่มีรูปภาพพื้นหลังของคุณเองและการเชื่อมต่อพอร์ทัล ก็สามารถสร้างและปล่อยโลกได้อย่างรวดเร็วและง่ายดาย สามารถติดตั้งแพ็กเกจ 2d world ในโปรเจกต์ปลั๊กอิน unity buildit เดิมเพื่อใช้งานได้เลย! วิธีการใช้งาน ใน unity hub ให้เลือกโฟลเดอร์ปลั๊กอิน buildit แล้วกดปุ่ม open 📘 note หากเป็นครั้งแรก ให้ทำตาม 1 การติดตั้ง 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 ป้อน zepeto id บัญชีที่คุณต้องการใช้งาน npc name ป้อนชื่อ npc ที่จะแสดงบนหน้าจอ dialogue id ป้อน dialogue id ที่จะใช้งาน dialogue id คือค่าเฉพาะ (unique value) ของบทสนทนาที่ถูกสร้างขึ้นจากเครื่องมือ npc dialogue editor 📘 note สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่าบทสนทนา โปรดดูที่ ตั้งค่า npc dialogue docid\ ylnxtavpconh4aewamm7b การเพิ่ม 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 ตัวอื่นๆ 📘 note สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่าบทสนทนา โปรดดูที่ ตั้งค่า npc dialogue docid\ ylnxtavpconh4aewamm7b วาง 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 ทดสอบโลกของคุณ docid\ ibdp92a9dfdfjzdn61zw8 เคล็ดลับการสร้างโลก 2d แนะนำให้ล็อกพิกัด z ของแต่ละแผนที่ไว้ที่ค่าเริ่มต้น 100 แล้วปรับพิกัด x,y เพื่อจัดวาง หากแผนที่ซ้อนกันใน scene ในโหมดมัลติเพลย์ ผู้เล่นจากแผนที่อื่นอาจปรากฏบนหน้าจอได้ จึงจำเป็นต้องเว้น ระยะห่างระหว่างแผนที่ ตามตัวอย่างด้านล่าง สามารถใช้ภาพที่สร้างด้วย ai ได้ เมื่อต้องปล่อยบน zepeto studio โปรดระบุในคำอธิบายโลกว่าเป็นภาพ ai 💡 หากต้องการสร้างภาพ ai ที่ให้ความรู้สึกมีมิติของพื้นที่ ลองใช้พรอมป์ต์ต่อไปนี้ ฉากของ \[คอนเซ็ปต์พื้นที่] ด้วยองค์ประกอบภาพที่ให้ความรู้สึกกว้างและลึก มุมมองกล้องไหลนำสายตาเข้าสู่ด้านในของพื้นที่อย่างเป็นธรรมชาติ เน้นมุมมองระยะ (จุดรวมสายตา/vanishing point) ที่ทำให้สายตาไปรวมที่กึ่งกลางหรือจุดหนึ่ง สื่อความลึกของพื้นที่อย่างสมจริงผ่านแสงสะท้อนบนพื้น หมอกหรือแสงเป็นลำในอากาศ และความเปรียบต่างของเงา ผสานแสงที่มีมิติและพื้นผิววัสดุที่สมจริงให้บรรยากาศของพื้นที่ถ่ายทอดอย่างมีชีวิตชีวา องค์ประกอบแบบซีนีมาติกและแสงสมจริง รายละเอียดพื้นผิวคมชัด ความละเอียดสูง มุมมองลึก และเอฟเฟ็กต์โฟกัสที่เบลอด้านหน้า หลังอย่างเป็นธรรมชาติ ลองสร้างพื้นที่ของคุณเองแบบง่าย ๆ ด้วยการเพิ่มรูป เชื่อมต่อพอร์ทัล และ bgm เท่านั้น!