Поиск

Введение Всем привет! Начну с самого начала, создание модов - очень сложный процесс, требующий хотя бы базовых знаний языка программирование Lua. Рекомендую для начала ознакомится с самим Lua. После прочтения руководства, можно и начать создавать интерфейсы. Почему именно интерфейсы? Потому что по ним очень мало уроков, тем более в русскоязычном сообществе, а с этим гайдом любой сможет делать интерфейсы! Основная часть Scrap Mechanic - гениальная игра, использующая для отрисовки интерфейса готовую библиотеку MyGui, её мы и будем изучать. MyGui схож с html, у них у обоих есть теги, но в MyGui вы можете использовать всего лишь 2 - Widget и главный тег MyGUI. Вы спросите: "Так если в MyGui всего 2 тега, то как различать элементы управления, раз нет ни button, ни input и так далее?", а я вам отвечу, что у каждого Widget обязательно должен быть атрибут type! Именно в нём, как следует из названия, содержится тип виджета. Существуют следующие типы виджетов: Button - кнопка EditBox - поле для ввода текста ImageBox - картинки TextBox - текст Widget - пока назовём "Задний фон" StrangeButton - весёлая кнопка Это не весь список типов, а лишь те, с которыми мы можем взаимодействовать из кода. (Интерактивные элементы не названные тут не работают в Scrap Mechanic, например ComboBox, для него банально нет функций) Так, с типами разобрались. Что дальше? А дальше скины! Нет, не скины с cs:go, а скины на эти самые виджеты. Их очень много и каждый для своих элементов, все скины вы сможете увидеть сами чуть позже. Я лишь объясню как это работает. Представьте, что каждый виджет это картинка, и это картинку мы можем менять, так скины и работают, они меняют внешний вид виджета. Практика? Да, настало время практики! У нас есть 2 путя - мазохизм и ленивый. Первый путь называется так не с проста, это в прямом смысле слова мазохизм, это ручное изменение файлика с интерфейсом. Второй же более приятный - редактирование через специальную программу Layout Editor (Редактор макетов). Первый путь не будет затронут в данном гайде, а начнём мы со второго. В официальном Discord сервере Scrap Mechanic, в канале modding-general, в закреплённых сообщениях есть уже настроенный редактор макетов. Им мы и будем пользоваться, всё подчёркнутое раннее кликабельно и ведёт на сервер Scrap Mechanic. Скачиваем этот редактор, распаковываем желательно рядом с Scrap Mechanic, так как я вам советую подсматривать оригинальные интерфейсы, это не плохо, а наоборот даёт вам больше знаний. После распаковки открывайте LayoutEditor.exe, не пугайтесь, никаких вирусов там нет. При первом запуске вас встретит окно конфигурации, в поле Rendering Subsystem выбирайте Direct3D и нажмите OK, программа может подвиснуть. После нажатия OK вас встретит сам интерфейс программы! Возможно он покажется вам сложным, но это только на первый взгляд, на деле всё просто. Рекомендую увеличить размер правой панели, а также изменить масштаб (кнопка сверху) на 50%, также вы можете менять масштаб на колёсико и перемещать холст удержанием правой кнопкой мыши и её перемещением. Основой вашего окна должна стать PanelEmpty, для этого перейдите во вкладку виджета справа сверху (не сверху, а справа сверху!), и выберите там PanelEmpty. В окне с сеткой проведите прямоугольник нужного вам размера в любом месте, потом мы сделаем его по центру, а также после каждого создания элемента, перейдите на вкладку свойства и установите ему местоположение (Position, 4 цифры разделённые пробелом, 1 и 2 - это x и y соответственно, а 3 и 4 - высота и ширина), нажимите на пиксели возле Position чтобы они стали %!!! (это очень важно, без этого ваши интерфейсы при разрешении отличающихся от 1920x1080 будут выглядеть неправильно) Кстати, не забывайте сохраняться, т.к. программа может вылетать. Дальнейшим шагом нужно создать Widget, его нету на вкладке виджеты, просто возьмите любой элемент, хоть тот же самый PanelEmpty, и установите ему type Widget, если он отличался, опять проведите мышкой, но на этот раз самое главное чтобы был в уже существующем PanelEmpty, но не важно где, опять переключайте на %. Это необходимо для того чтобы вы могли перетащить всё окно. У только что созданного виджета нужно поменять атрибут Position на "0 0 100 100", это позволит занять ему весь предыдущий PanelEmpty. Оно всё ещё прозрачное, не находите? А помните в начале говорилось про какие то скины? Тут-то они нам и пригодятся. Нажмите на список возле Skin, вы увидите всевозможные скины на виджеты, когда вы на них наводитесь, у вас появляется предпросмотр. ВНИМАНИЕ!!! Если программа не найдёт скин, она просто вылетит, сохраняйтесь перед этим!!! Я использую обычно следующий скин: "BackgroundEngineNoUpgrade". Уже походит на окно Scrap Mechanic? Я тоже пока не соглашусь. Если вы вдруг захотите изменить размер окна, то нажмите сверху на виджеты (не справа сверху, а сверху), а затем на [Widget] PanelEmpty, не обращайте внимание что она раскрывается, она при всём при этом ещё и нажимается. Только теперь можете тянуть за зелёные квадратики. Давайте нарисуем простой интерфейс с кнопкой, полем ввода и заголовком. Начнём с простого, заголовка. Перейдите в виджеты, и возьмите... А вот возьмите то, про что я говорил в начале для текста, помните? Опять нарисуйте не важно где, не важно какой ширины, но важна высота, я рекомендую рисовать до окончания линий. Рисуйте как хотите её. Опять проценты, не забывайте про них! Как вы видите, тут свойств побольше, пойдём сверху вниз, пробежимся по тем, которые нам нужны. Position (Основные свойства) - устанавливайте следующие значение "0 0 100 ВАШЕ!! 4 ЧИСЛО", то есть просто сотрите первые 3 и поставьте 0 0 100 Caption (Свойства TextBox) - вводите сюда свой заголовок, я введу scrapmechanic.ru, советую писать большими буквами. FontName - для заголовков обычно используют "SM_HeaderLarge_Wide" TextAlign - Center Уже на что-то да походит... Дальше по сложности идёт кнопка. Если вы хотите за раз перемещать несколько кнопок, то сперва создайте PanelEmpty, а в нём сами кнопки. Всё тоже самое как и с прошлыми виджетами, объяснять не буду, скажу лишь-то, что размер рисуете свой. А вот какие атрибуты менять расскажу. Skin - для кнопок в таких окнах обычно ставят 3 скина: ActiveButton, SecondaryButton и StyledButtonLarge. Кстати, не забудьте сохраниться. Caption - текст который будет на ней написан FontName - ставьте SMButton любого размера который вам нравится, кстати в игре все размеры шрифтов будут больше. TextAlign - Center Если вы хотите, чтобы у вас какой-либо элемент был по центру, то вы можете скачать мой скрипт, вводите в него свой Position, а он вам печатает нужный, для него нужен Python (просто в командной строке вводите py centerWidget.py), он высчитывает только в процентах. И самое сложное, текстовое поле, оно костыльное, но мы справимся! Берём PanelEmpty, рисуем где хотим и как хотим (рекомендуемая высота в пикселях 39, да, вы можете задать в пикселях, а затем переключить на проценты), меняем Skin на "SearchBarBackground". Поверх него рисуем виджет EditBox (рекомендуемая высота 29, вы можете ставить любую, главное на 10 меньше). Нарисуйте его так, чтобы он не выходил за рамки фона. Измените Skin EditBox на EditBoxEmpty. Поздравляю! У вас есть окно! Теперь отцентрируем его, выделите с помощью виджеты сверху (напомню, первый PanelEmpty), скопируйте Position и воспользуйтесь скриптом centerWindow.py Вуаля! Теперь и окно по центру! Для того чтобы воспользоваться кнопками и т.д. в коде, им нужно дать имя, понажимайте по виджетам и в поле Name введите своё имя. Сохраните этот layout по пути "ВАШМОД/Gui/Layouts/имя.layout" КОД Для того чтобы вызвать данный интерфейс, вам нужно использовать следующую функцию: sm.gui.createGuiFromLayout( layout, destroyOnClose, settings ) Начну по порядку: layout - путь к вашему файлу, тобеж "ВАШМОД/Gui/Layouts/имя.layout", destroyOnClose - уничтожится ли guiInterface после закрытия, если он вам в дальнейшем не понадобится или вы не сохраняете введённые в него данные - можете ставить true, settings - таблица вида { isHud = false, isInteractive = false, needsCursor = false, hidesHotbar = false, isOverlapped = false, backgroundAlpha = 1.0, } это стандартные настройки. isHud - отображается ли остальной интерфейс (индикатор здоровья и тд). isInteractive - Можно ли взаимодействовать с графическим интерфейсом или нет. needsCursor - "Захватывает" графический интерфейс мышь или нет. hideHotbar - спрятать панель блоков снизу. isOverlapped - ?. В документации не описано, а я не пользовался, проэкспериментируйте! После того как вы создали интерфейс и сохранили его в переменную вам нужно открыть его, используйте функцию ":open()". Всё это вы можете использовать в onInteract. И если вы сделали всё правильно, то у вас отобразится интерфейс! Теперь добавим им нажатия. Все возможные вызовы вы найдёте на https://scrapmechanictools.com/lua/Game-Script-Environment/Userdata/GuiInterface?_highlight=guiin#guiinterface Просто поищите там callback. Например, вот функция для кнопок. :setButtonCallback( button, callback ) button - имя кнопки указанное в Name, callback - имя функции, допустим у вас есть функция Class.client_buttonPressed(self, button), тогда вам нужно ввести "client_buttonPressed", без имени вашего класса, но с ним в скрипте. она вызывается с 1 аргументом - именем нажатой кнопки. ВЫВОД Итак, вот вы и прочитали базовый курс, напоследок хочу сказать, СМОТРИТЕ ОРИГИНАЛЬНЫЙ ИНТЕРФЕЙСЫ (Файл - Открыть - Data - Gui - Layouts - и смотрите все папки)! В них вы подчерпнёте для себя много нового, я лишь дал базу как с этим работать. Творите, изучайте, пишите, комментируйте! centerWidget.py centerWindow.py