FiveM Loading Screen คืออะไร ทำงานอย่างไร และควรตั้งค่าแบบไหน

August 18, 2026

FiveM Loading Screen คือหน้า UI ที่ผู้เล่นเห็นระหว่างกำลังเชื่อมต่อและโหลดเข้าสู่เซิร์ฟเวอร์ โดย FiveM รองรับ Loading Screen แบบ Custom ผ่าน NUI และให้กำหนดหน้า HTML ด้วย loadscreen ใน fxmanifest.lua เพื่อใช้แทน Loading Screen เริ่มต้นของ Client/Game.

Loading Screen สามารถออกแบบเป็น


Logo Server
ชื่อ Server
ภาพ Background
Loading Progress
ข้อความแนะนำ
กฎ Server
Social Media
เพลง
วิดีโอ
Animation
ข้อมูลผู้เล่น

เพราะ NUI ของ FiveM เป็นระบบ UI แบบ HTML ที่รองรับ HTML, CSS และ JavaScript ผ่าน Chromium-based UI Environment.

บทความนี้จาก comsiam จะอธิบายตั้งแต่ loadscreen, fxmanifest.lua, Loading Progress, Handover Data, Manual Shutdown ไปจนถึงการ Optimize หน้าโหลดให้เปิดเร็วและไม่ค้าง

① FiveM Loading Screen คืออะไร

Loading Screen คือ NUI Frame พิเศษชื่อ loadingScreen ซึ่ง FiveM แสดงระหว่างการโหลดเข้า Server แทน Default Client/Game Loading Screen.

ภาพรวมคือ


ผู้เล่นกดเข้า Server
↓
FiveM เชื่อมต่อ
↓
Loading Screen แสดง
↓
Resources / Game Data โหลด
↓
Player พร้อม Spawn
↓
Loading Screen ปิด
↓
เข้า Gameplay

② Loading Screen ต่างจาก HUD อย่างไร

Loading Screen ใช้ระหว่างช่วงเข้า Server

ส่วน HUD ใช้ระหว่าง Gameplay


Loading Screen
→ ก่อนเข้าเกม

HUD
→ หลังเข้าเกม

Loading Screen เป็น NUI Frame ประเภทเฉพาะ ส่วน Fullscreen NUI ทั่วไปถูกใช้กับ Interface ภายใน Gameplay เช่น HUD หรือ Menu.

③ Loading Screen ต่างจาก NUI อย่างไร

จำง่าย ๆ


NUI
= เทคโนโลยี UI

Loading Screen
= หนึ่งใน Use Cases ของ NUI

Cfx.re จัด Loading Screens อยู่ภายใต้ระบบ NUI โดยตรง.

④ Loading Screen ใช้อะไรสร้าง

โดยทั่วไปสามารถใช้


HTML
CSS
JavaScript

เพราะ NUI ของ CitizenFX เป็น HTML-based UI ผ่าน Chromium Embedded Framework.

จึงสามารถสร้างหน้าโหลดได้เหมือน Web Interface

⑤ โครงสร้าง Resource Loading Screen

ตัวอย่าง


my_loadscreen/
├── fxmanifest.lua
└── html/
    ├── index.html
    ├── style.css
    ├── app.js
    ├── background.jpg
    └── logo.png

ไฟล์ Local ที่ Client ต้องใช้งานควรถูกเพิ่มเข้า Resource Packfile ด้วย file หรือ files ใน Resource Manifest.

⑥ fxmanifest.lua สำคัญอย่างไร

fxmanifest.lua ใช้ประกาศว่า Resource นี้มี Loading Screen และ Files อะไรบ้าง

FiveM Resource Manifest มี Directive ชื่อ


loadscreen

สำหรับกำหนด HTML File ที่ใช้เป็น Game Loading Screen.

⑦ ตัวอย่าง fxmanifest.lua พื้นฐาน


fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'

files {
    'html/index.html',
    'html/style.css',
    'html/app.js',
    'html/background.jpg',
    'html/logo.png'
}

loadscreen ใช้กำหนดหน้า HTML ส่วนไฟล์ที่ Client ต้องดาวน์โหลดต้องอยู่ใน Resource Packfile.

⑧ Loading Screen ใช้ ui_page หรือ loadscreen

สำหรับหน้าโหลดให้ใช้


loadscreen 'html/index.html'

ไม่ใช่การคิดว่า ui_page กับ loadscreen เป็น Directive เดียวกัน

Cfx.re ระบุว่า Loading Screen ถูกกำหนดในลักษณะคล้าย ui_page แต่ใช้ Manifest Entry ชื่อ loadscreen.

⑨ loadscreen รองรับ URL ภายนอกไหม

รองรับ

Cfx.re ระบุว่าสามารถกำหนด Loading Screen เป็น HTML File ใน Resource หรือ URL ภายนอกได้.

แต่สำหรับ Production Server ต้องพิจารณาความพร้อมใช้งานและความเร็วของ External Host เพิ่มเติม

⑩ Local Loading Screen กับ External Loading Screen ต่างกันอย่างไร

Local


HTML/CSS/JS
อยู่ใน FiveM Resource

External


Loading Screen
โหลดจาก Web URL

FiveM รองรับทั้งสองรูปแบบผ่าน loadscreen.

สำหรับหน้าโหลดที่ต้องพึ่ง External Host ถ้า Host ช้าหรือเข้าถึงไม่ได้ หน้า UI ภายนอกย่อมมี Dependency เพิ่มขึ้น ดังนั้นควรเลือก Architecture ตามความน่าเชื่อถือที่ต้องการ

