วิธีเปลี่ยน Loading Screen FiveM แบบละเอียด ตั้งแต่ติดตั้งจนใช้งานจริง

August 18, 2026

การ เปลี่ยน Loading Screen FiveM คือการเปลี่ยนหน้าที่ผู้เล่นเห็นขณะกำลังเชื่อมต่อและโหลดเข้าสู่เซิร์ฟเวอร์ จากหน้ามาตรฐานให้กลายเป็นหน้า Custom ที่มี Logo, Background, Progress Bar, เพลง, วิดีโอ, Tips หรือ Branding ของ Server เอง

FiveM รองรับ Custom Loading Screen ผ่านระบบ NUI ซึ่งเป็น HTML-based UI ที่ใช้ HTML, CSS และ JavaScript ได้ และ Resource Manifest มี Directive loadscreen สำหรับกำหนดไฟล์ HTML ที่จะใช้เป็นหน้า Loading Screen โดยตรง.

โครงสร้างพื้นฐานคือ


สร้าง Resource
↓
สร้าง fxmanifest.lua
↓
กำหนด loadscreen
↓
เพิ่ม HTML/CSS/JavaScript
↓
เพิ่มรูป/เพลง/วิดีโอ
↓
ใส่ Resource ใน server.cfg
↓
refresh / ensure
↓
เข้า Server ทดสอบ

บทความนี้จาก comsiam จะพาทำตั้งแต่โครงสร้าง Resource จนถึง Loading Progress และ Manual Shutdown แบบพร้อมใช้งานจริง

① เตรียมโฟลเดอร์ Loading Screen

สร้าง Resource ใหม่ เช่น


resources/
└── [ui]/
    └── my_loadscreen/

ภายในสร้างโครงสร้างประมาณนี้


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

FiveM ใช้ fxmanifest.lua เป็น Resource Manifest และ Files ที่ Client ต้องใช้สามารถถูกเพิ่มลง Resource Packfile เพื่อดาวน์โหลดไปยัง Client.

② fxmanifest.lua คือไฟล์สำคัญที่สุด

สร้างไฟล์


fxmanifest.lua

ไว้ที่ Root ของ Resource

ตัวอย่าง


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'
}

loadscreen ใช้กำหนด HTML File ของ Loading Screen ส่วน files ใช้เพิ่ม Assets ที่ Client ต้องได้รับ.

③ loadscreen คืออะไร

บรรทัด


loadscreen 'html/index.html'

หมายความว่า


FiveM
↓
เปิด Resource
↓
ใช้ html/index.html
↓
เป็นหน้า Loading Screen

Resource Manifest ของ Cfx.re รองรับ loadscreen สำหรับ Game Loading Screen โดยเฉพาะ.

④ Loading Screen ไม่ต้องใช้ ui_page หรือ

สำหรับ Loading Screen ให้ใช้


loadscreen

ส่วน


ui_page

ใช้สำหรับ NUI Page ของ Resource ทั่วไป เช่น HUD หรือ Menu

ทั้งสอง Directive อยู่ใน Resource Manifest แต่มีหน้าที่ต่างกัน.

⑤ สร้าง index.html

สร้าง


html/index.html

ตัวอย่างพื้นฐาน


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>Loading</title>

    <link
        rel="stylesheet"
        href="style.css">
</head>

<body>

    <main class="loading-screen">

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

        <h1>Welcome to Our Server</h1>

        <p id="loading-text">
            Loading... 0%
        </p>

        <div class="progress">
            <div
                id="progress-bar"
                class="progress-bar">
            </div>
        </div>

    </main>

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

</body>
</html>

NUI ของ FiveM รองรับ HTML/CSS/JavaScript ผ่าน Chromium-based UI Environment.

⑥ สร้าง Background เต็มหน้าจอ

สร้าง


html/style.css

ตัวอย่าง


* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.loading-screen {
    width: 100vw;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.55)
        ),
        url("background.webp")
        center center / cover no-repeat;
}

