บทที่ 4: การสร้างและจัดการอินเทอร์เฟซผู้ใช้

ในบทเรียนนี้ นักเรียนจะได้เรียนรู้การสร้างและจัดการอินเทอร์เฟซผู้ใช้ (UI) เพื่อให้ผู้เล่นสามารถโต้ตอบกับเกมได้สะดวกและเข้าใจง่าย UI สามารถใช้ในการแสดงข้อมูลสำคัญ เช่น แถบพลังชีวิต (Health Bar), แผนที่ย่อ (Mini Map), ปุ่มการควบคุม และเมนูต่าง ๆ ที่ผู้เล่นสามารถกดใช้งานได้

4.1 การสร้าง ScreenGui และการเพิ่ม UI Elements

การเริ่มต้นสร้าง UI ใน Roblox Studio จะใช้ ScreenGui ซึ่งเป็นวัตถุที่เก็บองค์ประกอบ UI ทั้งหมด เช่น ปุ่ม, ข้อความ, และแถบสถานะ โดย ScreenGui จะแสดงผลบนหน้าจอของผู้เล่นเสมอ ไม่ว่าวัตถุในเกมจะอยู่ที่ไหน

ขั้นตอนการเพิ่ม ScreenGui:

1. คลิกขวาที่ StarterGui ในแถบ Explorer
2. เลือก Insert Object และเลือก ScreenGui
3. ภายใน ScreenGui นักเรียนสามารถเพิ่มองค์ประกอบ UI เช่น TextLabel (ป้ายข้อความ), ImageLabel (รูปภาพ), หรือ Frame (กรอบ)

ตัวอย่างการเพิ่มป้ายข้อความ (TextLabel):

local screenGui = Instance.new("ScreenGui")  -- สร้าง ScreenGui ใหม่
local textLabel = Instance.new("TextLabel")  -- สร้างป้ายข้อความใหม่

textLabel.Text = "Welcome to the Game!"  -- กำหนดข้อความ
textLabel.Size = UDim2.new(0, 200, 0, 50)  -- กำหนดขนาดของป้ายข้อความ
textLabel.Position = UDim2.new(0.5, -100, 0, 20)  -- กำหนดตำแหน่งของข้อความให้อยู่ตรงกลางด้านบน

textLabel.Parent = screenGui  -- เพิ่มป้ายข้อความเข้าไปใน ScreenGui
screenGui.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui")  -- แสดง UI บนหน้าจอของผู้เล่น

ในตัวอย่างนี้ ป้ายข้อความที่มีข้อความ "Welcome to the Game!" จะปรากฏบนหน้าจอของผู้เล่น

4.2 การสร้างปุ่มแบบอินเทอร์แอคทีฟ (Interactive Buttons)

ปุ่ม (Button) เป็นส่วนสำคัญของ UI ที่ช่วยให้ผู้เล่นสามารถโต้ตอบกับเกมได้ เราสามารถสร้างปุ่มเพื่อทำให้ผู้เล่นสามารถกดเพื่อทำกิจกรรมต่าง ๆ เช่น เริ่มเกม หรือหยุดเกม

ขั้นตอนการสร้างปุ่ม:

1. สร้าง TextButton ภายใน ScreenGui
2. กำหนดข้อความ ขนาด และตำแหน่งของปุ่ม
3. ใช้สคริปต์เพื่อทำให้ปุ่มทำงานเมื่อถูกกด

ตัวอย่างการสร้างปุ่มเริ่มเกม:

local startButton = Instance.new("TextButton")
startButton.Text = "Start Game"
startButton.Size = UDim2.new(0, 200, 0, 50)
startButton.Position = UDim2.new(0.5, -100, 0.5, -25)

startButton.MouseButton1Click:Connect(function()
    print("Game started!")
end)

startButton.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui")

ในตัวอย่างนี้ เมื่อผู้เล่นคลิกปุ่ม "Start Game" ข้อความ "Game started!" จะแสดงใน Output แสดงว่าปุ่มทำงานสำเร็จ