⑪ Loading Screen ต้องใส่ไฟล์ใน files ไหม

หากใช้ Local Files ต้องประกาศ Files ที่ Client ต้องได้รับใน Resource Packfile

Resource Manifest ระบุว่า file ใช้เพิ่ม File ไปยัง Resource Packfile เพื่อดาวน์โหลดให้ Client.

ตัวอย่าง


files {
    'html/index.html',
    'html/style.css',
    'html/app.js'
}

⑫ รูป Background ต้องใส่ files ไหม

ถ้าเป็น Local Resource File ที่หน้า HTML ต้องใช้งาน ก็ควรรวมอยู่ใน Resource Files

เช่น


files {
    'html/background.webp',
    'html/logo.webp'
}

เพราะ Client ต้องได้รับ Asset เหล่านั้นพร้อม Resource.

⑬ JavaScript ต้องใส่ files ไหม

ถ้า index.html เรียก


<script src="app.js"></script>

ไฟล์ JavaScript ก็ต้องอยู่ใน Resource Packfile ที่ Client โหลดด้วย.

หลักเดียวกันใช้กับ CSS และ Images

⑭ Loading Progress แสดงได้ไหม

ได้

FiveM Loading Screen ส่ง Event ชื่อ


loadProgress

เข้า Loading Screen ผ่าน Browser message Event.

จึงสามารถสร้าง Progress Bar ตาม Loading State จริงได้

⑮ loadProgress มีค่าอะไร

Event มี


eventName = loadProgress
loadFraction = 0.0 ถึง 1.0

โดย loadFraction เป็นสัดส่วน Loading Progress ตั้งแต่ 0 ถึง 1.

ตัวอย่าง


0.00 = 0%
0.25 = 25%
0.50 = 50%
0.75 = 75%
1.00 = 100%

⑯ ตัวอย่าง Progress Bar

HTML


<progress
    id="loading-bar"
    value="0"
    max="1">
</progress>

JavaScript


window.addEventListener('message', (event) => {
    if (event.data.eventName !== 'loadProgress') {
        return;
    }

    document.getElementById('loading-bar').value =
        event.data.loadFraction;
});

รูปแบบนี้เป็น Flow ที่ Cfx.re แสดงใน Loading Screen Documentation.

⑰ แสดงเปอร์เซ็นต์ Loading ได้ไหม

ได้โดยนำ


loadFraction × 100

มาแสดง

ตัวอย่าง


const percent =
    Math.floor(event.data.loadFraction * 100);

เพราะ loadFraction มีช่วง 0–1.

⑱ ตัวอย่างข้อความเปอร์เซ็นต์


window.addEventListener('message', (event) => {

    if (event.data.eventName !== 'loadProgress') {
        return;
    }

    const percent = Math.floor(
        event.data.loadFraction * 100
    );

    document.getElementById(
        'loading-text'
    ).textContent = percent + '%';

});

ค่าต้นทางมาจาก Loading Progress Event ของ FiveM.

⑲ Progress 100% แล้วทำไมยังไม่เข้าเกมทันที

loadProgress เป็น Loading Progress ที่ FiveM ส่งเข้าสู่ Loading Screen แต่ช่วงเปลี่ยนจาก Loading Data ไปสู่ Player Spawn/Game View ยังเกี่ยวข้องกับ Lifecycle ของ Loading Screen และระบบ Spawn ของ Server.

ดังนั้น


100%

ไม่ควรถูกตีความว่า Character ทุกระบบของ Server พร้อมเสมอไป

⑳ Loading Screen ปิดตอนไหน

โดย Default Cfx.re ระบุว่า Loading Screen จะอยู่จน SHUTDOWN_LOADING_SCREEN ถูกเรียก.

Server/Resource ที่ควบคุม Player Spawn จึงมีส่วนสำคัญกับช่วง Transition ไป Gameplay

㉑ ShutdownLoadingScreen คืออะไร

SHUTDOWN_LOADING_SCREEN ใช้ปิด Game Loading Screen และเปลี่ยนสู่ Normal Game View โดย Cfx.re ระบุว่าควรใช้โดย Resource อย่าง Spawn Manager หรือระบบลักษณะเดียวกันหลัง Player พร้อมโหลดและ Spawn.

㉒ Loading Screen NUI กับ Game Loading Screen เหมือนกันไหม

ต้องแยก

FiveM มีทั้ง Game Loading Screen State และ NUI Loading Screen Frame

Cfx.re ระบุว่า GET_IS_LOADING_SCREEN_ACTIVE พูดถึง Game Loading Screen ไม่ใช่ NUI Loading Screen.

นี่เป็นจุดที่ Developer มักสับสนตอน Debug

㉓ Manual Shutdown คืออะไร

ถ้าต้องการควบคุมว่า Custom Loading Screen จะหายเมื่อไร สามารถใส่


loadscreen_manual_shutdown 'yes'

ใน Resource Manifest.

เมื่อใช้วิธีนี้ Developer สามารถควบคุม Transition ตอนท้ายได้ละเอียดขึ้น

㉔ ทำไมต้องใช้ Manual Shutdown

เหมาะกับระบบที่ต้องการ Flow เช่น


Game Data Loaded
↓
Character Data
↓
Character Selection
↓
Spawn
↓
Fade Out Loading Screen
↓
Gameplay

Cfx.re ระบุว่า Manual Shutdown สามารถใช้ทำ Custom Fade Transition หรือเชื่อมกับ Early-game Spawn Selection UI ได้.

㉕ fxmanifest สำหรับ Manual Shutdown


fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'
loadscreen_manual_shutdown 'yes'

files {
    'html/index.html',
    'html/style.css',
    'html/app.js'
}

loadscreen_manual_shutdown ป้องกันไม่ให้ Loading Screen NUI ปิดตาม Lifecycle ปกติ และสามารถปิดด้วย SHUTDOWN_LOADING_SCREEN_NUI.

㉖ ShutdownLoadingScreenNui คืออะไร

FiveM มี


SHUTDOWN_LOADING_SCREEN_NUI

สำหรับปิด loadingScreen NUI Frame.

Native นี้สำคัญเมื่อใช้ Manual Shutdown

㉗ ตัวอย่างปิด Loading Screen NUI

แนวคิดฝั่ง Client


ShutdownLoadingScreenNui()

เมื่อตัดสินใจแล้วว่า Player พร้อมเข้าสู่ Gameplay

การเรียกควรอยู่ใน Lifecycle ที่ Server ใช้งานจริง ไม่ควรใช้ Delay แบบสุ่มเป็น Logic หลัก.

㉘ อย่าปิด Loading Screen ด้วย Wait แบบเดาสุ่ม

ตัวอย่างที่ควรระวัง


Wait(10000)
ShutdownLoadingScreenNui()

วิธีนี้หมายถึง “รอสิบวินาที” ไม่ได้หมายถึง “Player พร้อมแล้ว”

แนวทางที่แข็งแรงกว่าคือผูก Shutdown กับ State จริง เช่น Character/Spawn Ready เพราะ FiveM ออกแบบ Manual Shutdown เพื่อให้ Resource ควบคุม Lifetime ตามระบบของ Server.

㉙ SendLoadingScreenMessage คืออะไร

เมื่อเปิด Manual Shutdown แล้ว Cfx.re ระบุว่าสามารถใช้


SEND_LOADING_SCREEN_MESSAGE

หลัง Scripts เริ่มทำงาน เพื่อส่ง Message เข้า Loading Screen NUI.

จึงสามารถอัปเดตข้อความช่วงท้ายได้ เช่น


กำลังโหลดตัวละคร...
กำลังเตรียมข้อมูล...
กำลังเข้าสู่เมือง...

㉚ SendLoadingScreenMessage ต่างจาก SendNUIMessage อย่างไร

SEND_LOADING_SCREEN_MESSAGE มีเป้าหมายที่ loadingScreen NUI Frame โดยเฉพาะ ขณะที่ Fullscreen NUI Resources ปกติใช้ SEND_NUI_MESSAGE/SendNUIMessage กับ UI Page ของ Resource นั้น.

ดังนั้นไม่ควรใช้สอง API นี้ปนกันโดยไม่รู้ Target Frame

㉛ Loading Screen รับ Message ได้อย่างไร

Loading Screen สามารถใช้


window.addEventListener(
    'message',
    function(event) {
        // event.data
    }
);

เพื่อรับ Events/Data ที่ FiveM ส่งเข้า Loading Screen.

㉜ FiveM มี Loading Screen Events อะไรบ้าง

เอกสารปัจจุบันระบุ Events เช่น


loadProgress
onLogLine
startDataFileEntries
onDataFileEntry
performMapLoadFunction
endDataFileEntries
startInitFunction
startInitFunctionOrder
initFunctionInvoking
initFunctionInvoked
endInitFunction

ซึ่ง Loading Screen สามารถรับผ่าน message Event.

สำหรับ Loading Screen ทั่วไป loadProgress เป็นตัวที่เข้าใจและนำมาใช้ทำ Progress UI ได้ง่ายที่สุด

㉝ Handover Data คืออะไร

FiveM รองรับการส่งข้อมูลจาก Server Script ไปยัง Client Loading Screen ผ่าน handover ใน playerConnecting Event.

ข้อมูลนั้นจะปรากฏใน Browser ผ่าน


window.nuiHandoverData

㉞ Handover Data ใช้ทำอะไรได้บ้าง

ตัวอย่างข้อมูล


ชื่อผู้เล่น
ข้อความ Welcome
ข้อมูล Connection Context
ข้อมูลที่ Server ต้องการส่งก่อนเข้าเกม

Cfx.re ยกตัวอย่างการส่ง Player Name จาก playerConnecting แล้วนำไปแสดงบน Loading Screen.

㉟ ตัวอย่าง Server Handover


AddEventHandler(
    'playerConnecting',
    function(_, _, deferrals)

        local player = source

        deferrals.handover({
            name = GetPlayerName(player)
        })

    end
)

นี่เป็น Pattern ที่ Documentation แสดงไว้สำหรับส่ง Data ไป Loading Screen.

㊱ ฝั่ง HTML อ่าน Handover Data อย่างไร

ตัวอย่าง


window.addEventListener(
    'DOMContentLoaded',
    () => {

        const data =
            window.nuiHandoverData;

        console.log(data);

    }
);

Cfx.re ระบุว่า Handover Data ถูกส่งไว้ใน window.nuiHandoverData.

㊲ ชื่อผู้เล่นควรใช้ innerHTML หรือ innerText

สำหรับข้อมูล User Input อย่างชื่อผู้เล่น Cfx.re แนะนำในตัวอย่างให้ใช้ innerText แทน innerHTML เพื่อไม่ให้ข้อความถูกตีความเป็น HTML ที่ไม่พึงประสงค์.

ตัวอย่าง


nameElement.innerText =
    window.nuiHandoverData.name;

㊳ Loading Screen มี Mouse Focus ไหม

Cfx.re ระบุว่า Loading Screen มี Keyboard และ Mouse Focus อยู่เสมอในช่วงที่แสดง แต่ Cursor ไม่แสดงโดย Default ด้วยเหตุผลด้าน Legacy Behavior.

ดังนั้น Loading Screen ที่ต้องการ Clickable UI ต้องจัดการ Cursor เพิ่ม

㊴ เปิด Cursor บน Loading Screen อย่างไร

เพิ่ม


loadscreen_cursor 'yes'

ใน Resource Manifest.

เช่น


loadscreen 'html/index.html'
loadscreen_cursor 'yes'

㊵ Loading Screen ต้องมี Cursor ไหม

ไม่จำเป็น

ถ้าหน้าโหลดมีเพียง


Logo
Progress
Rules
Music
Background

ไม่ต้องมี Cursor ก็ได้

แต่ถ้าต้องการ Interactive Controls ก็สามารถเปิด Cursor ผ่าน loadscreen_cursor.

㊶ Busy Spinner มุมขวาล่างซ่อนได้ไหม

ได้

Cfx.re ระบุว่าสามารถใส่


setr sv_showBusySpinnerOnLoadingScreen false

ใน server.cfg เพื่อซ่อน Default Busy Spinner ที่มุมล่างขวาของ Loading Screen.

㊷ Loading Screen ทำเพลงได้ไหม

NUI ใช้ Web Technologies ผ่าน Chromium Environment ดังนั้นการออกแบบ Loading Screen สามารถใช้ Web Media Elements ตามความสามารถของ Browser-based UI ได้.

ในทาง UX ควรมี Volume ที่เหมาะสมและไม่บังคับเสียงดังเกินไป

㊸ Loading Screen ทำ Video Background ได้ไหม

เชิงเทคนิค NUI เป็น HTML-based UI จึงสามารถออกแบบ UI ด้วย Web Technologies และ Media Content ได้.

แต่ Video Background มี Asset และ Rendering Cost สูงกว่าภาพนิ่ง จึงควรทดสอบกับ Client หลายระดับ

㊹ ใช้ YouTube เป็น Background ดีไหม

Loading Screen ที่ต้องพึ่ง External Web Content จะมี Dependency ต่อบริการภายนอกมากกว่า Loading Screen ที่ใช้ Local Assets

สำหรับ Production Server ถ้าต้องการลด Failure Points การใช้ Assets ที่คุณควบคุมเองมักวางแผนได้ง่ายกว่า

㊺ Background Video ใหญ่มากมีผลไหม

Asset ขนาดใหญ่หมายถึงข้อมูลที่ต้องถูกโหลดมากขึ้น และ Local Resource Files ถูกส่งให้ Client ผ่าน Resource Packfile.

ดังนั้นไม่ควรใส่ Video ความละเอียดสูงและ Bitrate สูงเกินจำเป็นเพียงเพราะไฟล์เปิดได้

㊻ รูปภาพควร Optimize ไหม

ควร

ภาพพื้นหลังที่ใหญ่เกิน Resolution ที่ใช้จริงทำให้ Asset ใหญ่ขึ้นโดยไม่จำเป็น

แนวทางคือเลือก Resolution/Compression ที่ยังดูดีแต่ไม่เพิ่ม Download/Decode Work เกินความต้องการ

㊼ Loading Screen ที่สวยแต่โหลดช้าเกิดจากอะไร

จุดที่ควรตรวจ ได้แก่


ภาพใหญ่เกิน
Video ใหญ่
Audio ใหญ่
JavaScript Library เยอะ
External Assets
Fonts หลายชุด
Animation มาก

เพราะ Loading Screen เป็น Web-based UI และ Local Files ต้องถูก Client รับผ่าน Resource Packfile.

㊽ Loading Screen ทำให้เข้า Server ช้าลงไหม

ต้องแยกระหว่าง


Server/Game Resource Loading

กับ


Loading Screen UI Assets

Loading Screen ไม่ใช่ตัวแทนของ Resource Loading ทั้งหมด แต่หน้า UI ที่มี Assets หนักก็เพิ่มงานฝั่ง UI/Client ได้ จึงควร Optimize แยกจาก Server Resources

㊾ Progress Bar ช้าหมายความว่า Loading Screen Script ช้าไหม

ไม่เสมอ

loadProgress สะท้อน Loading Progress ที่ FiveM ส่งเข้า Loading Screen ไม่ได้หมายความว่า JavaScript ของ Progress Bar เป็นสิ่งที่กำลังโหลดช้า.

ดังนั้นอย่าลบ Progress Bar เพราะเปอร์เซ็นต์ขึ้นช้าโดยยังไม่ได้ตรวจ Resource Loading

㊿ Loading Screen ค้างที่ 100% เกิดจากอะไร

ถ้า Progress ถึง 100% แต่หน้าโหลดไม่หาย ให้แยกตรวจ


Manual Shutdown เปิดอยู่หรือไม่
ShutdownLoadingScreenNui ถูกเรียกหรือไม่
Character/Spawn Flow จบหรือยัง
Client Script Error หรือไม่

