Добро пожаловать в руководство по созданию кастомных HUD'ов для Garry's Mod (GMod) с использованием Lua. GMod — это популярный модифицированный движок Source от Valve, который позволяет игрокам создавать собственные игровые контенты. В этом руководстве мы рассмотрим основы Lua и его применение для разработки пользовательских интерфейсов в GMod. Мы разберём некоторые основы языка Lua, изучим синтаксис и работу с материалами.

• Visual Studio Code[code.visualstudio.com] - это бесплатный и мощный текстовый редактор, разработанный Microsoft. Он предлагает широкий набор функций, включая подсветку синтаксиса, автодополнение кода, интегрированную систему контроля версий и обширную библиотеку расширений для поддержки различных языков программирования, включая Lua. В VS Code вы можете удобно разрабатывать и отлаживать код для создания кастомных HUD'ов для Garry's Mod.
  
• ZeroBrane Studio[studio.zerobrane.com] - это легкий и простой в использовании интегрированный редактор для Lua, который предназначен специально для разработки и отладки Lua-проектов. Он обеспечивает удобный интерфейс пользователя, встроенную отладку, автодополнение кода и другие полезные функции, специально адаптированные для работы с Lua. ZeroBrane Studio может быть отличным выбором для создания кастомных HUD'ов для Garry's Mod благодаря своей простоте и эффективности.
  
• Notepad++[notepad-plus-plus.org] - это еще один бесплатный текстовый редактор с открытым исходным кодом, который широко используется программистами благодаря своей простоте и функциональности. Он поддерживает подсветку синтаксиса для множества языков программирования, включая Lua, а также обладает некоторыми базовыми функциями, такими как автодополнение и макросы. В то время как Notepad++ не имеет такого богатого набора функций, как VS Code или ZeroBrane Studio, он все равно может быть полезным инструментом для разработки кастомных HUD'ов для Garry's Mod благодаря своей простоте и легкости в использовании.
  
• Lua Code Editor - это мощный аддон для Garry's mod, который позволит писать код на lua и запускать его прямо в игре! Внимание! У этого аддона есть зависимость, а именно EasyChat

• Adobe Photoshop[www.adobe.com] - это профессиональный графический редактор, предоставляющий широкий набор инструментов для создания и редактирования изображений. Он полезен для создания элементов интерфейса, текстур и других графических ресурсов, используемых в HUD'ах для Garry's Mod.
  
• GIMP (GNU Image Manipulation Program)[www.gimp.org] - это бесплатный и открытый редактор изображений с множеством функций, аналогичных Photoshop. Он предоставляет возможность создавать и редактировать графические ресурсы для проекта в Garry's Mod.
  
• Substance Painter[www.substance3d.com] - это программа для текстурирования 3D-моделей, предоставляющая мощные инструменты для создания реалистичных текстур. Она может быть полезна при создании детальных текстур для моделей и интерфейса в Garry's Mod.

Лично я, в рамках этого руководства, буду использовать Visual Studio Code, Lua Code Editor и Photoshop

https://steamoss.com/sharedfiles/filedetails/?id=3170989258

• Для начала, выберете папку, где будет находиться ваш аддон с HUD'ом, для этого нажмите на кнопку "Files" слева сверху, далее, нажмите на "Open Folder..." и выберете папку, где будет находиться ваш аддон.
  
  
• После выбора места для вашего аддона, создайте в папке ещё одну папку с названием "lua", нажав также на "Files" и теперь уже на "New Folder...", там будут ваши скрипты для HUD'ов.
  
  
• Далее, в папке "lua" создайте ваш файл для скрипта, с расширением .lua, название можете выбрать "почти любое", главное чтобы он не конфликтовал с другими скриптами, к примеру можно назвать файл "script_my_hud.lua" и тп.

Вот вы и создали файл для вашего будущего кода!
Теперь вам понадобяться ваши знания в lua
Вот пример учебника по Lua[eligovision.ru]


Давайте напишем простой пример кода на Lua для создания кастомного HUD'а в Garry's Mod. В этом примере мы создадим простой HUD, отображающий текст "Привет, мир!" в левом верхнем углу экрана:

• Derma: Derma - это библиотека пользовательского интерфейса (UI) в Garry's Mod, которая предоставляет функции и элементы для создания кастомных пользовательских интерфейсов, таких как окна, кнопки, текстовые поля и т. д. С помощью Derma вы можете создавать свои собственные HUD'ы, меню и другие интерфейсные элементы.
  
• Функция hook.Add(): Это функция в Garry's Mod, которая используется для привязки функции к событию в игре. В данном примере мы используем событие "HUDPaint", которое вызывается каждый кадр перед отрисовкой HUD'а. Функция, переданная в hook.Add(), будет вызываться каждый раз при возникновении этого события.
  
