RAGE MP позволяет использовать встроенный браузер на основе движка chromium - CEF. Благодаря этому в игре можно создавать интерфейсы любой сложности, использовать любые библиотеки и фреймворки, которые используются в обычном вебе.
Браузер работает только на клиентской стороне, поэтому все необходимые файлы для веб странички будут лежать в папке client_packages.
Создание браузера
Для примера создадим простую страничку в текстом и выведем ее в игре. Создадим файлик client_packages/index.html с таким содержимым:
Эту страничку мы и будем показывать. Добавляем в client_packages/index.js создание нового экземпляра браузера:
В правом верхнем углу видим нашу надпись. Поскольку это у нас пустая html страничка без стилей, то текст соответственно выравнивается по левую сторону.
Также внутри html странички мы можем использовать обычный javascript код и css стили. Например:
Взаимодействие с браузером
Очень важная вещь, которая будет часто использоваться в интерактивных интерфейсах - это возможность отправить что-то из javascript кода html странички в клиентский код ragemp. Это делается очень легко при помощи событий.
Например, мы хотим нарисовать кнопку и при клике по ней в чат должен выводиться определенный текст.
Добавим кнопку в наш index.html и обработчик, который будет срабатывать при клике по этой кнопке.
В джаваскрипте который работает в браузере есть встроенный объект mp. Он содержит методы, которые позволяют взаимодействовать с ragemp. Чтобы передать что-то на клиент нам нужно дернуть какое-то событие. Например, назовем это событие cefClick и в нем будем передавать один текстовый параметр - тот текст что нужно вывести в чат.
Еще нам как-то нужно будет нажать на эту кнопку, для этого нужно показать курсор. Это можно также сделать из браузерного js кода, но добавим мы его не в обработчик клика, а в общую область видимости чтобы курсор появился сразу после загрузки.
Теперь нам осталось только добавить обработчик события cefClick на клиентской стороне:
Можно проверять
Также мы можем взаимодействовать и наоборот. Из клиентского кода ragemp выполнять javascript в браузере. У объекта браузера есть метод execute. Он принимает один аргумент - это строка в которой должен быть javascript код.
Как и в обычном html файле мы можем подключать другие ресурсы - стили, скрипты, картинки и т. п. При этом файл может быть как локальный (лежит в пределах client_packages), так и внешний (просто ссылка на файл в интернете).
Ссылка на локальный файл начинается с указания протокола package:// и остальной путь относительно папки client_packages. В следующем примере у нас будет загружено две картинки и один файл стилей. Одна картинки внешняя, а другая картинка и стили локальные и лежат в папке client_packages/assets
автор Lev Angel
Браузер работает только на клиентской стороне, поэтому все необходимые файлы для веб странички будут лежать в папке client_packages.
Создание браузера
Для примера создадим простую страничку в текстом и выведем ее в игре. Создадим файлик client_packages/index.html с таким содержимым:
HTML:
<h1>Hello world</h1>Эту страничку мы и будем показывать. Добавляем в client_packages/index.js создание нового экземпляра браузера:
HTML:
browser = mp.browsers.new('package://index.html');В правом верхнем углу видим нашу надпись. Поскольку это у нас пустая html страничка без стилей, то текст соответственно выравнивается по левую сторону.
Также внутри html странички мы можем использовать обычный javascript код и css стили. Например:
HTML:
<h1 style="color:blueviolet">Hello world</h1>
<script>
alert('Привет, мир!');
</script>Взаимодействие с браузером
Очень важная вещь, которая будет часто использоваться в интерактивных интерфейсах - это возможность отправить что-то из 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);
});Можно проверять
Также мы можем взаимодействовать и наоборот. Из клиентского кода ragemp выполнять javascript в браузере. У объекта браузера есть метод execute. Он принимает один аргумент - это строка в которой должен быть javascript код.
JavaScript:
browser.execute(`alert(\`It's a test.\`);`);Ссылка на локальный файл начинается с указания протокола 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" />автор Lev Angel