เพราะเมื่อใช้ loadscreen_manual_shutdown 'yes' Loading Screen NUI ต้องถูกปิดตาม Logic ที่ Resource กำหนด.

51. ลืม ShutdownLoadingScreenNui จะเกิดอะไรขึ้น

ถ้าเปิด Manual Shutdown แล้วไม่มี Flow ที่ปิด NUI Loading Screen ผู้เล่นสามารถค้างอยู่ที่หน้า Loading Screen แม้ Game Data ส่วนหลักจะโหลดแล้ว เพราะ Manual Mode ตั้งใจให้ Resource เป็นผู้ควบคุม Lifetime.

52. อย่าเปิด Manual Shutdown ถ้าไม่ต้องใช้

ถ้า Server ไม่ต้องการ Custom Transition หรือ Character/Spawn Integration เพิ่มเติม การปล่อย Default Lifecycle อาจง่ายกว่า

Manual Shutdown เพิ่ม Responsibility ให้ Resource ต้องปิด Loading Screen เองอย่างถูกจังหวะ.

53. Loading Screen ขาวทั้งหน้าจอเกิดจากอะไร

ตรวจ


index.html
CSS File
JavaScript Error
Resource File Path
loadscreen Path

ก่อน

เพราะ loadscreen ต้องชี้ไปยัง HTML File ที่ถูกต้อง และ Assets Local ต้องรวมอยู่ใน Resource Packfile.

54. Background ไม่ขึ้นแต่ HTML ขึ้น

ถ้าข้อความในหน้าโหลดขึ้น แต่ Background หาย แสดงว่า Root HTML โหลดแล้ว

ให้ตรวจ


Image Path
CSS URL
files
ชื่อไฟล์
Folder

มากกว่าการแก้ loadscreen ใหม่ทั้งหมด

55. JavaScript ไม่ทำงานตรวจอย่างไร

FiveM มี Client Console ผ่าน F8 สำหรับ Development และ Debug Resource Issues.

สำหรับ NUI ยังมี Chromium Developer Tools ซึ่ง Fullscreen NUI Documentation ระบุว่าสามารถเปิดผ่าน nui_devTools เมื่อ Developer Mode พร้อมใช้งาน.

56. Loading Screen ใช้ NUI DevTools ได้ไหม

เนื่องจาก Loading Screen เป็น NUI Frame จึงสามารถใช้แนวทาง Debug ฝั่ง CEF/NUI เพื่อดู


JavaScript Error
DOM
CSS
Assets
Console

ได้ตาม NUI Development Tools ของ FiveM.

57. F8 ใช้ตรวจอะไร

F8 เปิด FiveM Client Console และ Cfx.re ระบุว่า Client Commands ใช้ช่วยพัฒนา Server และ Debug Resource Issues ได้.

ถ้าหน้าโหลดมีปัญหา ควรตรวจ Errors ก่อนเปลี่ยน Resource ทั้งชุด

58. Loading Screen กับ Spawnmanager เกี่ยวกันไหม

SHUTDOWN_LOADING_SCREEN ถูก Cfx.re อธิบายว่าเหมาะให้ Spawn Manager หรือ Resource ลักษณะเดียวกันเรียกเมื่อ Loading/Player Spawn พร้อมแล้ว.

ดังนั้น Loading Screen Lifecycle กับ Spawn Flow สามารถเกี่ยวข้องกันโดยตรง

59. Loading Screen ควรหายก่อนหรือหลัง Character Spawn

ไม่มีคำตอบเดียวสำหรับทุก Server

แต่ถ้าใช้ Manual Shutdown ควรเลือก Transition Point ตาม UX เช่น


Character Ready
↓
Fade Loading Screen
↓
เปิด Gameplay

Cfx.re ระบุว่า Manual Shutdown ถูกออกแบบให้ใช้กับ Custom Fade และ Early-game Spawn Selection Integration ได้.

60. ทำ Loading Screen Fade Out ได้ไหม

ได้ในระดับ UI Design

คุณสามารถให้ CSS/JavaScript ทำ Fade แล้วค่อยให้ Client Script ปิด Loading Screen NUI ตาม Flow ที่ออกแบบ เพราะ Manual Shutdown เปิดทางให้ควบคุม Transition Lifetime เอง.

61. ตัวอย่าง Flow Fade Out

แนวคิด


Player Ready
↓
SendLoadingScreenMessage
↓
JavaScript รับ "fadeOut"
↓
CSS opacity → 0
↓
ShutdownLoadingScreenNui

SEND_LOADING_SCREEN_MESSAGE และ SHUTDOWN_LOADING_SCREEN_NUI เป็น APIs ที่ Cfx.re ระบุสำหรับ Manual Loading Screen Lifecycle.

62. Loading Screen กับ Character Selection รวมกันได้ไหม

Cfx.re ระบุโดยตรงว่า Manual Shutdown สามารถใช้เชื่อม NUI Events เข้ากับ Early-game Spawn Selection UI ได้.

แต่ Architecture ต้องจัด State ชัดว่าเมื่อไร


Loading
Character Selection
Spawn
Gameplay

เริ่มและจบ

63. Loading Screen ไม่ควรเป็น Login UI ทั้งหมดเสมอไป

ถ้าหน้าเลือก Character หรือ Login ต้องทำงานหลัง Client Scripts พร้อมและมี Gameplay Logic จำนวนมาก การแยกเป็น NUI Resource หลัง Loading Screen อาจดูแลง่ายกว่า

