FiveM HUD คืออะไร ใช้ทำอะไร และทำงานอย่างไร
FiveM HUD คือส่วนติดต่อบนหน้าจอที่ใช้แสดงข้อมูลสำคัญของผู้เล่นระหว่างเล่นเกม เช่น เลือด เกราะ ความหิว ความกระหาย เงิน อาชีพ สถานะไมโครโฟน ความเร็วรถ น้ำมัน หรือข้อมูล Roleplay อื่น ๆ
HUD ย่อมาจาก Heads-Up Display และใน FiveM สามารถใช้ได้ทั้ง HUD เดิมของ GTA V และ Custom HUD ที่สร้างขึ้นเอง โดย Custom HUD จำนวนมากใช้ระบบ NUI ซึ่ง FiveM รองรับหน้า UI แบบ Fullscreen ที่วางซ้อนอยู่เหนือเกม และสามารถรับข้อมูลจาก Script ผ่าน SendNUIMessage.
บทความนี้จาก comsiam จะอธิบายว่า FiveM HUD คืออะไร ต่างจาก NUI, Minimap และ Speedometer อย่างไร รวมถึงโครงสร้างการทำ Custom HUD และสาเหตุที่ HUD บางตัวทำให้ FPS ลด
① FiveM HUD คืออะไร
HUD คือข้อมูลที่แสดงอยู่บนหน้าจอขณะเล่นเกมโดยไม่ต้องเปิด Menu
ตัวอย่าง
Health
Armor
Hunger
Thirst
Stress
Money
Job
Player ID
Voice
Radio
Vehicle Speed
Fuel
Seatbelt
Street Name
Compass
HUD จึงเป็น Interface สำหรับแสดง State ของผู้เล่นหรือ Vehicle แบบต่อเนื่อง
② GTA V มี HUD เดิมอยู่แล้วไหม
มี
GTA V มี HUD Components เดิม เช่น Radar/Minimap และองค์ประกอบ UI ของเกม และ FiveM มี Native สำหรับเปิด ปิด หรือซ่อน HUD Components บางส่วนได้.
Custom Server จึงสามารถเลือก
ใช้ HUD เดิมบางส่วน
+
ซ่อนบางส่วน
+
สร้าง Custom HUD เพิ่ม
ได้
③ Custom HUD คืออะไร
Custom HUD คือ HUD ที่ Server สร้างขึ้นเองเพื่อแทนหรือเสริม HUD เดิม
ตัวอย่างเช่น
Custom Health Bar
Custom Armor Bar
Custom Hunger/Thirst
Voice Status
Job Display
Money Display
Vehicle HUD
มักทำผ่าน NUI ซึ่ง FiveM รองรับการแสดงหน้า UI Overlay บนเกมโดยตรง.
④ HUD ต่างจาก NUI อย่างไร
จำแบบง่าย
HUD
= สิ่งที่ผู้เล่นเห็น
NUI
= เทคโนโลยี UI ที่มักใช้สร้าง HUD
NUI ของ FiveM เป็นช่องทาง UI ที่ใช้ส่งข้อมูลระหว่าง Game Script และ Web-based UI และ SendNUIMessage ใช้ส่งข้อมูลจาก Script ไปยัง NUI.
ดังนั้น Custom HUD จำนวนมากคือ NUI Application รูปแบบหนึ่ง
⑤ NUI ย่อมาจากอะไร
ในเอกสาร FiveM ใช้คำว่า NUI สำหรับระบบ User Interface ที่สื่อสารกับเกม และ Fullscreen NUI สามารถ Overlay อยู่ด้านบนของ Game View ได้.
ในทางพัฒนา คุณสามารถคิดว่าเป็น
HTML
CSS
JavaScript
+
FiveM Script
ทำงานร่วมกันเป็น Interface
⑥ HUD Resource มีโครงสร้างอย่างไร
แนวคิดทั่วไป
hud_resource/
├── fxmanifest.lua
├── client.lua
└── html/
├── index.html
├── style.css
└── script.js
Resource จริงอาจแตกต่างกันตาม Framework และผู้พัฒนา แต่ Fullscreen NUI ต้องถูกกำหนดเป็นส่วนหนึ่งของ Resource และเชื่อมระหว่าง Script กับ UI.
⑦ HUD ทำงานเป็นขั้นตอนอย่างไร
ภาพรวม
Player State
↓
Client Script อ่านค่า
↓
SendNUIMessage
↓
JavaScript รับข้อมูล
↓
HTML/CSS เปลี่ยน UI
↓
ผู้เล่นเห็น HUD
SendNUIMessage รับข้อมูลแบบ Table จาก Lua แล้วส่งไปยัง NUI.
⑧ SendNUIMessage คืออะไร
FiveM มี Function
SendNUIMessage(data)
สำหรับส่งข้อมูลจาก Script ไปยัง NUI และข้อมูลนั้นจะถูกส่งให้ฝั่ง UI.
ตัวอย่างเชิงแนวคิด
SendNUIMessage({
action = 'updateHealth',
value = 100
})
จากนั้น JavaScript สามารถนำ value ไปอัปเดต Health Bar
⑨ HUD จำเป็นต้อง Update ทุก Frame ไหม
ไม่เสมอ
นี่เป็นหนึ่งในจุดสำคัญด้าน Performance
ข้อมูลบางอย่าง เช่น
Health
Armor
Speed
อาจต้อง Update ค่อนข้างบ่อย
แต่ข้อมูลอย่าง
Job
Player Name
Money
ไม่จำเป็นต้องส่งไป NUI ทุก Frame หากค่าไม่ได้เปลี่ยน
ควรอัปเดตเมื่อจำเป็นเพื่อลด Script และ UI Work
⑩ Update ทุก Frame คืออะไร
ใน FiveM Client Script มักพบ Loop เช่น
CreateThread(function()
while true do
Wait(0)
-- update HUD
end
end)
Wait(0) หมายถึง Loop สามารถทำงานเกือบทุก Game Tick
ถ้าภายใน Loop มีงานหนักจำนวนมาก Resource อาจใช้ Client CPU สูงขึ้น ซึ่งสามารถตรวจด้วย Resource Monitor และ Profiler ได้.
⑪ HUD ที่ดีควร Update อย่างไร
ควรแบ่งข้อมูลตามความถี่
ตัวอย่าง
Speed
→ บ่อย
Health
→ บ่อยพอสมควร
Money
→ เมื่อเปลี่ยน
Job
→ เมื่อเปลี่ยน
Voice Mode
→ เมื่อเปลี่ยน
Fuel
→ ระหว่างขับรถ
ไม่ควรใช้ Loop เดียวส่งข้อมูลทั้งหมดทุก Frameโดยไม่มีเหตุผล
⑫ HUD ทำให้ FPS ตกได้ไหม
ได้ หาก Resource ทำงานหนักเกินไป
แต่สาเหตุอาจไม่ได้มาจากกราฟิก HUD เพียงอย่างเดียว
ต้องตรวจ
Client Loops
NUI JavaScript
DOM Updates
Animations
Resource CPU
Memory
Cfx.re แนะนำ Resource Monitor สำหรับดู CPU/Memory ของแต่ละ Resource และ Profiler สำหรับวิเคราะห์ Code ที่ใช้เวลานาน.
⑬ ใช้ resmon ตรวจ HUD ได้ไหม
ได้
FiveM Resource Monitor ใช้ช่วยตรวจว่า Resource ใดใช้ CPU และ Memory มาก และ Cfx.re ระบุว่าเหมาะสำหรับวิเคราะห์ Resource ฝั่ง Client ที่ใช้เวลาประมวลผลสูง.
ถ้าสงสัยว่า HUD ทำ FPS ตก ให้ดู Resource HUD ก่อน
⑭ ใช้ Profiler ตรวจ HUD ได้ไหม
ได้
FiveM Profiler สามารถเริ่มจาก Console ด้วยคำสั่ง profiler record เพื่อบันทึก Frames สำหรับวิเคราะห์ Runtime.
เหมาะเมื่อ
HUD Resource CPU สูง
แต่ไม่รู้ Function ไหนหนัก
⑮ เปิด F8 เพื่อ Debug HUD ได้ไหม
ได้
FiveM Client Console เปิดด้วย F8 และ Cfx.re ระบุว่าใช้สำหรับ Development และ Debug Resource Issues ได้.
ตรวจ Error เช่น
NUI error
JavaScript error
client script error
nil value
callback timeout
ก่อน Reinstall HUD
⑯ HUD ต่างจาก Minimap อย่างไร
Minimap หรือ Radar เป็นองค์ประกอบ Map ของ GTA
HUD เป็นคำกว้างกว่าที่รวม Interface หลายชนิด
ดังนั้น
HUD
├── Health
├── Armor
├── Voice
├── Vehicle Status
└── Minimap/Radar
สามารถมองแบบนี้ได้
FiveM มี DISPLAY_RADAR สำหรับควบคุมการแสดง Minimap/Radar โดยตรง.
⑰ DisplayRadar คืออะไร
Native
DISPLAY_RADAR
ใช้กำหนดว่า Minimap/Radar ควรถูกแสดงหรือไม่.
เช่นแนวคิด
DisplayRadar(true)
หรือ
DisplayRadar(false)
ตามการออกแบบ HUD
⑱ ทำไม Server บางแห่งซ่อน Minimap ตอนเดิน
เพราะต้องการให้ Minimap แสดงเฉพาะตอนขับรถ
แนวคิด
Player เดิน
→ Radar OFF
Player อยู่ Vehicle
→ Radar ON
สามารถใช้ DISPLAY_RADAR ใน Client Logic เพื่อควบคุมได้.
⑲ HUD ต่างจาก Speedometer อย่างไร
Speedometer เป็น HUD ส่วนหนึ่งที่เน้น Vehicle Data
ตัวอย่าง
Speed
Fuel
RPM
Gear
Engine
Seatbelt
ดังนั้น
Speedometer
⊂
HUD
บทความ 301 จะเจาะ Speedometer โดยเฉพาะ
⑳ HUD ต่างจาก Blip อย่างไร
Blip คือ Marker ที่แสดงบน Map/Minimap
ส่วน HUD คือ Interface บนหน้าจอโดยรวม
FiveM มี Natives สำหรับกำหนดว่า Blip จะแสดงบน Main Map หรือ Minimap อย่างไร เช่น SET_BLIP_DISPLAY.
ดังนั้น Blip ไม่ใช่ Custom HUD Bar โดยตรง
㉑ Health HUD คืออะไร
Health HUD คือส่วนที่แสดงพลังชีวิตของ Player
อาจเป็น
Bar
Circle
Icon
Percentage
Custom HUD จะอ่านค่าจาก Player Ped แล้วส่งค่าไปยัง NUI ตาม Architecture ของ Resource
㉒ Armor HUD คืออะไร
คล้าย Health แต่ใช้แสดงเกราะ
มักวางคู่กับ
Health
Armor
หรือรวมไว้ใน Character Status Panel
㉓ Hunger และ Thirst เป็น GTA HUD เดิมไหม
ไม่ใช่ Gameplay Status พื้นฐานที่ GTA HUD เดิมให้กับ FiveM Roleplay Framework โดยอัตโนมัติ
ระบบเหล่านี้มักมาจาก Framework หรือ Custom Resource แล้ว HUD นำค่าที่ Resource นั้นมีมาแสดง
ดังนั้น HUD เป็นเพียง Presentation Layer ไม่ได้สร้าง Hunger System ขึ้นมาเองเสมอไป
㉔ HUD ต้องใช้ ESX ไหม
ไม่จำเป็น
NUI และ FiveM Client Functions เป็นระบบของ FiveM เอง.
แต่ HUD บาง Resource อาจเขียนให้ดึง
ESX Player Data
ESX Job
ESX Money
ESX Status
จึงขึ้นกับ Resource นั้น
㉕ HUD ต้องใช้ QBCore ไหม
ไม่จำเป็นเช่นกัน
แต่ QBCore HUD บางตัวอาจอ่านข้อมูลจาก Framework เช่น
PlayerData
Job
Metadata
Hunger
Thirst
Stress
ถ้านำ HUD ที่ออกแบบสำหรับ QBCore ไปใช้ Server Standalone โดยไม่แก้ Data Layer มันอาจเปิด Resource ได้แต่ไม่มีข้อมูล
㉖ Standalone HUD คืออะไร
Standalone HUD คือ HUD ที่ไม่พึ่ง Framework หลักโดยตรง หรือมี Adapter ให้ใช้กับหลายระบบ
เช่นแสดง
Health
Armor
Voice
Vehicle Speed
จาก FiveM/Game State โดยตรง
แต่ฟีเจอร์อย่าง Job/Money/Hunger ยังต้องมีแหล่งข้อมูลอื่น
㉗ NUI Callback คืออะไร
NUI ไม่ได้ทำงานแบบ Script → UI อย่างเดียว
FiveM ยังรองรับ NUI Callbacks สำหรับส่งข้อมูลจาก UI กลับมายัง Game Script และข้อมูลต้องสามารถ Encode เป็น JSON ได้.
เช่น
ผู้เล่นกดปุ่มใน UI
↓
NUI Callback
↓
Client Script
㉘ HUD จำเป็นต้องใช้ NUI Callback ไหม
ถ้า HUD มีไว้แสดงข้อมูลอย่างเดียวอาจไม่จำเป็น
แต่ถ้ามี Interaction เช่น
เปิด Setting
เลือก Layout
ปรับ Scale
เปิด/ปิด Element
NUI Callback มีประโยชน์ในการส่งคำสั่งกลับไป Script.
㉙ Callback ไม่ตอบกลับเกิดอะไรขึ้น
Cfx.re ระบุว่า NUI Callback ควร Return ผ่าน Callback Function เสมอ หากไม่ตอบกลับ Request สามารถ Timeout และเกิด Error ในฝั่ง UI ได้.
ดังนั้นอย่าลืม
cb(...)
ใน Callback Handler
㉚ SetNuiFocus คืออะไร
Fullscreen NUI สามารถมีหรือไม่มี Input Focus และ FiveM มี SET_NUI_FOCUS สำหรับควบคุม Mouse/Keyboard Focus ของ UI.
HUD ที่แสดงอย่างเดียวมักไม่ควรแย่ง Focus จากเกมตลอดเวลา
㉛ ทำไม HUD เปิดแล้วเดินไม่ได้
ถ้าเปิด HUD/Settings แล้ว
เมาส์โผล่
เดินไม่ได้
กดเกมไม่ได้
ให้ตรวจว่า Resource เรียก
SET_NUI_FOCUS
แล้วไม่ได้คืน Focus หรือไม่
Fullscreen NUI รองรับ Input Focus โดยตรง.
㉜ HUD ปกติควรมี Mouse Cursor ไหม
HUD ที่ใช้แสดงข้อมูลเพียงอย่างเดียวโดยทั่วไปไม่จำเป็นต้องจับ Mouse Focus
แต่ Settings Menu ของ HUD อาจต้องใช้ Cursor ชั่วคราว
แนวคิดคือ
HUD display
→ no focus
HUD settings
→ focus on
close settings
→ focus off
㉝ HUD หายทั้งหมดเกิดจากอะไร
ตรวจ
HUD Resource Started?
NUI Page โหลดไหม?
Client Script Error?
SendNUIMessage ทำงานไหม?
CSS ซ่อนหรือไม่?
ถ้า GTA HUD เดิมยังอยู่แต่ Custom HUD หาย ให้เน้น Resource/NUI Layer ก่อน
㉞ HUD Resource Start แต่ UI ไม่ขึ้น
ให้ตรวจ F8
ถ้า Script ทำงานแต่ NUI File Path หรือ UI Resource มีปัญหา อาจเห็น Error ใน Console
FiveM Fullscreen NUI ต้องถูกประกาศและเชื่อมกับ Resource อย่างถูกต้อง.
㉟ HUD ขึ้นแต่ค่าค้าง
เช่น
Health = 100 ตลอด
Speed = 0 ตลอด
Money ไม่เปลี่ยน
แสดงว่า UI Render ได้แล้ว
ให้ตรวจ
Data Source
Client Update
SendNUIMessage
Event
แทน HTML/CSS
㊱ SendNUIMessage ถูกเรียกหรือไม่ตรวจอย่างไร
ใส่ Log ใน Client Script
print('health:', health)
SendNUIMessage({
action = 'health',
value = health
})
จากนั้นตรวจ F8
ถ้าค่า Script เปลี่ยนแต่ UI ไม่เปลี่ยน ให้ไปตรวจ JavaScript
㊲ JavaScript รับ Message อย่างไร
NUI ฝั่ง Web สามารถฟัง Message ที่ส่งจาก Game แล้วใช้ข้อมูลนั้น Update UI
Architecture จึงเป็น
Lua/JS/C#
↓
SendNUIMessage
↓
NUI
↓
JavaScript
↓
DOM
FiveM ระบุว่า SendNUIMessage ส่ง Data ไปยัง NUI โดยตรง.
㊳ DOM Update มากเกินทำให้ HUD หนักได้ไหม
มีโอกาส
ถ้า Script ส่งข้อมูลทุก Frame และ JavaScript เปลี่ยน DOM หลายสิบ Element ทุก Message จะเพิ่มงานฝั่ง UI
แนวทางที่ดีกว่าคือ
ค่าไม่เปลี่ยน
→ ไม่ต้องแก้ UI
ค่าเปลี่ยน
→ Update เฉพาะ Element นั้น
และใช้ Resource Monitor/Profiler ตรวจผลจริง.
㊴ Animation CSS เยอะทำให้ HUD หนักได้ไหม
มีโอกาส
โดยเฉพาะ
Blur
Shadow
Continuous Animation
Large Transparent Layers
หลาย Widgets เคลื่อนไหวพร้อมกัน
อย่างไรก็ตามควรวัด Runtime จริง ไม่ควรเดาว่า CSS เป็นสาเหตุโดยอัตโนมัติ
㊵ HUD FPS ตกต้องแยก CPU กับ GPU
ถ้า HUD ทำ FPS ลด ควรแยก
Client Script CPU
NUI/Web Rendering
Game Rendering
อย่า Optimize Lua อย่างเดียวหาก Resource CPU ต่ำแต่ UI Effect หนัก
และอย่าลบ CSS ทั้งหมดหากจริง ๆ Client Loop ใช้เวลาสูง
㊶ resmon เห็นอะไร
Cfx.re ระบุว่า Resource Monitor สามารถแสดง CPU Usage และ Memory ของแต่ละ Resource ฝั่ง Clientได้.
ดังนั้นหาก
hud_resource
ใช้เวลาสูงผิดปกติ ควรตรวจ Loop และ Events ของ Resource นั้น
㊷ Profiler ใช้เมื่อไร
ใช้เมื่อรู้ว่า Resource มีปัญหา แต่ต้องการดูให้ลึกขึ้นว่า Code ส่วนใดใช้เวลามาก
Cfx.re แนะนำ profiler record พร้อมจำนวน Frames เช่น 500 Frames เป็นจุดเริ่มต้นตัวอย่าง.
㊸ HUD หลาย Resource ซ้อนกันเกิดอะไรขึ้น
Server บางแห่งมี
hud
vehiclehud
voicehud
statushud
speedometer
หลาย Resources
อาจเกิด
UI ซ้อน
Update ซ้ำ
GTA HUD ถูก Hide ซ้ำ
Radar ถูก Toggle แข่งกัน
ควรวาง Ownership ว่า Resource ใดรับผิดชอบ Element ใดให้ชัด
㊹ HUD ซ้อน GTA HUD แก้อย่างไร
ถ้า Custom HUD แทน GTA Element เดิม อาจต้องซ่อน Component เดิม
FiveM มี Native สำหรับซ่อน HUD Components เช่น HIDE_HUD_COMPONENT_THIS_FRAME.
แต่คำว่า THIS_FRAME สำคัญ
หมายความว่าถ้าต้องการซ่อนต่อเนื่อง Script ต้องเรียกตาม Frame ที่จำเป็น
㊺ HideHudComponentThisFrame คืออะไร
Native นี้ซ่อน HUD Component ที่กำหนดใน Frame ปัจจุบัน และ Cfx.re มีรายการ Component IDs ที่เกี่ยวข้อง.
เหมาะกับการซ่อน
GTA HUD Elements
บางส่วนเมื่อ Custom HUD เข้ามาแทน
㊻ HideHudAndRadarThisFrame คืออะไร
FiveM มี Native
HIDE_HUD_AND_RADAR_THIS_FRAME
สำหรับซ่อน HUD และ Radar ใน Frame ปัจจุบัน.
แต่ควรใช้ด้วยความระมัดระวัง เพราะเป็นการซ่อนแบบกว้างกว่าการเลือก Component เฉพาะ
㊼ DisplayHud ต่างจาก HideHudComponentThisFrame อย่างไร
DISPLAY_HUD เป็นการควบคุมการแสดง HUD โดยรวม ในขณะที่ HIDE_HUD_COMPONENT_THIS_FRAME ใช้ซ่อน Component เฉพาะใน Frame.
ถ้าต้องการซ่อนแค่ Element เดียว ไม่ควรปิด HUD ทั้งหมดโดยไม่จำเป็น
㊽ HUD หายหลังเข้า Pause Menu
อาจเกี่ยวข้องกับ Resource State หรือ UI Logic ที่ตรวจ Pause State แล้วซ่อน HUD
ต้องดูว่า Script มี Logic เช่น
Pause Menu Active
→ hide HUD
Pause Menu Closed
→ show HUD
หรือไม่
ถ้าซ่อนแล้วไม่มี Event/Loop เปิดกลับ HUD จะหายต่อ
㊾ HUD หายตอนเข้า Vehicle
ตรวจ State Logic
บาง Resource แยก
Player HUD
Vehicle HUD
แล้วอาจเขียน
enter vehicle
→ hide player status
→ show vehicle hud
ถ้า Vehicle HUD Error ผู้เล่นอาจเห็นเหมือน HUD หายทั้งหมด
㊿ HUD ไม่หายตอนออก Vehicle
กรณีตรงข้าม
ถ้า Speedometer ยังติดอยู่หลังลงรถ ให้ตรวจ
IsPedInAnyVehicle
Vehicle State
NUI Visibility
และ Event/Loop ที่รับผิดชอบเปิดปิด Vehicle HUD
51. Voice HUD คืออะไร
Voice HUD ใช้แสดงสถานะ เช่น
กำลังพูด
Voice Range
Radio
Muted
HUD เพียงแสดงสถานะ ส่วนระบบ Voice จริงเป็นอีก Resource/Subsystem
ดังนั้น Voice Icon ไม่ขึ้นไม่ได้หมายความว่า Microphone FiveM เสียเสมอไป
52. Money HUD ควร Update ทุก Frame ไหม
ไม่ควรหากค่าเงินไม่ได้เปลี่ยนทุก Frame
แนวทางที่มีประสิทธิภาพกว่าคือ
เงินเปลี่ยน
↓
Trigger Update
↓
SendNUIMessage
ลด Message และ DOM Updates ที่ไม่จำเป็น
53. Job HUD ควร Update เมื่อไร
คล้ายกัน
Player Login
Job Change
Grade Change
จึง Update
ไม่จำเป็นต้อง Query Framework Job ทุก Frame
54. Health HUD ควร Update ทุก Frame ไหม
ขึ้นอยู่กับความต้องการความลื่น
สามารถใช้ Polling ช่วงสั้น เช่นหลายสิบหรือหลายร้อย Milliseconds ตาม UX ที่ต้องการ แทน Wait(0) เสมอ
ควรวัดผลจริงด้วย Resource Monitor เพราะ Resource Design แตกต่างกัน.
55. Speedometer ต้อง Update บ่อยกว่า Money HUD เพราะอะไร
Speed เปลี่ยนอย่างต่อเนื่องขณะรถเคลื่อนที่
แต่ Money เปลี่ยนเป็น Event
จึงควรออกแบบ
High-frequency data
Low-frequency data
Event-driven data
แยกกัน
นี่เป็นพื้นฐานสำคัญของ HUD Optimization
56. Custom HUD ต้องใช้ Server Loop ไหม
ไม่จำเป็นทุกข้อมูล
ข้อมูล Local เช่น
Health
Armor
Vehicle Speed
สามารถอ่านฝั่ง Client
ส่วนข้อมูล Authority เช่น
Money
Job
Account
อาจมาจาก Framework/Server State แล้วส่งให้ Client เมื่อเปลี่ยน
อย่าส่งทุกอย่าง Client ↔ Server ทุก Frame เพราะ HUD ต้องการแค่ Presentation ไม่ใช่ Network Spam
57. NUI ส่งข้อมูลกลับ Server โดยตรงไหม
โดยทั่วไป NUI Callback สื่อสารกับ Game Script ก่อน และ Cfx.re ระบุว่า NUI Callback เป็นวิธีส่งข้อมูลจาก UI กลับเข้าสู่ Game.
จากนั้น Client Script จะ Trigger Server Event ต่อหรือไม่ขึ้นกับ Architecture
58. HUD Settings ควรเก็บที่ไหน
ขึ้นกับว่าต้องการ
ต่อเครื่อง
ต่อ Character
ต่อ Account
เช่น
Scale
Position
Show/Hide Elements
อาจเก็บ Client-side หรือ Persistent Server-side ตามระบบ
แต่ควรแยก Preferences ออกจาก Gameplay State
59. HUD ควร Responsive ไหม
ควร
ผู้เล่นมี
16:9
21:9
Ultrawide
หลาย Resolution
HUD ที่ Hard-code Position ด้วย Pixel อย่างเดียวอาจหลุดจอหรือซ้อนกัน
NUI เป็น Web-based UI จึงสามารถใช้ CSS Layout Techniques เพื่อรองรับขนาดหน้าจอต่าง ๆ ได้
60. HUD บน 4K เล็กเกินไปแก้อย่างไร
ควรมี
Scale
Responsive Units
Settings
มากกว่าการสร้าง CSS แยกสำหรับ Resolution ทุกแบบ
และทดสอบหลาย Aspect Ratios ก่อน Production
61. HUD บน Ultrawide อยู่ไกลเกินไป
ปัญหานี้มักเกิดจากการ Anchor UI ติดขอบจออย่างเดียว
HUD สำคัญ เช่น
Health
Armor
Voice
ควรอยู่ในตำแหน่งที่มองง่ายแม้จอกว้าง
ดังนั้น UI Design ต้องคิด Aspect Ratio ด้วย
62. DUI ต่างจาก NUI อย่างไร
FiveM มีระบบ DUI หรือ Direct-rendered UI ซึ่งสามารถ Render NUI ไปยัง Runtime Texture ได้ โดยมี Natives เช่น CREATE_DUI, GET_DUI_HANDLE และ CREATE_RUNTIME_TEXTURE_FROM_DUI_HANDLE.
Fullscreen HUD ทั่วไปไม่จำเป็นต้องใช้ DUI
DUI เหมาะกับ UI ที่ต้อง Render ลงบน Surface/Texture ในโลกเกมมากกว่า
63. HUD จำเป็นต้องใช้ DUI ไหม
ไม่
Custom HUD ทั่วไปใช้ Fullscreen NUI ได้เลย
DUI เป็นอีกระบบสำหรับ Direct-rendered UI.
ดังนั้นอย่าเพิ่ม DUI เพียงเพื่อทำ Health Bar ธรรมดา
64. Loading Screen เป็น HUD ไหม
ไม่ใช่ HUD Gameplay โดยตรง
FiveM มี Loading Screen เป็น NUI Frame พิเศษที่ถูกแสดงระหว่างการ Join Server และสามารถกำหนดผ่าน Resource Manifest ได้.
บทความ 305–307 จะเจาะ Loading Screen โดยเฉพาะ
65. HUD ต้อง Restart เมื่อแก้ HTML ไหม
ขึ้นกับ Development Workflow และ Resource
แต่โดยทั่วไป NUI Files เป็นส่วนหนึ่งของ Resource ดังนั้นเมื่อแก้ Resource Content คุณต้องทำให้ Resource โหลด Version ใหม่ตาม Workflow การพัฒนา
ตรวจ Console เพื่อยืนยันว่า UI ใหม่ถูกโหลดจริง
66. HUD Resource Restart แล้วเมาส์ค้างแก้อย่างไร
สงสัย SET_NUI_FOCUS
หาก Resource ถูก Restart ขณะ Settings Menu มี Focus แล้ว Cleanup ไม่คืน Focus ผู้เล่นอาจรู้สึกว่า Mouse/Keyboard ติดอยู่กับ UI
Fullscreen NUI ใช้ SET_NUI_FOCUS สำหรับ Input Focus โดยตรง.
ดังนั้น Resource Stop/Restart ควร Reset Focus State
67. HUD Resource ควรมี Cleanup ไหม
ควร
เช่นเมื่อ Resource Stop
Hide NUI
Return Focus
Reset HUD Components
Restore Radar
Clear State
เพื่อไม่ให้ Player เหลือ UI หรือ Game HUD State ที่ผิดหลัง Restart Resource
68. วิธี Debug FiveM HUD ไม่ขึ้นแบบเร็วที่สุด
ใช้ลำดับนี้
ขั้นที่ 1 — ตรวจ Resource
HUD Resource Started หรือไม่
ขั้นที่ 2 — เปิด F8
ตรวจ Client/NUI Errors
FiveM Client Console ใช้สำหรับ Debug Resource Issues ได้.
ขั้นที่ 3 — ตรวจ NUI Page
Fullscreen NUI ต้องถูกประกาศและโหลดเป็นส่วนหนึ่งของ Resource.
ขั้นที่ 4 — ทดสอบ SendNUIMessage
ส่ง Message ง่าย ๆ
SendNUIMessage({
action = 'show'
})
SendNUIMessage เป็น Function ทางการสำหรับส่งข้อมูลไป NUI.
ขั้นที่ 5 — Log JavaScript
ดูว่า Message เข้าฝั่ง UI หรือไม่
ขั้นที่ 6 — ตรวจ CSS
Element อาจมี
display: none
opacity: 0
visibility: hidden
ขั้นที่ 7 — ตรวจ State
HUD ถูกซ่อนเพราะ Pause/Vehicle/Death Logic หรือไม่
ขั้นที่ 8 — ตรวจ NUI Focus
ถ้า UI เปิดแต่เล่นเกมไม่ได้.
ขั้นที่ 9 — ถ้า FPS ลด
ตรวจ Resource Monitor และ Profiler.
ขั้นที่ 10 — ตรวจ HUD/Minimap Conflict
ดูว่ามีหลาย Resource ควบคุม GTA HUD หรือ Radar พร้อมกันหรือไม่
ตารางสรุปปัญหา FiveM HUD
| อาการ | จุดที่ควรตรวจ |
|---|---|
| HUD ไม่ขึ้น | Resource / NUI |
| NUI เปิดแต่ไม่มีข้อมูล | SendNUIMessage |
| Health ค้าง | Update Logic |
| Money ไม่เปลี่ยน | Framework Event |
| HUD กระตุก | Update Frequency |
| FPS ตก | Client CPU / NUI |
| เมาส์ค้าง | NUI Focus |
| เดินไม่ได้หลังปิด Menu | Focus / Control State |
| Radar ไม่ขึ้น | DISPLAY_RADAR |
| GTA HUD ซ้อน Custom HUD | Hide HUD Components |
| Vehicle HUD ไม่หาย | Vehicle State |
| เข้า Vehicle แล้ว HUD หายหมด | Visibility Logic |
| Restart HUD แล้ว Mouse ค้าง | Focus Cleanup |
| Ultrawide HUD หลุดตำแหน่ง | Responsive Layout |
| Callback ค้าง | NUI Callback ไม่ตอบ |
| HUD Resource CPU สูง | Resmon / Profiler |
Checklist Custom HUD ก่อนขึ้น Production
☐ NUI โหลดได้
☐ ไม่มี JavaScript Error
☐ SendNUIMessage ทำงาน
☐ Callback ตอบกลับครบ
☐ Health Update ถูก
☐ Armor Update ถูก
☐ Money Update ถูก
☐ Job Update ถูก
☐ Vehicle State ถูก
☐ Radar State ถูก
☐ Focus คืนถูก
☐ Pause Menu ไม่ทำ HUD ค้าง
☐ Death/Respawn ถูก
☐ Resource Restart ได้
☐ 16:9 ถูก
☐ Ultrawide ถูก
☐ 1080p ถูก
☐ 1440p ถูก
☐ 4K ใช้งานได้
☐ Resource CPU ไม่สูงผิดปกติ
วิธี Optimize FiveM HUD
เริ่มจากหลักง่าย ๆ
อย่า Query ทุกอย่างทุก Frame
↓
อย่าส่ง NUI Message ถ้าค่าไม่เปลี่ยน
↓
Update เฉพาะ Element ที่เปลี่ยน
↓
ลด DOM Work
↓
ลด Animation ที่ไม่จำเป็น
↓
ตรวจ resmon
↓
ใช้ profiler หากยังหนัก
Cfx.re มีทั้ง Resource Monitor และ Profiler สำหรับหาว่า Resource ใดและ Code ส่วนใดใช้เวลาสูง.
Architecture HUD ที่ดูแลง่าย
แบ่งระบบเป็น
Data
↓
State
↓
UI Message
↓
NUI
↓
Render
เช่น
Vehicle State
↓
speed = 80
fuel = 55
seatbelt = true
↓
SendNUIMessage
↓
Vehicle HUD
อย่าให้ HTML/JavaScript เป็นผู้ตัดสิน Gameplay Authority
UI ควรมีหน้าที่แสดงผลเป็นหลัก
สิ่งที่ไม่ควรทำกับ FiveM HUD
หลีกเลี่ยง
SendNUIMessage ทุกค่า ทุก Frame
Query Framework ทุก Frame
เปิด NUI Focus ค้าง
ไม่คืน Focus ตอน Resource Stop
มี HUD หลายตัวควบคุม Radar พร้อมกัน
Hard-code UI เฉพาะ 1920x1080
Update DOM ทั้งหน้าเมื่อเปลี่ยนค่าเดียว
ใช้ Animation Effect หนักทุก Element
โทษ NUI ก่อนตรวจ resmon
ลบ HUD Resource ก่อนอ่าน F8 Error
ปัญหา HUD จำนวนมากแก้ได้จาก State และ Update Architecture ไม่จำเป็นต้องเปลี่ยน HUD ใหม่ทั้งชุด
FiveM HUD ต่างจาก NUI, Minimap และ Speedometer แบบสั้นที่สุด
จำแบบนี้
HUD
= Interface ข้อมูลบนหน้าจอ
NUI
= ระบบที่ใช้สร้าง Custom UI
Minimap
= Radar/Map Component
Speedometer
= Vehicle HUD สำหรับความเร็วและข้อมูลรถ
Fullscreen NUI สามารถ Overlay อยู่บน Game และ FiveM มี Functions อย่าง SendNUIMessage สำหรับส่ง Data เข้า UI ขณะที่ DISPLAY_RADAR ใช้ควบคุม Minimap/Radar ของเกมโดยตรง.
สรุป FiveM HUD คืออะไร
FiveM HUD คือส่วนแสดงข้อมูลสำคัญบนหน้าจอของผู้เล่น ซึ่งสามารถใช้ GTA HUD เดิมหรือสร้าง Custom HUD ใหม่ด้วย NUI
Custom HUD ทั่วไปทำงานตาม Flow
FiveM Client Script
↓
อ่าน Player/Vehicle State
↓
SendNUIMessage
↓
NUI JavaScript
↓
HTML/CSS
↓
HUD บนหน้าจอ
FiveM รองรับ Fullscreen NUI เป็น UI Overlay บนเกม และ SendNUIMessage เป็น Function สำหรับส่งข้อมูลจาก Script ไปยัง NUI.
ถ้า HUD ไม่ขึ้น ให้ตรวจ Resource, NUI Page และ F8
ถ้า HUD ขึ้นแต่ค่าค้าง ให้ตรวจ Data Update และ SendNUIMessage
ถ้า เมาส์ติดหน้าจอหรือเดินไม่ได้หลังปิด Menu ให้ตรวจ NUI Focus
ถ้า Minimap หาย ให้ตรวจ DISPLAY_RADAR และ Resource ที่ควบคุม Radar.
ถ้า Custom HUD ซ้อน GTA HUD สามารถตรวจการซ่อน HUD Components ด้วย Native อย่าง HIDE_HUD_COMPONENT_THIS_FRAME.
และถ้า HUD ทำ FPS ลด อย่าเดาสาเหตุจากหน้าตา UI อย่างเดียว ให้ใช้ Resource Monitor ตรวจ CPU/Memory ของ Resource และใช้ Profiler เมื่อต้องการดูว่า Code ส่วนใดใช้เวลามาก.
แนวทางของ comsiam คือแยก HUD ออกเป็น Data, Update Logic และ UI Rendering ให้ชัด และส่งข้อมูลเข้า NUI เฉพาะเมื่อจำเป็น เพราะ HUD ที่ดีไม่ใช่แค่สวย แต่ต้องตอบสนองเร็ว ใช้ทรัพยากรต่ำ และไม่รบกวน Controls หรือ Gameplay ของผู้เล่น
Comments
Post a Comment