.logo {
    width: 180px;

นี่เป็น Web UI ปกติที่ทำงานอยู่ภายใน NUI Environment ของ FiveM.

⑦ ทำ Progress Bar

เพิ่ม CSS


.progress {
    width: min(500px, 70vw);
    height: 8px;

    margin-top: 20px;

    background: rgba(
        255,
        255,
        255,
        0.2
    );

    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;

    background: white;

    transition:
        width 0.15s linear;
}

จากนั้นให้ JavaScript รับค่า Loading จริงจาก FiveM

⑧ FiveM ส่ง Loading Progress มาให้หรือไม่

ส่ง

Loading Screen จะได้รับ Event


loadProgress

พร้อมค่า


loadFraction

ตั้งแต่ 0 ถึง 1.

ดังนั้นไม่จำเป็นต้องทำเปอร์เซ็นต์ปลอมด้วย Timer

⑨ สร้าง app.js

สร้าง


html/app.js

ตัวอย่าง


const progressBar =
    document.getElementById(
        'progress-bar'
    );

const loadingText =
    document.getElementById(
        'loading-text'
    );

window.addEventListener(
    'message',
    function (event) {

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

        const fraction =
            event.data.loadFraction;

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

        progressBar.style.width =
            percent + '%';

        loadingText.textContent =
            'Loading... ' +
            percent +
            '%';
    }
);

loadProgress เป็น Event อย่างเป็นทางการของ FiveM Loading Screen และ loadFraction มีช่วงตั้งแต่ 0 ถึง 1.

⑩ ทำไมไม่ควรใช้ setInterval ปลอมเปอร์เซ็นต์

ตัวอย่างที่ควรหลีกเลี่ยง


let progress = 0;

setInterval(() => {
    progress++;
}, 100);

เปอร์เซ็นต์แบบนี้ไม่ได้สัมพันธ์กับ Loading Progress จริง

อาจเกิด


UI = 100%
แต่ FiveM ยังโหลดอยู่

ควรใช้ loadProgress หากต้องการตัวเลขที่สะท้อน Loading Progress ที่ FiveM ส่งมา.

⑪ เพิ่ม Resource เข้า server.cfg

เพิ่ม


ensure my_loadscreen

ใน


server.cfg

FiveM Server Commands ระบุว่า ensure จะ Start Resource หากยังไม่ทำงาน หรือ Restart หาก Resource ทำงานอยู่แล้ว.

⑫ เพิ่ง Copy Resource เข้า Server ต้องทำอะไร

ใช้ Console


refresh

จากนั้น


ensure my_loadscreen

refresh จะ Rescan Resource Folder และโหลด Resource Manifests ใหม่ ส่วน ensure ใช้ Start/Restart Resource.

⑬ ถ้าแก้ HTML แล้วต้อง Restart Resource หรือไม่

ระหว่างพัฒนาสามารถใช้


restart my_loadscreen

หรือ


ensure my_loadscreen

ตาม Workflow ของ Server

FiveM รองรับ restart, ensure และ refresh ใน Server Commands โดยตรง.

⑭ Loading Screen เดิมยังขึ้นต้องทำอย่างไร

ตรวจว่า


Resource ใหม่ Start หรือไม่
loadscreen Path ถูกหรือไม่
Resource เก่าที่ยังทำ Loading Screen อยู่หรือไม่

อย่าเปิด Loading Screen Resources หลายตัวโดยไม่จำเป็น

ควรกำหนดตัวหลักให้ชัดเจน

⑮ ตรวจ Resource Start หรือไม่

ใน Server Console สามารถใช้


ensure my_loadscreen

ถ้า Resource ยังไม่ Started ระบบจะ Start ให้ และถ้า Started อยู่แล้วจะ Restart ตามนิยามของ ensure.

⑯ Loading Screen ขาวแก้อย่างไร

ตรวจตามลำดับ


① index.html
② CSS
③ JavaScript
④ Background Path
⑤ fxmanifest.lua
⑥ files

ถ้า HTML Path หรือ Assets ไม่ได้อยู่ใน Resource Packfile UI อาจโหลดไม่ครบ เพราะ Resource Manifest ใช้ files สำหรับ Assets ที่ Client ต้องได้รับ.

⑰ ทดสอบ HTML แบบง่ายก่อน

เปลี่ยน index.html ชั่วคราวเป็น


<!DOCTYPE html>
<html>
<body>
    <h1>LOADSCREEN TEST</h1>
</body>
</html>

ถ้าเห็นข้อความ


LOADSCREEN TEST

แปลว่า


Resource
+
Manifest
+
HTML

ทำงานแล้ว

จากนั้นค่อยแก้ CSS/JS ต่อ

⑱ Background ไม่ขึ้นแต่ข้อความขึ้น

แสดงว่า


index.html

โหลดแล้ว

ปัญหาน่าจะอยู่ที่


ไฟล์ภาพ
CSS URL
files
ชื่อ Folder
ชื่อไฟล์

มากกว่าตัว loadscreen

⑲ ตรวจตัวพิมพ์ใหญ่–เล็กของชื่อไฟล์

เช่น HTML เขียน


<img src="Logo.webp">

แต่ File จริงคือ


logo.webp

บนบาง Environment อาจเกิดปัญหา Path Case ได้

วิธีที่ปลอดภัยคือใช้ชื่อไฟล์มาตรฐานและอ้างตรงกันทุกจุด

⑳ ใช้ JPG, PNG หรือ WebP ดี

Loading Screen สามารถใช้ Web Assets ตามที่ Browser/NUI รองรับ เพราะ NUI เป็น HTML-based UI.

สำหรับภาพ Background ขนาดใหญ่ ควรเลือก Format/Compression ให้สมดุลระหว่าง


คุณภาพ
ขนาดไฟล์
เวลาโหลด

ไม่จำเป็นต้องใช้ภาพที่ใหญ่กว่าความละเอียดที่ต้องแสดงมากเกินไป

㉑ เปลี่ยน Background ทำอย่างไร

นำภาพใหม่มาแทน


html/background.webp

แล้ว CSS


background:
    url("background.webp")
    center center / cover no-repeat;

อย่าลืมให้ไฟล์อยู่ใน files ของ Manifest หากเป็น Local Asset ที่ Resource ต้องส่งให้ Client.

㉒ เปลี่ยน Logo ทำอย่างไร

แทนไฟล์


logo.webp

แล้วใช้


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

หรือเปลี่ยน Path ตาม Resource ของคุณ

㉓ ใส่หลาย Background ได้ไหม

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

เช่น JavaScript สลับ


background1.webp
background2.webp
background3.webp

แต่ทุก Asset เพิ่มขนาด Resource ที่ Client ต้องได้รับ จึงไม่ควรเพิ่มภาพจำนวนมากโดยไม่จำเป็น.

㉔ ทำ Slideshow Background ได้ไหม

ได้

ตัวอย่างเชิงแนวคิด


const backgrounds = [
    'background1.webp',
    'background2.webp',
    'background3.webp'
];

จากนั้นสลับ CSS Background ตาม Interval

แต่ควรทดสอบ Performance และขนาด Resource จริง

㉕ ใส่เพลงใน Loading Screen ได้ไหม

NUI ใช้ Web Technologies จึงสามารถสร้าง Interface ที่ใช้ Media ผ่าน HTML ได้ตาม Environment ของ NUI.

ตัวอย่างโครงสร้าง


<audio
    id="music"
    src="music.ogg">
</audio>

จากนั้นเพิ่มไฟล์เพลงใน Manifest


files {
    'html/music.ogg'
}

㉖ อย่าลืมเพิ่มเพลงใน files

ถ้า HTML อ้าง


music.ogg

แต่ Resource Manifest ไม่ส่ง File ให้ Client เพลงจะไม่สามารถถูกโหลดจาก Local Resource ได้ตามที่คาด

Resource Manifest ใช้ file/files สำหรับเพิ่ม Files ลง Resource Packfile.

㉗ เพลงควรดังแค่ไหน

ไม่ควรตั้งเสียงดังสูงโดยไม่จำเป็น

Loading Screen เป็น First Experience ของผู้เล่น

เหมาะกับ Volume ระดับเบา เช่น


10–30%

แล้วหากมี UI Control สามารถเปิดให้ผู้เล่นปรับหรือปิดเสียงเอง

㉘ ทำปุ่ม Mute ได้ไหม

ได้

ตัวอย่าง


<button id="mute">
    Mute
</button>

JavaScript


const audio =
    document.getElementById('music');

document.getElementById(
    'mute'
).addEventListener(
    'click',
    function () {
        audio.muted =
            !audio.muted;
    }
);

แต่ถ้าต้องการให้ผู้เล่นใช้ Mouse ใน Loading Screen ต้องพิจารณา Cursor ด้วย

㉙ เปิด Cursor ใน Loading Screen อย่างไร

FiveM Loading Screen รองรับ


loadscreen_cursor 'yes'

เพื่อแสดง Cursor ใน Loading Screen.

ตัวอย่าง Manifest


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

เหมาะกับ Loading Screen ที่มี


Mute
Volume
Links
Buttons

㉚ Loading Screen ปกติต้องเปิด Cursor ไหม

ไม่จำเป็น

ถ้ามีเพียง


Logo
Background
Progress
Tips

ไม่ต้องใช้ Cursor

ลด Interaction ที่ไม่จำเป็น

㉛ ใส่ Video Background ได้ไหม

NUI เป็น Web UI ที่สร้างด้วย HTML/CSS/JS ได้ จึงสามารถออกแบบด้วย Media Components ตามความสามารถของ Environment.

ตัวอย่าง


<video
    autoplay
    muted
    loop
    playsinline>
    <source
        src="background.mp4"
        type="video/mp4">
</video>

จากนั้นเพิ่ม Video File ลง files

㉜ Video Background ควรระวังอะไร

Video ใหญ่ทำให้


Resource ใหญ่ขึ้น
Client ต้องรับข้อมูลมากขึ้น
UI ต้อง Decode/Render Video

ดังนั้นอย่าใช้ Video 4K Bitrate สูงเพียงเพราะสามารถเปิดได้

ควร Compress ให้เหมาะกับหน้าโหลด

㉝ ใช้ Video หรือภาพนิ่งดีกว่า

ถ้าต้องการเบาและเสถียร


ภาพนิ่ง + CSS Animation

มักจัดการได้ง่ายกว่า

ถ้าต้องการ Branding แบบ Cinematic และยอมรับ Asset Size/Rendering Cost ได้จึงค่อยพิจารณา Video

㉞ ใส่ Server Rules ได้ไหม

ได้

เช่น


<ul>
    <li>Respect Roleplay</li>
    <li>No Random Deathmatch</li>
    <li>Use voice responsibly</li>
</ul>

แต่ไม่ควรใส่ Rule Book ยาวหลายหน้าบน Loading Screen

ควรแสดงเฉพาะกฎสำคัญและอ่านง่าย

㉟ ทำ Tips สลับข้อความ

ตัวอย่าง


const tips = [
    'Respect other players.',
    'Read the server rules.',
    'Use voice appropriately.'
];

let index = 0;

setInterval(() => {

    index =
        (index + 1)
        % tips.length;

    document.getElementById(
        'tip'
    ).textContent =
        tips[index];

}, 5000);

นี่เป็น Logic ฝั่ง Web UI ไม่เกี่ยวกับ Loading Progress ของ FiveM

㊱ Loading Tips กับ Progress ควรแยกกัน

ควร


Tips
→ Timer

Loading %
→ loadProgress

อย่าใช้ Timer เดียวกันสร้าง Progress ปลอม

FiveM มี loadProgress ที่ส่ง Loading Fraction จริงมาให้อยู่แล้ว.

㊲ Loading Screen รับข้อมูลผู้เล่นได้หรือไม่

ได้

FiveM รองรับ Handover Data ผ่าน playerConnecting โดย Server สามารถส่ง Data Pairs ไปยัง Loading Screen และหน้า Web อ่านผ่าน


window.nuiHandoverData

ได้.

㊳ ตัวอย่างส่งชื่อผู้เล่น

Server Script


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

        local player = source

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

    end
)

