Использование DHTML в Garry’s Mod
Введение
Давно меня интересовал вопрос: зачем нам дали такой инструмент, как DHTML? Разве его можно применять только для серверных синем? Возможно, он способен принести ещё больше пользы для разработчиков.
Что такое DHTML?
DHTML в контексте Garry’s Mod — это аналог DPanel, но с возможностью рендеринга HTML-страниц. Его ключевые особенности:
- Загрузка HTML: Можно отображать страницу как по ссылке, так и из локального файла.
- Поддержка прозрачного фона: Хотя зачастую фон закрашивают, прозрачность может оказаться весьма полезной.
На практике DHTML чаще всего используется в меню Garry’s Mod. Например, всё меню ESC создаётся с его помощью, рендеря HTML-страницу из файла, расположенного в папке html в корневой директории игры. Существуют модификации, создающие альтернативные интерфейсы — от копий меню S&Box и CSGO до вариантов в стиле neon wave. Это показывает, что DHTML — универсальный инструмент, позволяющий не только создавать меню, но и реализовывать другие визуальные элементы на серверах и в игровых режимах.
Пример: HUD на базе Chromium
В качестве эксперимента я решил создать HUD, используя ветку Chromium (аналогичные возможности имеются и в Awesomium, но я выбрал более современную и мощную технологию). Итоговый результат выглядит следующим образом:
Особенности реализации:
- HTML как основа: Весь HUD работает на HTML, включая обработку кликов и других пользовательских событий.
- Взаимодействие Lua и JS: Lua отвечает за вызов необходимых JavaScript-функций, так как стандартный JS не имеет доступа к данным на стороне Lua.
- Многопоточность: Рендеринг разделён на два потока — игровой и браузерный. Это позволяет существенно снизить нагрузку на FPS, даже если рендер HTML-элементов работает с небольшой задержкой.
Преимущества DHTML по сравнению с HudPaint
Использование DHTML вместо отрисовки интерфейса средствами Lua (например, через HudPaint) предлагает ряд преимуществ:
- Работа с CSS: Забудьте о необходимости использовать сторонние библиотеки для отрисовки арок, кругов, теней и прочего — всё это можно настроить с помощью CSS.
- Многопоточность: Разделение рендеринга на два потока помогает поддерживать стабильный FPS.
- Перенос вычислений на JavaScript: Многие расчёты можно выполнять в JS, который зачастую работает быстрее Lua (зависит от используемого API, например, Awesomium).
- Интеграция с современными фреймворками: Возможность использования таких инструментов, как React, Svelte и других, позволяет создавать ещё более гибкий и масштабируемый интерфейс.
( Худ на Svelte ):
Почему DHTML используется не так часто?
На данный момент точных причин может быть несколько:
- Нестабильность на начальном этапе внедрения: Многие реализации HUD на DHTML сталкивались с проблемами стабильности (Сейчас проблем что на Chromium что на Awesomium не встречал, хотя делал довольно нагруженные интерфейсы)
- Ограниченное количество примеров: Хотя я встречал удачные примеры работы HUD на DHTML, достоверных доказательств их надёжности пока немного.
Если у вас есть успешные кейсы или пруфы, буду рад увидеть их в комментариях.
Организация обмена данными между Lua и JavaScript
Самый простой способ установить связь между Lua и JS — это вызывать соответствующие JavaScript-функции для обновления переменных. Я разработал модуль-мост, который:
- Позволяет слушать хуки внутри JS без дополнительного Lua-кода.
- Отслеживает изменения переменных (аналог функции
watchв реактивных фреймворках).
На данный момент модуль ещё дорабатывается, и я планирую улучшить его, сделав взаимодействие ещё удобнее на стороне JavaScript.
Передача HTML-кода пользователю
Существует несколько подходов для передачи HTML:
- Инлайн-HTML в Lua: Можно встроить HTML-код непосредственно в скрипты на Lua.
- Передача через data-файлы: HTML можно отправлять с сервера, что позволяет создавать разные версии HUD для различных групп пользователей.
Заключение
Использование DHTML в Garry’s Mod открывает широкие возможности для создания сложных и производительных интерфейсов. Благодаря разделению рендеринга, перераспределению вычислений в сторону JavaScript и гибкости современных веб-технологий, вы сможете создавать HUD и другие визуальные элементы, сравнимые по качеству с аналогами из FiveM, MTA и других игр.
Попробуйте интегрировать DHTML в свои проекты — возможно, он станет тем инструментом, который позволит реализовать самые смелые идеи!
Warning
Это тестовый пост по данной теме, планирую её развивать и делать много поправок, если есть замечания пишите.
*кратко затрагивал эту тему тут: Новый оптимизированный HUD для DarkRP (Модеры не бейте)
Учимся рисовать HUD “По правильному”