ImageButton

Tampilkan yang Tidak Digunakan Lagi

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

Sebuah ImageButton berperilaku serupa dengan sebuah ImageLabel dalam hal penyajian, dengan perilaku tambahan dari sebuah GuiButton .

Rangkuman

Properti

Properti diwarisi dari GuiButtonProperti diwarisi dari GuiObjectProperti diwarisi dari GuiBase2d
Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Metode

Metode diwarisi dari GuiObject
Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Acara

Acara diwarisi dari GuiButtonAcara diwarisi dari GuiObjectAcara diwarisi dari GuiBase2d
Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Properti

HoverImage

ContentId
Baca Paralel

ID teksur yang akan digunakan saat ImageButton di-hover.

HoverImageContent

Content
Baca Paralel

Image

ContentId
Baca Paralel

Properti ini adalah properti jenis konten yang harus menyimpan ID aset decal atau gambar yang diunggah ke Roblox.Ini berfungsi persis sama dengan Decal.Texture terkait dengan memuat gambar dari Roblox.Gambar yang drender akan diwarnai menggunakan ImageColor3 .

Perhatikan bahwa dimungkinkan untuk menampilkan gambar sebagai ubin, diukur untuk sesuai, atau dipotong menjadi 9 bagian dengan menyesuaikan properti ScaleType.

Contoh Kode

This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.

Image Hover Lock
local imageLabel = script.Parent



-- The images in this example are 64x64

imageLabel.Size = UDim2.new(0, 64, 0, 64)



local function unlock()

	imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)

	imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green

end



local function lock()

	imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)

	imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red

end



-- Connect events; our default state is locked

imageLabel.MouseEnter:Connect(unlock)

imageLabel.MouseLeave:Connect(lock)

lock()

ImageColor3

Color3
Baca Paralel

Properti ini menentukan bagaimana sebuah gambar diwarnai.Ketika diatur ke putih, tidak ada kolorisasi terjadi.Properti ini sangat berguna untuk menggunakan kembali aset gambar: Jika gambar sumber benar-benar putih dengan transparansi, Anda dapat mengatur seluruh warna gambar sekaligus dengan properti ini.

Contoh Kode

This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.

Image Hover Lock
local imageLabel = script.Parent



-- The images in this example are 64x64

imageLabel.Size = UDim2.new(0, 64, 0, 64)



local function unlock()

	imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)

	imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green

end



local function lock()

	imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)

	imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red

end



-- Connect events; our default state is locked

imageLabel.MouseEnter:Connect(unlock)

imageLabel.MouseLeave:Connect(lock)

lock()

ImageContent

Content
Baca Paralel

Properti ini harus menyimpan URI aset atau referensi ke objek EditableImage. URI aset dapat merujuk pada decal atau gambar yang diunggah ke Roblox.Ini berfungsi persis sama dengan Decal.Texture terkait dengan memuat gambar.

Gambar yang drender akan diwarnai menggunakan ImageColor3 .Dimungkinkan untuk menampilkan gambar sebagai terpisah, diukur untuk sesuai, atau dipotong menjadi 9 bagian dengan menyesuaikan properti ScaleType.

ImageRectOffset

Vector2
Baca Paralel

Properti ini menentukan offset piksel (dari kiri atas) dari area gambar yang akan ditampilkan, memungkinkan tampilan parsial dari gambar bersama dengan ImageRectSize.

Contoh Kode

This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch

Image Animation using Spritesheet
-- Place this in an ImageLabel/ImageButton with size 256x256

local imageLabel = script.Parent



-- The following image is 1024x1024 with 12 frames (256x256)

-- The frames play an animation of a man throwing a punch

imageLabel.Image = "rbxassetid://848623155"

imageLabel.ImageRectSize = Vector2.new(256, 256)



-- The order of the frames to be displayed (left-to-right, then top-to-bottom)

local frames = {

	Vector2.new(0, 0),

	Vector2.new(1, 0),

	Vector2.new(2, 0),

	Vector2.new(3, 0),

	Vector2.new(0, 1),

	Vector2.new(1, 1),

	Vector2.new(2, 1),

	Vector2.new(3, 1),

	Vector2.new(0, 2),

	Vector2.new(1, 2),

	Vector2.new(2, 2),

	Vector2.new(3, 2),

}



-- Animate the frames one at a time in a loop

while true do

	for _, frame in ipairs(frames) do

		imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize

		task.wait(0.1)

	end

end

ImageRectSize

Vector2
Baca Paralel

Properti ini menentukan ukuran piksel dari area gambar yang akan ditampilkan, memungkinkan tampilan parsial dari gambar bersama dengan ImageRectOffset.Jika dimensi mana pun ditetapkan ke 0, seluruh gambar ditampilkan sebagai gantinya.

Contoh Kode

This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch

Image Animation using Spritesheet
-- Place this in an ImageLabel/ImageButton with size 256x256

local imageLabel = script.Parent



-- The following image is 1024x1024 with 12 frames (256x256)

-- The frames play an animation of a man throwing a punch

imageLabel.Image = "rbxassetid://848623155"

imageLabel.ImageRectSize = Vector2.new(256, 256)



-- The order of the frames to be displayed (left-to-right, then top-to-bottom)

local frames = {

	Vector2.new(0, 0),

	Vector2.new(1, 0),

	Vector2.new(2, 0),

	Vector2.new(3, 0),

	Vector2.new(0, 1),

	Vector2.new(1, 1),

	Vector2.new(2, 1),

	Vector2.new(3, 1),

	Vector2.new(0, 2),

	Vector2.new(1, 2),

	Vector2.new(2, 2),

	Vector2.new(3, 2),

}



-- Animate the frames one at a time in a loop

while true do

	for _, frame in ipairs(frames) do

		imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize

		task.wait(0.1)

	end

end

ImageTransparency

number
Baca Paralel

Properti ini menentukan alfa dari gambar yang ditampilkan elemen.Nilai 0 adalah benar-benar opak dan nilai 1 adalah benar-benar transparan (tidak terlihat).Properti ini berperilaku serupa dengan GuiObject.BackgroundTransparency atau BasePart.Transparency .

Jika Anda menonaktifkan rendering gambar dengan mengatur ImageTransparency ke 1, itu akan menghasilkan bilangan persegi sederhana yang dapat digunakan sebagai tombol.Namun, mungkin lebih baik menggunakan kosong TextButton sebagai gantinya.

IsLoaded

boolean
Hanya Baca
Tidak Direplikasi
Baca Paralel

Properti ini menunjukkan apakah properti Image telah selesai dimuat dari Roblox. Gambar yang ditolak oleh moderasi tidak akan pernah load.

Contoh Kode

This code sample measures how long an ImageLabel or ImageButton takes to load an image. If the image was already loaded, this will be 0.

Image Load Time
local imageLabel = script.Parent



local startTime = workspace.DistributedGameTime



-- Wait for the image to load

while not imageLabel.IsLoaded do

	task.wait()

end



-- Measure and display how long it took to load

local deltaTime = workspace.DistributedGameTime - startTime

print(("Image loaded in %.3f seconds"):format(deltaTime))

PressedImage

ContentId
Baca Paralel

ID tekstur yang dapat ditetapkan sebagai properti ImageButton. Saat tombol ditekan, itu akan menampilkan gambar ini.

PressedImageContent

Content
Baca Paralel

ResampleMode

Enum.ResamplerMode
Baca Paralel

Menentukan bagaimana tampilan gambar saat diubah skalanya.Secara default, gambar menyamarkan tekstur saat ditampilkan lebih besar atau lebih kecil dari ukurannya di memori tekstur.Sebaliknya, Enum.ResamplerMode.Pixelated menyimpan tepi tajam dari piksel gambar.

ScaleType

Enum.ScaleType
Baca Paralel

Properti ini menentukan dengan cara apa properti Image dihasilkan ketika ukuran elemen UI berbeda dari ukuran gambar sumber.

Secara default, properti ini adalah Enum.ScaleType.Stretch yang hanya akan meregangkan/kompakkan dimensi gambar sehingga sesuai dengan ruang elemen UI dengan tepat.Karena piksel transparan diatur menjadi hitam saat diunggah ke Roblox, gambar transparan harus menerapkan blending alfa untuk menghindari garis hitam di sekitar gambar skala.

Untuk Enum.ScaleType.Slice , saat meningkatkan skala, sudut akan tetap menjadi ukuran gambar sumber.Pinggiran gambar akan memperluas ke lebar/tinggi gambar.Akhirnya, pusat gambar akan memperluas untuk mengisi area pusat gambar.Untuk mempelajari lebih lanjut tentang gambar 9-potong, lihat Desain UI 9-Potong.

Untuk Enum.ScaleType.Tile , ukuran setiap ubin gambar ditentukan oleh properti TileSize.

SliceCenter

Rect
Baca Paralel

Properti ini menetapkan batas potong dari gambar berukuran 9 saat ScaleType diatur ke Enum.ScaleType.Slice.

Untuk mempelajari lebih lanjut tentang gambar 9-potong, lihat Desain UI 9-Potong.

SliceScale

number
Baca Paralel

Skala ujung 9 bagian dengan rasio yang ditentukan.Ini berarti bahwa tepi di sekitar 9-potong akan tumbuh seolah-olah Anda telah mengunggah versi baru dari tekstur yang diperbesar.Default ke 1.0.

Sebagai pengganda untuk perbatasan 9-potong, berguna untuk menggunakan kembali satu gambar sudut bulat untuk banyak radius.

Lihat juga ScaleType yang menentukan bagaimana sebuah gambar akan diperbesar jika ditampilkan di elemen UI yang ukurannya berbeda dari gambar sumber.

TileSize

UDim2
Baca Paralel

Mengatur ukuran ubin dari ImageButton mulai dari sudut kiri atas gambar.Nilai default UDim2 adalah 1, 0, 1, 0 ; komponen skala dari UDim2 akan menyesuaikan ubin berdasarkan ukuran ImageButton sementara komponen offset berada dalam piksel mentah.Sebagai contoh, skala 0.5 berarti ubin akan menjadi setengah dari ukuran ImageButton di sumbu yang sesuai.

Properti ini hanya aktif jika properti ScaleType diatur ke Enum.ScaleType.Tile.

Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Metode

Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object

Acara

Lihat semua yang diwarisi dari Instance
Lihat semua yang diwarisi dari Object