นี่เป็น Pattern ที่ Cfx.re Documentation แสดงสำหรับ Handover Data.

㊴ แสดงชื่อผู้เล่นใน Loading Screen

HTML


<h2 id="welcome"></h2>

JavaScript


window.addEventListener(
    'DOMContentLoaded',
    function () {

        const data =
            window.nuiHandoverData;

        if (data && data.name) {
            document.getElementById(
                'welcome'
            ).innerText =
                'Welcome, ' +
                data.name;
        }

    }
);

Cfx.re แนะนำใช้ innerText กับข้อมูลอย่างชื่อผู้เล่นแทน innerHTML เพราะชื่อเป็น User Input.

㊵ อย่าใช้ innerHTML กับชื่อผู้เล่น

หลีกเลี่ยง


element.innerHTML =
    playerName;

ควรใช้


element.innerText =
    playerName;

สำหรับ User-controlled Text ตามคำแนะนำใน Official Loading Screen Documentation.

㊶ Loading Screen ปิดเองหรือไม่

โดย Default Loading Screen จะอยู่จน SHUTDOWN_LOADING_SCREEN ถูกเรียก และ FiveM ยังรองรับ Manual Control ผ่าน loadscreen_manual_shutdown.

ถ้า Server ใช้ Spawn/Character System ต้องทำความเข้าใจว่า Resource ใดเป็นผู้ควบคุม Transition นี้

