`CanvasGroup` merenderkan keturunan sebagai kelompok dengan warna dan transparansi
 diterapkan pada hasil render. Modifikasi visual `Class.UIComponent` seperti
 `Class.UICorner` dan `Class.UIGradient` di bawah `CanvasGroup` juga akan diterapkan
 ke seluruh kelompok. Perlu dicatat bahwa `CanvasGroup` selalu memiliki
 `Class.GuiObject.ClipsDescendants|ClipsDescendants` diatur ke `true` dan semua
descendants akan dirender dalam viewport kelompok.

#### Catatan Penting

- Keturunan dari `CanvasGroup` akan dirender sebagai tekstur datar hanya
  ketika nenek moyangnya `Class.LayerCollector` memiliki
  `Class.LayerCollector.ZIndexBehavior|ZIndexBehavior` diatur ke
  `Enum.ZIndexBehavior.Sibling`.
- `CanvasGroup` mengkonsumsi memori tekstur ekstra. Kualitas tekstur dan
  total penggunaan memori dibatasi oleh `Enum.QualityLevel` dari klien. Ketika
  melebihi batas memori, `CanvasGroup` akan merender sebagai tekstur kosong.
- Disarankan untuk menggunakan `CanvasGroup` dengan ukuran statis, jika tidak akan
  diperlukan untuk membuat tekstur baru untuk menyesuaikan ukuran baru.


CanvasGroup

Pewarnaan yang diterapkan pada semua keturunan.

CanvasGroup.GroupColor3

Transparansi yang diterapkan pada semua keturunan.

CanvasGroup.GroupTransparency

Menggabungkan keturunan sebagai sebuah grup dengan warna/transparansi.

`Class.GuiObject` adalah kelas abstrak (seperti `Class.BasePart`) untuk objek
antarmuka pengguna 2D. Ini mendefinisikan semua properti yang terkait dengan
penampilan objek antarmuka pengguna grafis (GUI) seperti
`Class.GuiObject.Size|Size` dan `Class.GuiObject.Position|Position`. Ia juga
tidak memiliki beberapa properti hanya baca yang berguna seperti
`Class.GuiObject.AbsolutePosition|AbsolutePosition`, `Class.GuiObject.AbsoluteSize|AbsoluteSize`,
dan `Class.GuiObject.AbsoluteRotation|AbsoluteRotation`.

Untuk memanipulasi tata letak objek GUI dengan cara khusus, Anda
bisa menggunakan struktur tata letak seperti [list/flex](/ui/list-flex-layouts) atau
[grid](/ui/grid-table-layouts), dan Anda dapat menata mereka melampaui
properti inti mereka melalui
[modifikator penampilan](/ui/appearance-modifiers).

Meskipun mungkin untuk mendeteksi peristiwa tombol mouse pada objek GUI
mana pun menggunakan `Class.GuiObject.InputBegan|InputBegan` dan
`Class.GuiObject.InputEnded|InputEnded`, hanya `Class.ImageButton` dan
`Class.TextButton` yang memiliki peristiwa khusus yang nyaman seperti
`Class.TextButton.Activated|Activated` untuk mendeteksi klik/tekan.

Contoh di bawah ini mengasumsikan berada di dalam GuiObject seperti `TextButton`, dan
bahwa properti `Class.GuiObject.Draggable` diatur ke true. Ini akan mencetak
UDim2 dari tempat pemain mulai menarik objek.

Peristiwa ini ditrigger saat pemain mulai menarik objek.

Lihat juga `Class.GuiObject.DragStopped`.

GuiObject.DragBegin

initialPosition

Sebuah nilai `Datatype.UDim2` dari posisi `Class.GuiObject`
sebelum operasi seret dimulai.

Ditrigger saat pemain mulai menarik objek.

Contoh di bawah ini mengasumsikan ada dalam sebuah GuiObject seperti `TextButton`, dan
bahwa properti `Class.GuiObject.Draggable` diatur ke true. Ini akan mencetak
X dan Y di mana pemain berhenti menyeret GUI. Misalnya, jika pemain
berhenti menyeret objek pada 189, 180, maka di bawah ini akan mencetak Pemain
berhenti menyeret GuiObject di (189, 180)

Peristiwa ini ditrigger saat pemain berhenti menarik objek.

Lihat juga `Class.GuiObject.DragBegin`.

GuiObject.DragStopped

Lokasi **X** layar mouse dalam piksel, relatif terhadap sudut kiri atas
layar.

Lokasi **Y** layar mouse dalam piksel, relatif terhadap sudut kiri atas
layar.

Ditrigger saat pemain berhenti menarik objek.

Contoh berikut menunjukkan salah satu dari banyak contoh penggunaan untuk menangani input pengguna
input dari InputBegan tergantung pada tipe-nya.

Agar ini berfungsi seperti yang diharapkan, itu harus ditempatkan dalam `LocalScript`
dan sebagai anak dari _gui_.


Peristiwa ini ditrigger saat pengguna mulai berinteraksi dengan `Class.GuiObject`
melalui perangkat Antarmuka Manusia-Komputer (Tombol mouse ditekan, sentuhan mulai,
tombol keyboard ditekan, dll).

`Class.UserInputService` memiliki peristiwa dengan nama serupa yang tidak
terbatas pada elemen UI tertentu: `Class.UserInputService.InputBegan`.

Peristiwa ini akan selalu ditrigger terlepas dari status permainan.

Lihat juga `Class.GuiObject.InputEnded` dan `Class.GuiObject.InputChanged`.

GuiObject.InputBegan

input

Sebuah `Class.InputObject`, yang berisi data berguna untuk mengquery input pengguna
seperti `Enum.UserInputType|jenis input`,
`Enum.UserInputState|status input`, dan
`Class.InputObject.Position|koordinat layar dari input`.

Ditrigger saat pengguna mulai berinteraksi melalui perangkat Antarmuka Manusia-Komputer
(Tombol mouse ditekan, sentuhan mulai, tombol keyboard ditekan, dll).

Contoh berikut menunjukkan salah satu dari banyak contoh penggunaan dalam menangani
input pengguna dari InputChanged tergantung pada jenisnya.

Agar ini berfungsi seperti yang diharapkan, ini harus ditempatkan dalam `LocalScript`
dan sebagai anak dari _gui_.

