Здравствуйте! Для разработки NUI интерфейсов для файв эм серверов мы так-же используем фреймворк cef.
Отличия разве что в том, что связываем верстку с сервером мы файлами .lua
Разбираемся как,
Во первых, мануал рассчитан на людей у которых уже установлен сервер fivem
Оставлю инструкцию по установке тут => https://docs.fivem.net/docs/client-manual/installing-fivem
Так-с.. Начнём!
Скриншот папки:
Скриншот папки:
index.html
style.css
listener.js
Подключим файлы с вёрсткой.
Вызывать браузер я буду командой, поэтому создам команду которая будет дергать эвент nui: on чтобы открывать браузер и эвент nui: off когда закрываю.
Далее в файле resource.cfg "вписываем" запуск нашего скрипта
Вот и всё! Так и работает CEF на серверах FIVEM. Значительных отличий в принципе нет
За что я люблю FiveM структуру, так за то что там и серверная и клиентская часть подключается в одном файле.
(По мне это намного удобнее чем сделано на RageMP).
Отличия разве что в том, что связываем верстку с сервером мы файлами .lua
Разбираемся как,
Во первых, мануал рассчитан на людей у которых уже установлен сервер fivem
Оставлю инструкцию по установке тут => https://docs.fivem.net/docs/client-manual/installing-fivem
Так-с.. Начнём!
- После того как установили сервер заходим в папку resources и внутри неё создаём новую папку с названием nui
Скриншот папки:
- Далее внутри папки nui создаем файлы _resource.lua , main.lua и папку html
Скриншот папки:
- Внутри папки html создаем файлы index.html , style.css , listener.js
index.html
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="./listener.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h2>CEF FIVE:M Manual</h2>
<br>
<h2>RAGEMP PRO | MADARAdev</h2>
<h2> « Ах@$*ть скрипты FiveM на форуме рейджа. » </h2>
</div>
</body>
</html>style.css
CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Tilt+Neon&display=swap');
* {
color: #fff;
font-family: "Montserrat" !important;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container {
text-shadow: 0px 0px 20px white;
position: absolute;
color: white;
margin: auto 0;
text-align: center;
background-color: #707BFB ;
border-radius: 40px;
border: 2px solid #040404 ;
padding:10px;
}listener.js
JavaScript:
$(function(){
window.onload = (e) => {
window.addEventListener('message', (event) => {
var item = event.data;
if (item !== undefined && item.type === "ui") {
if (item.display === true) {
$("#container").show();
} else{
$("#container").hide();
}
}
});
};
});Подключим файлы с вёрсткой.
- Открываем только что созданный файл _resource.lua и вставляем код:
Код:
ui_page "html/index.html"
client_script "main.lua"
files {
"html/index.html",
"html/style.css",
"html/listener.js"
}Вызывать браузер я буду командой, поэтому создам команду которая будет дергать эвент nui: on чтобы открывать браузер и эвент nui: off когда закрываю.
- Переходим в main.lua и вставляем код:
Код:
local display = false
-- По умолчанию когда загружаем скрипт окно не открыто.
-- Создаём команду /on которая будет открывать браузерное окно триггером эвента nui:on.
RegisterCommand("on", function()
Citizen.CreateThread(function()
TriggerEvent("nui:on", true)
end)
end)
-- Создаём команду /off которая будет соответственно закрывать окно триггером эвента nui:off.
RegisterCommand("off", function()
Citizen.CreateThread(function()
TriggerEvent("nui:off", true)
end)
end)
-- Создаём эвенты
RegisterNetEvent("nui:on")
AddEventHandler("nui:on", function(value)
SentNUIMessage({
type = "ui",
display = true
})
end)
RegisterNetEvent("nui:off")
AddEventHandler("nui:off", function(value)
SentNUIMessage({
type = "ui"
display = false
})
end)Далее в файле resource.cfg "вписываем" запуск нашего скрипта
Вот и всё! Так и работает CEF на серверах FIVEM. Значительных отличий в принципе нет За что я люблю FiveM структуру, так за то что там и серверная и клиентская часть подключается в одном файле.
(По мне это намного удобнее чем сделано на RageMP).
Последнее редактирование:
