Mengatur Kanvas UI
Perangkat mobile hadir dalam berbagai ukuran dan resolusi layar. Di ZEPETO World, Canvas Unity digunakan untuk mengekspresikan elemen UI, jadi Unity memiliki batasan yang sama.
Panduan berikut memberikan pengaturan netral untuk menyajikan UI Anda untuk sebanyak mungkin perangkat.
Oleh karena itu, meskipun tidak mungkin untuk mengekspresikan UI yang pas persis di semua perangkat mobile, kami bertujuan untuk menempatkan elemen UI di posisi yang serupa di sebagian besar perangkat.
- Mode Skala UI : Skala Dengan Ukuran Layar
- Resolusi Referensi :
- X : 750
- Y : 1334
- Mode Pencocokan Layar : Pencocokan Lebar Atau Tinggi
- Pencocokan Lebar
- Buat objek bernama SafeArea sebagai anak dari objek Canvas.
- Di panel Inspector, klik tombol Tambah Komponen untuk menambahkan komponen Zepeto Screen Safe Area.
👍 Tips
- Komponen Zepeto Screen Safe Area memindahkan UI yang tertutup oleh area notch dan home bar dari terminal tertentu ke dalam layar pada layar IOS.
- Objek UI yang dipengaruhi oleh Zepeto Screen Safe Area dapat dimasukkan sebagai sub-objek.
Atur area tombol di kanan atas untuk secara otomatis menyelaraskan kiri dan kanan setiap kali elemen ditambahkan sebagai sub-objek melalui Layout Group.
Buat objek baru di bawah SafeArea dan atur komponen berikut.
- Transform Rect
- PosX : -22, PosY : -22
- Grup Tata Letak Horizontal
- Jarak: 20
- Penyelarasan Anak: Kiri Atas
- Filter Ukuran Konten
- Kesesuaian Horizontal: Ukuran yang Diinginkan
Buat objek Tombol sebagai anak dari area tombol. Tombol secara otomatis diselaraskan dan menerapkan pengaturan berikut.
- Lebar: 62
- Tinggi: 62
Sekarang, jika Anda membangun dunia dan memeriksanya di perangkat seluler Anda, Anda akan melihat tombol yang terletak di sudut kanan atas seperti yang ditunjukkan pada gambar berikut.
❗️ Peringatan Karena tombol rumah kiri dan tombol obrolan adalah tombol yang ditampilkan di lingkungan asli aplikasi ZEPETO, lokasi dan ukuran yang tepat tidak dapat dicocokkan melalui Canvas.
Untuk mengatur elemen UI di area kiri layar, hanya diperlukan beberapa perubahan di area kanan yang diatur di Langkah-3. Berikut adalah pengaturan yang perlu Anda ubah.
- RectTransform
- PosX : 22, PosY : -22
- Horizontal Layout Group
- Spacing : 20
- Child Alignment : Atas Kiri
- Mode Skala UI : Skala Dengan Ukuran Layar
- Resolusi Referensi : X : 750, Y : 1334
- Mode Pencocokan Layar : Pencocokan Lebar Atau Tinggi
- Pencocokan Lebar
- Buat objek bernama SafeArea sebagai anak dari objek Kanvas.
- Di panel Inspector, klik tombol Tambah Komponen untuk menambahkan komponen Zepeto Screen Safe Area.
👍 Tips
- Komponen Zepeto Screen Safe Area memindahkan UI yang tertutup oleh area notch dan home bar dari terminal tertentu ke dalam layar pada layar IOS.
- Objek UI yang dipengaruhi oleh Zepeto Screen Safe Area dapat dimasukkan sebagai sub-objek.
Atur area tombol di kanan atas untuk secara otomatis menyelaraskan kiri dan kanan setiap kali elemen ditambahkan sebagai sub-objek melalui Layout Group.
Buat objek baru di bawah SafeArea dan atur komponen berikut.
- Rect Transform
- PosX : -22, PosY : -22
- Horizontal Layout Group
- Spacing: 20
- Child Alignment : Upper Left
- Content Size Filter
- Horizontal Fit : Preferred Size
Buat objek Tombol sebagai anak dari area tombol. Tombol secara otomatis disejajarkan dan menerapkan pengaturan berikut.
- Lebar : 62
- Tinggi : 62
Sekarang, jika Anda membangun dunia dan memeriksanya di perangkat seluler Anda, Anda akan melihat tombol yang terletak di sudut kanan atas seperti yang ditunjukkan pada gambar berikut.
❗️ Peringatan Karena tombol rumah kiri dan tombol obrolan adalah tombol yang ditampilkan di lingkungan asli aplikasi ZEPETO, lokasi dan ukuran yang tepat tidak dapat dicocokkan melalui Canvas.
Untuk mengatur elemen UI di area kiri layar, hanya beberapa perubahan di area kanan yang diatur di Langkah-3 yang diperlukan. Berikut adalah pengaturan yang perlu Anda ubah.
- RectTransform
- PosX : 22, PosY : -22
- Horizontal Layout Group
- Spacing : 20
- Child Alignment : Atas Kiri