Peristiwa ini ditrigger saat pengguna mengubah cara mereka berinteraksi melalui perangkat
Antarmuka Manusia-Komputer (Tombol mouse ditekan, sentuhan mulai, tombol keyboard ditekan, dll).

`Class.UserInputService` memiliki peristiwa dengan nama serupa yang tidak
terbatas pada elemen UI tertentu:
`Class.UserInputService.InputChanged`.

Peristiwa ini akan selalu ditrigger terlepas dari status permainan.

Lihat juga `Class.GuiObject.InputBegan` dan `Class.GuiObject.InputEnded`.

GuiObject.InputChanged

Ditrigger saat pengguna mengubah cara mereka berinteraksi melalui perangkat Antarmuka Manusia-Komputer
(Tombol mouse ditekan, sentuhan mulai, tombol keyboard ditekan, dll).

Contoh berikut menunjukkan salah satu dari banyak contoh penggunaan mengelola input pengguna
berasal dari InputEnded tergantung pada jenisnya.

Agar ini berfungsi seperti yang diharapkan, ia harus diletakkan dalam `LocalScript`
dan menjadi anak dari _gui_.

Peristiwa InputEnded ditrigger saat pengguna berhenti berinteraksi melalui
perangkat Antarmuka Manusia-Komputer (Tombol mouse ditekan, sentuhan mulai, tombol
keyboard ditekan, dll).

`Class.UserInputService` memiliki peristiwa dengan nama serupa yang tidak
terbatas pada elemen UI tertentu: `Class.UserInputService.InputEnded`.

Peristiwa ini akan selalu ditrigger terlepas dari status permainan.

Lihat juga `Class.GuiObject.InputBegan` dan `Class.GuiObject.InputChanged`.

GuiObject.InputEnded

Sebuah `Class.InputObject`, yang berisi data berguna untuk mengquery input pengguna
seperti `Enum.UserInputType`, `Enum.UserInputState`, dan
`Class.InputObject.Position`.

Ditrigger saat pengguna berhenti berinteraksi melalui perangkat Antarmuka Manusia-Komputer
(Tombol mouse ditekan, sentuhan mulai, tombol keyboard ditekan, dll).

Contoh berikut mencetak lokasi mouse, dalam piksel, ketika mouse memasuki elemen GUI.

Peristiwa MouseEnter ditrigger saat pengguna memindahkan mouse mereka ke
`Class.GuiObject` elemen.

Silakan jangan mengandalkan argumen `x` dan `y` yang diteruskan oleh peristiwa ini sebagai cara
yang tidak dapat ditolak untuk menentukan di mana posisi mouse pengguna saat
masuk dalam GUI. Koordinat ini bisa bervariasi meskipun mouse masuk GUI melalui
tepi yang sama - terutama saat mouse masuk elemen dengan cepat. Ini
berasal dari fakta bahwa koordinat tersebut menunjukkan posisi mouse saat
peristiwa dipicu daripada saat pasti mouse masuk GUI.

Peristiwa ini ditrigger bahkan ketika elemen GUI dirender di bawah elemen lain.

Jika Anda ingin melacak saat mouse pengguna meninggalkan elemen GUI,
Anda dapat menggunakan peristiwa `Class.GuiObject.MouseLeave`.

##### Lihat Juga

- `Class.GuiObject.MouseLeave`
- `Class.GuiObject.MouseMoved`
- `Class.GuiObject.MouseWheelForward`
- `Class.GuiObject.MouseWheelBackward`

GuiObject.MouseEnter

Koordinat layar **X** mouse dalam piksel, relatif terhadap sudut kiri
atas layar.

Koordinat layar **Y** mouse dalam piksel, relatif terhadap sudut kiri
atas layar.

Ditrigger saat pengguna memindahkan mouse mereka ke dalam elemen GUI.

Peristiwa MouseLeave ditrigger saat pengguna memindahkan mouse mereka keluar dari
`Class.GuiObject` elemen.

Silakan jangan mengandalkan argumen `x` dan `y` yang diteruskan oleh peristiwa ini sebagai cara
yang tidak dapat ditolak untuk menentukan di mana posisi mouse pengguna saat
keluar dari GUI. Koordinat ini bisa bervariasi meskipun mouse meninggalkan elemen GUI melalui
tepi yang sama - terutama saat mouse keluar elemen dengan cepat. Ini
berasal dari fakta bahwa koordinat tersebut menunjukkan posisi mouse saat
peristiwa dipicu daripada saat pasti mouse meninggalkan GUI.

Peristiwa ini ditrigger bahkan ketika elemen GUI dirender di bawah elemen lain.

##### Lihat Juga

- `Class.GuiObject.MouseEnter`
- `Class.GuiObject.MouseMoved`
- `Class.GuiObject.MouseWheelForward`
- `Class.GuiObject.MouseWheelBackward`

GuiObject.MouseLeave

Ditrigger saat pengguna memindahkan mouse mereka keluar dari elemen GUI.

Ditrigger setiap kali pengguna memindahkan mouse mereka saat berada di dalam
`Class.GuiObject` elemen. Ini mirip dengan `Class.Mouse.Move`, yang
terpicu terlepas dari apakah mouse pengguna berada di atas elemen GUI.

Perhatikan, peristiwa ini akan dipicu saat posisi mouse diperbarui, sehingga
ini akan dipicu berulang kali saat sedang dipindahkan.

Argumen `x` dan `y` menunjukkan koordinat layar dari
mouse pengguna dalam piksel. Ini bisa berguna untuk menentukan lokasi mouse
pada GUI, layar, dan delta sejak posisi sebelumnya dari mouse
jika ada yang dilacak dalam variabel global.

Kode di bawah ini menunjukkan bagaimana menentukan offset `Datatype.Vector2`
dari mouse pengguna relatif terhadap elemen GUI:

```lua
local Players = game:GetService("Players")

local CustomScrollingFrame = script.Parent
local SubFrame = CustomScrollingFrame:FindFirstChild("SubFrame")

local mouse = Players.LocalPlayer:GetMouse()

local function getPosition(X, Y)
	local gui_X = CustomScrollingFrame.AbsolutePosition.X
	local gui_Y = CustomScrollingFrame.AbsolutePosition.Y

	local pos = Vector2.new(math.abs(X - gui_X), math.abs(Y - gui_Y - 36))
	print(pos)
end

CustomScrollingFrame.MouseMoved:Connect(getPosition)
```
Catatan bahwa peristiwa ini mungkin tidak dipicu persis saat mouse pengguna
masuk atau keluar dari elemen GUI. Oleh karena itu, argumen `x` dan `y`
mungkin tidak akan cocok dengan sempurna pada koordinat tepi GUI.

