อินเทอร์เฟซ ภาษา และการแสดงตัวอย่าง

อินเทอร์เฟซรอยสักโหลดจากไฟล์ที่สร้างไว้ใน ui/dist/ แพ็กเกจมี build ดังกล่าวและภาพขนาดย่อ vanilla ใน ui/public/ImagenesVanilla/; อย่าคาดว่าแพ็กเกจจะมีซอร์สโค้ด React หรือไฟล์พัฒนาของ ui/

แก้ไขไฟล์ที่ให้มา

หากต้องการปรับแต่งเล็กน้อย คุณแก้ไขไฟล์ที่มากับรีซอร์สได้:

• สีและแบบอักษร: เปิด ui/dist/assets/index-*.css แล้วเปลี่ยนค่าของตัวแปร --tat-* และ --cxg-* คงชื่อ CSS ปัจจุบันไว้ เพราะหน้า NUI อ้างอิงไฟล์นี้ CSS นี้ผ่านการคอมไพล์แล้วและอาจเปลี่ยนเมื่อได้รับ build ใหม่ สำรองการปรับแต่งของคุณไว้
• โลโก้: แทนที่ ui/dist/assets/cxg-logo-CmIGK6Fh.png โดยคงชื่อและเส้นทางให้ตรงทุกประการ เพราะเป็นส่วนหนึ่งของการอ้างอิงใน JavaScript ที่สร้างแล้ว รักษาสัดส่วนและความโปร่งใสให้เหมาะกับพื้นที่แสดงผล
• ภาพขนาดย่อ vanilla: แทนที่ไฟล์ชื่อเดียวกันใน ui/dist/ImagenesVanilla/ เพื่อให้การเปลี่ยนแปลงปรากฏในเวอร์ชันที่ใช้งานจริง หากมีสำเนาไฟล์ที่ตรงกันใน ui/public/ImagenesVanilla/ ให้แทนที่ด้วย เพราะ build ใหม่จะคัดลอกไฟล์จากโฟลเดอร์นั้นไปยัง dist/

สำรองข้อมูลก่อนแก้ไฟล์ build และตรวจสอบการเปลี่ยนแปลงใน FiveM หากต้องการเปลี่ยนดีไซน์ครั้งใหญ่ เพิ่ม components หรือแปลข้อความใน React ให้ขอซอร์ส UI แล้วสร้าง build ใหม่ ไฟล์ซอร์สเหล่านั้นไม่รวมอยู่ในชุดส่งมอบที่อธิบายไว้ที่นี่

ปรับแต่งรูปลักษณ์

หากต้องการเปลี่ยน layout, components หรือข้อความ React อย่างมาก ให้ใช้ซอร์ส UI หากได้รับแยกต่างหาก จุดหลักที่ใช้แก้ไขมีดังนี้:

• ui/src/index.css: ตัวแปร global --tat-* สำหรับสี แบบอักษร ขนาด และเงา
• ui/src/studio-theme.css: ตัวแปร --cxg-* และรูปแบบของสตูดิโอ
• ui/src/components/: components React และสไตล์เฉพาะของแต่ละ component
• ui/src/main.tsx: การ import Outfit Variable และ Geist Mono Variable

เริ่มจากแก้ตัวแปร theme การแก้กฎของ component โดยตรงต้องคงสถานะ focus, error, loading และ disabled ไว้ เปลี่ยนแบบอักษรใน main.tsx หากต้องการใช้ฟอนต์อื่นด้วย ส่วนสไตล์ที่เรียกใช้ฟอนต์กำหนดไว้ในตัวแปรแบบอักษร

ภาพขนาดย่อและรูปภาพ

ภาพขนาดย่อ vanilla ที่ให้มาอยู่ใน ui/public/ImagenesVanilla/ และจะถูกคัดลอกเข้า production build คงชื่อและเส้นทางที่แคตตาล็อกเรียกใช้ไว้ รูปภาพจากแพ็กภายนอกจะอยู่ในรีซอร์สเหล่านั้น และจะไม่ถูกคัดลอกเข้า UI โดยอัตโนมัติ

FiveM โหลด ui/dist/index.html และไฟล์ใน ui/dist/ เพื่อแสดง NUI ไดเรกทอรี ui/dist/ เป็นผลลัพธ์ที่สร้างขึ้น หากคุณได้รับซอร์สโค้ด ให้แก้ซอร์สและคอมไพล์ใหม่ แทนการแก้ไฟล์ build ที่ถูก minify ด้วยตนเอง

ภาษา

Config.Locale และ Config.LocaleFallback ใน config.lua ตั้งค่าภาษาเริ่มต้นของข้อความ Lua และ NUI สำหรับผู้เล่นทุกคน ค่าจะมีผลหลังรีสตาร์ต cxg-tattoos; ไม่ใช่ตัวเลือกเฉพาะบุคคลหรือเมนูเลือกภาษาใน NUI รหัสภาษาที่รองรับคือ en, es, pt-BR, fr, de, it, pl, ru, tr, th และ ar

ข้อความของ React มีพจนานุกรมใน ui/src/i18n.tsx หากได้รับซอร์สเหล่านั้น ภาษาอังกฤษเป็นภาษาหลักและใช้แทน key ที่ไม่มีคำแปล ภาษาอาหรับเปิดใช้ทิศทาง RTL การเปลี่ยน Config.Locale เป็นการเลือกภาษาที่มีอยู่ ส่วนการแก้พจนานุกรมเป็นการปรับคำแปลที่ UI มีอยู่ เป็นการตั้งค่าคนละส่วนกัน

คอมไพล์ซอร์ส UI

ขั้นตอนเหล่านี้ใช้เฉพาะเมื่อคุณได้รับโฟลเดอร์ซอร์ส ui/ ที่มี package.json และ package-lock.json ต้องใช้ Node.js และ npm ให้รันจาก ui/:

npm ci
npm run lint
npm run build

npm run lint ตรวจสอบชนิดข้อมูล TypeScript และ npm run build สร้าง ui/dist/ ซึ่งเป็นเนื้อหาที่ FiveM ใช้ ให้เผยแพร่ build ที่อัปเดตพร้อมกับรีซอร์ส

กล้องและชุดสำหรับการแสดงตัวอย่าง

config.lua ใช้ปรับกล้องและชุดที่ใช้ขณะเปิดสตูดิโอได้: Config.CameraOffsets, Config.CameraFraming, Config.CameraFramingBySide, Config.CameraManualControls และ Config.PreviewOutfit ดูรายละเอียดพารามิเตอร์เหล่านี้ใน การตั้งค่า