ImageButton
*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่
แอพ ImageButton ทำงานคล้ายกับแอพ ImageLabel ในเรื่องการเรนเดอร์ด้วยพฤติกรรมเพิ่มเติมของแอพ GuiButton
สรุป
คุณสมบัติ
รหัสเทกเจอร์ที่จะใช้เมื่อ ImageButton ถูกเลื่อน
เนื้อหาภาพที่แสดงโดยองค์ประกอบ ImageButton อ่านและเขียนไปที่ ImageContent
กำหนดวิธีที่ภาพที่เรนเดอร์จะถูกสีได้
เนื้อหาภาพที่แสดงโดยองค์ประกอบ UI สนับสนุน URI สินทรัพย์และวัตถุ EditableImage
ค่าออฟเซ็ตในพิกเซลของพื้นที่ย่อยของภาพที่จะแสดง
กำหนดขนาดในพิกเซลของพื้นที่ย่อยของภาพที่จะแสดง
กำหนดความโปร่งใสของภาพที่แสดงผล
บ่งบอกว่าภาพเสร็จสิ้นการโหลดจากเว็บไซต์ Roblox แล้วหรือยัง
รหัสเทกเจอร์ที่จะใช้เมื่อกด ImageButton เมื่อกด
เลือกโหมดการขยายภาพสำหรับปุ่ม
กำหนดวิธีที่ภาพจะขยายได้หากแสดงในองค์ประกอบ UI ที่มีขนาดแตกต่างจากภาพที่มา
ตั้งขอบเขตชิ้นส่วนของภาพที่ตัด 9 ชิ้น
ขยายขอบ 9 ส่วนตามอัตราส่วนที่กำหนด
ตั้งเครื่องชั่งการจัดเรียงของปุ่มภาพ
กำหนดว่าปุ่มจะเปลี่ยนสีโดยอัตโนมัติเมื่อเมาส์เลื่อนผ่านหรือคลิกที่มันหรือไม่
ตัวอย่าง HapticEffect ที่จะเล่นเมื่อ GuiButton ถูกเลื่อน
หาก true ในขณะที่องค์ประกอบ GUI มองเห็นได้ เมาส์จะไม่ถูกล็อคเว้นแต่ปุ่มเมาส์ด้านขวาจะอยู่ใต้
ตัวอย่าง HapticEffect ที่จะเล่นเมื่อกด GuiButton จะถูกกด
คุณสมบัติ boolean ซึ่งระบุว่าวัตถุถูกเลือกหรือไม่
ตั้งสไตล์ของ GuiButton ตามรายการสไตล์ที่กําหนดไว้ล่วงหน้า
กำหนดว่าองค์ประกอบ UI นี้จะรับอินพุตหรือไม่
กำหนดจุดต้นกำเนิดของ GuiObject เมื่อเทียบกับขนาดสัมบูรณ์ของมัน
กำหนดว่าการปรับขนาดจะเกิดขึ้นตามเนื้อหาลูกหรือไม่
กำหนดสีพื้นหลัง GuiObject
กำหนดความโปร่งใสของพื้นหลังและขอบ GuiObject
กำหนดสีขอบ GuiObject ได้
กำหนดวิธีที่ขอบ GuiObject ถูกวางในลักษณะที่เกี่ยวข้องกับขนาด
กำหนดความกว้างของพิกเซลของขอบ GuiObject
กำหนดว่าถ้าลูกหลาน GuiObjects นอกขอบเขตขององค์ประกอบ GUI พ่อจะต้องแสดงผลหรือไม่
กำหนดว่าเมาส์ของผู้เล่นกดอยู่อย่างใดอย่างหนึ่งบน GuiObject หรือไม่
กำหนดว่า GuiButton สามารถโต้ตอบได้หรือไม่ หรือถ้า GuiState ของ GuiObject กำลังเปลี่ยนแปลงหรือไม่
ควบคุมลำดับการจัดเรียงของ GuiObject เมื่อใช้กับ UIGridStyleLayout
ตั้งค่า GuiObject ซึ่งจะถูกเลือกเมื่อตัวเลือกเกมแพดถูกเลื่อนลง
ตั้งค่า GuiObject ซึ่งจะถูกเลือกเมื่อตัวเลือกเกมแพดถูกย้ายไปทางซ้าย
ตั้งค่า GuiObject ซึ่งจะถูกเลือกเมื่อตัวเลือกเกมแพดถูกย้ายไปทางขวา
ตั้งค่า GuiObject ซึ่งจะถูกเลือกเมื่อตัวเลือกเกมแพดถูกย้ายขึ้น
กำหนดพิกเซลและตําแหน่งเวกเตอร์ของ GuiObject
กำหนดจำนวนองศาที่ GuiObject หมุนไป
ตรวจสอบว่า GuiObject สามารถเลือกได้โดยคอนโซลเกมหรือไม่
แทนที่การเลือกเริ่มต้นที่ใช้สำหรับเกมแพด
ลำดับของ GuiObjects ที่เลือกโดยการเลือก UI ของเกมแพด
กำหนดพิกเซลและขนาดสเกลาร์ของ GuiObject
ตั้งแกน Size ที่ GuiObject จะอ้างอิงจากขนาดของพ่อของมัน เมื่อเทียบกับขนาดของพ่อ
คุณสมบัติผสมของ BackgroundTransparency และ TextTransparency .
กำหนดว่า GuiObject และบรรดาลูกหลานจะถูกแสดงหรือไม่
กำหนดลำดับที่เรนเดอร์ GuiObject จะแสดงเป็นค่าสัมพันธ์กับคนอื่น
อธิบายตำแหน่งจอแสดงจริงขององค์ประกอบ GuiBase2d ในพิกเซล
อธิบายการหมุนหน้าจอที่เกิดขึ้นจริงขององค์ประกอบ GuiBase2d ในองศา
อธิบายขนาดหน้าจอที่เป็นจริงขององค์ประกอบ GuiBase2d ในพิกเซล
เมื่อตั้งค่าเป็น true การแปลท้องถิ่นจะถูกใช้กับ GuiBase2d และบรรดาลูกหลานของมัน
การอ้างอิงถึง LocalizationTable ที่จะใช้เพื่อใช้การแปลงภาษาท้องถิ่นอัตโนมัติกับ GuiBase2d และบรรดาลูกหลานของมัน
ปรับพฤติกรรมการเลือกเกมแพดในทิศทางลง
ปรับพฤติกรรมการเลือกเกมแพดในทิศทางซ้าย
ปรับพฤติกรรมการเลือก gamepad ในทิศทางที่ถูกต้อง
ปรับพฤติกรรมการเลือกเกมแพดในทิศทางขึ้น
อนุญาตให้ปรับแต่งการเคลื่อนไหวการเลือกเกมแพดได้
วิธีการ
วิธีการรับทอดมาจากGuiObject- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
เคลื่อน GUI ไปยังใหม่ UDim2 อย่างราบรื่น
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
เคลื่อน GUI ไปยังขนาดและตำแหน่งใหม่อย่างราบรื่น
อีเวนต์
อีเวนต์รับทอดมาจากGuiButtonเกิดไฟไหม้เมื่อปุ่มถูกเปิดใช้งาน
เกิดไฟไหม้เมื่อเมาส์ของผู้ใช้คลิกเต็มรูปแบบที่ GuiButton
เกิดไฟไหม้เมื่อผู้ใช้กดปุ่มเมาส์ซ้ายลงบน GuiButton
เกิดไฟไหม้เมื่อผู้ใช้ปล่อยปุ่มเมาส์ซ้ายออกจาก GuiButton
เกิดไฟไหม้เมื่อเมาส์ของผู้ใช้คลิกขวาเต็มรูปแบบที่ GuiButton
เกิดไฟไหม้เมื่อผู้ใช้กดปุ่มเมาส์ขวาลงบน GuiButton
เกิดไฟไหม้เมื่อผู้ใช้ปล่อยปุ่มเมาส์ขวาออกจาก GuiButton
ยิงเมื่อผู้ใช้เริ่มโต้ตอบผ่านอุปกรณ์อินเทอร์เฟซมนุษย์-คอมพิวเตอร์ (ปุ่มเมาส์ลง, แตะเริ่ม, ปุ่มแป้นพิมพ์ลง, เป็นต้น)
ยิงเมื่อผู้ใช้เปลี่ยนวิธีการโต้ตอบผ่านอุปกรณ์อินเทอร์เฟซมนุษย์-คอมพิวเตอร์ (ปุ่มเมาส์ลง, แตะเริ่ม, ปุ่มแป้นพิมพ์ลง, เป็นต้น)
ยิงเมื่อผู้ใช้หยุดโต้ตอบผ่านอุปกรณ์อินเทอร์เฟซมนุษย์-คอมพิวเตอร์ (ปุ่มเมาส์ลง, แตะเริ่ม, ปุ่มแป้นพิมพ์ลง, เป็นต้น)
เกิดไฟไหม้เมื่อผู้ใช้ย้ายเมาส์ไปยังองค์ประกอบ GUI
เกิดไฟไหม้เมื่อผู้ใช้ย้ายเมาส์ออกจากองค์ประกอบ GUI
เกิดไฟไหม้เมื่อผู้ใช้ย้ายเมาส์ในขณะที่อยู่ภายในองค์ประกอบ GUI ใดๆ
เกิดไฟไหม้เมื่อผู้ใช้เลื่อนล้อเมาส์กลับเมื่อเมาส์อยู่เหนือองค์ประกอบ GUI
เกิดไฟไหม้เมื่อผู้ใช้เลื่อนล้อเมาส์ไปข้างหน้าเมื่อเมาส์อยู่เหนือองค์ประกอบ GUI
ยิงเมื่อ GuiObject ได้รับการโฟกัสด้วยตัวเลือก Gamepad
ยิงเมื่อตัวเลือก Gamepad หยุดโฟกัสกับ GuiObject
เกิดไฟไหม้เมื่อผู้เล่นเริ่มต้น ดำเนินการต่อ และหยุดการกดค้างไว้นานบนองค์ประกอบ UI
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
เกิดไฟไหม้เมื่อผู้เล่นย้ายนิ้วบนองค์ประกอบ UI
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
เกิดไฟไหม้เมื่อผู้เล่นดําเนินการสับหรือดึงด้วยนิ้วสองนิ้วบนองค์ประกอบ UI
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
เกิดไฟไหม้เมื่อผู้เล่นดําเนินการทําท่าหมุนโดยใช้นิ้วสองนิ้วบนองค์ประกอบ UI
เกิดไฟไหม้เมื่อผู้เล่นดําเนินการสับข้อมูลบนองค์ประกอบ UI
เกิดไฟไหม้เมื่อผู้เล่นดําเนินการสัมผัสท่าทางบนองค์ประกอบ UI
- SelectionChanged(amISelected : boolean,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
ไฟเมื่อการเลือกเกมแพดย้ายไปที่ ออก หรือเปลี่ยนภายในเชื่อมต่อ GuiBase2d หรือทายาทใดๆ GuiObjects
คุณสมบัติ
HoverImageContent
Image
คุณสมบัตินี้เป็นคุณสมบัติประเภทเนื้อหาที่ควรมีรหัสทรัพย์สินของภาพหรือภาพที่อัปโหลดไปยัง Robloxมันทำงานเหมือนกับ Decal.Texture ในเรื่องของการโหลดภาพจาก Robloxภาพที่เรนเดอร์จะถูกสีด้วย ImageColor3
โปรดทราบว่าเป็นไปได้ที่จะทำให้ภาพเรนเดอร์เป็นแบบกระเบื้อง ปรับให้พอดี หรือแบ่งออกเป็น 9 ส่วนโดยปรับคุณสมบัติ ScaleType
ตัวอย่างโค้ด
This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.
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
คุณสมบัตินี้กำหนดวิธีที่ภาพถูกสีได้เมื่อตั้งค่าเป็นขาวไม่มีการแยกสีเกิดขึ้นคุณสมบัตินี้มีประโยชน์มากสำหรับการใช้ซ้ำทรัพยากรภาพ: หากภาพที่มาเป็นสีขาวอย่างสมบูรณ์พร้อมความโปร่งใส คุณสามารถตั้งสีทั้งหมดของภาพได้ทันทีด้วยคุณสมบัตินี้
ตัวอย่างโค้ด
This code sample causes an ImageLabel/ImageButton to display a red padlock. When the mouse is hovered, it changes to a green unlocked padlock.
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
คุณสมบัตินี้ควรมี URI สินทรัพย์ หรือการอ้างอิงถึงวัตถุ EditableImage URI สินทรัพย์สามารถอ้างอิงถึงภาพหรือภาพที่อัปโหลดไปยัง Roblox ได้มันทำงานเหมือนกับ Decal.Texture ในเรื่องของการโหลดภาพ
ภาพที่เรนเดอร์จะถูกสีโดยใช้ ImageColor3เป็นไปได้ที่จะทำให้ภาพเรนเดอร์เป็นแบบกระเบื้อง ปรับให้พอดี หรือแบ่งออกเป็น 9 ส่วนโดยปรับคุณสมบัติ ScaleType
ImageRectOffset
คุณสมบัตินี้กำหนดการเลื่อนพิกเซล (จากด้านซ้ายบน) ของพื้นที่ภาพที่จะแสดง ช่วยให้สามารถแสดงภาพบางส่วนร่วมกับ ImageRectSize ได้
ตัวอย่างโค้ด
This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch
-- 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
endImageRectSize
คุณสมบัตินี้กำหนดขนาดพิกเซลของพื้นที่ภาพที่จะแสดง ช่วยให้สามารถแสดงภาพบางส่วนพร้อมกับ ImageRectOffset ได้หากมิติใดมีการตั้งค่าเป็น 0 ทั้งภาพจะแสดงแทนทั้งหมด
ตัวอย่างโค้ด
This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch
-- 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
endImageTransparency
คุณสมบัตินี้กำหนดอัลฟาของภาพที่เรนเดอร์ขององค์ประกอบแสดงออกค่าของ 0 เป็นค่าที่ไม่โปร่งใสอย่างสมบูรณ์ และค่าของ 1 เป็นค่าที่โปร่งใสอย่างสมบูรณ์ (ล่องหน)คุณสมบัตินี้มีพฤติกรรมคล้ายกับ GuiObject.BackgroundTransparency หรือ BasePart.Transparency
หากคุณปิดการเรนเดอร์รูปภาพโดยการตั้ง ImageTransparency เป็น 1 จะทำให้เกิดเป็นรูปสี่เหลี่ยมธรรมดาที่สามารถใช้เป็นปุ่มได้อย่างไรก็ตาม อาจจะดีกว่าที่จะใช้ว่างเปล่า TextButton แทน
IsLoaded
คุณสมบัตินี้บ่งชี้ว่าคุณสมบัติ Image ได้สิ้นสุดการโหลดจาก Roblox หรือไม่ รูปภาพที่ถูกปฏิเสธโดยการกลั่นกรองจะไม่โหลด
ตัวอย่างโค้ด
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.
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))PressedImageContent
ResampleMode
กำหนดว่าภาพจะดูเป็นอย่างไรเมื่อมันถูกขยายโดยค่าเริ่มต้น รูปภาพจะทำให้เนื้อสัมผัสนุ่มขึ้นเมื่อแสดงใหญ่กว่าหรือเล็กกว่าขนาดในหน่วยความจำเทกเจอร์ในทางกลับกัน Enum.ResamplerMode.Pixelated เก็บขอบแหลมของพิกเซลภาพ
ScaleType
คุณสมบัตินี้กำหนดวิธีที่คุณสมบัติ Image จะแสดงเมื่อขนาดสัมบูรณ์ขององค์ประกอบ UI แตกต่างจากขนาดของภาพที่มาจากแหล่ง
โดยค่าเริ่มต้นคุณสมบัตินี้คือ Enum.ScaleType.Stretch ซึ่งจะยืด/บีบขนาดภาพให้พอดีกับพื้นที่ขององค์ประกอบ UI อย่างแม่นยําเนื่องจากพิกเซลโปร่งใสถูกตั้งค่าเป็นสีดำเมื่ออัปโหลดไปยัง Roblox ภาพโปร่งใสควรใช้การผสมผสานอัลฟาเพื่อหลีกเลี่ยงการเน้นสีดำรอบภาพที่ขยาย
สำหรับ Enum.ScaleType.Slice เมื่อขยายขึ้น มุมจะยังคงเป็นขนาดภาพที่เกิดจากแหล่งขอบของภาพจะยืดไปตามความกว้าง/ความสูงของภาพในที่สุด ศูนย์กลางของภาพจะยืดออกเพื่อเติมพื้นที่กลางของภาพเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับภาพแบบ 9 ชิ้นดูที่ การออกแบบ UI 9 ชิ้น
สำหรับ Enum.ScaleType.Tile ขนาดของแต่ละพื้นที่ภาพจะถูกกำหนดโดยคุณสมบัติ TileSize
SliceCenter
คุณสมบัตินี้ตั้งขอบเขตสไลซ์ของภาพที่ตัดเป็น 9 ส่วนเมื่อ ScaleType ถูกตั้งค่าเป็น Enum.ScaleType.Slice
เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับภาพแบบตัด 9 ชิ้นดูที่ การออกแบบ UI 9 ชิ้น
SliceScale
ขยายขอบ 9 ส่วนตามอัตราส่วนที่กำหนดซึ่งหมายความว่าขอบรอบ 9‑slice จะเติบโตเหมือนกับว่าคุณอัปโหลดเวอร์ชันใหม่ของเทกเจอร์ที่ขยายขนาดแล้วค่าเริ่มต้นเป็น 1.0 .
ในฐานะตัวคูณสำหรับขอบของชิ้นส่วน 9 ชิ้น มันมีประโยชน์ในการใช้ภาพมุมโค้งหนึ่งซ้ำสำหรับรัศมีหลายรายการ
ดูเพิ่มเติม ScaleType ซึ่งกำหนดวิธีการที่ภาพจะขยายได้หากแสดงในองค์ประกอบ UI ที่มีขนาดแตกต่างจากภาพที่เป็นที่มา
TileSize
ตั้งขนาดการจัดเรียงของ ImageButton ที่เริ่มต้นที่มุมบนซ้ายของภาพค่าเริ่มต้นของ UDim2 คือ
คุณสมบัตินี้ใช้งานได้เฉพาะเมื่อคุณสมบัติ ScaleType ถูกตั้งค่าเป็น Enum.ScaleType.Tile