Мануал Урок Работа с браузером CEF

nettkom

Активный участник
Автор темы
14 Сен 2020
58
20
27
RAGE MP позволяет использовать встроенный браузер на основе движка chromium - CEF. Благодаря этому в игре можно создавать интерфейсы любой сложности, использовать любые библиотеки и фреймворки, которые используются в обычном вебе.
Браузер работает только на клиентской стороне, поэтому все необходимые файлы для веб странички будут лежать в папке client_packages.

Создание браузера

Для примера создадим простую страничку в текстом и выведем ее в игре. Создадим файлик client_packages/index.html с таким содержимым:

HTML:
<h1>Hello world</h1>

Эту страничку мы и будем показывать. Добавляем в client_packages/index.js создание нового экземпляра браузера:

HTML:
browser = mp.browsers.new('package://index.html');

1592123370060.jpg


В правом верхнем углу видим нашу надпись. Поскольку это у нас пустая html страничка без стилей, то текст соответственно выравнивается по левую сторону.

Также внутри html странички мы можем использовать обычный javascript код и css стили. Например:

HTML:
<h1 style="color:blueviolet">Hello world</h1>

<script>
    alert('Привет, мир!');
</script>

1592123697682.jpg

1592123746842.jpg

Взаимодействие с браузером

Очень важная вещь, которая будет часто использоваться в интерактивных интерфейсах - это возможность отправить что-то из javascript кода html странички в клиентский код ragemp. Это делается очень легко при помощи событий.
Например, мы хотим нарисовать кнопку и при клике по ней в чат должен выводиться определенный текст.
Добавим кнопку в наш index.html и обработчик, который будет срабатывать при клике по этой кнопке.

HTML:
<button onclick="buttonClick()">Нажми меня</button>
<script>
    function buttonClick(){
   
    }
</script>

В джаваскрипте который работает в браузере есть встроенный объект mp. Он содержит методы, которые позволяют взаимодействовать с ragemp. Чтобы передать что-то на клиент нам нужно дернуть какое-то событие. Например, назовем это событие cefClick и в нем будем передавать один текстовый параметр - тот текст что нужно вывести в чат.
JavaScript:
mp.trigger('cefClick', 'Привет жестокий мир');

Еще нам как-то нужно будет нажать на эту кнопку, для этого нужно показать курсор. Это можно также сделать из браузерного js кода, но добавим мы его не в обработчик клика, а в общую область видимости чтобы курсор появился сразу после загрузки.

HTML:
<button onclick="buttonClick()">Нажми меня</button>
<script>
     mp.invoke('focus', true); // показыываем курсор
 
    function buttonClick(){ // обработчик клика
        mp.trigger('cefClick', 'Привет жестокий мир');
    }
</script>

Теперь нам осталось только добавить обработчик события cefClick на клиентской стороне:

JavaScript:
mp.events.add('cefClick', function(message) {
    mp.gui.chat.push(message);
});

Можно проверять :)
1592125590293.jpg

Также мы можем взаимодействовать и наоборот. Из клиентского кода ragemp выполнять javascript в браузере. У объекта браузера есть метод execute. Он принимает один аргумент - это строка в которой должен быть javascript код.

JavaScript:
browser.execute(`alert(\`It's a test.\`);`);
Как и в обычном html файле мы можем подключать другие ресурсы - стили, скрипты, картинки и т. п. При этом файл может быть как локальный (лежит в пределах client_packages), так и внешний (просто ссылка на файл в интернете).
Ссылка на локальный файл начинается с указания протокола package:// и остальной путь относительно папки client_packages. В следующем примере у нас будет загружено две картинки и один файл стилей. Одна картинки внешняя, а другая картинка и стили локальные и лежат в папке client_packages/assets

HTML:
 <link rel="stylesheet" href="package://assets/style.css" />
    <img src="http://cdn1.iconfinder.com/data/icons/bluecoral/Left.png" alt="GTA 5 logo" />
    <img src="package://assets/gta.png" alt="gta logo" />
1592137412127.jpg


автор Lev Angel
 
  • Like
Реакции: CHungro и Tertiy