##### Lihat Juga

- `Class.GuiObject.MouseEnter`
- `Class.GuiObject.MouseLeave`
- `Class.GuiObject.MouseWheelForward`
- `Class.GuiObject.MouseWheelBackward`

GuiObject.MouseMoved

Ditrigger setiap kali pengguna memindahkan mouse mereka saat berada di dalam elemen GUI.

Peristiwa WheelBackward ditrigger saat pengguna menggulir roda mouse mundur
saat mouse berada di atas elemen `Class.GuiObject`. Ini mirip dengan
`Class.Mouse.WheelBackward`, yang dipicu terlepas dari apakah mouse pengguna
berada di atas elemen GUI.

Peristiwa ini dipicu hanya sebagai indikator pergerakan mundur roda.
Ini berarti bahwa argumen koordinat mouse **x** dan **y** tidak berubah
sebagai akibat dari peristiwa ini. Koordinat ini hanya berubah ketika mouse
bergerak, yang bisa dilacak oleh peristiwa `Class.GuiObject.MouseMoved`.

##### Lihat Juga

- `Class.GuiObject.MouseEnter`
- `Class.GuiObject.MouseLeave`
- `Class.GuiObject.MouseMoved`
- `Class.GuiObject.MouseWheelForward`

GuiObject.MouseWheelBackward

Ditrigger saat pengguna menggulir roda mouse mereka mundur saat mouse berada di atas
elemen GUI.

Peristiwa WheelForward ditrigger saat pengguna menggulir roda mouse maju
saat mouse berada di atas elemen `Class.GuiObject`. Ini mirip dengan
`Class.Mouse.WheelForward`, yang dipicu terlepas dari apakah mouse pengguna
berada di atas elemen GUI.

Peristiwa ini dipicu hanya sebagai indikator pergerakan maju roda.
Ini berarti bahwa argumen koordinat mouse **X** dan **Y** tidak
berubah akibat dari peristiwa ini. Koordinat ini hanya berubah ketika mouse
bergerak, yang dapat dilacak oleh peristiwa `Class.GuiObject.MouseMoved`.

##### Lihat Juga

- `Class.GuiObject.MouseEnter`
- `Class.GuiObject.MouseLeave`
- `Class.GuiObject.MouseMoved`
- `Class.GuiObject.MouseWheelBackward`

GuiObject.MouseWheelForward

Ditrigger saat pengguna menggulir roda mouse mereka maju saat mouse berada di atas
sebuah elemen GUI.

Contoh berikut mencetak pesan ketika pengguna memilih objek dengan
controller game.

Agar ini berfungsi seperti yang diharapkan, ia harus ditempatkan dalam `LocalScript`
dan menjadi anak dari _gui_.

Peristiwa ini ditrigger saat pemilih Gamepad mulai fokus pada
`Class.GuiObject`.

Jika Anda ingin memeriksa dari pemilih Gamepad berhenti fokus pada elemen GUI,
Anda bisa menggunakan peristiwa `Class.GuiObject.SelectionLost`.

Ketika sebuah GUI mendapatkan fokus pemilihan, nilai dari
`Class.GuiService.SelectedObject|SelectedObject` juga berubah ke
elemen yang menerima fokus pemilihan. Untuk menentukan GUI mana yang mendapatkan pemilihan,
periksa nilai dari properti ini.

GuiObject.SelectionGained

Ditrigger saat GuiObject mendapat fokus dengan pemilih Gamepad.

Contoh berikut mencetak pesan ketika elemen kehilangan fokus pada
sebuah gamepad.

Agar ini berfungsi sesuai harapan, harus ditempatkan dalam `LocalScript`
dan menjadi anak dari _gui_.

Peristiwa ini ditrigger saat pemilih Gamepad berhenti fokus pada
`Class.GuiObject`.

Jika Anda ingin memeriksa dari pemilih Gamepad mulai fokus pada elemen GUI,
Anda bisa menggunakan peristiwa `Class.GuiObject.SelectionGained`.

Ketika sebuah GUI kehilangan fokus pemilihan, nilai dari
`Class.GuiService.SelectionObject|SelectionObject` properti berubah baik
ke `nil` atau ke elemen GUI yang mendapatkan fokus pemilihan. Untuk menentukan
GUI mana yang mendapatkan pemilihan, atau jika tidak ada GUI yang dipilih, periksa nilai dari
properti ini.

GuiObject.SelectionLost

Ditrigger saat pemilih Gamepad berhenti fokus pada GuiObject.

Contoh kode ini memungkinkan pemain untuk memanipulasi posisi layar dari beberapa
elemen UI, seperti `Frame`, dengan menekan elemen UI tersebut selama beberapa
saat. Kemudian, pemain menggerakkan jari mereka dan melepaskan. Selama
gerakan tersebut, Frame berwarna biru dengan garis luar putih.

Acara ini terjadi setelah sesaat ketika pemain menekan jari mereka
pada elemen UI menggunakan perangkat yang mendukung sentuhan. Acara ini terjadi dengan tabel
`Datatype.Vector2` yang menggambarkan posisi layar relatif dari
jari yang terlibat dalam gestur. Selain itu, acara ini terjadi beberapa kali:
`Enum.UserInputState.Begin` setelah penundaan singkat,
`Enum.UserInputState.Change` jika pemain menggerakkan jari mereka saat
melakukan gestur, dan akhirnya `Enum.UserInputState.End`. Penundaan ini bergantung pada platform;
di Studio, itu sedikit lebih dari satu detik.

GuiObject.TouchLongPress

touchPositions

Sebuah array dari `Datatype.Vector2` yang menggambarkan posisi **relatif**
dari jari yang terlibat dalam gerakan.

state

Sebuah `Enum.UserInputState` yang menggambarkan status dari gerakan:

