---
title: การตั้งค่า UI Canvas
slug: world-sdk-guide-th/ui-canvas
docTags: 
createdAt: 2024-09-02T08:34:13.136Z
---

อุปกรณ์มือถือมีขนาดหน้าจอและความละเอียดที่แตกต่างกันมากมาย ใน ZEPETO World ใช้ Canvas ของ Unity เพื่อแสดงองค์ประกอบ UI ดังนั้น Unity จึงมีข้อจำกัดเดียวกัน

คู่มือนี้ให้การตั้งค่าที่เป็นกลางเพื่อแสดง UI ของคุณสำหรับอุปกรณ์ให้ได้มากที่สุดเท่าที่จะเป็นไปได้

ดังนั้น แม้ว่าจะไม่สามารถแสดง UI ที่พอดีกับอุปกรณ์มือถือทั้งหมดได้ แต่เรามุ่งหวังที่จะวางองค์ประกอบ UI ในตำแหน่งที่คล้ายกันบนอุปกรณ์ส่วนใหญ่



## การตั้งค่า Canvas ในโหมดหน้าจอแนวตั้ง

### 1. การตั้งค่า Canvas สำหรับโหมดหน้าจอแนวตั้งตั้งค่าไว้ดังนี้

- โหมดการปรับขนาด UI : ปรับขนาดตามขนาดหน้าจอ
- ความละเอียดอ้างอิง :
  - X : 750
  - Y : 1334
- โหมดการจับคู่หน้าจอ : จับคู่ความกว้างหรือความสูง
- จับคู่ความกว้าง

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ZFlryhQcXUh4gTfaiE5u5-20240904-102416.png)



### 2. การตั้งค่า SafeArea

- สร้างวัตถุที่เรียกว่า SafeArea เป็นลูกของวัตถุ Canvas.
- ในแผง Inspector ให้คลิกปุ่ม Add Component เพื่อเพิ่มส่วนประกอบ Zepeto Screen Safe Area.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-OyU_5I9sXjpl5jxbNc0Ok-20240904-102416.png)



:::hint{type="success"}
👍 **เคล็ดลับ**

- ส่วนประกอบ Zepeto Screen Safe Area จะย้าย UI ที่ถูกปกคลุมโดยพื้นที่ notch และแถบโฮมของอุปกรณ์บางรุ่นไปยังด้านในของหน้าจอในหน้าจอ IOS.
- วัตถุ UI ที่ได้รับผลกระทบจาก Zepeto Screen Safe Area สามารถรวมเป็นวัตถุย่อยได้.
:::



### 3. ตั้งค่าพื้นที่ปุ่มด้านขวาบน

ตั้งค่าพื้นที่ปุ่มด้านขวาบนให้จัดเรียงอัตโนมัติซ้ายและขวาเมื่อมีการเพิ่มองค์ประกอบเป็นวัตถุย่อยผ่าน Layout Group.

สร้างวัตถุใหม่ภายใต้ SafeArea และตั้งค่าส่วนประกอบต่อไปนี้.

- การแปลงรูปสี่เหลี่ยม
  - PosX : -22, PosY : -22
- กลุ่มเลย์เอาต์แนวนอน
  - ระยะห่าง: 20
  - การจัดตำแหน่งเด็ก: มุมซ้ายบน
- ตัวกรองขนาดเนื้อหา
  - การปรับขนาดแนวนอน: ขนาดที่ต้องการ

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-FVr0et_A3JH7USaiC-l_B-20240904-102416.png)

### 4. การตั้งค่าปุ่ม

สร้างวัตถุปุ่มเป็นลูกของพื้นที่ปุ่ม ปุ่มจะถูกจัดเรียงโดยอัตโนมัติและใช้การตั้งค่าต่อไปนี้

- ความกว้าง: 62
- ความสูง: 62

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-USjoq7mFO4edckCs0gaOV-20240904-102416.png)



### 5. ตรวจสอบบนอุปกรณ์

ตอนนี้ หากคุณสร้างโลกและตรวจสอบบนอุปกรณ์มือถือของคุณ คุณจะเห็นปุ่มที่ตั้งอยู่ในมุมขวาบนตามที่แสดงในภาพด้านล่าง

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Lf0dZIjOnPJiAi4QvDUh3-20240904-102416.png)



:::hint{type="danger"}
**❗️ ระวัง**
เนื่องจากปุ่มโฮมด้านซ้ายและปุ่มแชทเป็นปุ่มที่แสดงในสภาพแวดล้อมดั้งเดิมของแอป ZEPETO ตำแหน่งและขนาดที่แน่นอนจึงไม่สามารถจับคู่ได้ผ่าน Canvas.
:::



### 6. การตั้งค่า UI ด้านซ้ายบน

เพื่อที่จะตั้งค่าองค์ประกอบ UI ในพื้นที่ด้านซ้ายของหน้าจอ เพียงแค่ต้องมีการเปลี่ยนแปลงเล็กน้อยในพื้นที่ด้านขวาที่ตั้งค่าในขั้นตอนที่ 3 นี่คือการตั้งค่าที่คุณต้องเปลี่ยนแปลง.

- RectTransform
  - PosX : 22, PosY : -22
- Horizontal Layout Group
  - Spacing : 20
  - Child Alignment : Upper Left

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ZuK-BpUEXG0nU_nLzrKcE-20240904-102416.png)



## การตั้งค่าผ้าใบในโหมดหน้าจอแนวนอน

### 1. การตั้งค่าผ้าใบสำหรับโหมดแนวนอนตั้งค่าไว้ดังนี้

- โหมดการปรับขนาด UI : ปรับขนาดตามขนาดหน้าจอ
- ความละเอียดอ้างอิง : X : 750, Y : 1334
- โหมดการจับคู่หน้าจอ : จับคู่ความกว้างหรือความสูง
- จับคู่ความกว้าง

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-nG2aSDm9HzlM1FOSI8cyX-20240904-102416.png)



### 2. การตั้งค่า SafeArea

- สร้างวัตถุที่เรียกว่า SafeArea เป็นลูกของวัตถุ Canvas
- ในแผง Inspector ให้คลิกปุ่ม Add Component เพื่อเพิ่มส่วนประกอบ Zepeto Screen Safe Area

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-HiNfF_Bn0Omu3JeIbhI1J-20240904-102416.png)



:::hint{type="success"}
👍 **เคล็ดลับ**

- ส่วนประกอบ 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

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-_v6ORyeXdGmpYhLtf_ZQc-20240904-102416.png)



### 4. การตั้งค่าปุ่ม

สร้างวัตถุปุ่มเป็นลูกของพื้นที่ปุ่ม ปุ่มจะถูกจัดเรียงโดยอัตโนมัติและใช้การตั้งค่าต่อไปนี้

- ความกว้าง : 62
- ความสูง : 62

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-umScbu67uGqBtFiAZwaIe-20240904-102417.png)



### 5. ตรวจสอบบนอุปกรณ์

ตอนนี้ หากคุณสร้างโลกและตรวจสอบบนอุปกรณ์มือถือของคุณ คุณจะเห็นปุ่มที่ตั้งอยู่ในมุมขวาบนตามที่แสดงในภาพด้านล่างนี้

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ceRMQJHGYDBaIfc_DXYzx-20240904-102417.png)



:::hint{type="danger"}
**❗️ ระวัง**
เนื่องจากปุ่มกลับบ้านด้านซ้ายและปุ่มแชทเป็นปุ่มที่แสดงในสภาพแวดล้อมดั้งเดิมของแอป ZEPETO ตำแหน่งและขนาดที่แน่นอนจึงไม่สามารถจับคู่ได้ผ่าน Canvas.
:::



### 6. การตั้งค่า UI ด้านซ้ายบน

เพื่อที่จะตั้งค่าองค์ประกอบ UI ในพื้นที่ด้านซ้ายของหน้าจอ จำเป็นต้องมีการเปลี่ยนแปลงเพียงเล็กน้อยในพื้นที่ด้านขวาที่ตั้งไว้ในขั้นตอนที่ 3 นี่คือการตั้งค่าที่คุณต้องเปลี่ยน.

- RectTransform
  - PosX : 22, PosY : -22
- Horizontal Layout Group
  - Spacing : 20
  - Child Alignment : Upper Left

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-cYsJ6I-t3zbFYGkmdKmCF-20240904-102417.png)