การตั้งค่า UI Canvas

อุปกรณ์มือถือมีขนาดหน้าจอและความละเอียดที่แตกต่างกันมากมาย ใน zepeto world ใช้ canvas ของ unity เพื่อแสดงองค์ประกอบ ui ดังนั้น unity จึงมีข้อจำกัดเดียวกัน คู่มือนี้ให้การตั้งค่าที่เป็นกลางเพื่อแสดง ui ของคุณสำหรับอุปกรณ์ให้ได้มากที่สุดเท่าที่จะเป็นไปได้ ดังนั้น แม้ว่าจะไม่สามารถแสดง ui ที่พอดีกับอุปกรณ์มือถือทั้งหมดได้ แต่เรามุ่งหวังที่จะวางองค์ประกอบ ui ในตำแหน่งที่คล้ายกันบนอุปกรณ์ส่วนใหญ่ การตั้งค่า canvas ในโหมดหน้าจอแนวตั้ง 1\ การตั้งค่า canvas สำหรับโหมดหน้าจอแนวตั้งตั้งค่าไว้ดังนี้ โหมดการปรับขนาด ui ปรับขนาดตามขนาดหน้าจอ ความละเอียดอ้างอิง x 750 y 1334 โหมดการจับคู่หน้าจอ จับคู่ความกว้างหรือความสูง จับคู่ความกว้าง 2\ การตั้งค่า safearea สร้างวัตถุที่เรียกว่า safearea เป็นลูกของวัตถุ canvas ในแผง inspector ให้คลิกปุ่ม add component เพื่อเพิ่มส่วนประกอบ zepeto screen safe area 👍 เคล็ดลับ ส่วนประกอบ zepeto screen safe area จะย้าย ui ที่ถูกปกคลุมโดยพื้นที่ notch และแถบโฮมของอุปกรณ์บางรุ่นไปยังด้านในของหน้าจอในหน้าจอ ios วัตถุ ui ที่ได้รับผลกระทบจาก zepeto screen safe area สามารถรวมเป็นวัตถุย่อยได้ 3\ ตั้งค่าพื้นที่ปุ่มด้านขวาบน ตั้งค่าพื้นที่ปุ่มด้านขวาบนให้จัดเรียงอัตโนมัติซ้ายและขวาเมื่อมีการเพิ่มองค์ประกอบเป็นวัตถุย่อยผ่าน layout group สร้างวัตถุใหม่ภายใต้ safearea และตั้งค่าส่วนประกอบต่อไปนี้ การแปลงรูปสี่เหลี่ยม posx 22, posy 22 กลุ่มเลย์เอาต์แนวนอน ระยะห่าง 20 การจัดตำแหน่งเด็ก มุมซ้ายบน ตัวกรองขนาดเนื้อหา การปรับขนาดแนวนอน ขนาดที่ต้องการ 4\ การตั้งค่าปุ่ม สร้างวัตถุปุ่มเป็นลูกของพื้นที่ปุ่ม ปุ่มจะถูกจัดเรียงโดยอัตโนมัติและใช้การตั้งค่าต่อไปนี้ ความกว้าง 62 ความสูง 62 5\ ตรวจสอบบนอุปกรณ์ ตอนนี้ หากคุณสร้างโลกและตรวจสอบบนอุปกรณ์มือถือของคุณ คุณจะเห็นปุ่มที่ตั้งอยู่ในมุมขวาบนตามที่แสดงในภาพด้านล่าง ❗️ ระวัง เนื่องจากปุ่มโฮมด้านซ้ายและปุ่มแชทเป็นปุ่มที่แสดงในสภาพแวดล้อมดั้งเดิมของแอป zepeto ตำแหน่งและขนาดที่แน่นอนจึงไม่สามารถจับคู่ได้ผ่าน canvas 6\ การตั้งค่า ui ด้านซ้ายบน เพื่อที่จะตั้งค่าองค์ประกอบ ui ในพื้นที่ด้านซ้ายของหน้าจอ เพียงแค่ต้องมีการเปลี่ยนแปลงเล็กน้อยในพื้นที่ด้านขวาที่ตั้งค่าในขั้นตอนที่ 3 นี่คือการตั้งค่าที่คุณต้องเปลี่ยนแปลง recttransform posx 22, posy 22 horizontal layout group spacing 20 child alignment upper left การตั้งค่าผ้าใบในโหมดหน้าจอแนวนอน 1\ การตั้งค่าผ้าใบสำหรับโหมดแนวนอนตั้งค่าไว้ดังนี้ โหมดการปรับขนาด ui ปรับขนาดตามขนาดหน้าจอ ความละเอียดอ้างอิง x 750, y 1334 โหมดการจับคู่หน้าจอ จับคู่ความกว้างหรือความสูง จับคู่ความกว้าง 2\ การตั้งค่า safearea สร้างวัตถุที่เรียกว่า safearea เป็นลูกของวัตถุ canvas ในแผง inspector ให้คลิกปุ่ม add component เพื่อเพิ่มส่วนประกอบ zepeto screen safe area 👍 เคล็ดลับ ส่วนประกอบ zepeto screen safe area จะย้าย ui ที่ถูกปกคลุมโดยพื้นที่ notch และแถบโฮมของอุปกรณ์บางรุ่นไปยังด้านในของหน้าจอในหน้าจอ ios วัตถุ ui ที่ได้รับผลกระทบจาก zepeto screen safe area สามารถรวมเป็นวัตถุย่อยได้ 3\ ตั้งค่าพื้นที่ปุ่มด้านขวาบน ตั้งค่าพื้นที่ปุ่มด้านขวาบนให้จัดเรียงอัตโนมัติซ้ายและขวาเมื่อมีการเพิ่มองค์ประกอบเป็นวัตถุย่อยผ่าน layout group สร้างวัตถุใหม่ภายใต้ safearea และตั้งค่าชิ้นส่วนต่อไปนี้ rect transform posx 22, posy 22 horizontal layout group spacing 20 child alignment upper left content size filter horizontal fit preferred size 4\ การตั้งค่าปุ่ม สร้างวัตถุปุ่มเป็นลูกของพื้นที่ปุ่ม ปุ่มจะถูกจัดเรียงโดยอัตโนมัติและใช้การตั้งค่าต่อไปนี้ ความกว้าง 62 ความสูง 62 5\ ตรวจสอบบนอุปกรณ์ ตอนนี้ หากคุณสร้างโลกและตรวจสอบบนอุปกรณ์มือถือของคุณ คุณจะเห็นปุ่มที่ตั้งอยู่ในมุมขวาบนตามที่แสดงในภาพด้านล่างนี้ ❗️ ระวัง เนื่องจากปุ่มกลับบ้านด้านซ้ายและปุ่มแชทเป็นปุ่มที่แสดงในสภาพแวดล้อมดั้งเดิมของแอป zepeto ตำแหน่งและขนาดที่แน่นอนจึงไม่สามารถจับคู่ได้ผ่าน canvas 6\ การตั้งค่า ui ด้านซ้ายบน เพื่อที่จะตั้งค่าองค์ประกอบ ui ในพื้นที่ด้านซ้ายของหน้าจอ จำเป็นต้องมีการเปลี่ยนแปลงเพียงเล็กน้อยในพื้นที่ด้านขวาที่ตั้งไว้ในขั้นตอนที่ 3 นี่คือการตั้งค่าที่คุณต้องเปลี่ยน recttransform posx 22, posy 22 horizontal layout group spacing 20 child alignment upper left