- Begin dipicu sekali di awal gerakan (setelah penundaan singkat)
- Change dipicu jika pemain menggerakkan jari mereka saat ditekan
- End dipicu sekali di akhir gerakan saat mereka melepaskan
  jari mereka.

Ditrigger saat pemain mulai, melanjutkan, dan berhenti menekan lama elemen UI.

Contoh kode ini dimaksudkan untuk ditempatkan dalam `LocalScript` di dalam
`Frame` yang berada di dalam `Frame` luar, atau `GuiObject` lainnya. Ini memungkinkan
pemain untuk memanipulasi posisi frame dalam dengan menggerakkan jari mereka pada
frame luar.

Acara ini terjadi ketika pemain menggerakkan jari mereka pada elemen UI
menggunakan perangkat yang mendukung sentuhan. Acara ini terjadi sedikit sebelum
`Class.GuiObject.TouchSwipe` terjadi, dan tidak terjadi dengan
`Class.GuiObject.TouchTap`. Acara ini berguna untuk memungkinkan pemain
manipulasi posisi elemen UI di layar.

Acara ini terjadi dengan tabel `Datatype.Vector2` yang menggambarkan
posisi layar relatif dari jari yang terlibat dalam gestur. Selain itu,
acara ini terjadi beberapa kali: `Enum.UserInputState.Begin` setelah
penundaan singkat, `Enum.UserInputState.Change` ketika pemain menggerakkan jari mereka
selama gestur, dan akhirnya dengan `Enum.UserInputState.End`.

GuiObject.TouchPan

Sebuah array Luau dari objek `Datatype.Vector2`, masing-masing menunjukkan posisi dari
semua jari yang terlibat dalam gerakan.

totalTranslation

Menunjukkan seberapa jauh gerakan panning berlangsung dari titik awalnya.

velocity

Indikasi seberapa cepat gerakan dilakukan di setiap dimensi.

Menunjukkan `Enum.UserInputState` dari gerakan.

Ditrigger saat pemain memindahkan jari mereka pada elemen UI.

Contoh kode ini ditujukan untuk `LocalScript` dalam `Frame` internal yang berada
di dalam `Frame` luar, atau objek `GuiObject` lainnya. Ini memungkinkan pemain untuk
mengubah ukuran frame dalam dengan melakukan gestur `Class.GuiObject.TouchPinch` pada
frame luar.

Acara ini terjadi ketika pemain menggunakan dua jari untuk membuat gestur pinch atau pull
pada elemen UI menggunakan perangkat yang mendukung sentuhan. **Pinch**
terjadi ketika dua atau lebih jari bergerak lebih dekat satu sama lain, dan **pull**
terjadi ketika mereka bergerak terpisah. Acara ini terjadi bersamaan dengan
`Class.GuiObject.TouchPan`. Acara ini berguna untuk memungkinkan pemain
manipulasi skala (ukuran) elemen UI di layar, dan paling sering
digunakan untuk fitur zoom.

Acara ini terjadi dengan tabel `Datatype.Vector2` yang menggambarkan
posisi layar relatif dari jari yang terlibat dalam gestur. Selain itu,
acara ini terjadi beberapa kali: `Enum.UserInputState.Begin` setelah
penundaan singkat, `Enum.UserInputState.Change` ketika pemain menggerakkan sebuah jari
durante gestur, dan akhirnya dengan `Enum.UserInputState.End`. Harus
dicatat bahwa skala harus digunakan **secara multiplicative**.

GuiObject.TouchPinch

Sebuah array Luau dari objek `Datatype.Vector2`, masing-masing menunjukkan posisi dari
semua jari yang terlibat dalam gerakan mencubit.

scale

Sebuah float yang menunjukkan perbedaan dari awal
gerakan mencubit.

Sebuah float yang menunjukkan seberapa cepat gerakan mencubit berlangsung.

Ditrigger saat pemain melakukan gerakan mencubit atau menarik menggunakan dua jari
pada elemen UI.

Contoh kode ini ditujukan untuk `LocalScript` di dalam `Frame` yang
terletak di dalam `Frame` luar, atau objek `GuiObject` lainnya. Ini memungkinkan pemain untuk memutar
frame dalam dengan melakukan gerakan `Class.GuiObject.TouchRotate` pada
frame luar.

Acara ini terjadi ketika pemain menggunakan dua jari untuk membuat gestur pinch atau pull
pada elemen UI menggunakan perangkat yang mendukung sentuhan. Rotasi terjadi
ketika sudut garis antara dua jari berubah. Acara ini terjadi
bersamaan dengan `Class.GuiObject.TouchPan`. Acara ini berguna untuk
memungkinkan pemain manipulasikan rotasi elemen UI di
layar.

Acara ini terjadi dengan tabel `Datatype.Vector2` yang menggambarkan
posisi layar relatif dari jari yang terlibat dalam gestur. Selain itu,
acara ini terjadi beberapa kali: `Enum.UserInputState.Begin` setelah
penundaan singkat, `Enum.UserInputState.Change` ketika pemain menggerakkan sebuah jari
selama gestur, dan akhirnya dengan `Enum.UserInputState.End`.

GuiObject.TouchRotate

Sebuah array Luau dari objek `Datatype.Vector2`, masing-masing menunjukkan posisi semua jari yang terlibat dalam gerakan.

rotation

Sebuah float yang menunjukkan seberapa banyak rotasi telah terjadi dari awal gerakan.

Sebuah float yang menunjukkan seberapa cepat gerakan dilakukan.

Ditembak saat pemain melakukan gerakan rotasi menggunakan dua jari pada elemen UI.

Contoh kode ini akan menyebabkan `Frame` (atau `GuiObject` lainnya) melambung ketika
gesture gesek dilakukan pada perangkat yang mendukung sentuhan (atau emulator Studio).
Gesekan horizontal akan mengubah hue dari
`Class.GuiObject.BackgroundColor3`, sementara gesekan vertikal akan mengubah
saturasinya.

Acara ini terjadi ketika pemain melakukan gestur swipe pada elemen UI
menggunakan perangkat yang mendukung sentuhan. Acara ini terjadi dengan arah
gestur (Atas, Bawah, Kiri atau Kanan) dan jumlah titik sentuh yang terlibat
dalam gestur. Gestur swipe sering digunakan untuk mengubah tab di UI mobile.

GuiObject.TouchSwipe

