ปุ่มใช้งาน

การแสดงนี้แสดงให้คุณเห็นวิธีการทำปุ่มบนหน้าจอสำหรับเมนู การกระทําผู้ใช้ และอื่น ๆ

รูปแบบปุ่ม

มีสองประเภทของวัตถุปุ่มที่คุณสามารถใช้ในการออกแบบ UI ของคุณ:

ปุ่มข้อความ	ปุ่มรูป
Class.TextButton คล้ายกับ TextLabel ยกเว้นว่าผู้เล่นสามารถเปิดใช้งานได้ด้วยการคลิก/แตะ มันยังแบ่งปันส่วนใหญ่ของเอกสารทางสายตา — ตัวอักษร สีพื้นหลัง สีเส้น ฯลฯ	Class.ImageButton เป็นเหมือนเวอร์ชันโต้ตอบของวัตถุ ImageLabel มันยังแบ่งปันส่วนใหญ่ของคุณสมบัติเดียวกันกับส่วนประกอบปุ่มอื่น ๆ ของมัน

การสร้างปุ่ม

ขั้นตอนต่อไปนี้แสดงวิธีการเพิ่ม ImageButton ให้กับหน้าจอและเปลี่ยนมันระหว่างสามการปรากฏตัวขึ้นอยู่กับการโต้ตอบของผู้เล่น

1. ในหน้าต่าง Explorer คลิกที่วัตถุ StarterGui แล้วคลิกปุ่ม + และใส่ ScreenGui เข้า

   

2. เลือกวัตถุใหม่ ScreenGui และในวิธีที่คล้ายคลึงกันใส่วัตถุ ImageButton

   

   นี่จะเพิ่มปุ่มภาพที่ว่างเปล่าในมุมมองของเกม

3. เป็นการดีที่สุดให้เปลี่ยนชื่อปุ่มใหม่ตามวัตถุประสงค์ของมันเช่น ปุ่ม แผนที่ ตัวอย่าง

   

ขนาด

สำหรับปุ่มที่ขยายได้อย่างไม่เอาภาพเมื่อใดก็ตามบนอุปกรณ์และหน้าจอต่างๆ คุณควรใช้ Scale โปรพีพี

1. ในหน้าต่าง โปรพีเพอร์ตี้ ค้นหาสมบัติสมบัติ ขนาด และคลิกลูกศรเพื่อขยายต้นไม้

   

2. ตั้งค่าสมบัติขนาดต่อไปนี้:

   

3. กำหนดให้ปุ่มขึ้นอยู่กับกรอบเขตข้อมูลโดยการตั้ง ขนาดข้อมูลขีดจำกัด เป็น ค่าเฉลี่ย YY

การเคลื่อน

ขนาดปัจจุบันควรทำงานได้อย่างดีบนโทรศัพท์ แต่ขนาด X/Y ของ 0.15 (15%) อาจปรากฏใหญ่เกินไปบนหน้าจอคอมพิวเตอร์ เพื่อแก้ไขสิ่งนี้ คุณสามารถเพิ่ม Class.U

1. เลือกวัตถุ MapButton และใส่วัตถุ UISizeConstraint

   

2. เลือกวัตถุข้อจํากัดขนาดใหม่และตั้งค่าสมบัติของมัน MaxSize ไปที่ 90, 90

   

ตําแหน่ง

ปุ่มควรจะเคลื่อนย้ายอยู่ภายในขอบนิ้วของผู้เล่นบนอุปกรณ์มือถือ เช่น พื้นที่ด้านล่างของหน้าจอ

1. เปลี่ยนค่า AnchorPoint ของปุ่มเป็น 0.5, 1 เพื่อให้ตำแหน่งจะอยู่รอบด้านล่างของตัวเอง

   

2. ขยายต้นไม้ ตำแหน่ง ของปุ่มและตั้งค่ามูลค่าต่อไปนี้ นี่จะย้ายปุ่มใกล้กับปุ่มกระโดดเริ่มต้นที่ปรากฏบนโทรศัพท์/แท็บเล็ต

   

รูป

ปุ่มนี้ต้องใช้รูปภาพสามรูป — ปกติจะปรากฏบนหน้าจอ, ปุ่มเลี้ยว, และรูปภาพสุดท้ายสำหรับเมื่อผู้เล่นกดปุ่มนี้

ปกติ

เลื่อนเมาส์

กดแล้ว

การตั้งค่ารูปลักษณ์เหล่านี้สามารถทำได้ผ่านคุณสมบัติ รูปภาพ รูปภาพ HoverImage และ กดไอเท็มเพื่อดูภาพได้เลยนะคะ

1. ค้นหาสมบัติของปุ่ม รูปภาพ แล้ววางใน rbxassetid://6025368017 หรือ ใช้สินทรัพย์ของคุณเอง

   

2. สำหรับสมบัติสัญลักษณ์ HoverImage ใส่ใน rbxassetid://6025452347

   

3. สำหรับสมบัติสกุล PressedImage ใส่ใน rbxassetid://6025454897

   

สไตล์

เพื่อสรุปการปรากฏตัวของปุ่มบนหน้าจอให้สำเร็จ ดำเนินการปรับแต่งต่อไปนี้:

1. ตั้ง ความโปร่งใสพื้นหลัง เป็นค่า 1 เพื่อให้พื้นหลังโปร่งใส

   

2. หมุนปุ่มเล็กน้อยโดยการตั้ง การหมุน เป็น -5

   

ระเบียบาที่ปุ่ม

งานสุดท้ายคือการเชื่อมต่อคุณสมบัติปุ่มพื้นฐาน

1. ในหน้าต่าง Explorer ให้เลื่อนเมาส์ไปที่วัตถุ ปุ่มแผนที่ และใส่ สคริปต์ในพื้นที่จัดเก็บข้อมูลภายใน

   

2. ในสคริปต์นี้ คัดแต่ละบรรทัดใหม่เหล่านี้:

   local button = script.Parent
   
   local function onButtonActivated()
   	print("Button activated!")
   	-- แอ็คชัน
   end
   
   button.Activated:Connect(onButtonActivated)

สคริปต์ปุ่มง่ายๆ นี้ทำงานได้อย่างต่อไปนี้:

• บรรทัดแรกตั้งปุ่มตัวแปรที่บอกสคริปต์ว่ามันเกี่ยวข้องกับวัตถุอะไร ในกรณีนี้มันเกี่ยวข้องกับ ImageButton รุ่นพ่อของสคริปต์
• ฟังก์ชัน onButtonActivated จัดการการเปิด/ปิดปุ่ม ภายในตัวเลือกนี้คุณควรทำสิ่งที่ต้องการเช่นการเปิดเมนูหลักของเกม
• บรรทัดสุดท้าย เชื่อมต่อปุ่มให้เป็นฟังก์ชัน onButtonActivated ด้วยเหตุการณ์ Class.GuiButton.Activated|Activated เมื่อผู้เล่นเปิดปุ่มในเกม

การแก้ปัญหา

หากปุ่มไม่ทำงานตามที่คาดไว้ กำลังติดตาม:

• ตรวจสอบให้แน่ใจว่าคุณใช้ LocalScript ด้านล่าง ไม่ใช่ Script ด้านบน
• ให้แน่ใจว่า LocalScript เป็นลูกโดยตรงของวัตถุปุ่ม (ไม่ใช่ลูกของวัตถุ Class.ScreenGui คอนเทนเนอร์)
• ยืนยันว่าคุณสมบัติของปุ่มของคุณ รูปภาพ , HoverImage และ กดรูปภาพ ปรับแต่งสมบัติสัญลักษณ์ที่เหมาะสม