ส่วน Manual Shutdown เหมาะเมื่อคุณต้องการ Transition ที่เชื่อมกันจริง ๆ ระหว่างสองช่วง

64. Loading Screen มีข้อมูล Server Address ไหม

Cfx.re ระบุว่า window.nuiHandoverData มี Field serverAddress เพิ่มให้ ซึ่งเป็น IP/Port ที่ Client ใช้เชื่อมต่อ Server.

แต่ไม่จำเป็นต้องนำข้อมูลนี้ไปแสดงต่อผู้เล่นเสมอไป

65. Loading Screen ควรมีอะไรบ้าง

สำหรับ Server Roleplay อาจใช้โครงสร้าง


Logo
ชื่อ Server
Loading %
Tips
Rules สั้น ๆ
Discord/Social
Music Control
Loading Status

แต่ไม่ควรยัดข้อมูลจนผู้เล่นอ่านอะไรไม่ทัน

66. Loading Screen ควรมี Rules ยาวมากไหม

เหมาะกับการแสดงกฎสำคัญแบบสั้นหรือหมุนข้อความ

กฎฉบับเต็มควรมีพื้นที่เฉพาะของ Server

Loading Screen มีเป้าหมายหลักคือสร้าง Transition ระหว่าง Connection กับ Gameplay ไม่ใช่แทน Documentation ทั้งระบบ

67. Loading Tips มีประโยชน์ไหม

มีสำหรับ Server ที่มีระบบซับซ้อน เช่น


กด T เพื่อ Chat
กด X เพื่อยกมือ
อ่านกฎ RP ก่อนเล่น
ใช้ Voice อย่างเหมาะสม

แต่ Tips ควรสัมพันธ์กับ Server จริงและไม่ใช้ Keybind ที่อาจเปลี่ยนแล้วไม่ได้อัปเดต

68. Loading Screen Responsive สำคัญไหม

สำคัญ

เพราะผู้เล่นอาจใช้


16:9
21:9
Ultrawide
1080p
1440p
4K

และ NUI เป็น HTML-based UI จึงสามารถใช้ CSS Responsive Layout ได้.

69. อย่า Hard-code เฉพาะ 1920×1080

ตัวอย่างที่ควรระวัง


left: 1700px;
top: 900px;

อาจดูดีเฉพาะ Resolution เดียว

ควรใช้ Responsive Layout, Percentage, Flex/Grid หรือ Relative Units ตาม Design

70. Loading Screen กระตุกต้องดูอะไร

ตรวจ


Background Video
CSS Effects
JavaScript Loop
Animation
Large Images
External Content

โดยเฉพาะถ้าตัวเกมยังโหลดตามปกติแต่ NUI Animation กระตุก

เนื่องจาก NUI ใช้ Chromium-based Web UI จึงต้อง Debug ทั้ง Web Layer และ Game Loading แยกกัน.

71. Loading Screen FPS ต่ำสำคัญไหม

หน้าโหลดไม่จำเป็นต้อง Render Animation ซับซ้อนระดับ Gameplay

ควรเน้น


อ่านง่าย
เสถียร
เปิดเร็ว
Assets ไม่ใหญ่เกิน
Transition สวยพอ

มากกว่า Effects จำนวนมากที่ผู้เล่นเห็นเพียงช่วง Connection

72. Video Background จำเป็นไหม

ไม่จำเป็น

ภาพนิ่งที่ออกแบบดีพร้อม Animation เบา ๆ สามารถสร้าง Loading Screen ที่ดูดีและใช้ Assets น้อยกว่า

Video เหมาะเมื่อ Branding ต้องการจริงและได้ทดสอบ Performance แล้ว

73. Loading Screen Resource ทำให้ Server CPU สูงไหม

ต้องแยก Client NUI Work ออกจาก Server Scripts

Loading Screen HTML/CSS/JS Render ที่ Client ขณะที่ Server-side Logic อย่าง Handover หรือ Player Connection เป็นอีก Layer หนึ่ง.

จึงไม่ควรเห็นหน้าโหลดหนักแล้วสรุปทันทีว่า Server CPU เป็นต้นเหตุ

74. Loading Screen Error หลังเปลี่ยนชื่อ Folder

ตรวจ Path และ References ทั้งหมด เช่น


loadscreen path
asset paths
script paths
stylesheet paths

รวมถึง Startup Configuration ที่ ensure Resource นั้น

การเปลี่ยนชื่อ Folder โดยไม่ตรวจ References สามารถทำให้ Resource Structure ไม่ตรงกัน

75. Loading Screen ไม่ขึ้นหลังเพิ่ม Resource

ตรวจ


fxmanifest.lua
loadscreen
files
Resource Start
HTML path
F8 Error

เพราะ Manifest เป็นจุดที่ FiveM ใช้กำหนด Loading Screen และ Client Files.

76. มี Loading Screen หลาย Resource พร้อมกันดีไหม

ควรกำหนดให้ชัดว่า Resource ใดเป็น Loading Screen หลัก

การมี Resources หลายตัวที่พยายามรับผิดชอบ Lifecycle/Transition เดียวกันทำให้ Debug ยากขึ้น

เลือก Owner หลักหนึ่งตัวแล้วให้ระบบอื่นส่ง State เข้าไปหากจำเป็น

77. วิธี Debug FiveM Loading Screen แบบเร็วที่สุด