swipeDirection

Sebuah `Enum.SwipeDirection` yang menunjukkan arah gerakan sapuan (Atas, Bawah, Kiri atau Kanan).

numberOfTouches

Jumlah titik sentuh yang terlibat dalam gerakan (biasanya 1).

Ditembak saat pemain melakukan gerakan sapuan pada elemen UI.

Contoh kode ini akan mengubah `Class.GuiObject.BackgroundTransparency` dari sebuah
elemen UI, seperti `Frame`, saat diketuk pada perangkat yang mendukung sentuhan.

Acara ini terjadi ketika pemain melakukan gestur tap pada elemen UI
menggunakan perangkat yang mendukung sentuhan. Tap adalah sentuhan cepat
singkat tanpa ada pergerakan yang terlibat (tekanan yang lebih lama akan
menghasilkan `Class.GuiObject.TouchLongPress`, dan bergerak selama sentuhan akan
menghasilkan `Class.GuiObject.TouchPan` dan/atau `Class.GuiObject.TouchSwipe`). Acara ini terjadi
Dengan tabel objek `Datatype.Vector2` yang menggambarkan posisi relatif
dari jari yang terlibat dalam gestur.

GuiObject.TouchTap

Sebuah array dari `Datatype.Vector2` yang menggambarkan posisi **relatif** dari jari-jari yang terlibat dalam gerakan.

Ditembak saat pemain melakukan gerakan ketukan pada elemen UI.

Contoh kode ini menunjukkan penggunaan TweenPosition yang lebih terlibat dengan
deteksi ketika tween selesai/yang dibatalkan dengan mendefinisikan fungsi callback. Ini
juga mencetak apakah tween akan diputar.

Memindahkan GUI dengan mulus ke posisi `Datatype.UDim2` baru dalam waktu yang ditentukan
menggunakan `Enum.EasingDirection` dan `Enum.EasingStyle` yang ditentukan.

Fungsi ini akan mengembalikan apakah tween akan bermain. Itu tidak akan bermain jika
ada tween lain yang sedang bertindak pada `Class.GuiObject` dan parameter override
adalah `false`.

Lihat juga `Class.GuiObject:TweenSize()` dan
`Class.GuiObject:TweenSizeAndPosition()`.

GuiObject:TweenPosition

endPosition

easingDirection

Arah mana yang harus memudahkan GUI ke _endPosition_.

easingStyle

Gaya di mana untuk memudahkan GUI ke _endPosition_.

time

Berapa lama, dalam detik, tween harus diselesaikan.

override

Apakah tween akan mengganti tween yang sedang berlangsung.

callback

Fungsi callback untuk dieksekusi ketika tween selesai.

Memindahkan GUI dengan mulus ke `Datatype.UDim2` baru.

Contoh kode ini menunjukkan penggunaan `Class.GuiObject:TweenSize()`
fungsi. Ini memulai animasi pada properti `Class.GuiObject.Size`
induk ke `UDim2.new(0.5, 0, 0.5, 0)`, yang merupakan setengah dari
ukuran `GuiObject` di kedua sumbu.

Selain itu, ini menunjukkan bagaimana parameter callback dapat digunakan
tuk mendeteksi kapan tween berhenti (apakah itu dibatalkan oleh tween lain
aatau selesai).

Mengubah ukuran `Class.GuiObject` dengan mulus menjadi `Datatype.UDim2` baru dalam waktu yang ditentukan
menggunakan `Enum.EasingDirection` dan `Enum.EasingStyle` yang ditentukan.

Fungsi ini akan mengembalikan apakah tween akan bermain. Biasanya ini akan
selalu mengembalikan `true`, tetapi akan mengembalikan `false` jika tween lain sedang
aktif dan override diatur ke `false`.

Lihat juga `Class.GuiObject:TweenSize()` dan
`Class.GuiObject:TweenSizeAndPosition()`.

GuiObject:TweenSize

endSize

Arah mana yang harus memudahkan GUI ke _endSize_.

Gaya di mana untuk memudahkan GUI ke _endSize_.

Mengubah ukuran `Class.GuiObject` dengan mulus menjadi `Datatype.UDim2` baru.

Contoh di bawah ini akan tween sebuah `Class.Frame` ke pojok kiri atas ukuran orang tua
 dan mengubah ukuran menjadi 0.

Mengubah ukuran dan memindahkan GUI ke ukuran dan posisi baru `Datatype.UDim2` dengan
mulus dalam waktu yang ditentukan menggunakan `Enum.EasingDirection` dan
`Enum.EasingStyle` yang ditentukan.

Fungsi ini akan mengembalikan apakah tween akan bermain. Biasanya ini akan
selalu mengembalikan `true`, tetapi akan mengembalikan `false` jika tween lain yang sedang
aktif dan override diatur ke `false`.

Lihat juga `Class.GuiObject:TweenSize()` dan
`Class.GuiObject:TweenSizeAndPosition()`.

GuiObject:TweenSizeAndPosition

Arah mana yang harus memudahkan GUI ke _endSize_ dan
_endPosition_.

Gaya di mana untuk memudahkan GUI ke _endSize_ dan _endPosition_.

Memindahkan sebuah GUI ke ukuran dan posisi baru dengan mulus.

GuiObject

Contoh kode ini menunjukkan penggunaan properti Aktif sebagai debounce
untuk acara Diaktifkan.

Properti ini menentukan apakah `Class.GuiObject` akan menyerap input ke
ruang 3D, seperti model bawah dengan kelas `Class.ClickDetector`
seperti `Class.DragDetector`.

Untuk objek `Class.GuiButton` (`Class.ImageButton` dan
`Class.TextButton`), properti ini menentukan apakah
`Class.GuiButton.Activated|Activated` akan terpicu
(`Class.GuiButton.AutoButtonColor|AutoButtonColor` masih akan bekerja pada
mereka juga). Peristiwa `Class.GuiObject.InputBegan|InputBegan`,
`Class.GuiObject.InputChanged|InputChanged`, dan
`Class.GuiObject.InputEnded|InputEnded` bekerja seperti biasa terlepas dari
nilai properti ini.

GuiObject.Active

Menentukan apakah elemen UI ini menyerap input.