㊷ Manual Shutdown คืออะไร

เพิ่ม


loadscreen_manual_shutdown 'yes'

ใน Manifest

จะป้องกัน Loading Screen NUI จากการปิดหลัง Game Data Load ตามปกติ แล้ว Resource สามารถปิดเองด้วย SHUTDOWN_LOADING_SCREEN_NUI.

㊸ เมื่อไรควรใช้ Manual Shutdown

เหมาะกับ Flow แบบ


Loading
↓
Character Data
↓
Character Selection
↓
Spawn
↓
Fade
↓
ปิด Loading Screen

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

㊹ เมื่อไรไม่ควรใช้ Manual Shutdown

ถ้า Server ต้องการ Loading Screen ง่าย ๆ และไม่มี


Custom Character Transition
Spawn Integration
Custom Fade

ก็ไม่จำเป็นต้องเพิ่ม Complexity

เพราะเมื่อเปิด Manual Shutdown Resource ของคุณต้องรับผิดชอบการปิด Loading Screen NUI เอง.

㊺ ตัวอย่าง Manual Shutdown Manifest


fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'

loadscreen_manual_shutdown 'yes'

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

client_script 'client.lua'

Directive นี้เป็นวิธีปัจจุบันที่ Resource Manifest รองรับสำหรับ Manual Shutdown.

㊻ client.lua สำหรับปิด Loading Screen

ตัวอย่างเชิง Architecture


RegisterNetEvent(
    'myserver:playerReady',
    function()

        ShutdownLoadingScreenNui()

    end
)

ชื่อ Event


myserver:playerReady

เป็นตัวอย่างที่ Resource ของคุณสร้างเอง

ส่วน SHUTDOWN_LOADING_SCREEN_NUI คือกลไกสำหรับปิด Loading Screen NUI เมื่อใช้ Manual Lifetime.

㊼ อย่าใช้ Wait 10 วินาทีเป็น Player Ready

ตัวอย่างที่ไม่ควรใช้เป็น Logic หลัก


Wait(10000)

ShutdownLoadingScreenNui()

เพราะ


10 วินาทีผ่านแล้ว

ไม่ได้แปลว่า


Character พร้อมแล้ว

Manual Shutdown มีไว้ให้เชื่อมกับ State จริงของ Resource/Spawn Flow.

㊽ Spawnmanager เกี่ยวข้องอย่างไร

