Всем привет, видел на просторах интернета несколько подобных статей, но решил забросить в это болото еще и свою
Сегодня я постараюсь вам показать как связать клиентскую часть на C#, CEF и Сервер в RAGEMP
Ну а если коротко то напишем сегодня спавнер автомобилей с использованием не очень красивого интерфейса
Что вам понадобиться, для того чтобы понять этот урок
1- Мозг
2- Прямые руки (но это не обязательно)
3- Ну и желательно не быть Питонистмом
4- Понимать кто такой HTML и JavaScript, но если вдруг получилось так что не знаете кто это то я бы рекомендовал обратиться к дяде Google
5- Также предполагается что до этого вы прошли два предыдущих урока
Предыдущие Уроки
Для построения красивых интерфейсов в RAGE обычно используют CEF
Если максимально коротко и обобщено, то CEF это самый обычный браузер внутри игры
Для построения интерфейсов можно использовать все то же самое что и для разработки сайтов, любая js библиотека запуститься внутри CEF
Для взаимодействий между клиентским кодом(далее просто клиент) и кодом внутри CEF(далее просто браузер), RAGE предлагает нам лишь только один метод, а именно метод ExecuteJs который запускает какой-то JS код внутри браузера. Ну а для того, чтобы сказать что-то клиенту -> нужно вызвать mp.trigger('event name', ...args), где mp это объект который RAGE инжектит в глобальный объект window, а метод trigger просто вызывает клиентский ивент.
Думаю с теорией Хватит, перейдем к практике.
Практика
1- Рядом с папкой cs_packages создадим папку cef_packages в которой будем хранить все что нужно для наших Очень Красивых интерфейсов
2- Теперь внутри ранее созданной папки создадим папку vehicle-spawner в которой будет лежать верстка(и не только) интерфейса
3- Теперь внутри папки vehicle-spawner создадим файл index.html и script.js куда вставим следующий код
4- Далее перейдем в файл Client.cs который был создан в одном из предыдущих уроков и вставим туда следующий код
5- Теперь зарегистрируем все эти события(Если вы забыли то код который ниже нужно вставить в конструктор класса)
6- Теперь откройте файл Server.cs который был создан в одном из предыдущих уроков -> создайте там команду "vehs" которая будет триггерить клиентский ивент и открывать наш браузер
7- Теперь если все он то у вас должно получиться все так как на видео
Буду надеяться что я вам как-то помог, также желаю вам удачи в жизни и разработке
Если есть какие-то пожелание, рекомендации, или замечания, то пишите их ниже в ответах к данному посту
Также вы можете писать свои отзывы в комментариях под этим уроком
Сегодня я постараюсь вам показать как связать клиентскую часть на C#, CEF и Сервер в RAGEMP
Ну а если коротко то напишем сегодня спавнер автомобилей с использованием не очень красивого интерфейса
Что вам понадобиться, для того чтобы понять этот урок
1- Мозг
2- Прямые руки (но это не обязательно)
3- Ну и желательно не быть Питонистмом
4- Понимать кто такой HTML и JavaScript, но если вдруг получилось так что не знаете кто это то я бы рекомендовал обратиться к дяде Google
5- Также предполагается что до этого вы прошли два предыдущих урока
Предыдущие Уроки
- Настройка окружения
- Настройка серверной части
- Создание и настройка клиентской части сервера для RAGEMP
Для построения красивых интерфейсов в RAGE обычно используют CEF
Если максимально коротко и обобщено, то CEF это самый обычный браузер внутри игры
Для построения интерфейсов можно использовать все то же самое что и для разработки сайтов, любая js библиотека запуститься внутри CEF
Для взаимодействий между клиентским кодом(далее просто клиент) и кодом внутри CEF(далее просто браузер), RAGE предлагает нам лишь только один метод, а именно метод ExecuteJs который запускает какой-то JS код внутри браузера. Ну а для того, чтобы сказать что-то клиенту -> нужно вызвать mp.trigger('event name', ...args), где mp это объект который RAGE инжектит в глобальный объект window, а метод trigger просто вызывает клиентский ивент.
Думаю с теорией Хватит, перейдем к практике.
Практика
1- Рядом с папкой cs_packages создадим папку cef_packages в которой будем хранить все что нужно для наших Очень Красивых интерфейсов
2- Теперь внутри ранее созданной папки создадим папку vehicle-spawner в которой будет лежать верстка(и не только) интерфейса
3- Теперь внутри папки vehicle-spawner создадим файл index.html и script.js куда вставим следующий код
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Spawn Vehicle for <span id="nickname"></span></h1>
<input type="text" placeholder="Vehicle model" id="vehicle_model">
<button id="spawn_vehicle_btn">Spawn Vehicle</button>
<script src="./script.js"></script>
</body>
</html>
JavaScript:
document.getElementById("spawn_vehicle_btn").addEventListener("click", (e) => { // подписываемся на событие клика по кнопке
const input = document.getElementById("vehicle_model");
const value = input.value; // получить текст из инпута
mp.trigger("Server:Vehicle:Create", value); // триггерим клиентский ивент
mp.trigger("Browser:Close"); // триггерим клиентский ивент
});
window.setNickname = (value) => //здесь мы в глобальный контекст добавляем метод который изменяет содержимое DOM элемента
(document.getElementById("nickname").innerHTML = value);4- Далее перейдем в файл Client.cs который был создан в одном из предыдущих уроков и вставим туда следующий код
C#:
// Браузер который сейчас у нас на экране
RAGE.Ui.HtmlWindow currentBrowser = null;
// Метод, который создаёт браузер и вместе с этим вбрасывает туда нашу верстку и не только
public void OpenVehicleSpawner(object[] args)
{
currentBrowser = new RAGE.Ui.HtmlWindow("package://cef_packages/vehicle-spawner/index.html"); // Здесь создадим сам браузер, package указывает на то что мы будем искать что-то в папке client_packages этого сервера, в нашем случае нам нужно достать файл index.html который отдыхает в папке cef_packages/vehicle-spawner
currentBrowser.ExecuteJs($@"window.setNickname(""{RAGE.Elements.Player.LocalPlayer.Name}"")"); // Здесь мы вызываем метод setNickname который был создан ранее в файле script.js
currentBrowser.Active = true; // Делаем так, чтобы браузер появился у нас на экране
RAGE.Ui.Cursor.Visible = true; // Показываем курсор
}
// Метод, который закрывает текущий браузер
public void CloseBrowser(object[] args)
{
if (currentBrowser == null) return; // Если браузер не был создан, то просто выходим
currentBrowser.Destroy(); // Сносим браузер
RAGE.Ui.Cursor.Visible = false; // Убираем курсор
}
// Метод прокладка
public void CreateVehicle(object[] args)
{
RAGE.Events.CallRemote("Vehicle:Create", $"{args[0]}", 5, 5); // Вызываем серверный метод
}5- Теперь зарегистрируем все эти события(Если вы забыли то код который ниже нужно вставить в конструктор класса)
C#:
Events.Add("Browser:Close", CloseBrowser);
Events.Add("Server:Vehicle:Create", CreateVehicle);
Events.Add("VehicleSpawner:Open", OpenVehicleSpawner);6- Теперь откройте файл Server.cs который был создан в одном из предыдущих уроков -> создайте там команду "vehs" которая будет триггерить клиентский ивент и открывать наш браузер
C#:
[Command("vehs")]
public void OpenVehicleSpawnerCommand(Player player)
{
player.TriggerEvent("VehicleSpawner:Open");// Триггерим клиентский ивент
}7- Теперь если все он то у вас должно получиться все так как на видео
Буду надеяться что я вам как-то помог, также желаю вам удачи в жизни и разработке
Если есть какие-то пожелание, рекомендации, или замечания, то пишите их ниже в ответах к данному посту
Также вы можете писать свои отзывы в комментариях под этим уроком