Урок (С#&JS) Использование CEF в RAGEMP

Продолжать серию подробных текстовых мануалов


  • Всего проголосовало
    17

IronPython

Специалист
Автор темы
high coder
7 Ноя 2020
169
56
82
Всем привет, видел на просторах интернета несколько подобных статей, но решил забросить в это болото еще и свою :)

Сегодня я постараюсь вам показать как связать клиентскую часть на C#, CEF и Сервер в RAGEMP
Ну а если коротко то напишем сегодня спавнер автомобилей с использованием не очень красивого интерфейса

Что вам понадобиться, для того чтобы понять этот урок

1- Мозг
2- Прямые руки (но это не обязательно)
3- Ну и желательно не быть Питонистмом
4- Понимать кто такой HTML и JavaScript, но если вдруг получилось так что не знаете кто это то я бы рекомендовал обратиться к дяде Google
5- Также предполагается что до этого вы прошли два предыдущих урока

Предыдущие Уроки
  1. Настройка окружения
  2. Настройка серверной части
  3. Создание и настройка клиентской части сервера для 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- Теперь если все он то у вас должно получиться все так как на видео

Буду надеяться что я вам как-то помог, также желаю вам удачи в жизни и разработке
Если есть какие-то пожелание, рекомендации, или замечания, то пишите их ниже в ответах к данному посту
Также вы можете писать свои отзывы в комментариях под этим уроком
 

xDeveluxe

Начинающий специалист
high coder
30 Авг 2021
318
192
73
25
На самом деле подобного мало на просторах интернета. В основном всё на конкретных модах. Такие уроки должны быть очень полезны новичкам, да и в целом людям, которые не совсем понимают, как можно что-то подобное сделать. Лайк как минимум за старания.
 
  • Love
Реакции: IronPython

IronPython

Специалист
Автор темы
high coder
7 Ноя 2020
169
56
82

MRX

Участник портала
18 Ноя 2021
11
6
18
Возможно ли как то подгрузить допустим оригинальный сайт со скинами и оттуда сделать триггер (подгрузить на сайт свой js код) и при нажатие "карточки" скина вызывалось моё событие?
 

Inoi

?
15 Окт 2020
329
167
87
32
Возможно ли как то подгрузить допустим оригинальный сайт со скинами и оттуда сделать триггер (подгрузить на сайт свой js код) и при нажатие "карточки" скина вызывалось моё событие?
Каким образом ты хочешь дописать свои события на существующий сайт?
Зачем такой дикий изврат, если можно просто табличкой себе эти скиночки расставить в хтмлке - и к ним написать свои евенты?

В теории да, да и внутри браузера и жски в пакете - да, ты можешь лить картинки и прочую пургу на сторонние ресурсы и подгружать их оттуда.
Но сам браузер? Ну наверное фреймом можно, но господи, нахуя?
Наверное и mp.browsers.new (http://google.com/) схавает, можно грузить удалённо браузеры я думаю, чтобы не нагружать клиент
Внутри package протокола - наверное не схавает, потому что мне кажется он подразумевает слегка другое
Но просто вызвать сторонний ресурс - вполне можно
Но поменять на нём ты ничего не можешь, естественно

Мб можно дико упороться и оверлеем вывести ещё браузер поверх этого со своими кнопками в тех местах где они нужны
Но это какие-то дикие костыли непонятно ради чего
 
Последнее редактирование: