การตั้งค่า 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