ขั้นที่ 1 — ตรวจ Resource Manifest

ต้องมี


loadscreen 'html/index.html'

และ Local Files ที่ต้องใช้ต้องอยู่ใน Resource Packfile.

ขั้นที่ 2 — ทำ HTML Test

เช่น


<h1>LOADSCREEN TEST</h1>

ถ้าไม่ขึ้น ให้เน้น Resource/Manifest ก่อน

ขั้นที่ 3 — ตรวจ CSS/Assets

ถ้า HTML ขึ้นแต่ Design หาย

ขั้นที่ 4 — ตรวจ JavaScript

เปิด NUI DevTools/F8 สำหรับ Debug.

ขั้นที่ 5 — ตรวจ loadProgress

ใช้ message Event และดูว่า loadFraction เปลี่ยนหรือไม่.

ขั้นที่ 6 — ถ้า 100% แล้วค้าง

ตรวจ Manual Shutdown


loadscreen_manual_shutdown
ShutdownLoadingScreenNui

ขั้นที่ 7 — ตรวจ Spawn Flow

โดยเฉพาะ Resource ที่ควบคุม Character/Spawn.

ขั้นที่ 8 — ตรวจ Handover

ถ้าข้อมูลชื่อผู้เล่นไม่ขึ้น.

ขั้นที่ 9 — ตรวจ Cursor

ถ้าหน้าโหลดมี Button แต่คลิกไม่ได้ ให้ตรวจ loadscreen_cursor.

ขั้นที่ 10 — ลด Assets ชั่วคราว

หากหน้าโหลด Render ช้าหรือกระตุก ให้ A/B Test Video, Images และ Effects

78. ตารางสรุปปัญหา FiveM Loading Screen

อาการ	จุดที่ควรตรวจ
Loading Screen ไม่ขึ้น	`loadscreen` / Resource
หน้าขาว	HTML/CSS/JS
Background ไม่ขึ้น	Asset path / `files`
Progress ไม่ขยับ	`loadProgress` handler
Progress ถึง 100% แล้วค้าง	Manual Shutdown / Spawn
Loading Screen ไม่ยอมปิด	`SHUTDOWN_LOADING_SCREEN_NUI`
ปิดเร็วเกิน	Shutdown Timing
ชื่อผู้เล่นไม่ขึ้น	Handover Data
Cursor ไม่ขึ้น	`loadscreen_cursor`
Spinner มุมขวายังอยู่	Busy Spinner Setting
Video กระตุก	UI/Media Rendering
เปลี่ยน Resolution แล้ว UI หลุด	Responsive CSS
Character โผล่ก่อน Fade จบ	Transition/Spawn Flow
Restart แล้ว Logic ผิด	Initialization/Lifecycle

79. Checklist Loading Screen ก่อนขึ้น Production


☐ fxmanifest.lua ถูก
☐ loadscreen path ถูก
☐ HTML อยู่จริง
☐ CSS อยู่จริง
☐ JavaScript อยู่จริง
☐ Images อยู่ใน files
☐ Audio/Video files ถูก
☐ loadProgress ทำงาน
☐ Loading % ถูก
☐ Manual Shutdown ถูก
☐ Shutdown NUI ถูกเวลา
☐ Handover Data ถูก
☐ Cursor ถูกตาม Design
☐ 1080p ใช้งานได้
☐ 1440p ใช้งานได้
☐ 4K ใช้งานได้
☐ Ultrawide ใช้งานได้
☐ ไม่มี JS Error
☐ Assets ไม่ใหญ่เกินจำเป็น

80. ตัวอย่าง Loading Screen Resource แบบพื้นฐาน

fxmanifest.lua


fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'

files {
    'html/index.html',
    'html/style.css',
    'html/app.js',
    'html/background.webp',
    'html/logo.webp'
}

FiveM Resource Manifest รองรับ loadscreen สำหรับกำหนด HTML Loading Screen และ Local Assets ต้องถูก Pack เป็น Resource Files.

81. ตัวอย่าง index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="loading">

        <img
            src="logo.webp"
            class="logo"
            alt="Server Logo">

        <h1>Welcome</h1>

        <div id="loading-text">
            0%
        </div>

        <progress
            id="loading-bar"
            value="0"
            max="1">
        </progress>

    </div>

    <script src="app.js"></script>

</body>
</html>

โครงสร้าง HTML/CSS/JavaScript ใช้งานได้กับ NUI เพราะ FiveM NUI เป็น HTML-based Interface.

82. ตัวอย่าง app.js สำหรับ Progress


window.addEventListener(
    'message',
    (event) => {

        if (
            event.data.eventName
            !== 'loadProgress'
        ) {
            return;
        }

        const fraction =
            event.data.loadFraction;

        const percent =
            Math.floor(
                fraction * 100
            );

        document.getElementById(
            'loading-bar'
        ).value = fraction;

        document.getElementById(
            'loading-text'
        ).textContent =
            percent + '%';

    }
);

FiveM ส่ง loadProgress พร้อม loadFraction ตั้งแต่ 0 ถึง 1 เข้าสู่ Loading Screen ผ่าน message Event.

83. ตัวอย่าง Manual Shutdown Architecture

Manifest


loadscreen 'html/index.html'
loadscreen_manual_shutdown 'yes'

Client


RegisterNetEvent(
    'myserver:playerReady',
    function()

        ShutdownLoadingScreenNui()

    end
)