Contoh kode ini memindahkan elemen UI ke sisi yang berbeda dari elemen induk.
Dimulai dari kiri atas dan berakhir di kanan bawah. Tempelkan ke dalam
LocalScript di dalam Frame, dalam ScreenGui.

Properti ini menentukan titik asal dari `Class.GuiObject`, relatif
terhadap ukurannya yang absolut. Titik asal menentukan dari mana elemen
diposisikan (melalui `Class.GuiObject.Position`) dan dari mana
`Class.GuiObject.Size` yang dirender meluas.

Lihat [di sini](/ui/position-and-size#anchorpoint) untuk diagram
ilustrasi dan detail.

GuiObject.AnchorPoint

Menentukan titik asal dari `Class.GuiObject`, relatif terhadap
ukuran absolutnya.

Skrip berikut membuat sebuah frame induk dengan ukuran otomatis dengan
a`UIListLayout`, kemudian menyisipkan beberapa objek `TextLabel`
yang ukurannya otomatis. Perhatikan bagaimana `UIListLayout` induk secara otomatis
diubah ukurannya untuk menyesuaikan konten anaknya dan label-label
secara otomatis menyesuaikan ukuran untuk konten teksnya.
Skrip ini dapat diparentasi ke `ScreenGui`.

Properti ini digunakan untuk secara otomatis mengukur objek UI induk berdasarkan
ukuran keturunannya. Anda dapat menggunakan properti ini untuk menambahkan teks
secara dinamis dan konten lain ke objek UI pada waktu edit atau run time,
dan ukurannya akan disesuaikan untuk menampung konten tersebut.

Ketika `Class.GuiObject.AutomaticSize|AutomaticSize` diatur ke
nilai `Enum.AutomaticSize` apa pun selain
`Enum.AutomaticSize|None`, objek UI ini dapat mengubah ukuran tergantung pada
konten anaknya.

Untuk informasi lebih lanjut tentang cara menggunakan properti ini dan cara kerja, silakan
lihat [di sini](/ui/size-modifiers#automatic-sizing).

GuiObject.AutomaticSize

Menentukan apakah perubahan ukuran terjadi berdasarkan konten anak.

Menentukan warna latar belakang `Class.GuiObject`.

GuiObject.BackgroundColor

Contoh kode ini membuat Frame induk berputar melalui semua warna pelangi menggunakan Color3.fromHSV.

Properti ini menentukan warna latar belakang objek `Class.GuiObject` (warna isi).
Jika elemen Anda berisi teks, seperti `Class.TextBox`, `Class.TextButton`,
atau `Class.TextLabel`, pastikan warna latar belakang Anda kontras dengan warna teks.

Properti lain yang menentukan sifat visual dari latar belakang adalah
`Class.GuiObject.BackgroundTransparency`; jika ini diatur ke `1`,
tidak ada latar belakang atau border yang akan dirender.

Lihat juga `Class.GuiObject.BorderColor3|BorderColor3`.

GuiObject.BackgroundColor3

Properti ini menentukan transparansi latar belakang dan border dari `Class.GuiObject`.
Namun, ini tidak menentukan transparansi teks jika GUI adalah `Class.TextBox`,
`Class.TextButton`, atau `Class.TextLabel`; transparansi teks ditentukan
`Class.TextBox.TextTransparency`, `Class.TextButton.TextTransparency`, dan
`Class.TextLabel.TextTransparency` masing-masing.

Jika properti ini diatur ke `1`, tidak ada latar belakang atau border yang akan
render dan latar belakang GUI akan sepenuhnya transparan.

GuiObject.BackgroundTransparency

Menentukan transparansi latar belakang dan border `Class.GuiObject`.

Menentukan warna border `Class.GuiObject`.

GuiObject.BorderColor

Contoh kode ini membuat batas dari GuiObject induk menjadi sorot saat pengguna mengarahkan mouse mereka ke elemen tersebut.

Menentukan warna border persegi panjang `Class.GuiObject` (juga
dikenal sebagai warna stroke). Ini terpisah dari `Class.GuiObject.BackgroundColor3`.
Anda tidak akan bisa melihat border objek jika properti
`Class.GuiObject.BorderSizePixel` diatur ke `0`.

Catatan bahwa komponen `Class.UIStroke` memungkinkan efek border yang lebih
canggih.

GuiObject.BorderColor3

Properti ini menentukan cara border `Class.GuiObject` disusun relatif terhadap dimensinya
dengan menggunakan enum dengan nama yang sama,
`Enum.BorderMode`.

Catatan bahwa `Class.UIStroke` dapat mengoverride properti ini dan memungkinkan efek
border yang lebih canggih.

GuiObject.BorderMode

Menentukan cara border `Class.GuiObject` disusun
relatif terhadap dimensinya.

Properti ini menentukan seberapa lebar border `Class.GuiObject` dirender,
dalam piksel. Mengatur ini ke 0 menonaktifkan border sepenuhnya.

Catatan bahwa `Class.UIStroke` dapat mengoverride properti ini dan memungkinkan efek
border yang lebih canggih.

GuiObject.BorderSizePixel

Menentukan lebar pixel border `Class.GuiObject`.

Properti ini menentukan apakah `Class.GuiObject` akan memotong (membuat
tidak terlihat) bagian mana pun dari elemen GUI keturunan yang seharusnya
render di luar batas persegi panjang.

Catatan bahwa `Class.GuiObject.Rotation|Rotation` tidak didukung oleh
properti ini. Jika ini atau elemen GUI nenek moyang memiliki
`Class.GuiObject.Rotation|Rotation` **tidak nol**, properti ini **diabaikan** dan
mudah-mudahan GUI keturunan akan dirender terlepas dari
nilai properti ini.

GuiObject.ClipsDescendants

Menentukan apakah keturunan `Class.GuiObject|GuiObjects` di luar
batas elemen GUI induk harus dirender.

Ini menunjukkan apakah `Class.GuiObject` (dan keturunannya) dapat
seret di sekitar layar.

GuiObject.Draggable

Menentukan apakah `Class.GuiObject` (dan keturunannya) dapat
seret di sekitar layar.

Ketika jari pemain ditekan dan dipegang pada
`Class.GuiObject`, `Class.GuiObject.GuiState|GuiState` dari
`Class.GuiObject` akan diatur ke `Enum.GuiState.Press|Press`. Demikian pula,
Ketika jari pemain dirilis dari `Class.GuiObject`, `Class.GuiObject.GuiState|GuiState` dari `Class.GuiObject` akan diatur
to `Enum.GuiState.Idle|Idle`, dan ketika
`Class.GuiObject.Interactable|Interactable` dimatikan pada
`Class.GuiObject`, `Class.GuiState` dari `Class.GuiObject` akan diatur
to `Enum.GuiState.NonInteractable|NonInteractable`.

GuiObject.GuiState

Menentukan apakah mouse pemain sedang aktif ditekan pada
`Class.GuiObject` atau tidak.

GuiObject.InputSink

Menentukan apakah `Class.GuiButton` dapat diinteraksi atau tidak, atau
apakah `Enum.GuiState|GuiState` dari `Class.GuiObject` sedang berubah atau
tidak.

Pada `Class.GuiButton`:

- Ketika pengaturan `Class.GuiObject.Interactable|Interactable` pada
  `Class.GuiButton` diatur ke `false`, `Class.GuiButton` tidak akan
  dapat ditekan atau diklik, dan `Class.GuiObject.GuiState|GuiState`
  akan selalu disetel ke `Enum.GuiState.NonInteractable|NonInteractable`.
- Ketika pengaturan `Class.GuiObject.Interactable|Interactable` pada
  `Class.GuiButton` diatur ke `true`, `Class.GuiButton` akan bertindak
  normal kembali dan `Class.GuiObject.GuiState|GuiState` akan bertindak
  normal.

Pada `Class.GuiObject`:

- Ketika pengaturan `Class.GuiObject.Interactable|Interactable` pada
  `Class.GuiButton` diatur ke `false`, `Class.GuiObject.GuiState|GuiState`
  akan selalu disetel ke `Enum.GuiState.NonInteractable|NonInteractable`.
- Ketika pengaturan `Class.GuiObject.Interactable|Interactable` pada
  `Class.GuiButton` diatur ke `true`, `Class.GuiObject.GuiState|GuiState`
  akan bertindak normal kembali.


GuiObject.Interactable

Menentukan apakah `Class.GuiButton` dapat diinteraksi atau tidak, atau
apakah `Enum.GuiState|GuiState` dari `Class.GuiObject` sedang berubah atau
tidak.


Properti ini mengontrol urutan pengurutan dari `Class.GuiObject` saat
menggunakan `Class.UIGridStyleLayout` (seperti `Class.UIListLayout` atau
`Class.UIPageLayout`) dengan `Class.UIGridStyleLayout.SortOrder|SortOrder`
ditetapkan ke `Enum.SortOrder.LayoutOrder`. Ini tidak memiliki
fungsi jika objek tidak memiliki struktur tata letak UI saudara.

`Class.GuiObject|GuiObjects` diurutkan dalam urutan menaik di mana nilai yang lebih
rendah memiliki prioritas lebih tinggi dibandingkan nilai yang lebih tinggi.
Objek dengan nilai yang sama kembali ke urutan di mana mereka ditambahkan.

Jika Anda tidak yakin apakah Anda perlu menambahkan elemen di antara dua elemen yang ada di masa depan, adalah praktik yang baik untuk menggunakan kelipatan `100`
(`0`, `100`, `200`, dll.). Ini memastikan celah besar nilai urutan tata letak
yang dapat Anda gunakan untuk elemen yang diurutkan di antara elemen lainnya.

Lihat juga `Class.GuiObject.ZIndex|ZIndex` yang menentukan urutan
**rendering** objek bukan urutan pengurutan.


GuiObject.LayoutOrder

Mengontrol urutan pengurutan dari `Class.GuiObject` saat digunakan dengan
`Class.UIGridStyleLayout`.


Contoh ini menunjukkan cara mengaktifkan navigasi Gamepad melalui grid dari
`GuiObject|GUI` elemen tanpa harus menghubungkan secara manual
`Class.GuiObject.NextSelectionUp`, `Class.GuiObject.NextSelectionDown`, dan
`GuiObject|NextSelectionRight`, serta `Class.GuiObject.NextSelectionLeft`
properties untuk setiap elemen dalam grid.

Perhatikan bahwa contoh kode ini mengasumsikan `UIGridLayout` Anda diurutkan berdasarkan
`Class.UIGridLayout.SortOrder|name`, di mana elemen diberi nama dalam urutan
numerik yang berturut-turut.

Kode ini bergantung pada ini untuk mengatur properti NextSelection untuk semua
`GuiObjects` di level yang sama dengan UIGridLayout. Dalam contoh kami, 
UIGridLayoutObject dan elemen GUI dalam grid semuanya adalah anak dari
`Frame` bernama _"Container"_. Kode
`Class.Instance:GetChildren()|mengambil anak-anak` dari _"Container"_ dan mengulangi
setiap anak. Anak-anak yang bukan GuiObjects diabaikan. Untuk setiap elemen GUI,
kode mencoba mengatur properti NextSelection menggunakan logika berikut:

1. Dimulai dengan 1, nama semua elemen GUI cocok dengan posisi mereka dalam
   grid
2. Kiri: Item di sebelah kiri akan selalu diberi nomor 1 lebih rendah dari elemen
   saat ini
3. Kanan: Item di sebelah kanan akan selalu diberi nomor 1 lebih tinggi dari elemen
   saat ini
4. Atas: Item di atas (atas) akan selalu berjumlah jumlah GUIs dalam satu baris 1
   kurang dari elemen saat ini
5. Bawah: Item di bawah (bawah) akan selalu berjumlah jumlah GUIs dalam satu baris
   lebih banyak dari elemen saat ini Logika ini juga memungkinkan elemen GUI di
   awal dan akhir baris (tidak termasuk elemen pertama dan terakhir) untuk
   melingkar kembali ke baris berikutnya dan sebelumnya. Jika elemen tidak ada di
   sebelah kiri, kanan, atas, atau bawah, NextSelection akan tetap nil dan
   menggerakkan pemilih Gamepad ke arah tersebut tidak akan mengubah GUI yang
   terpilih.

Contoh ini juga berisi kode untuk menguji grid menggunakan tombol panah (Atas,
Bawah, Kiri, Kanan) dari keyboard Anda sebagai ganti gamepad, hanya untuk
mengantisipasi jika Anda tidak memiliki gamepad untuk diuji. Bagian kode ini
awalnya memilih elemen bernama _"1"_ dengan menetapkannya ke properti
`Class.GuiService.SelectedObject`.

Properti ini mengatur `Class.GuiObject` yang dipilih ketika pengguna
menggerakkan selector [gamepad](/input/gamepad) ke bawah. Jika properti ini
kosong, menggerakkan gamepad ke bawah tidak akan mengubah GUI yang dipilih.

Menggerakkan selector gamepad ke bawah mengatur
`Class.GuiService.SelectedObject` ke objek ini kecuali GUI tidak
`Class.GuiObject.Selectable|Selectable`. Perhatikan bahwa properti ini dapat
ditetapkan ke elemen GUI bahkan jika elemen tersebut tidak
`Class.GuiObject.Selectable|Selectable`, jadi Anda harus memastikan bahwa
nilai dari properti yang dapat dipilih GUI sesuai dengan perilaku yang Anda harapkan.

Lihat juga `Class.GuiObject.NextSelectionUp|NextSelectionUp`,
`Class.GuiObject.NextSelectionLeft|NextSelectionLeft`, dan
`Class.GuiObject.NextSelectionRight|NextSelectionRight`.


GuiObject.NextSelectionDown

Mengatur `Class.GuiObject` yang akan dipilih ketika selector gamepad
bergerak ke bawah.


Properti ini mengatur `Class.GuiObject` yang dipilih ketika pengguna
menggerakkan selector [gamepad](/input/gamepad) ke kiri. Jika properti ini
kosong, menggerakkan gamepad ke kiri tidak akan mengubah GUI yang dipilih.

Menggerakkan selector gamepad ke kiri mengatur
`Class.GuiService.SelectedObject` ke objek ini kecuali GUI tidak
`Class.GuiObject.Selectable|Selectable`. Perhatikan bahwa properti ini dapat
ditetapkan ke elemen GUI bahkan jika elemen tersebut tidak
`Class.GuiObject.Selectable|Selectable`, jadi Anda harus memastikan bahwa
nilai dari properti yang dapat dipilih GUI sesuai dengan perilaku yang Anda harapkan.

Lihat juga `Class.GuiObject.NextSelectionUp|NextSelectionUp`,
`Class.GuiObject.NextSelectionDown|NextSelectionDown`, dan
`Class.GuiObject.NextSelectionRight|NextSelectionRight`.


GuiObject.NextSelectionLeft

Mengatur `Class.GuiObject` yang akan dipilih ketika selector gamepad
bergerak ke kiri.


Properti ini mengatur `Class.GuiObject` yang dipilih ketika pengguna
menggerakkan selector [gamepad](/input/gamepad) ke kanan. Jika properti ini
kosong, menggerakkan gamepad ke kanan tidak akan mengubah GUI yang dipilih.

Menggerakkan selector gamepad ke kanan mengatur
`Class.GuiService.SelectedObject` ke objek ini kecuali GUI tidak
`Class.GuiObject.Selectable|Selectable`. Perhatikan bahwa properti ini dapat
ditetapkan ke elemen GUI bahkan jika elemen tersebut tidak
`Class.GuiObject.Selectable|Selectable`, jadi Anda harus memastikan bahwa
nilai dari properti yang dapat dipilih GUI sesuai dengan perilaku yang Anda harapkan.

Lihat juga `Class.GuiObject.NextSelectionUp|NextSelectionUp`,
`Class.GuiObject.NextSelectionDown|NextSelectionDown`, dan
`Class.GuiObject.NextSelectionLeft|NextSelectionLeft`.


GuiObject.NextSelectionRight

Mengatur `Class.GuiObject` yang akan dipilih ketika selector gamepad
bergerak ke kanan.


Properti ini mengatur `Class.GuiObject` yang dipilih ketika pengguna
menggerakkan selector [gamepad](/input/gamepad) ke atas. Jika properti ini
kosong, menggerakkan gamepad ke atas tidak akan mengubah GUI yang dipilih.

Menggerakkan selector gamepad ke atas mengatur
`Class.GuiService.SelectedObject` ke objek ini kecuali GUI tidak
`Class.GuiObject.Selectable|Selectable`. Perhatikan bahwa properti ini dapat
ditetapkan ke elemen GUI bahkan jika elemen tersebut tidak
`Class.GuiObject.Selectable|Selectable`, jadi Anda harus memastikan bahwa
nilai dari properti yang dapat dipilih GUI sesuai dengan perilaku yang Anda harapkan.

Lihat juga `Class.GuiObject.NextSelectionDown|NextSelectionDown`,
`Class.GuiObject.NextSelectionLeft|NextSelectionLeft`,
dan `Class.GuiObject.NextSelectionRight|NextSelectionRight`.


GuiObject.NextSelectionUp

Mengatur `Class.GuiObject` yang akan dipilih ketika selector gamepad
bergerak ke atas.


Properti ini menentukan posisi pixel dan skalar `Class.GuiObject`
menggunakan `Datatype.UDim2`. Posisi berpusat di sekitar
`Class.GuiObject.AnchorPoint` dari objek.

Posisi skalar relatif terhadap ukuran elemen GUI induk, jika ada.

Bagian pixel dari nilai `Datatype.UDim2` sama tanpa memperhatikan
ukuran GUI induk. Nilai mewakili posisi objek dalam pixels. Posisi pixel
sesungguhnya dari objek dapat dibaca dari properti
`Class.GuiBase2d.AbsolutePosition`.


GuiObject.Position

Menentukan posisi pixel dan skalar dari `Class.GuiObject`.


Properti ini menentukan jumlah derajat yang dimiliki `Class.GuiObject`.
Rotasi relatif terhadap **pusat** objek, **bukan** `Class.GuiObject.AnchorPoint|AnchorPoint`,
yang berarti Anda tidak dapat mengubah titik rotasi. Selain itu, properti ini
mungkin tidak kompatibel dengan `Class.GuiObject.ClipsDescendants|ClipsDescendants`.


GuiObject.Rotation

Menentukan jumlah derajat yang dimiliki `Class.GuiObject`.


Kelas abstrak untuk semua objek antarmuka pengguna 2D.

/reference/engine/classes/CanvasGroup.yaml