Progress Bar ใน FiveM — สร้าง Action ที่ Immersive ด้วย M2.Progress

Progress bar เป็นหนึ่งใน UI element ที่สำคัญที่สุดใน FiveM server ช่วยให้ผู้เล่นรู้ว่ากำลังทำอะไรอยู่และต้องรออีกนานแค่ไหน M2.Progress คือ library ที่ออกแบบมาเพื่อจุดประสงค์นี้โดยเฉพาะ

M2.Progress คืออะไร?

M2.Progress เป็น port จาก mythic_progbar ที่มี callback 4 แบบ ครอบคลุมทุก use case:

1. Simple — progress bar ธรรมดา ไม่มี callback ระหว่างทาง
2. withStart — มี callback ตอนเริ่มต้น
3. withTick — มี callback ทุก tick
4. withStartAndTick — มีทั้ง start และ tick callback

การใช้งาน

1. Simple Progress Bar

exports['M2.Progress']:Progress({
    name = 'drink_water',
    duration = 3000,
    label = 'กำลังดื่มน้ำ...',
    useWhileDead = false,
    canCancel = true,
    disable = {
        car = true,
        move = true,
        combat = true
    },
    anim = {
        dict = 'mp_player_intdrink',
        clip = 'loop_bottle'
    }
}, function(cancelled)
    if not cancelled then
        -- ดื่มน้ำสำเร็จ
        TriggerServerEvent('myScript:drinkWater')
    end
end)

2. withStart Callback

exports['M2.Progress']:ProgressWithStart({
    name = 'repair_car',
    duration = 10000,
    label = 'กำลังซ่อมรถ...'  
}, function()
    -- ตอนเริ่ม: equip wrench
    TaskPlayAnim(PlayerPedId(), 'anim@amb@clubhouse@tutorial@bkr_tut_ig3_pl@', 'machinic_loop_mechandplayer', 8.0, -8.0, -1, 1, 0, false, false, false)
end, function(cancelled)
    if not cancelled then
        TriggerServerEvent('myScript:repairCar')
    end
end)

3. withTick Callback

exports['M2.Progress']:ProgressWithTick({
    name = 'lockpick',
    duration = 8000,
    label = 'กำลัง lockpick...',
    canCancel = true
}, function(pct)
    -- pct = 0.0 ถึง 1.0
    if pct > 0.5 then
        -- ครึ่งทางแล้ว — เปลี่ยน animation
    end
end, function(cancelled)
    if not cancelled then
        TriggerServerEvent('myScript:unlockCar')
    end
end)

4. withStartAndTick (Full Control)

exports['M2.Progress']:ProgressWithStartAndTick({
    name = 'hacking',
    duration = 15000,
    label = 'กำลัง hack...',
    canCancel = true,
    disable = { move = true, car = true, combat = true }
}, function()
    -- onStart: เปิด laptop prop
end, function(pct)
    -- onTick: update visual feedback
end, function(cancelled)
    if not cancelled then
        TriggerServerEvent('myScript:hackSuccess')
    else
        -- ผู้เล่นยกเลิก
    end
end)

Configuration Options

สรุป

M2.Progress ให้ความยืดหยุ่นสูงสุดในการสร้าง immersive action สำหรับ FiveM server 4 รูปแบบ callback ครอบคลุมทุก use case ตั้งแต่ action ง่าย ๆ ไปจนถึง interaction ที่ซับซ้อน