FiveM มี spawnmanager ซึ่งเป็น Base Resource สำหรับควบคุมว่าผู้เล่นจะ Spawn เมื่อไร ที่ไหน และ Respawn อย่างไร.

ถ้า Server ใช้ Custom Character/Spawn System ต้องระวังไม่ให้ Default Spawn Flow และ Custom Loading Screen Logic ทำงานชนกัน

㊾ ปิด Loading Screen หลัง Player Spawn ได้ไหม

ได้ในเชิง Architecture

Flow ที่เข้าใจง่ายคือ


Player Data Ready
↓
Spawn Player
↓
ตรวจ Spawn สำเร็จ
↓
Fade Loading Screen
↓
Shutdown Loading NUI

หากใช้ spawnmanager, Cfx.re ระบุว่า spawnPlayer สามารถใช้เลือกเวลาและตำแหน่ง Spawn ของ Player ได้.

㊿ SendLoadingScreenMessage คืออะไร

เมื่อ Scripts เริ่มทำงาน และ Loading Screen ยังเปิดอยู่ใน Manual Mode สามารถใช้


SEND_LOADING_SCREEN_MESSAGE

เพื่อส่งข้อความไปยัง loadingScreen NUI Frame.

เหมาะกับ Status เช่น


Loading character...
Loading inventory...
Preparing spawn...
Entering city...

51. ตัวอย่างส่ง Status เข้า Loading Screen

Client Lua


SendLoadingScreenMessage(
    json.encode({
        action = 'status',
        text = 'Preparing character...'
    })
)

แล้ว JavaScript รับผ่าน


window.addEventListener(
    'message',
    function (event) {

        if (
            event.data.action
            === 'status'
        ) {

            document.getElementById(
                'status'
            ).textContent =
                event.data.text;

        }

    }
);

Official Loading Screen Docs ระบุ SEND_LOADING_SCREEN_MESSAGE เป็น Native ที่ใช้ได้เมื่อควบคุม Loading Screen Lifetime เอง.

52. SendLoadingScreenMessage ต่างจาก loadProgress

ต่างกัน


loadProgress
= FiveM ส่ง Loading Progress ให้หน้า UI

SendLoadingScreenMessage
= Script ของเราเป็นผู้ส่งข้อมูลเข้า Loading Screen

ทั้งสองสามารถถูกฟังผ่าน Browser message Event ได้.

53. ทำ Fade Out ก่อนเข้าเมือง

CSS


body {
    opacity: 1;
    transition:
        opacity 0.8s ease;
}

body.fade-out {
    opacity: 0;
}

JavaScript


if (
    event.data.action
    === 'fadeOut'
) {
    document.body.classList.add(
        'fade-out'
    );
}

จากนั้น Client Script ค่อยปิด Loading Screen เมื่อ Transition จบตาม Flow ที่คุณออกแบบ

Manual Shutdown ถูกออกแบบมาให้รองรับ Custom Fade Transition ได้.

54. อย่าปิด NUI ก่อน Fade เสร็จ

ถ้าเรียก


ShutdownLoadingScreenNui

ทันที

หน้า UI จะหายก่อน Animation Fade ที่ JavaScript/CSS ออกแบบไว้จบ

จึงต้องประสาน


Message
↓
Fade
↓
Shutdown

ให้ตรงกัน

55. Loading Screen ค้างที่ 100% แก้อย่างไร

ถ้าเห็น


100%

แต่ยังอยู่หน้า Loading Screen ให้ตรวจ


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

เมื่อใช้ Manual Shutdown ตัว Resource เป็นผู้รับผิดชอบการปิด NUI.

56. Loading Screen ไม่ขึ้นเลย

ตรวจ


Resource Start
fxmanifest.lua
loadscreen
index.html
files
server.cfg

จากนั้นใช้


refresh
ensure my_loadscreen

เพื่อให้ Server Rescan Manifest และ Start Resource.

57. Loading Screen เปลี่ยนแล้ว Server ยังใช้ตัวเก่า

ตรวจว่า


Resource เก่ายัง ensure อยู่หรือไม่
Resource ใหม่ Start หรือไม่
ชื่อ Resource ถูกหรือไม่
server.cfg มี Loading Screen หลายตัวหรือไม่

อย่าปล่อย Resource เดิมกับ Resource ใหม่ทำหน้าที่เดียวกันพร้อมกันโดยไม่จำเป็น

58. ใช้ txAdmin Restart Resource ได้ไหม

ได้

txAdmin รองรับการ Start/Stop/Restart Server และ Resources จากระบบจัดการของมัน.

แต่ระหว่าง Debug Loading Screen ควรอ่าน Console Errors ด้วย ไม่ควรกด Restart อย่างเดียวซ้ำไปมา

59. Loading Screen เปิดช้ามาก

ตรวจขนาด


Background Images
Video
Audio
Fonts
JavaScript Libraries

เพราะ Local Files ที่ประกาศใน Resource Manifest ต้องถูกดาวน์โหลดให้ Client ใน Resource Packfile.

