FiveM Custom HUD คืออะไร วิธีทำและโครงสร้างระบบ HUD แบบละเอียด
FiveM Custom HUD คือ HUD ที่ผู้พัฒนาหรือเจ้าของ Server ออกแบบขึ้นเองเพื่อแสดงข้อมูลของผู้เล่นและรถแทนหรือเพิ่มเติมจาก HUD เดิมของ GTA V เช่น Health, Armor, Hunger, Thirst, Stress, Voice, Money, Job, Speed, Fuel, Seatbelt และข้อมูล Roleplay อื่น ๆ
Custom HUD ของ FiveM จำนวนมากสร้างด้วย NUI ซึ่งเป็นระบบ UI แบบ HTML ของ CitizenFX ที่ใช้ Chromium Embedded Framework และสามารถพัฒนา Interface ด้วย HTML, CSS และ JavaScript รวมถึง Framework ฝั่งเว็บได้.
โครงสร้างพื้นฐานจึงมักเป็น
FiveM Client Script
↓
อ่าน Player / Vehicle State
↓
SendNUIMessage
↓
HTML + CSS + JavaScript
↓
Custom HUD บนหน้าจอ
บทความนี้จาก comsiam จะลงรายละเอียดตั้งแต่โครงสร้าง Resource, fxmanifest.lua, ui_page, SendNUIMessage, NUI Callback, Focus ไปจนถึงการ Optimize Custom HUD ไม่ให้กิน FPS เกินจำเป็น
① FiveM Custom HUD คืออะไร
Custom HUD คือ Interface ที่ Server ควบคุม Design และข้อมูลที่จะแสดงเอง
ตัวอย่าง
Health
Armor
Hunger
Thirst
Stress
Stamina
Voice
Radio
Money
Bank
Job
Player ID
Speed
RPM
Fuel
Gear
Seatbelt
Street
Compass
HUD เหล่านี้สามารถถูกวางเป็น Fullscreen NUI ซึ่ง FiveM ระบุว่าเป็น UI Page ที่ Overlay อยู่เหนือ Game View.
② Custom HUD ต่างจาก HUD เดิมอย่างไร
HUD เดิมเป็น Interface ที่ GTA V มีอยู่แล้ว
ส่วน Custom HUD เป็น Resource ที่ Server สร้างหรือเพิ่มเอง
ตัวอย่าง
GTA HUD
+
FiveM Custom HUD
หรือ
ซ่อน GTA HUD บางส่วน
↓
ใช้ Custom HUD แทน
Custom HUD จึงไม่ได้หมายความว่าต้องปิด GTA HUD ทั้งหมดเสมอไป
③ Custom HUD ต่างจาก NUI อย่างไร
จำง่าย ๆ
Custom HUD
= สิ่งที่ต้องการสร้าง
NUI
= เทคโนโลยีที่ใช้สร้าง UI
FiveM ระบุว่า NUI เป็นระบบ User Interface แบบ HTML และ Fullscreen NUI สามารถแสดง Overlay เหนือเกมได้.
④ FiveM NUI ใช้อะไรสร้าง
NUI รองรับ Web Technologies เช่น
HTML
CSS
JavaScript
และ Cfx.re ระบุว่ายังสามารถใช้งาน Framework อย่าง React หรือ Angular รวมถึง WebGL ได้ภายในระบบ NUI.
อย่างไรก็ตาม HUD ธรรมดาไม่จำเป็นต้องใช้ Framework ขนาดใหญ่เสมอไป
⑤ โครงสร้าง Custom HUD พื้นฐาน
Resource อาจมีลักษณะ
custom_hud/
├── fxmanifest.lua
├── client.lua
└── html/
├── index.html
├── style.css
└── app.js
จากนั้น Resource Manifest กำหนด NUI Page ผ่าน ui_page และ Files ที่ Client ต้องได้รับ.
⑥ fxmanifest.lua สำหรับ Custom HUD ทำอะไร
Resource Manifest ใช้กำหนดว่า Resource มี Script และ UI Files อะไรบ้าง รวมถึง ui_page ของ NUI.
ตัวอย่างแนวคิด
fx_version 'cerulean'
game 'gta5'
client_script 'client.lua'
ui_page 'html/index.html'
files {
'html/index.html',
'html/style.css',
'html/app.js'
}
FiveM ระบุว่าเมื่อ ui_page เป็น Local File ตัวไฟล์และ Dependencies ต้องถูกเพิ่มใน Resource Packfile ผ่าน files.
⑦ ui_page คืออะไร
ui_page คือ Resource Manifest Entry ที่กำหนด NUI Page ของ Resource
ตัวอย่าง
ui_page 'html/index.html'
Cfx.re ระบุว่า ui_page สามารถอ้าง Local File หรือ Absolute URL ได้ แต่ถ้าเป็น Local File ต้องประกาศ Files ที่เกี่ยวข้องใน Manifest ด้วย.
⑧ HTML มีหน้าที่อะไร
HTML กำหนด Structure ของ HUD
เช่น
<div id="hud">
<div id="health"></div>
<div id="armor"></div>
</div>
จากนั้น CSS กำหนดหน้าตา และ JavaScript รับข้อมูลจาก FiveM เพื่อ Update Elements
⑨ CSS มีหน้าที่อะไร
CSS ใช้กำหนด
ตำแหน่ง
ขนาด
Typography
Responsive Layout
Animation
Visibility
ของ HUD
การออกแบบควรรองรับหลาย Resolution และ Aspect Ratio มากกว่าล็อกไว้เฉพาะหน้าจอหนึ่งขนาด
⑩ JavaScript ทำอะไรใน HUD
JavaScript มักรับ Message จาก FiveM Client Script แล้วแก้ Interface
FiveM Documentation แสดงตัวอย่าง NUI ฝั่ง Browser ใช้
window.addEventListener('message', (event) => {
// process event.data
})
เพื่อรับข้อมูลที่ถูกส่งผ่าน NUI Message.
⑪ SendNUIMessage คืออะไร
สำหรับ Lua FiveM มี
SendNUIMessage(table)
เพื่อส่งข้อมูลจาก Script ไปยัง NUI.
ตัวอย่าง
SendNUIMessage({
action = 'updateHealth',
value = 85
})
⑫ JavaScript รับ Health อย่างไร
ตัวอย่าง
window.addEventListener('message', function(event) {
if (event.data.action === 'updateHealth') {
document.getElementById('health').style.width =
event.data.value + '%';
}
});
แนวทางนี้ใช้ Message Flow ตาม Fullscreen NUI ของ FiveM ซึ่งให้ Game Script ส่งข้อมูลไปยัง Browser-side UI.
⑬ HUD ควรมี Action Type หรือไม่
ควรจัด Message ให้เป็นระบบ เช่น
updateHealth
updateArmor
updateMoney
updateVoice
showVehicleHud
hideVehicleHud
แทนส่ง Object ใหญ่หนึ่งก้อนโดยไม่มีโครงสร้าง
จะช่วยให้ Debug ได้ง่ายขึ้นเมื่อ HUD โต
⑭ ส่งข้อมูล HUD ทั้งหมดใน Message เดียวได้ไหม
ได้ในเชิง Architecture เช่น
SendNUIMessage({
action = 'updateStatus',
health = health,
armor = armor,
hunger = hunger,
thirst = thirst
})
FiveM รับ Table ใน SendNUIMessage และส่งข้อมูลให้ NUI.
แต่ควรเลือกว่าจะ Batch หรือ Update แยกตามความถี่ของข้อมูล
⑮ ข้อมูลอะไรควร Update บ่อย
เช่น
Speed
RPM
Health
Armor
Voice Activity
อาจต้องแสดงผลตอบสนองค่อนข้างเร็ว
แต่ความถี่จริงควรทดสอบกับ UX และ Performance ของ Resource
⑯ ข้อมูลอะไรไม่ควร Update ทุก Frame
ตัวอย่าง
Job
Job Grade
Player Name
Bank
Cash
Server ID
หากข้อมูลเหล่านี้เปลี่ยนนาน ๆ ครั้ง สามารถ Update เมื่อ Event เกิด แทนการส่งซ้ำทุก Frame
นี่ช่วยลดงานที่ Script และ UI ต้องทำโดยไม่จำเป็น
⑰ Custom HUD ทำ FPS ตกได้อย่างไร
ปัญหาอาจเกิดจากหลาย Layer เช่น
Client Loop หนัก
SendNUIMessage ถี่เกิน
JavaScript ทำงานมาก
DOM Update จำนวนมาก
UI Animation จำนวนมาก
Resource อื่นทำงานซ้ำ
FiveM ระบุว่า Unoptimized Loops สามารถทำให้ Resource ใช้เวลาประมวลผลสูง และมี Resource Monitor กับ Profiler สำหรับช่วยวิเคราะห์ปัญหา Performance.
⑱ อย่าส่ง HUD ทุกอย่างทุก Frame
ตัวอย่างที่ควรระวัง
CreateThread(function()
while true do
Wait(0)
SendNUIMessage({
health = GetEntityHealth(PlayerPedId()),
money = money,
job = job,
hunger = hunger,
thirst = thirst
})
end
end)
ปัญหาไม่ใช่ว่า Wait(0) ผิดเสมอ แต่ Resource กำลังทำและส่งข้อมูลทั้งหมดทุก Game Tick ทั้งที่บางค่าแทบไม่เปลี่ยน
ควรแยก Update Frequency ตามข้อมูล
⑲ แบ่ง Loop HUD อย่างไร
ตัวอย่างแนวคิด
Fast Loop
→ Vehicle Speed
Medium Loop
→ Health / Armor
Event-based
→ Money / Job / Voice Mode Change
แล้ววัดผลด้วยเครื่องมือจริง ไม่ใช้ตัวเลข Interval จาก Resource อื่นโดยไม่ทดสอบ
⑳ Event-driven HUD คืออะไร
แทนที่จะถามทุก Frame ว่า
Job เปลี่ยนหรือยัง?
Money เปลี่ยนหรือยัง?
ระบบสามารถให้ Resource ต้นทางแจ้งเมื่อค่ามีการเปลี่ยน
จากนั้น
Data Changed
↓
Event
↓
HUD State
↓
SendNUIMessage
ช่วยลด Polling ที่ไม่จำเป็น
㉑ Player HUD คืออะไร
Player HUD คือส่วนที่เกี่ยวกับ Character เช่น
Health
Armor
Hunger
Thirst
Stress
Voice
Job
Money
ควรแยกออกจาก Vehicle HUD เพื่อให้เปิด/ปิดและ Optimize ได้ง่ายกว่า
㉒ Vehicle HUD คืออะไร
Vehicle HUD ใช้แสดง
Speed
RPM
Gear
Fuel
Engine
Seatbelt
และควรทำงานเมื่อ Player อยู่ใน Vehicle ที่เกี่ยวข้อง
ไม่จำเป็นต้อง Calculate Speedometer ตลอดเวลาขณะที่ผู้เล่นกำลังเดิน
㉓ แยก Player HUD กับ Vehicle HUD ดีอย่างไร
ทำให้ State ชัดขึ้น
Player เดิน
→ Player HUD ON
→ Vehicle HUD OFF
Player ขึ้นรถ
→ Player HUD ON
→ Vehicle HUD ON
Player ลงรถ
→ Vehicle HUD OFF
ช่วยลดปัญหา Speedometer ค้างหลังลงจากรถ
㉔ Custom HUD ต้องใช้ ESX หรือไม่
ตัว NUI ไม่จำเป็นต้องพึ่ง ESX เพราะ NUI และ SendNUIMessage เป็นระบบของ FiveM.
แต่ HUD ที่ต้องการ
Job
Money
Hunger
Thirst
อาจถูกพัฒนาให้รับข้อมูลจาก ESX โดยเฉพาะ
㉕ Custom HUD ต้องใช้ QBCore หรือไม่
ไม่จำเป็นในระดับ NUI เช่นกัน
แต่ HUD ที่เขียนสำหรับ QBCore อาจคาดหวัง Player Data หรือ Metadata จาก QBCore
ถ้านำไปใช้ Standalone Server จำเป็นต้องเปลี่ยน Data Adapter ให้ตรงระบบ
㉖ Standalone Custom HUD คืออะไร
คือ HUD ที่ Core UI ไม่ผูกกับ Framework ใดเป็นพิเศษ
ตัวอย่าง Data เช่น
Health
Armor
Vehicle Speed
สามารถอ่านจาก Game State ได้
ส่วนข้อมูลเฉพาะ Framework ค่อยต่อ Adapter เพิ่ม
Architecture แบบนี้ช่วยให้เปลี่ยน Framework ได้ง่ายขึ้น
㉗ Custom HUD รับข้อมูลจาก Server อย่างไร
แนวคิดทั่วไป
Server State
↓
Client Event / State
↓
Client HUD Script
↓
SendNUIMessage
↓
NUI
ไม่ควรให้ NUI เป็นผู้ตัดสิน Gameplay Authority
UI ควรมีหน้าที่แสดงผลเป็นหลัก
㉘ NUI ส่งข้อมูลกลับเข้าเกมได้ไหม
ได้
FiveM มี NUI Callbacks สำหรับส่งข้อมูลจาก UI กลับเข้าสู่ Game Script และข้อมูลที่ส่งหรือรับต้องสามารถ Encode เป็น JSON ได้.
เหมาะกับ HUD Settings เช่น
Show Health
Hide Money
HUD Scale
Position
Reset Layout
㉙ ตัวอย่าง NUI Callback
ฝั่ง Lua สามารถ Register Callback ตามระบบ FiveM ได้
RegisterNuiCallback('saveSettings', function(data, cb)
-- save settings
cb({
ok = true
})
end)
FiveM ระบุว่าข้อมูลตอบกลับผ่าน cb จะถูกส่งคืนไปยัง UI.
㉚ Callback ต้องตอบ cb ทุกครั้งไหม
ควร
Cfx.re ระบุโดยตรงว่าควร Return ข้อมูลผ่าน Callback ทุกครั้ง ไม่เช่นนั้น Request สามารถ Timeout และทำให้ฝั่ง fetch เกิด Error ได้.
ดังนั้นแม้ไม่มีข้อมูลก็สามารถตอบ
cb({
ok = true
})
㉛ NUI Callback ปัจจุบันใช้ API อะไร
เอกสาร Function RegisterNUICallback ระบุว่าเป็น Legacy API สำหรับ Backwards Compatibility และแนะนำให้ New Code ใช้ REGISTER_NUI_CALLBACK ตามเอกสาร NUI Callback ปัจจุบัน.
ดังนั้นเมื่อพัฒนา Resource ใหม่ควรตรวจ Documentation ปัจจุบันแทน Copy Code เก่ามาโดยไม่ดู Version
㉜ NUI Focus คืออะไร
Fullscreen NUI สามารถรับ Keyboard และ Mouse Focus ได้ผ่าน
SET_NUI_FOCUS
Cfx.re ระบุว่า Native นี้ใช้กำหนด Keyboard Focus และ Mouse Cursor Focus ให้ Resource NUI.
HUD แสดงข้อมูลอย่างเดียวไม่ควรจับ Focus ตลอดเวลา
㉝ HUD Settings เปิดแล้วเมาส์ต้องออกอย่างไร
แนวคิดคือ
เปิด Settings
→ SetNuiFocus(true, true)
ปิด Settings
→ SetNuiFocus(false, false)
เพราะหากไม่คืน Focus ผู้เล่นอาจพบอาการ
เมาส์ติดหน้าจอ
เดินไม่ได้
กดเกมไม่ได้
ระบบ NUI Focus ของ FiveM มี Focus Stack และ Resource ล่าสุดที่ Focus จะอยู่ด้านบน.
㉞ ทำไม NUI หลายตัวแย่ง Focus กันได้
FiveM ระบุว่า NUI มี Focus Stack จำกัด และ Resource ที่ถูก Focus ล่าสุดจะอยู่บนสุด อีกทั้ง Fullscreen NUI Resources ทำงานเป็น Fullscreen iframes และไม่มี Click-through ข้าม Resource.
ถ้ามี
Inventory
Phone
HUD Settings
Clothing Menu
เปิด Focus พร้อมกัน อาจเกิด UI Conflict ได้
㉟ HUD ปกติควรใช้ Focus หรือไม่
ถ้า HUD มีหน้าที่เพียง
แสดง Health
แสดง Armor
แสดง Money
ไม่จำเป็นต้อง Focus
ใช้ Focus เฉพาะเมื่อผู้เล่นต้อง Interaction กับ HUD
㊱ NUI Files อ้างไฟล์กันอย่างไร
FiveM Fullscreen NUI Register Protocol Scope รูปแบบ https://cfx-nui- สำหรับ Files ภายใน Resource และวิธีเดิมที่ใช้ nui:// ไม่ใช่ Secure Context ใน Browser รุ่นใหม่แล้ว.
ดังนั้น Tutorial รุ่นเก่าที่ใช้ Path แบบเก่าควรถูกตรวจสอบก่อนนำมาใช้
㊲ fx_version cerulean เกี่ยวอะไรกับ NUI
Resource Manifest Documentation ระบุว่า cerulean โหลด NUI Resources ใน Secure Context เพื่อรองรับ WASM และ fetch APIs และ NUI Callback URLs ต้องใช้ HTTPS แทน HTTP.
นี่สำคัญมากเมื่อแก้ Custom HUD รุ่นเก่า
㊳ ทำไม fetch แบบ http จาก Tutorial เก่าอาจพัง
เพราะเมื่อ Resource ใช้ cerulean เอกสาร FiveM ระบุว่า NUI ถูกโหลดเป็น Secure Context และ Callback URLs ต้องใช้ https://.
ดังนั้น Code เก่าควรถูกอัปเดตตาม Resource Manifest Version ปัจจุบัน
㊴ HUD ไม่ขึ้นต้องตรวจอะไรเป็นอันดับแรก
ตรวจตาม Layer
Resource Started?
↓
fxmanifest.lua ถูก?
↓
ui_page ถูก?
↓
files ครบ?
↓
HTML โหลด?
↓
SendNUIMessage ทำงาน?
↓
JavaScript รับ Message?
↓
CSS ซ่อน Element หรือไม่?
Fullscreen NUI ต้องกำหนด ui_page และ Client-side UI Files ต้องอยู่ใน Resource Packfile.
㊵ HUD Resource Start แต่หน้า UI ว่าง
หาก Resource ทำงานแต่ไม่มีอะไรบนหน้าจอ ให้ตรวจ
index.html
JavaScript Error
CSS
File Path
ui_page
files
อย่าแก้ Framework Data ก่อนพิสูจน์ว่า NUI Page Render ได้
㊶ HUD ขึ้นแต่ Health ไม่เปลี่ยน
ตอนนี้ UI Layer ผ่านแล้ว
ให้ตรวจ
Player Health Source
Update Loop/Event
SendNUIMessage
Message Action
JavaScript Handler
เพราะ FiveM SendNUIMessage มีหน้าที่ส่ง Table Data ไปยัง NUI.
㊷ HUD ขึ้นแต่ Money ไม่เปลี่ยน
หาก Health เปลี่ยนแต่ Money ไม่เปลี่ยน ให้สงสัย Framework/Data Integration มากกว่า NUI
ตรวจ
Money Event
Player Data
HUD Adapter
Message
อย่าลบ index.html เพราะ Interface พิสูจน์แล้วว่าทำงาน
㊸ HUD หายเฉพาะตอนเข้า Vehicle
ตรวจ Visibility State
ตัวอย่าง Bug
enter vehicle
→ hide player hud
show vehicle hud
→ error
ผล
→ ไม่มี HUD อะไรขึ้นเลย
ควรแยก playerVisible และ vehicleVisible ให้ชัด
㊹ Vehicle HUD ไม่หายหลังลงรถ
ให้ตรวจ Exit Vehicle State
เช่น
Is player still in vehicle?
↓
No
↓
Send hideVehicleHud
อย่าปล่อยให้ JavaScript เดาว่าผู้เล่นลงรถแล้วเอง
㊺ HUD หายหลัง Respawn
ตรวจ Resource ที่ Update Player State หลัง
Death
Respawn
Character Load
Ped Change
Custom HUD ที่ผูก Ped Handle เก่าไว้โดยไม่ Refresh หลัง Character State เปลี่ยนอาจแสดงข้อมูลผิด
㊻ HUD หายหลัง Restart Resource
FiveM Resources สามารถถูก Start, Stop และ Restart แยกกันได้ ดังนั้น Custom HUD ต้องมี Initial State Loading ที่ทำงานอีกครั้งหลัง Resource Start.
เช่นหลัง Restart ต้องส่ง
show
health
armor
money
job
กลับเข้า NUI ใหม่ตามความจำเป็น
㊼ Resource Restart แล้ว Mouse ค้าง
นี่เป็น Bug ที่ควรแก้ใน Cleanup
เมื่อ Resource หยุดควรตรวจว่า
NUI Focus ถูกคืนหรือไม่
Settings State ถูก Reset หรือไม่
เพราะ Focus ถูกควบคุมผ่าน SET_NUI_FOCUS.
㊽ NUI Developer Tools ใช้ Debug HUD ได้ไหม
ได้
FiveM ระบุว่า CEF Remote Debugging Tools ใช้งานได้ขณะเกมทำงาน และสามารถเปิดผ่านคำสั่ง nui_devTools ใน F8 Console เมื่อ Developer Mode พร้อมใช้งาน.
นี่มีประโยชน์มากสำหรับดู
JavaScript Error
Console Log
DOM
CSS
Network/Fetch
㊾ F8 ใช้ทำอะไร
FiveM Client Console เปิดด้วย F8 และ Documentation ระบุว่าคำสั่ง Client-side เหล่านี้ใช้ช่วยพัฒนา Server และ Debug Resource Issues ได้.
ถ้า HUD ไม่ขึ้นให้ตรวจ F8 ก่อน Reinstall Resource
㊿ resmon ใช้ตรวจ HUD ได้อย่างไร
FiveM มี Resource Monitor ซึ่งเปิดได้ด้วย
resmon true
และแสดงข้อมูล เช่น CPU Usage ในหน่วยมิลลิวินาทีและ Memory ของแต่ละ Resource.
ถ้า custom_hud ใช้ CPU สูงผิดปกติ ให้ตรวจ Client Loops ก่อนเปลี่ยน CSS ทั้งหมด
51. resmon ขึ้น Access Denied ทำอย่างไร
Cfx.re ระบุว่าบาง Environment โดยเฉพาะ Production Build อาจปฏิเสธคำสั่ง resmon และอาจต้องเปิด Developer Mode ตามวิธีที่ Documentation กำหนด.
อย่าสรุปว่า Resource Monitor ถูกลบเพียงเพราะคำสั่งไม่ได้รับสิทธิ์
52. Profiler ใช้ตรวจ HUD ได้อย่างไร
FiveM Profiler ใช้วิเคราะห์ว่า Resource หรือ Code ส่วนใดใช้เวลาประมวลผลมาก และใช้งานได้ทั้ง Client และ Server.
เหมาะเมื่อรู้ว่า HUD Resource หนัก แต่ยังไม่รู้ว่า Thread หรือ Function ใดเป็นต้นเหตุ
53. HUD หนักไม่ได้แปลว่า NUI หนักเสมอ
หาก Resmon แสดง Client Script ใช้เวลาสูง อาจเกิดจาก
Loop
Framework Query
Vehicle Calculation
Native Calls
ไม่ใช่ HTML/CSS
ต้องวัดก่อนปรับ
54. HUD สวยมากแต่กระตุกควรลดอะไร
ตรวจทีละส่วน
Client CPU
↓
Message Frequency
↓
DOM Updates
↓
CSS Animations
↓
Transparency / Effects
อย่าลดทุกอย่างพร้อมกัน เพราะจะไม่รู้ว่าอะไรเป็นตัวแก้ปัญหาจริง
55. ควรส่ง NUI Message เมื่อค่าเปลี่ยนเท่านั้นหรือไม่
เป็นแนวทางที่ดีสำหรับค่าที่ไม่ต้อง Refresh ต่อเนื่อง
ตัวอย่าง
if health ~= lastHealth then
lastHealth = health
SendNUIMessage({
action = 'health',
value = health
})
end
SendNUIMessage รองรับการส่งข้อมูลแบบ Table โดยตรง.
56. Cache ค่าเดิมช่วยอะไร
เช่น
health = 100
lastHealth = 100
ไม่มีเหตุผลต้องส่ง Message ซ้ำหาก UI แสดง 100 อยู่แล้ว
เมื่อเปลี่ยนเป็น 99 จึงส่ง Update
แนวทางนี้ช่วยลด Message ที่ไม่มีผลต่อ Interface
57. HUD ควร Responsive หรือไม่
ควรออกแบบให้รองรับ
1080p
1440p
4K
16:9
21:9
Ultrawide
เพราะ Fullscreen NUI เป็น Web UI Overlay และสามารถใช้ CSS Layout เพื่อรองรับหลาย Viewport ได้.
58. ทำไม Hard-code Pixel อาจเป็นปัญหา
ตัวอย่าง
left: 1750px;
อาจดูถูกบนจอ 1920 px แต่หลุดตำแหน่งเมื่อ Resolution เปลี่ยน
ควรพิจารณา
%
vw
vh
flex
grid
responsive containers
ตาม Design
59. HUD Scale ควรมีหรือไม่
เหมาะกับ Custom HUD ระดับ Production
ให้ผู้เล่นเลือกเช่น
80%
90%
100%
110%
โดย Settings สามารถส่งผ่าน NUI Callback กลับเข้าสู่ Game Scriptได้.
60. HUD Layout ควรบันทึกได้ไหม
หาก Server ต้องการ UX ที่ปรับแต่งได้ สามารถบันทึก
Scale
Position
Visible Elements
Theme
แยกจาก Gameplay Data
อย่าให้ Player Preference ไปแก้ Authority เช่น Money หรือ Health
61. Custom HUD หลายตัวพร้อมกันดีไหม
ควรหลีกเลี่ยงความซ้ำซ้อน เช่น
hud
status_hud
vehicle_hud
speedometer
voice_hud
หากแต่ละ Resource มี Update Loops ของตัวเองโดยไม่วาง Ownership ให้ชัด
ไม่ได้หมายความว่าต้องรวมทุกอย่างเป็น Resource เดียว แต่ต้องรู้ว่า Resource ไหนรับผิดชอบข้อมูลใด
62. HUD กับ Speedometer ควร Resource เดียวกันไหม
ขึ้นกับ Architecture
แยก
player_hud
vehicle_hud
ช่วย Debug แยก
รวม
สามารถแชร์ UI/State Layer ได้ง่าย
ไม่มีแบบเดียวที่ถูกเสมอ แต่ไม่ควรมี Resource สองตัวแสดง Speed ซ้ำโดยไม่ตั้งใจ
63. NUI กับ DUI ต่างกันอย่างไร
FiveM มี Direct-rendered UI หรือ DUI ซึ่ง Render NUI ไปยัง Runtime Texture และรองรับ Use Cases เช่น Render UI บน Game Render Target หรือใน World Space.
Custom HUD แบบ Overlay ปกติส่วนใหญ่ใช้ Fullscreen NUI ไม่จำเป็นต้องใช้ DUI
64. Custom HUD ต้องใช้ DUI ไหม
ไม่
ถ้าต้องการ Health Bar หรือ Vehicle HUD บนหน้าจอ
Fullscreen NUI
ก็เพียงพอ
DUI เหมาะกับงานอย่างหน้าจอ TV หรือ UI ที่ Render บน Object/Surface ในโลกเกมมากกว่า.
65. Loading Screen ใช้ระบบเดียวกับ HUD ไหม
Loading Screen ของ FiveM เป็น NUI Frame พิเศษที่ถูกแสดงระหว่างการ Loading/Join Server และกำหนดผ่าน loadscreen ใน Resource Manifest.
จึงใช้เทคโนโลยี UI ใกล้เคียงกัน แต่ Lifecycle และหน้าที่ต่างจาก Gameplay HUD
66. Custom HUD ที่ดีควรแบ่ง Layer อย่างไร
Architecture ที่ดูแลง่าย
Game / Framework Data
↓
HUD State
↓
UI Adapter
↓
SendNUIMessage
↓
NUI State
↓
Render
อย่าให้ JavaScript ไป Query Gameplay Data เองหลายทางจน State ซ้ำกัน
67. ตัวอย่าง HUD State
local hudState = {
health = 100,
armor = 0,
hunger = 100,
thirst = 100,
inVehicle = false,
speed = 0
}
จากนั้น Update เฉพาะค่าที่เปลี่ยน
ทำให้ Debug ได้ว่าปัญหาเกิดที่ Data หรือ Render
68. วิธี Debug Custom HUD แบบเร็วที่สุด
ใช้ลำดับนี้
ขั้นที่ 1 — Resource
ตรวจว่า Resource Start หรือไม่
FiveM Resources สามารถ Start/Stop/Restart เป็นหน่วยแยกได้.
ขั้นที่ 2 — Manifest
ตรวจ
fxmanifest.lua
ui_page
files
ui_page และ Dependencies ต้องประกาศตาม Resource Manifest.
ขั้นที่ 3 — HTML
ตรวจว่า NUI Page โหลดได้
ขั้นที่ 4 — Send Test Message
SendNUIMessage({
action = 'show'
})
FiveM รองรับ Message จาก Script ไป NUI โดยตรง.
ขั้นที่ 5 — JavaScript
ตรวจ window.addEventListener('message', ...)
ซึ่งเป็น Pattern ที่ Cfx.re แสดงใน Fullscreen NUI Documentation.
ขั้นที่ 6 — CSS
ตรวจว่า Element ไม่ได้ถูกซ่อน
ขั้นที่ 7 — Data Source
ถ้า UI ขึ้นแต่ข้อมูลผิด
ขั้นที่ 8 — NUI Focus
ถ้าเมาส์หรือ Keyboard ค้าง.
ขั้นที่ 9 — NUI Callback
ถ้า Settings กดแล้วไม่ทำงาน ให้ตรวจ Callback และต้องตอบ cb.
ขั้นที่ 10 — Performance
ใช้
resmon true
และ Profiler เมื่อ Resource ใช้เวลาสูง.
ตารางสรุปปัญหา FiveM Custom HUD
| อาการ | จุดที่ควรตรวจ |
|---|---|
| HUD ไม่ขึ้นเลย | Resource / ui_page |
| HTML ไม่โหลด | Manifest / files |
| HUD ขึ้นแต่ไม่มีข้อมูล | SendNUIMessage |
| Health ไม่เปลี่ยน | Player State / Update |
| Money ไม่เปลี่ยน | Framework Integration |
| Vehicle HUD ค้าง | Vehicle State |
| เมาส์ค้าง | NUI Focus |
| Settings กดแล้วค้าง | NUI Callback |
| Callback Timeout | ไม่ตอบ cb |
| Tutorial เก่า fetch ไม่ได้ | Secure NUI / HTTPS |
| HUD CPU สูง | Client Loop |
| FPS ลด | Resource/NUI Performance |
| 4K HUD เล็ก | Responsive/Scale |
| Ultrawide HUD หลุด | Layout |
| Restart แล้ว HUD หาย | Initial State |
| Restart แล้ว Mouse ค้าง | Focus Cleanup |
Checklist Custom HUD ก่อนใช้งานจริง
☐ fxmanifest.lua ถูก
☐ ui_page ถูก
☐ files ครบ
☐ HTML โหลดได้
☐ CSS โหลดได้
☐ JavaScript โหลดได้
☐ SendNUIMessage ทำงาน
☐ NUI Message Handler ทำงาน
☐ Health ถูก
☐ Armor ถูก
☐ Money ถูก
☐ Job ถูก
☐ Vehicle HUD ถูก
☐ NUI Callback ตอบ cb
☐ Focus เปิด/ปิดถูก
☐ Resource Restart ได้
☐ Death/Respawn ได้
☐ 1080p ถูก
☐ 1440p ถูก
☐ 4K ถูก
☐ Ultrawide ใช้ได้
☐ resmon ไม่สูงผิดปกติ
วิธี Optimize FiveM Custom HUD
จำหลัก
อย่า Update ถ้าไม่จำเป็น
↓
แยก Fast / Slow / Event Data
↓
อย่าส่งข้อมูลเดิมซ้ำ
↓
Update UI เฉพาะส่วนที่เปลี่ยน
↓
ลด Client Loop ที่ไม่จำเป็น
↓
ตรวจ resmon
↓
ตรวจ Profiler
FiveM ระบุว่า Resource Monitor ใช้ดู CPU/Memory ของ Resources และ Profiler ใช้ช่วยวิเคราะห์ว่าทำไม Resource จึงใช้เวลาประมวลผลสูง.
Custom HUD ที่ดีไม่จำเป็นต้องซับซ้อน
HUD ที่มี
Health
Armor
Hunger
Thirst
Voice
Speed
แต่ใช้ State Management ที่ดีและทำงานลื่น อาจเหมาะกับ Server มากกว่า HUD ที่มี Animation จำนวนมากแต่ Update ทุกอย่างตลอดเวลา
เป้าหมายควรเป็น
อ่านง่าย
ตอบสนองเร็ว
ไม่บัง Gameplay
ปรับตาม Resolution
ใช้ทรัพยากรเหมาะสม
สิ่งที่ไม่ควรทำกับ Custom HUD
หลีกเลี่ยง
SendNUIMessage ทุกข้อมูลทุก Frame
Query Framework ทุก Tick
ใช้ NUI Focus ค้างตลอดเวลา
ไม่คืน Focus ตอน Resource Stop
ไม่ตอบ NUI Callback
ใช้ HTTP Callback กับ Secure NUI รุ่นปัจจุบัน
Hard-code HUD เฉพาะ 1920x1080
มี HUD หลาย Resource แสดงข้อมูลซ้ำ
แก้ CSS ก่อนตรวจ resmon
เปลี่ยน HUD ทั้งตัวโดยไม่อ่าน F8 Error
โดยเฉพาะเรื่อง NUI Callback และ Secure Context ควรยึด Documentation ปัจจุบันของ Cfx.re เนื่องจาก Resource Manifest รุ่น cerulean ใช้ Secure NUI Context และ Callbacks ต้องใช้ HTTPS.
สูตรจำง่ายสำหรับ FiveM Custom HUD
DATA
↓
STATE
↓
MESSAGE
↓
NUI
↓
RENDER
ถ้า HUD พัง ให้หาว่าปัญหาหยุดอยู่ขั้นไหน
Data ผิด?
State ผิด?
Message ไม่ส่ง?
NUI ไม่รับ?
หรือ Render ไม่ขึ้น?
สรุป FiveM Custom HUD คืออะไร
FiveM Custom HUD คือ Interface ที่ Server ออกแบบขึ้นเองเพื่อแสดงข้อมูลผู้เล่นและ Vehicle โดย Custom HUD จำนวนมากใช้ระบบ Fullscreen NUI ของ FiveM ซึ่งเป็น HTML-based UI ที่ Overlay อยู่บน Game View.
โครงสร้างพื้นฐานคือ
fxmanifest.lua
↓
ui_page
↓
HTML / CSS / JavaScript
↓
Client Script
↓
SendNUIMessage
↓
HUD
Resource Manifest ใช้ ui_page กำหนด NUI Page และ Local Files ที่ NUI ต้องใช้ต้องถูกประกาศใน Resource Packfile.
หาก HUD ไม่ขึ้นเลย ให้ตรวจ Resource, ui_page และ files
หาก HUD ขึ้นแต่ข้อมูลไม่เปลี่ยน ให้ตรวจ Client State และ SendNUIMessage
หาก กด HUD Settings แล้วเมาส์ค้าง ให้ตรวจ SET_NUI_FOCUS เพราะ Fullscreen NUI สามารถรับ Keyboard/Mouse Focus ได้.
หาก NUI Settings กดแล้ว Request ค้าง ให้ตรวจ Callback และตอบ cb ทุกครั้ง เพราะ Cfx.re ระบุว่า Callback ที่ไม่ตอบสามารถ Timeout ได้.
หาก HUD ทำ FPS ตก ให้ตรวจ Runtime ด้วย resmon true และ Profiler ก่อนสรุปว่าสาเหตุคือ CSS หรือ NUI เพราะ FiveM Resource Monitor สามารถแสดง CPU และ Memory ของ Resource ได้ และ Profiler ใช้หาส่วนของ Code ที่ใช้เวลาสูง.
สำหรับ Resource ใหม่ควรระวัง Tutorial NUI รุ่นเก่า เนื่องจาก cerulean ใช้ Secure Context และ Callback URL ต้องใช้ HTTPS ตาม Resource Manifest Documentation ปัจจุบัน.
แนวทางของ comsiam คือสร้าง Custom HUD โดยแยก Data, HUD State และ UI Rendering ออกจากกัน แล้ว Update เฉพาะข้อมูลที่จำเป็น วิธีนี้ทำให้ HUD Debug ง่ายกว่า รองรับ Framework ต่าง ๆ ได้สะดวกกว่า และลดโอกาสที่ Interface สวยแต่ Client ต้องเสีย Performance โดยไม่จำเป็น
Comments
Post a Comment