Tombol Interaktif

*Konten ini diterjemahkan menggunakan AI (Beta) dan mungkin mengandung kesalahan. Untuk melihat halaman ini dalam bahasa Inggris, klik di sini.

Tutorial ini menunjukkan cara membuat tombol pada layar untuk menu, tindakan antarmuka, dan banyak lagi.

Jenis Tombol

Ada dua jenis objek tombol yang dapat Anda gunakan dalam desain UI Anda:

Tombol Teks

Tombol Gambar

Sebuah TextButton mirip dengan sebuah TextLabel kecuali bahwa pemain dapat mengaktifkannya dengan klik/tap. Ini juga berbagi banyak property visual yang sama — font, warna latar belakang, warna pensil, dll.

Class.ImageButton seperti versi interaktif dari objek ImageLabel. Ini juga berbagi sebagian besar dari proporsi kecocokan tombol yang sama.

Membuat Tombol

Langkah-langkah berikut menunjukkan cara menambahkan ImageButton ke layar dan membaliknya di antara tiga penampilan tergantung pada interaksi pemain.

  1. Di jendela Explorer, hover over the StarterGui object, click the + button, dan insert a ScreenGui .

  2. Pilih objek ScreenGui baru dan, dengan cara yang mirip, sisipkan Button Gambar .

    Ini akan menambahkan tombol gambar kosong ke sudut pandang game.

  3. Sebagai praktik terbaik, ganti nama tombol baru sesuai tujuannya, misalnya Tombol Peta .

Ukuran

Untuk menyesuaikan ukuran tombol secara dinamis di berbagai perangkat dan layar, disarankan menggunakan Scale properti.

  1. Di jendela Properti , temukan Ukuran properti dan klik panah untuk mengekspansi pohonnya.

  2. Tetapkan proporsi ukuran berikut:

  3. Konstrain tombol ke kotak batas persegi dengan menetapkan Batas Ukuran untuk Relative YY .

Skalabilitas

Ukuran saat ini seharusnya bekerja dengan baik di ponsel, tetapi skala X/Y dari 0,15 (15%) mungkin terlihat terlalu besar di layar komputer. Untuk memperbaikinya, Anda dapat menambahkan UISizeConstraint .

  1. Hover over the Tombol Peta object and insert a Batas UISize .

  2. Pilih objek batas ukuran baru dan tetapkan MaxSize propinya ke 90, 90 .

Posisi

Tombol seharusnya umumnya diangkat dalam jangkauan jempol seorang pemain di perangkat seluler, misalnya area bawah kanan layar.

  1. Ubah AnchorPoint property button menjadi 0.5, 1 sehingga posisi akan didasarkan di sekitar posisinya yang tengah bawah.

  2. Buat pohon Posisi tombol dan tetapkan nilai propperti berikut. Ini akan menyesuaikan tombol terdekat dengan tombol lompat default yang muncul di telepon/tablet.

Gambar

Tombol ini memerlukan tiga gambar kustom - tampilannya normal di layar, penampilanhover-over, dan gambar terakhir untuk saat pemain menekannya.

Biasa

Hover.

Ditekan

Mengatur penampilan ini dapat dilakukan melalui Gambar, HoverImage, dan DitekanGambar属性.

  1. Temukan property Gambar tombol dan tempaste di rbxassetid://6025368017 , atau gunakan aset Anda sendiri .

  2. Untuk HoverImage property, paste in rbxassetid://6025452347 .

  3. Untuk Tekan gambar yang diputar properti, pasta di rbxassetid://6025454897 .

Estetika

Untuk menyelesaikan tampilan tombol di layar, lakukan penyesuaian berikut:

  1. Tetapkan Transparansi Latar Belakang ke nilai 1 untuk membuat latar belakang transparan.

  2. Putar tombol sedikit dengan menetapkan Rotasi ke -5 .

Fungsi Tombol

Tugas terakhir adalah menghubungkan fungsionalitas tombol dasar.

  1. Di jendela Explorer, hover over the Tombol Peta object and insert a Skrip Lokal .

  2. Dalam script, salin dan tempaste di baris-baris baru ini:

    local button = script.Parent

    

    local function onButtonActivated()

    	print("Button activated!")

    	-- Lakukan actiontombol yang diharapkan (s) di sini

    end

    

    button.Activated:Connect(onButtonActivated)

Skrip tombol sederhana ini bekerja sebagai berikut:

  • Baris pertama mengatur tombol variabel yang memberi tahu skrip mana objek spesifik yang terkait. Dalam hal ini, itu terkait dengan ImageButton, orang tua dari script.
  • Fungsi onButtonActivated menangani aktivasi tombol. Di dalamnya, Anda harus melakukan tindakan yang diinginkan seperti membuka menu utama game.
  • Baris terakhir menghubungkan tombol ke fungsi onButtonActivated dengan acara Activated. Ini akan menyebabkan fungsi berjalan setiap kali seorang pemain mengaktifkan tombol di game.

Menyelesaikan Masalah

Jika tombol tidak berfungsi seperti yang diharapkan, periksa mengikuti:

  • Pastikan Anda menggunakan LocalScript , bukan Script server.
  • Pastikan bahwa LocalScript adalah anak langsung dari objek tombol (bukan anak dari Class.ScreenGui kontainer).
  • Konfirmasi bahwa property button Anda Gambar , HoverImage , dan Tekan Image di set ke aset gambar yang sesuai.