ยิ่ง Resource ใหญ่โดยไม่จำเป็น ยิ่งเพิ่มข้อมูลที่ Client ต้องรับ

60. อย่าใส่รูปขนาดใหญ่มากหลายสิบรูป

ถ้าแต่ละภาพ


10 MB

และมี


20 ภาพ

Loading Screen Resource จะมี Assets จำนวนมากโดยไม่จำเป็น

ควร Optimize


Resolution
Compression
จำนวนภาพ

ก่อน Production

61. Fonts เยอะเกินไปควรลดไหม

ควรโหลดเฉพาะ Font และ Weight ที่ใช้จริง

เช่นแทนที่จะมี

ถ้าใช้จริงแค่


400
700

ก็ควรลด Assets ที่ไม่จำเป็น

62. External Assets ควรใช้หรือไม่

Resource Manifest รองรับ Loading Screen จาก HTML File และ FiveM Loading Screen Docs ระบุว่าสามารถกำหนด Loading Screen เป็น URL ได้ด้วย.

แต่ External Dependencies หมายความว่า Loading UI พึ่ง Availability ของบริการภายนอกเพิ่มขึ้น

สำหรับ Branding หลักควรพิจารณาความเสถียรด้วย

63. ใช้ CDN สำหรับ Background ดีไหม

อาจช่วยบาง Architecture แต่เพิ่ม Dependency ภายนอก

ถ้า CDN หรือ Network Route มีปัญหา


HTML อาจขึ้น
แต่ Background/Assets อาจช้า

Local Assets ควบคุม Version ได้ง่ายกว่า

เลือกตาม Infrastructure ของ Server

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

สำคัญ

ผู้เล่นไม่ได้ใช้ Resolution เดียวกัน

ควรทดสอบอย่างน้อย


1920×1080
2560×1440
4K
21:9
Ultrawide

เพราะ NUI เป็น Web UI และสามารถใช้ CSS Responsive Layout ได้.

65. อย่าใช้ Pixel Position ทั้งหมด

ตัวอย่าง


left: 1500px;
top: 850px;

อาจพังบนจออื่น

ควรพิจารณา


%
vw
vh
flex
grid
max-width

ตาม Layout

66. ตัวอย่าง Responsive Container


.loading-content {
    width: min(
        90vw,
        700px
    );

    padding: 24px;

    text-align: center;
}

ทำให้ UI ปรับตาม Viewport ได้ง่ายกว่าการล็อก Width 700px ในทุกหน้าจอ

67. ทดสอบ Loading Screen โดยไม่ใส่เพลงก่อน

เวลาหาปัญหาให้เริ่มจาก


HTML
↓
CSS
↓
Progress
↓
Images
↓
Audio
↓
Video

อย่าเปิดทุก Featureพร้อมกันตั้งแต่แรก

จะทำให้หา Root Cause ยาก

68. JavaScript Error ทำให้ Progress ไม่ขึ้น

ถ้า HTML และ Background ขึ้น แต่ Progress ค้าง

เปิด Console/Developer Tools และตรวจ JavaScript

NUI เป็น Chromium-based UI จึงสามารถ Debug Logic ฝั่ง Browser ได้เหมือน Web UI.

69. Progress Bar อยู่ที่ 0 ตลอด

ตรวจว่า Handler ใช้


event.data.eventName

และเช็ก


loadProgress

ถูกต้องหรือไม่

Official Event Data ใช้


eventName
loadFraction

ตามรูปแบบนี้.

70. Progress Bar แสดงเกิน 100%

ถ้าคุณใช้


loadFraction * 100

ค่า Loading Fraction อย่างเป็นทางการอยู่ในช่วง 0–1 จึงไม่ควรเกิน 100 จาก Source นี้.

ถ้าเกิน ให้ตรวจ Calculation/State ของ JavaScript

71. วิธี Debug แบบเร็วที่สุด

ใช้ลำดับนี้


① Resource
② Manifest
③ HTML
④ CSS
⑤ Assets
⑥ JavaScript
⑦ loadProgress
⑧ Manual Shutdown
⑨ Spawn
⑩ Production Optimization

อย่าเริ่มจาก Cache หรือเปลี่ยน Server Artifact หากปัญหาเป็น File Path ธรรมดา

72. Checklist fxmanifest.lua


☐ fx_version ถูก
☐ game 'gta5'
☐ loadscreen ถูก
☐ index.html อยู่จริง
☐ CSS อยู่ใน files
☐ JavaScript อยู่ใน files
☐ รูปอยู่ใน files
☐ Audio อยู่ใน files
☐ Video อยู่ใน files
☐ client_script มีเมื่อจำเป็น
☐ Manual Shutdown เปิดเฉพาะเมื่อใช้

Manifest เป็นตัวกำหนด Loading Screen และ Resource Packfile ที่ Client ต้องรับ.

73. Checklist หน้า Loading Screen