4.3 การสร้างแถบพลังชีวิต (Health Bar)

แถบพลังชีวิต (Health Bar) เป็น UI ที่นิยมใช้กันมากในเกมเพื่อติดตามสุขภาพของตัวละครผู้เล่น แถบนี้สามารถเปลี่ยนแปลงตามค่าพลังชีวิตของผู้เล่นในเกม

ขั้นตอนการสร้างแถบพลังชีวิต:

1. เพิ่ม Frame เพื่อใช้เป็นพื้นหลังของแถบ
2. เพิ่ม Frame อีกชั้นหนึ่งภายในพื้นหลัง เพื่อใช้เป็นแถบพลังที่เปลี่ยนขนาดตามสุขภาพของผู้เล่น

ตัวอย่างการสร้างแถบพลังชีวิต:

local screenGui = Instance.new("ScreenGui")
local healthBarBackground = Instance.new("Frame")
local healthBar = Instance.new("Frame")

healthBarBackground.Size = UDim2.new(0, 200, 0, 25)
healthBarBackground.Position = UDim2.new(0.5, -100, 0, 50)
healthBarBackground.BackgroundColor3 = Color3.new(1, 0, 0)  -- พื้นหลังสีแดง

healthBar.Size = UDim2.new(1, 0, 1, 0)  -- ขนาดเริ่มต้นเต็มแถบ
healthBar.BackgroundColor3 = Color3.new(0, 1, 0)  -- สีเขียวของแถบพลังชีวิต

healthBar.Parent = healthBarBackground
healthBarBackground.Parent = screenGui
screenGui.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui")

-- การอัปเดตแถบพลังชีวิตตามค่าพลังชีวิตของผู้เล่น
local function updateHealth(player)
    local healthPercent = player.Character.Humanoid.Health / player.Character.Humanoid.MaxHealth
    healthBar.Size = UDim2.new(healthPercent, 0, 1, 0)  -- ปรับขนาดตามสุขภาพ
end

game.Players.LocalPlayer.Character.Humanoid.HealthChanged:Connect(function()
    updateHealth(game.Players.LocalPlayer)
end)

ในตัวอย่างนี้ แถบพลังชีวิตจะเปลี่ยนขนาดตามค่าพลังชีวิตของผู้เล่น หากผู้เล่นได้รับความเสียหาย แถบพลังชีวิตจะเล็กลง

4.4 การออกแบบหน้าจอเมนู (Menu Design)

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

ตัวอย่างการสร้างเมนูหลัก:

local menuScreen = Instance.new("ScreenGui")
local titleLabel = Instance.new("TextLabel")
local playButton = Instance.new("TextButton")

titleLabel.Text = "Main Menu"
titleLabel.Size = UDim2.new(0, 300, 0, 100)
titleLabel.Position = UDim2.new(0.5, -150, 0, 50)

playButton.Text = "Play"
playButton.Size = UDim2.new(0, 200, 0, 50)
playButton.Position = UDim2.new(0.5, -100, 0.5, -25)

playButton.MouseButton1Click:Connect(function()
    print("Game started!")
    menuScreen:Destroy()  -- ปิดเมนูเมื่อเริ่มเกม
end)

titleLabel.Parent = menuScreen
playButton.Parent = menuScreen
menuScreen.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui")

ในตัวอย่างนี้ ผู้เล่นสามารถเลือกปุ่ม "Play" เพื่อเริ่มเกม เมื่อคลิกแล้ว เมนูจะถูกปิดออกจากหน้าจอ

ในบทเรียนนี้ นักเรียนได้เรียนรู้การสร้างและจัดการอินเทอร์เฟซผู้ใช้ (UI) ใน Roblox Studio รวมถึงการสร้างป้ายข้อความ, ปุ่ม, แถบพลังชีวิต, และเมนูหลัก การจัดการ UI ที่ดีจะช่วยให้เกมมีความน่าสนใจและทำให้ผู้เล่นสามารถโต้ตอบกับเกมได้อย่างมีประสิทธิภาพ