Canvas
Komponen Visual

Tata letak dasar

Di bagian ini kita akan melihat bagaimana Anda dapat memposisikan elemen UI relatif terhadap Kanvas dan satu sama lain. Jika Anda ingin menguji diri Anda saat membaca, Anda dapat membuat Gambar menggunakan menu GameObject -> UI -> Image.

Alat Rect

Setiap elemen UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary
diwakili sebagai persegi panjang untuk keperluan tata letak. Sudut persegi panjang ini dapat dimanipulasi dalam tampilan SceneAdegan berisi lingkungan dan menu permainan Anda. Pikirkan setiap file Adegan unik sebagai tingkat yang unik. Di setiap Adegan, Anda menempatkan lingkungan, hambatan, dan dekorasi, pada dasarnya merancang dan membangun permainan Anda dalam potongan-potongan. More info
Lihat di Glossary
menggunakan Rect Tool di toolbarSe baris tombol dan kontrol dasar di bagian atas Editor Unity yang memungkinkan Anda untuk berinteraksi dengan Editor dengan berbagai cara (misalnya scaling, terjemahan). More info
Lihat di Glossary
. Alat Rect digunakan baik untuk fitur 2D Unity dan untuk UI, dan pada kenyataannya dapat digunakan bahkan untuk 3D objectsPermainan 3D Objek seperti kubus, terrain atau ragdoll. More info
Lihat di Glossary
juga.

Toolbar buttons with Rect Tool selected
Tombol Toolbar dengan Alat Rect dipilih

Login Alat dapat digunakan untuk memindahkan, mengubah ukuran dan memutar elemen UI. Setelah Anda memilih elemen UI, Anda dapat memindahkannya dengan mengklik di mana saja di dalam persegi panjang dan menyeret. Anda dapat mengubah ukuran dengan mengklik tepi atau sudut dan menyeret. Elemen dapat diputar dengan menyelamkan kursor sedikit dari sudut sampai kursor mouse terlihat seperti simbol rotasi. Anda kemudian dapat mengklik dan menyeret ke arah untuk memutar.

Sama seperti alat lain, Alat Rect menggunakan mode dan ruang pivot saat ini, set di bilah alat. Ketika bekerja dengan UI biasanya ide yang baik untuk menjaga mereka tetap set ke Pivot dan Local.

Toolbar buttons set to Pivot and Local
Tombol Toolbar diatur ke Pivot dan Lokal

Rect Transform

Rect Transform adalah transform componentKomponen Transform menentukan Posisi, Rotasi, dan Skala setiap objek di tempat kejadian. Setiap GameObject memiliki Transform. More info
Lihat di Glossary
baru yang digunakan untuk semua elemen UI bukan komponen Transform biasa.

Ret Transforms memiliki posisi, rotasi, dan skala seperti Transforms biasa, tetapi juga memiliki lebar dan tinggi, digunakan untuk menentukan dimensi persegi panjang.

Resizing Versus Scaling

Ketika Alat Rect digunakan untuk mengubah ukuran objek, biasanya untuk SpritesObjek grafis 2D. Jika Anda digunakan untuk bekerja di 3D, Sprites pada dasarnya hanya tekstur standar tetapi ada teknik khusus untuk menggabungkan dan mengelola tekstur sprite untuk efisiensi dan kenyamanan selama perkembangan. More info
Lihat di Glossary
dalam sistem 2D dan untuk objek 3D itu akan mengubah scale lokal dari objek. Namun, ketika digunakan pada sebuah objek dengan Transformator Rect di atasnya, itu akan mengubah lebar dan tinggi, menjaga skala lokal tidak berubah. Resizing ini tidak akan mempengaruhi ukuran font atau perbatasan pada gambar irisan.

Pivot

Rotasi, ukuran, dan modifikasi skala terjadi di sekitar pivot sehingga posisi pivot mempengaruhi hasil rotasi, resizing, atau scaling. Ketika tombol toolbar Pivot diatur ke mode Pivot, pivot dari Transform Rect dapat dipindahkan dalam Scene ViewTampilan interaktif ke dunia yang Anda buat. Anda menggunakan Adegan Lihat untuk memilih dan posisi pemandangan, karakter, kamera, lampu, dan semua jenis lain dari Game Object. More info
Lihat di Glossary
.

Anchors

Perubahan termasuk konsep tata letak yang disebut anchors. Jangkar ditampilkan sebagai empat pegangan segitiga kecil di Tampilan Adegan dan informasi jangkar juga ditunjukkan pada InspectorJendela Unity yang menampilkan informasi tentang Pengaturan GameObject yang dipilih saat ini, aset atau proyek, memungkinkan Anda untuk memeriksa dan mengedit nilai. More info
Lihat di Glossary
.

Jika orang tua dari Transformator Rect juga Transformator Rect, Transform anak dapat ditunda ke Transformator Ret induk dalam berbagai cara. Sebagai contoh, anak dapat jangkar ke pusat orang tua, atau ke salah satu sudut.

UI element anchored to the center of the parent. The element maintains a fixed offset to the center.
Elemen UI yang ditunda ke pusat induk. Elemen mempertahankan offset tetap ke pusat.
UI element anchored to the lower right corner of the parent. The element maintains a fixed offset to the lower right corner.
Elemen UI yang ditunda ke sudut kanan yang lebih rendah dari orang tua. Elemen mempertahankan offset tetap ke sudut kanan bawah.

Anchoring juga memungkinkan anak untuk meregangkan bersama dengan lebar atau tinggi orang tua. Setiap sudut persegi panjang memiliki offset tetap ke jangkar yang sesuai, yaitu sudut kiri atas persegi panjang memiliki offset tetap ke jangkar kiri atas, dll. Cara ini sudut-sudut yang berbeda dari persegi panjang dapat jangkar ke titik yang berbeda dalam persegi panjang induk.

UI element with left corners anchored to lower left corner of the parent and right corners anchored to lower right. The corners of the element maintains fixed offsets to their respective anchors.
Elemen UI dengan sudut kiri yang ditunda ke sudut kiri bawah dari sudut induk dan kanan yang ditunda ke kanan bawah. Sudut elemen mempertahankan offset tetap ke jangkar masing-masing.

Posisi jangkar didefinisikan dalam frak (atau persentase) dari lebar persegi panjang induk dan tinggi. 0,0 (0%) sesuai dengan sisi kiri atau bawah, 0,5 (50%) ke tengah, dan 1,0 (100%) ke sisi kanan atau atas. Tapi jangkar tidak terbatas pada sisi dan tengah; mereka dapat jangkar ke setiap titik dalam persegi panjang induk.

UI element with left corners anchored to a point a certain percentage from the left side of the parent and right corners anchored to a point a certain percentage from the right side of the parent rectangle.
Elemen UI dengan sudut kiri yang ditunda ke titik persentase tertentu dari sisi kiri dari sudut induk dan kanan yang ditunda ke titik persentase tertentu dari sisi kanan persegi panjang induk.

Anda dapat menyeret setiap jangkar secara individual, atau jika mereka bersama-sama, Anda dapat menyeret mereka bersama dengan mengklik di tengah di antara mereka dan menyeret. Jika Anda memegang kunci Shift sambil menyeret jangkar, sudut yang sesuai dari persegi panjang akan bergerak bersama dengan jangkar.

Fitur yang berguna dari pegangan jangkar adalah bahwa mereka secara otomatis terkunci ke jangkar sibling persegi panjang untuk memungkinkan untuk posisi yang tepat.

Anchor presets

Dalam Inspektur, tombol Anchor Preset dapat ditemukan di sudut kiri atas komponen Transform Rect. Mengklik tombol membawa dropdown Anchor Presets. Dari sini Anda dapat memilih dari beberapa pilihan jangkar yang paling umum. Anda dapat menunda elemen UI ke sisi atau tengah induk, atau membentang bersama dengan ukuran induk. Jangkar horisontal dan vertikal independen.

Tombol Anchor Presets menampilkan opsi preset yang dipilih saat ini jika ada satu. Jika jangkar pada sumbu horizontal atau vertikal diatur ke posisi yang berbeda dari setiap preset, opsi kustom ditunjukkan.

Bidang jangkar dan posisi dalam Inspektur

Anda dapat mengklik panah ekspansi Jangkar untuk mengungkapkan kolom nomor jangkar jika tidak terlihat. Anchor Min sesuai dengan pegangan jangkar kiri bawah di Tampilan Adegan, dan Anchor Max sesuai dengan pegangan kanan atas.

Bidang posisi persegi panjang ditunjukkan berbeda tergantung pada apakah jangkar bersama (yang menghasilkan lebar tetap dan tinggi) atau dipisahkan (yang menyebabkan persegi panjang untuk membentang bersama dengan persegi panjang induk).

Ketika semua pegangan jangkar bersama-sama bidang yang ditampilkan Pos X, Pos Y, Lebar, dan Tinggi. Nilai Pos X dan Pos Y menunjukkan posisi kerabat pivot ke jangkar.

Ketika jangkar dipisahkan bidang dapat berubah sebagian atau sepenuhnya ke Kiri, Kanan, Atas, dan Bawah. Bidang ini mendefinisikan bantalan di dalam persegi panjang yang ditentukan oleh jangkar. Bidang kiri dan kanan digunakan jika jangkar dipisahkan secara horizontal dan kolom atas dan bawah digunakan jika mereka dipisahkan secara vertikal.

Perhatikan bahwa mengubah nilai-nilai di bidang jangkar atau pivot biasanya akan mengatur ulang nilai posisi untuk membuat persegi panjang tinggal di tempat. Dalam kasus di mana ini tidak diinginkan, aktifkan Raw edit mode dengan mengklik tombol R di Inspektur. Hal ini menyebabkan nilai jangkar dan pivot untuk dapat diubah tanpa nilai lain berubah sebagai hasilnya. Ini kemungkinan akan menyebabkan persegi panjang untuk secara visual dipindahkan atau diubah, karena posisi dan ukurannya tergantung pada nilai jangkar dan pivot.

Canvas
Komponen Visual