☐ Logo ขึ้น
☐ Background ขึ้น
☐ Text อ่านง่าย
☐ Progress เดิน
☐ เปอร์เซ็นต์ไม่ปลอม
☐ Tips ทำงาน
☐ เพลงทำงาน
☐ Mute ทำงานถ้ามี
☐ Video ลื่นถ้ามี
☐ 16:9 ถูก
☐ 21:9 ถูก
☐ 4K ถูก

74. Checklist Manual Shutdown


☐ loadscreen_manual_shutdown 'yes'
☐ Client Script เริ่มทำงาน
☐ Player Ready State ชัดเจน
☐ Spawn Flow ชัดเจน
☐ Fade ทำงาน
☐ ShutdownLoadingScreenNui ถูกเรียก
☐ ไม่ Shutdown ซ้ำโดยไม่จำเป็น

Manual Shutdown ทำให้ Resource เป็นผู้ควบคุม Lifetime ของ Loading Screen NUI เอง.

75. Loading Screen กับ Spawn System ต้องทดสอบร่วมกัน

อย่าทดสอบเพียงว่า


หน้าโหลดสวย

ต้องตรวจด้วยว่า


Character Spawn ถูก
Camera ถูก
Player Position ถูก
HUD เปิดถูก
Mouse Focus ไม่ค้าง
Loading Screen ปิดถูก

โดยเฉพาะ Server ที่มี Multicharacter หรือ Custom Spawn System

76. ระวังการเรียก Shutdown ซ้ำ

Loading/Spawn Architecture ควรมีผู้รับผิดชอบ Shutdown ชัดเจน

เช่น


Loading Resource

หรือ


Character Manager

ไม่ควรมี Resources หลายตัวเรียกปิด Loading Screen แบบซ้ำโดยไม่รู้กัน

77. เปลี่ยน Loading Screen แล้วผู้เล่น Spawn ผิดตำแหน่ง

อย่ารีบสรุปว่า HTML ทำให้ Spawn ผิด

ให้แยก


Loading Screen UI

ออกจาก


Spawn Manager
Character Resource
Player Position Logic

FiveM spawnmanager เป็น Resource ที่จัดการการ Spawn/Respawn ของ Player โดยเฉพาะ.

78. Loading Screen Resource ควรมี Client Script หรือไม่

ถ้าใช้เพียง


HTML
CSS
loadProgress

อาจไม่ต้องมี Client Script เพิ่ม

แต่ถ้าใช้


Manual Shutdown
Custom Status
Character Transition

มักต้องมี Client Logic เข้ามาควบคุม

79. Full Resource ตัวอย่างแบบพื้นฐาน

โครงสร้าง


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

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'
}

นี่คือโครงสร้างขั้นต่ำที่สอดคล้องกับ Resource Manifest และ Loading Screen ของ FiveM.

80. Full Resource แบบ Manual Shutdown

โครงสร้าง


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

Manifest


fx_version 'cerulean'
game 'gta5'

loadscreen 'html/index.html'

loadscreen_manual_shutdown 'yes'

client_script 'client.lua'

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

Manual Shutdown จะทำให้ Loading NUI ไม่ปิดเองหลัง Game Data Load และต้องถูกปิดด้วย SHUTDOWN_LOADING_SCREEN_NUI.

81. อย่า Copy Loading Screen โดยไม่อ่าน fxmanifest

Loading Screen ที่ดาวน์โหลดมาอาจใช้


External URL
Manual Shutdown
Client Script
Framework Events
Custom Spawn
Music
Video

ถ้า Copy Folder แล้ว ensure ทันทีโดยไม่อ่าน Architecture อาจเกิดปัญหา


หน้าโหลดค้าง
Character ไม่ Spawn
หน้าโหลดไม่ปิด
ไฟล์หาย

82. เปลี่ยนเฉพาะรูปกับเพลงปลอดภัยที่สุดหรือไม่

ถ้า Resource เดิมทำงานดีอยู่แล้ว และต้องการเพียง Rebrand

การเปลี่ยน


Logo
Background
Text
Music

โดยไม่แตะ Shutdown/Spawn Logic มีความเสี่ยงน้อยกว่าการเปลี่ยน Architecture ทั้งระบบ

แต่ยังต้อง Backup Resource เดิมก่อนแก้

83. Backup ก่อนเปลี่ยน Loading Screen

เก็บ Folder เดิม เช่น


old_loadscreen_backup/

หรือใช้ Version Control

ถ้าของใหม่มีปัญหาสามารถย้อนกลับได้ทันที

โดยเฉพาะ Production Server ที่มีผู้เล่นใช้งานจริง

84. อย่าเปิด Resource เก่ากับใหม่พร้อมกัน

ตัวอย่าง


ensure old_loadscreen
ensure new_loadscreen

ไม่ใช่แนวทางที่ดีสำหรับการเปลี่ยน Loading Screen

ควรเลือก Resource หลักเพียงตัวเดียว

เช่น


# ensure old_loadscreen
ensure new_loadscreen

85. ขั้นตอนเปลี่ยน Loading Screen แบบสั้นที่สุด