นี่เป็น Architecture ตัวอย่าง โดยชื่อ Event เป็นของ Server ที่สร้างเอง ส่วน loadscreen_manual_shutdown และ SHUTDOWN_LOADING_SCREEN_NUI เป็นกลไกที่ FiveM รองรับ.

84. Loading Screen ที่ดีควร Optimize อย่างไร

ใช้หลัก


ลดขนาด Images
↓
หลีกเลี่ยง Video ใหญ่เกินจำเป็น
↓
ลด External Dependencies
↓
โหลดเฉพาะ Fonts ที่ใช้
↓
ลด JavaScript ที่ไม่จำเป็น
↓
ลด Animation หนัก
↓
ทำ Responsive
↓
ทดสอบ Client หลายระดับ

เพราะ UI ทำงานบน NUI/Chromium และ Local Assets ของ Resource ต้องถูกส่งให้ Client.

85. สิ่งที่ไม่ควรทำกับ FiveM Loading Screen

หลีกเลี่ยง


Video ไฟล์ใหญ่มากโดยไม่จำเป็น
ใช้รูป 4K หลายสิบรูปพร้อมกัน
เปิด Manual Shutdown แต่ไม่ปิด NUI
ใช้ Wait แบบสุ่มแทน Player Ready State
ใส่ JavaScript Libraries ที่ไม่ได้ใช้
Hard-code UI เฉพาะ 1920×1080
ใช้ innerHTML กับชื่อผู้เล่น
มี Loading Screen หลายตัวควบคุม Lifecycle
เปลี่ยน Resource ทั้งชุดก่อนเปิด F8

โดยเฉพาะ Manual Shutdown ต้องมี Lifecycle ที่ปิด Loading Screen NUI อย่างชัดเจน และข้อมูล User Input อย่างชื่อผู้เล่นควรแสดงด้วยวิธีที่ไม่ตีความเป็น HTML.

สูตรจำง่ายสำหรับ FiveM Loading Screen


LOADSCREEN
↓
FILES
↓
HTML/CSS/JS
↓
PROGRESS
↓
PLAYER READY
↓
SHUTDOWN
↓
GAMEPLAY

ถ้าหน้าโหลดมีปัญหา ให้ Debug ตามลำดับนี้แทนการล้าง Cache หรือเปลี่ยน Script ทั้งชุด

สรุป FiveM Loading Screen คืออะไร

FiveM Loading Screen คือ NUI Frame พิเศษที่แสดงระหว่างผู้เล่นกำลังโหลดและเชื่อมต่อเข้าสู่ Server โดยสามารถใช้ HTML/CSS/JavaScript สร้างหน้าโหลดแบบ Custom ได้.

การกำหนด Loading Screen ใช้


loadscreen 'html/index.html'

ใน fxmanifest.lua และ Local Assets ต้องถูกเพิ่มเข้า Resource Packfile ผ่าน file หรือ files.

FiveM ยังส่ง Loading Progress Event


loadProgress

พร้อมค่า


loadFraction

ตั้งแต่ 0 ถึง 1 ทำให้สามารถสร้าง Progress Bar และตัวเลขเปอร์เซ็นต์ที่สัมพันธ์กับ Loading Progress ได้.

ถ้าต้องการควบคุมช่วงปิด Loading Screen เอง สามารถใช้


loadscreen_manual_shutdown 'yes'

แล้วปิด NUI ด้วย


SHUTDOWN_LOADING_SCREEN_NUI

เมื่อ Player/Character พร้อมตาม Flow ของ Server.

สำหรับข้อมูลที่ต้องส่งจาก Server ตั้งแต่ช่วงเชื่อมต่อ FiveM รองรับ handover ใน playerConnecting และข้อมูลจะปรากฏใน window.nuiHandoverData ของ Loading Screen.

หาก Loading Screen ไม่ขึ้น ให้ตรวจ loadscreen, Resource และ File Paths

หาก หน้าโหลดขึ้นแต่ Background หาย ให้ตรวจ Asset Paths และ files

หาก Progress ไม่เดิน ให้ตรวจ loadProgress Message Handler

หาก ถึง 100% แล้วค้าง ให้ตรวจ Manual Shutdown และ Character/Spawn Flow

หาก Loading Screen ไม่ยอมปิด ให้ตรวจว่า SHUTDOWN_LOADING_SCREEN_NUI ถูกเรียกจริงหรือไม่เมื่อใช้ Manual Mode.

หาก ต้องการ Fade แบบเนียนก่อนเข้าเมือง Manual Shutdown สามารถใช้ร่วมกับ Loading Screen Messages และ Custom Transition ได้ตามแนวทางที่ Cfx.re รองรับ.

และถ้าหน้าโหลด กระตุกหรือเปิดช้า ควรลดขนาด Media, Scripts และ Effects ก่อน เพราะ Loading Screen เป็น NUI Web Interface และ Assets Local เป็นส่วนหนึ่งของข้อมูล Resource ที่ Client ต้องรับ.

แนวทางของ comsiam คือสร้าง Loading Screen ให้แยกเป็น Presentation → Loading Progress → Player Ready → Transition → Shutdown อย่างชัดเจน ไม่ใช้ Timer แบบเดาสุ่มเป็นตัวตัดสินว่า Player พร้อมหรือไม่ วิธีนี้ทำให้แก้ปัญหาหน้าโหลดค้างง่ายกว่าและเชื่อมต่อกับระบบ Character/Spawn ได้เป็นระบบมากขึ้น