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 bersikap mirip dengan sebuah ImageLabel dalam hal render dengan perilaku tambahan dari sebuah GuiButton . Itu mendefinisikan proprensa rendah gambar yang sama seperti yang dilakukan ImageLabel .

Anda dapat menonaktifkan render gambar dengan menetapkan ImageButton.ImageTransparency ke 1. Ini akan meninggalkan Anda dengan segi persegi yang bisa digunakan sebagai tombol. Namun, lebih baik menggunakan TextButton kosong untuk ini.

Contoh Kode

This code sample gives custom colors to an ImageButton of a backpack while it is hovered and pressed.

ImageButton Press Color
-- Place this code in a LocalScript in an ImageButton

local imageButton = script.Parent



local colorNormal = Color3.new(1, 1, 1) -- white

local colorHover = Color3.new(0, 1, 0) -- green

local colorPress = Color3.new(1, 0, 0) -- red



-- This is a 32x32 image of a backpack

imageButton.Image = "rbxassetid://787458668"

imageButton.BackgroundTransparency = 1



local function onActivated()

	print("open the inventory")

end



local function onPressed()

	imageButton.ImageColor3 = colorPress

end



local function onReleased()

	imageButton.ImageColor3 = colorHover

end



local function onEntered()

	imageButton.ImageColor3 = colorHover

end



local function onLeft()

	imageButton.ImageColor3 = colorNormal

end



imageButton.MouseEnter:Connect(onEntered)

imageButton.MouseLeave:Connect(onLeft)

imageButton.MouseButton1Down:Connect(onPressed)

imageButton.MouseButton1Up:Connect(onReleased)

imageButton.Activated:Connect(onActivated)



-- Start with the default, non-hovered state

onLeft()

Rangkuman

Properti

Properti diwarisi dari GuiButton
  • AutoButtonColor:bool
    Baca Paralel

    Menentukan apakah tombol secara otomatis berubah warna saat mouse mengambilnya atau mengkliknya.

  • Modal:bool
    Baca Paralel

    Jika benar saat elemen GUI terlihat, mouse tidak akan terkunci kecuali tombol mouse yang benar adalah turun.

  • Selected:bool
    Baca Paralel

    Propinsi booleh yang menunjukkan apakah objek telah dipilih.

  • Style:Enum.ButtonStyle
    Baca Paralel

    Tetapkan gaya GuiButton berdasarkan daftar gaya pra-determinasi.

Properti 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.

Image

ContentId
Baca Paralel

Properti ini adalah properti jenis konten yang harus menyimpan ID aset decal atau gambar yang diunggah ke Roblox. Fungsinya sama dengan Decal.Texture dengan mengaitkan pemuatan gambar dari situs web Roblox. Gamb

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

Property Color3 gambar menentukan cara gambar dikolor. Saat diatur ke putih, tidak ada kolorisasi yang terjadi. Propiedad ini sangat berguna untuk menggunakan kembali sumber gambar: Jika gambar sumbernya benar-benar putih dengan transparansi, Anda dapat menetapkan warna gambar sepenuhnya dengan warna propinsi 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()

This code sample loops an ImageLabel or ImageButton's ImageColor3 through the entire rainbow using RunService's RenderStepped.

Rainbow Image
local RunService = game:GetService("RunService")



local imageLabel = script.Parent



local function onRenderStep()

	imageLabel.ImageColor3 = Color3.fromHSV(workspace.DistributedGameTime / 8 % 1, 1, 1)

end



RunService.RenderStepped:Connect(onRenderStep)

ImageContent

Content
Tersembunyi
Baca Paralel

Properti ini harus menyimpan URI aset atau referensi ke objek EditableImage.

URL aset dapat mengacu pada decal atau gambar yang diunggah ke Roblox. Ini berfungsi secara identik dengan Decal.Texture dalam hal memuat gambar.

Gambar yang dihasilkan akan dikolor menggunakan ImageButton.ImageColor3 . Mungkin untuk membuat gambar rendah sebagai ubin, skala untuk menyesuaikan, atau 9-sliced, dengan menyesuaikan propinsi ImageButton.ScaleType .

ImageRectOffset

Vector2
Baca Paralel

Mengizinkan tampilan parcial dari gambar bersama dengan ImageButton.ImageRectSize . Item ini menentukan OFFSET PIXEL (dari bagian atas kiri) dari area gambar yang akan ditampilkan.

Properti ini bersikap sama dengan ImageLabel.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

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo
local imageLabel = script.Parent



-- Set the source image to be a 64x64 padlock

imageLabel.Image = "rbxassetid://284402752"

imageLabel.BackgroundTransparency = 0

imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White

imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black



local function resizeInACircle()

	for theta = 0, 2, 0.02 do

		imageLabel.Size = UDim2.new(

			0,

			100 + math.cos(theta * 2 * math.pi) * 50,

			0,

			100 + math.sin(theta * 2 * math.pi) * 50

		)

		task.wait()

	end

end



while true do

	-- Stretch simply stretches the source image to fit

	-- the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Stretch

	resizeInACircle()

	-- Tile will render the source image multiple times

	-- enough to fill the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Tile

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

	resizeInACircle()

	-- Slice will turn the image into a nine-slice UI.

	imageLabel.ScaleType = Enum.ScaleType.Slice

	imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)

	resizeInACircle()

end

ImageRectSize

Vector2
Baca Paralel

Memungkinkan tampilan parcial dari gambar bersama dengan ImageButton.ImageRectOffset . Item ini menentukan ukuran pixel gambar yang akan ditampilkan. Jika dimensi mana pun di tetapkan ke 0, seluruh gambar ditampilkan alih-alih.

Properti ini bersikap sama dengan ImageLabel.ImageRectOffset .

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

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo
local imageLabel = script.Parent



-- Set the source image to be a 64x64 padlock

imageLabel.Image = "rbxassetid://284402752"

imageLabel.BackgroundTransparency = 0

imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White

imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black



local function resizeInACircle()

	for theta = 0, 2, 0.02 do

		imageLabel.Size = UDim2.new(

			0,

			100 + math.cos(theta * 2 * math.pi) * 50,

			0,

			100 + math.sin(theta * 2 * math.pi) * 50

		)

		task.wait()

	end

end



while true do

	-- Stretch simply stretches the source image to fit

	-- the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Stretch

	resizeInACircle()

	-- Tile will render the source image multiple times

	-- enough to fill the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Tile

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

	resizeInACircle()

	-- Slice will turn the image into a nine-slice UI.

	imageLabel.ScaleType = Enum.ScaleType.Slice

	imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)

	resizeInACircle()

end

ImageTransparency

number
Baca Paralel

Transparansi Gambar menentukan alpha dari gambar UI yang dibuat. Sebuah nilai 0 adalah benar-benar opake, dan nilai 1 benar-benar transparan (tidak terlihat).Nilai ini bersama-sama dengan GuiObject.BackgroundTransparency atau BasePart.Transparency .

Contoh Kode

This code sample oscillates the ImageTransparency of an ImageLabel/ImageButton from 0 to 1 using a sine wave.

Oscillate ImageTransparency
local RunService = game:GetService("RunService")



local imageLabel = script.Parent



local function onRenderStep()

	-- Oscillate ImageTransparency from 0 to 1 using a sine wave

	imageLabel.ImageTransparency = math.sin(workspace.DistributedGameTime * math.pi) * 0.5 + 0.5

end



RunService.RenderStepped:Connect(onRenderStep)

IsLoaded

bool
Hanya Baca
Tidak Direplikasi
Baca Paralel

Propiedad IsLoaded menunjukkan apakah properti ImageButton.Image selesai dimuat dari situs web Roblox. Gambar 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 menyajikan gambar ini.

ResampleMode

Enum.ResamplerMode
Baca Paralel

Menentukan cara gambar tersebut terlihat saat diubah skalanya.

Secara default, gambar menyamarkan tekstur saat ditampilkan lebih besar atau lebih kecil dari ukurannya dalam memori tekstur. Sebaliknya, Enum.ResamplerMode.Pixelated menyimpan sudut-sudut tajam gambar pixel.

ScaleType

Enum.ScaleType
Baca Paralel

Prop ScaleType menentukan cara apa ImageButton.Image dibuat ketika ukuran elemen UI berbeda dari ukuran gambar sumber.

Secara default, property ini adalah Enum.ScaleType.Stretch , yang hanya akan mengunggah dimensi gambar sehingga sesuai dengan ruang UI tepat. Karena pixel transparan diatur untuk hitam saat mengunggah ke situs web Roblox, gambar transparan harus menerapkan alfa bluring untuk menghindari kontur gelap di sekitar gambar skala.

Untuk Enum.ScaleType.Slice, property ImageButton.SliceCenter akan diungkapkan di jendela Propinsi. Ini adalah untuk UI 9-Slice: saat menyesuaikan ukuran, sudut-sudut akan tetap menjadi ukuran gambar sumber. Ujung gambar akan diperpanjang ke lebar/tinggi gamb