① Backup ตัวเก่า
② สร้าง/วาง Resource ใหม่
③ ตรวจ fxmanifest.lua
④ ตรวจ loadscreen
⑤ ตรวจ files
⑥ ใส่ ensure ใน server.cfg
⑦ ปิด Resource เก่า
⑧ refresh
⑨ ensure Resource ใหม่
⑩ เข้า Server ทดสอบ

refresh และ ensure เป็นคำสั่งมาตรฐานสำหรับ Rescan และ Start/Restart Resources.

86. ถ้า Resource ใหม่ไม่ขึ้น ให้ย้อน A/B Test

ทดสอบ


Old Loading Screen
→ ทำงาน

New Loading Screen
→ ไม่ทำงาน

แสดงว่าปัญหาอยู่ใน Resource ใหม่หรือ Configuration ของมัน

ไม่จำเป็นต้องแก้ทั้ง FXServer

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

หลีกเลี่ยง


เปิด Loading Screen สองตัวพร้อมกัน
ลืมใส่ Assets ใน files
ใช้ Path ผิด
ใช้ Progress ปลอมทั้งที่มี loadProgress
เปิด Manual Shutdown แต่ไม่ Shutdown
ใช้ Wait แบบสุ่มเป็น Player Ready
Video ใหญ่มากโดยไม่ Optimize
Hard-code UI เฉพาะ 1080p
ใช้ innerHTML กับชื่อผู้เล่น
เปลี่ยน Spawn Logic พร้อม UI ในครั้งเดียว

loadProgress, Handover Data และ Manual Shutdown มีระบบรองรับอย่างเป็นทางการอยู่แล้ว จึงควรใช้กลไกเหล่านี้แทนการสร้าง Workaround ที่ซับซ้อนโดยไม่จำเป็น.

88. สูตรจำง่ายสำหรับเปลี่ยน FiveM Loading Screen


RESOURCE
↓
MANIFEST
↓
LOADSCREEN
↓
FILES
↓
HTML/CSS/JS
↓
PROGRESS
↓
SPAWN
↓
SHUTDOWN

ถ้าหน้าโหลดไม่ทำงาน ให้ Debug จากบนลงล่างตาม Flow นี้

สรุป วิธีเปลี่ยน Loading Screen FiveM

การเปลี่ยน Loading Screen FiveM เริ่มจากสร้าง Resource ที่มี


fxmanifest.lua
html/index.html
style.css
app.js
Assets

แล้วกำหนด


loadscreen 'html/index.html'

ใน Resource Manifest

FiveM รองรับ loadscreen โดยตรง และ Local Assets ที่หน้า UI ต้องใช้ควรถูกใส่ใน Resource Packfile ผ่าน files.

จากนั้นเพิ่ม


ensure my_loadscreen

ใน server.cfg และสามารถใช้


refresh
ensure my_loadscreen

ระหว่างติดตั้ง Resource ใหม่ โดย refresh จะ Rescan Resources และ ensure จะ Start หรือ Restart Resource.

หากต้องการ Loading Progress จริง ให้ใช้ Event


loadProgress

และอ่าน


loadFraction

ซึ่ง FiveM ส่งค่า 0–1 เข้า Loading Screen โดยตรง.

หากต้องการแสดงชื่อผู้เล่นหรือ Data ตั้งแต่ช่วง Connection สามารถใช้ Handover Data จาก playerConnecting และอ่านจาก


window.nuiHandoverData

ในหน้า Loading Screen.

ถ้าต้องการควบคุมว่า Loading Screen จะหายเมื่อใด ให้เพิ่ม


loadscreen_manual_shutdown 'yes'

แล้วให้ Client/Spawn System เรียก SHUTDOWN_LOADING_SCREEN_NUI เมื่อ Player พร้อมจริง.

ถ้า Loading Screen ไม่ขึ้น ให้ตรวจ Resource → Manifest → loadscreen → HTML

ถ้า หน้าโหลดขึ้นแต่ Background/เพลงไม่มา ให้ตรวจ Asset Path และ files

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

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

ถ้า หน้าโหลดหนักหรือกระตุก ให้ลด Images, Video, Audio, Fonts และ Effects ที่ไม่จำเป็นก่อน

และถ้า Server ใช้ Multicharacter หรือ Custom Spawn ให้แยก Loading UI ออกจาก Player Spawn Logic ให้ชัด เพราะ spawnmanager มีหน้าที่ควบคุมการ Spawn ของผู้เล่น ส่วน Loading Screen เป็น NUI Presentation/Lifecycle อีกชั้นหนึ่ง.

แนวทางของ comsiam คือเริ่มจาก Loading Screen ที่เรียบและเสถียรก่อน แล้วค่อยเพิ่ม Progress, Handover, Music, Video และ Manual Shutdown ทีละส่วน วิธีนี้ Debug ง่ายกว่าและช่วยป้องกันปัญหาหน้าโหลดสวยแต่ผู้เล่นค้างอยู่หน้า Loading Screen เข้าเมืองไม่ได้