• Функция surface.SetTextColor(): Эта функция устанавливает цвет текста для последующих операций рисования текста. В данном примере мы устанавливаем белый цвет текста, используя значения RGB (255, 255, 255) и альфа-канал (255, что означает полностью непрозрачный).
  
• Функция surface.SetFont(): Эта функция устанавливает шрифт для последующих операций рисования текста. В данном примере мы используем стандартный шрифт DermaDefault.
  
• Функция surface.SetTextPos(): Эта функция устанавливает позицию начала вывода текста на экран. В данном примере мы устанавливаем позицию в координаты (10, 10), что означает, что текст будет выводиться в левом верхнем углу экрана.
  
• Функция surface.DrawText(): Эта функция рисует текст на экране. В данном примере мы рисуем текст "Привет, мир!" в позиции, установленной с помощью surface.SetTextPos().

Код для создания полоски брони и хп:

Вот что получается на выходе:

• hook.Add("HUDPaint", "DrawHealthAndArmor", function()): Это функция hook.Add(), которая привязывает функцию рисования HUD'а к событию "HUDPaint". Это событие вызывается каждый кадр перед отображением HUD'а.
  
• 
  
• local ply = LocalPlayer(): Эта строка получает локального игрока (того, кто запускает скрипт) и сохраняет его в переменной ply.
  
• 
  
• local health = ply:Health() и local armor = ply:Armor(): Эти строки получают текущее здоровье и броню игрока с помощью методов :Health() и :Armor().
  
• 
  
• draw.RoundedBox(): Это функция рисования прямоугольника с закругленными углами. Мы используем ее для создания полос здоровья и брони.
  
• 
  
• draw.SimpleText(): Это функция рисования текста. Мы используем ее для вывода текущих значений здоровья и брони.
  
• 
  
• ScrH(): Это функция, возвращающая высоту экрана. Мы используем ее для правильного размещения полосок и текста на экране.
  
• 
  
• Теперь о значениях в функциях рисования:
  
• 
  
• draw.RoundedBox(4, x, y, width, height, color): Эта функция рисует прямоугольник с заданными координатами (x, y), шириной (width) и высотой (height). color - это таблица, представляющая цвет в формате RGB с дополнительным значением альфа-канала (прозрачности).
  
• 
  
• draw.SimpleText(text, font, x, y, color, xalign, yalign): Эта функция выводит текст на экран. text - это сам текст, font - шрифт, x и y - координаты текста на экране, color - цвет текста, а xalign и yalign - выравнивание текста по горизонтали и вертикали соответственно.

Этот код создает кастомный HUD с двумя полосками (здоровье и броня), а также с текстом, отображающим текущие значения здоровья и брони.

• hook.Add("HUDPaint", "MyHUD", function()): Эта функция привязывает вашу собственную функцию для рисования HUD'а к событию "HUDPaint". Это событие вызывается каждый кадр перед отображением HUD'а.
  
  
• surface.SetDrawColor(red, green, blue, alpha): Устанавливает цвет, который будет использоваться при рисовании графических примитивов (например, прямоугольников или текста).
  
  
• surface.DrawRect(x, y, width, height): Рисует прямоугольник с указанными координатами (x, y), шириной (width) и высотой (height).
  
  
• surface.DrawLine(x1, y1, x2, y2): Рисует линию от точки (x1, y1) до точки (x2, y2).
  
  
• draw.SimpleText(text, font, x, y, color, xalign, yalign): Выводит текст на экран. text - текст, font - шрифт, x и y - координаты текста на экране, color - цвет текста, xalign и yalign - выравнивание текста по горизонтали и вертикали соответственно.
  
  
• surface.SetMaterial(material): Устанавливает материал, который будет использоваться при рисовании текстуры.
  
  
• surface.DrawTexturedRect(x, y, width, height): Рисует текстуру на экране с указанными координатами (x, y), шириной (width) и высотой (height).
  
  
• draw.RoundedBox(cornerRadius, x, y, width, height, color): Рисует прямоугольник с закругленными углами с указанным радиусом закругления углов (cornerRadius).
  
  
• vgui.Create("DPanel"): Создает новую панель Derma, которую вы можете использовать для создания кастомных элементов интерфейса.

этот прицел находиться не в середине экрана, а в точке, куда смотрит игрок, что дает возможность к примеру играть от 3-его лица.

Derma - это библиотека пользовательского интерфейса (UI) для игр на движке Source, который используется в играх, построенных на базе Source Engine, таких как Garry's Mod и Team Fortress 2. Derma позволяет создавать интерактивные элементы пользовательского интерфейса, такие как окна, кнопки, текстовые метки и многое другое.

Вот некоторые основные концепции и компоненты Derma:

• Окна (Frames): Основные контейнеры для размещения других элементов UI. Окна могут иметь заголовок, кнопки закрытия и перетаскиваться мышью.
  
• Элементы управления (Controls): Элементы, такие как кнопки, полосы прокрутки, текстовые поля и многое другое, которые предоставляют пользователю возможность взаимодействия с приложением.
  
• Панели (Panels): Общий термин для любых контейнеров, которые могут содержать другие элементы UI. Они могут быть использованы для организации и структурирования пользовательского интерфейса.
  
• Метки (Labels): Текстовые элементы, используемые для отображения статического текста.
  
• Меню (Menus): Всплывающие списки или контекстные меню, которые могут содержать пункты меню для выбора пользователем.
  
• Стили (Styles): Derma позволяет создавать пользовательские стили для элементов UI, такие как цвета, шрифты, размеры и т. д.
  

С помощью Derma вы можете создавать разнообразные и интерактивные пользовательские интерфейсы для ваших игр и аддонов на базе Source Engine. Это мощный инструмент, который позволяет создавать интуитивно понятные и функциональные интерфейсы для вашего игрового опыта.

Попапы (Popups) - это окна или диалоговые окна, которые появляются поверх основного пользовательского интерфейса и зачастую используются для отображения важной информации, запроса подтверждения от пользователя или предоставления каких-то дополнительных действий.
В следующих примерах, попапы будут открываться по консольной команде.
Тут этой командой будет "open_derma_window"
Чтобы открыть его, заходим в консоль (по дефолту это клавиша "~"), и вписываем "open_derma_window", и в итоге выходит что то типо такого окна:


Этот код на Lua создает и открывает окно с помощью библиотеки Derma в Garry's Mod. Давайте разберем каждую строку кода:


Эта строка начинает определение функции Lua под названием `CreateDermaWindow`. Эта функция будет использоваться для создания и настройки окна Derma.


Эта строка создает основное окно Derma с помощью функции `vgui.Create()`. Она принимает строку `"DFrame"`, чтобы создать окно типа `DFrame` (прямоугольное окно). Результатом этой строки будет объект окна, который мы сохраняем в переменной `frame`.


Эта строка устанавливает размер созданного окна. Оно будет иметь ширину 300 пикселей и высоту 200 пикселей.


Эта строка устанавливает заголовок для окна на "Пример Derma окна".


Эта строка устанавливает видимость окна на `true`, что означает, что окно будет отображаться на экране.


Эта строка делает окно перетаскиваемым, позволяя пользователю перемещать его мышью.


Эта строка показывает кнопку закрытия окна.


Эта строка центрирует окно на экране.


Этот блок кода создает и настраивает текстовую метку с помощью `DLabel`. Она устанавливает текст на "Это пример Derma окна!" и устанавливает его положение и размер в окне.


Этот блок кода создает кнопку закрытия окна с помощью `DButton`. Она устанавливает текст на "Закрыть" и настраивает ее положение и размер в окне. Кроме того, она устанавливает функцию `DoClick`, которая вызывается при щелчке на кнопке и закрывает окно.


Эта строка делает окно видимым для пользователя, размещая его поверх всех других элементов интерфейса.


Это завершает определение функции `CreateDermaWindow`.


Этот блок кода добавляет консольную команду `"open_derma_window"`, которая вызывает функцию `CreateDermaWindow()`. При выполнении этой команды в консоли игры будет открыто окно, созданное функцией `CreateDermaWindow()`.

В библиотеке Derma для Garry's Mod вы можете работать с материалами для кастомизации внешнего вида элементов пользовательского интерфейса. Это позволяет создавать более интересные и креативные дизайны для ваших Derma окон. Вот основные шаги по работе с материалами в Derma окнах:

1. Загрузка материалов
Чтобы использовать материалы в вашем Derma окне, вам необходимо сначала загрузить нужные материалы с помощью функции `Material()`. Например:
Здесь `"materials/mymaterial.png"` - это путь к изображению, которое будет использоваться в качестве материала.

2. Использование материалов в элементах интерфейса:
После загрузки материала вы можете использовать его в любых элементах пользовательского интерфейса, поддерживающих текстуры. Например, для использования материала в кнопке:

3. Дополнительные параметры материалов:
При загрузке материалов вы можете также указать дополнительные параметры для их обработки, такие как `"noclamp"`, `"smooth"`, `"vertexlitgeneric"`, и другие. Эти параметры позволяют настроить отображение материала в соответствии с вашими потребностями.

4. Анимация материалов:
Вы также можете создавать анимированные материалы и использовать их в Derma окнах для создания более динамичного интерфейса. Для этого загрузите анимированный материал и используйте его аналогично статическому материалу.

5. Освобождение ресурсов:
После завершения работы с материалами рекомендуется освободить ресурсы, вызвав метод `:Dispose()` на объекте материала. Это важно для избежания утечек памяти.

Надеюсь вам понравилось руководство, и вы оцените его.

В руководстве могут быть ошибки, недочёты и тд, если найдёте их, можете написать о них в комментариях!