Akhirnya, untuk Enum.ScaleType.Tile , propinsi ImageButton.TileSize akan diungkapkan di jendela Propinsi. Ini untuk gambar berukuran besar, di mana ukuran setiap gambar diketahui oleh propinsi ImageButton.TileSize.

Contoh Kode

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo
local imageLabel = script.Parent



-- Set the source image to be a 64x64 padlock

imageLabel.Image = "rbxassetid://284402752"

imageLabel.BackgroundTransparency = 0

imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White

imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black



local function resizeInACircle()

	for theta = 0, 2, 0.02 do

		imageLabel.Size = UDim2.new(

			0,

			100 + math.cos(theta * 2 * math.pi) * 50,

			0,

			100 + math.sin(theta * 2 * math.pi) * 50

		)

		task.wait()

	end

end



while true do

	-- Stretch simply stretches the source image to fit

	-- the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Stretch

	resizeInACircle()

	-- Tile will render the source image multiple times

	-- enough to fill the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Tile

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

	resizeInACircle()

	-- Slice will turn the image into a nine-slice UI.

	imageLabel.ScaleType = Enum.ScaleType.Slice

	imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)

	resizeInACircle()

end

SliceCenter

Rect
Baca Paralel

Prop SliceCenter menetapkan batas-batas potongan gambar 9-sliced ketika ImageButton.ScaleType di set ke Enum.ScaleType.Slice . Harap perhatikan bahwa prop in

Untuk mempelajari lebih lanjut tentang gambar 9-sliced, lihat tutorial ini: Desain UI 9 Slice.

Contoh Kode

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo
local imageLabel = script.Parent



-- Set the source image to be a 64x64 padlock

imageLabel.Image = "rbxassetid://284402752"

imageLabel.BackgroundTransparency = 0

imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White

imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black



local function resizeInACircle()

	for theta = 0, 2, 0.02 do

		imageLabel.Size = UDim2.new(

			0,

			100 + math.cos(theta * 2 * math.pi) * 50,

			0,

			100 + math.sin(theta * 2 * math.pi) * 50

		)

		task.wait()

	end

end



while true do

	-- Stretch simply stretches the source image to fit

	-- the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Stretch

	resizeInACircle()

	-- Tile will render the source image multiple times

	-- enough to fill the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Tile

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

	resizeInACircle()

	-- Slice will turn the image into a nine-slice UI.

	imageLabel.ScaleType = Enum.ScaleType.Slice

	imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)

	resizeInACircle()

end

SliceScale

number
Baca Paralel

Skala ujung 9 slot dengan rasio yang ditentukan. Ini berarti bahwa ujung-ujung di sekitar 9 slot akan tumbuh seolah-olah Anda mengunggah versi baru dari teksur yang ditingkatkan. Standar untuk 1.0.

Sebagai pengganda untuk batas-batas 9 slot, itu berguna untuk menggunakan satu gambar sudut yang berputar untuk banyak radii

Lihat juga:

TileSize

UDim2
Baca Paralel

TileSize menetapkan ukuran ubinnya ImageButton. Default UDim2 nilai adalah 1,0,1,0. Komponen skala UDim2 akan menyesuaikan ubinnya berdasarkan ukuran ImageButton. Offset adalah dalam pixel. Skalasi dimulai di sudut atas kiri gambar. Misalnya skala 0,5 akan berarti

Properti ini hanya aktif jika ScaleType untuk ImageButton di set ke Tile bukan Slice atau Stretch.

Contoh Kode

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

Image ScaleType Demo
local imageLabel = script.Parent



-- Set the source image to be a 64x64 padlock

imageLabel.Image = "rbxassetid://284402752"

imageLabel.BackgroundTransparency = 0

imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White

imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black



local function resizeInACircle()

	for theta = 0, 2, 0.02 do

		imageLabel.Size = UDim2.new(

			0,

			100 + math.cos(theta * 2 * math.pi) * 50,

			0,

			100 + math.sin(theta * 2 * math.pi) * 50

		)

		task.wait()

	end

end



while true do

	-- Stretch simply stretches the source image to fit

	-- the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Stretch

	resizeInACircle()

	-- Tile will render the source image multiple times

	-- enough to fill the UI element's space

	imageLabel.ScaleType = Enum.ScaleType.Tile

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

	resizeInACircle()

	-- Slice will turn the image into a nine-slice UI.

	imageLabel.ScaleType = Enum.ScaleType.Slice

	imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)

	resizeInACircle()

end
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