Вновь bonjour! Вы попали во вторую часть серии гайдов "Мастерская моддера". Как вы помните, в прошлой части мы изучили основы Layout Editor, в этой части мы научимся:
Изучать оригинальные интерфейсы и интерфейсы других модов.
Toggle кнопка
Слайдер
Как прикрутить к детали интерфейс.
Мы обобщим знания полученные за ту и эту часть на реальном примере.
Без лишних слов начнём с первого пункта.
1. Оригинальные интерфейсы
Изучение других интерфейсов не мало важная часть! Из них мы сможем узнавать различные скины. Давайте возьмём к примеру интерфейс контроллера. Для этого:
Нажмите Файл -> Открыть... -> Перейдите по пути Scrap Mechanic -> Data -> Gui -> Layouts (тут вы увидите все возможные папки в которых хранятся интерфейсы) -> Interactable -> Interactable_Controller.layout
Страшно... Но мы всё поймём! Начнём с кнопки.
2. Toggle кнопка
Изучим её атрибуты
Skin - ToggleButton
Type - Button
Всё остальное по умолчанию. Как это работает в коде разберёмся позже.
3. Слайдер
Если мы внимательно изучим сайт https://scrapmechanictools.com/lua/Game-Script-Environment/Userdata/GuiInterface то найдём там интересную функцию! https://scrapmechanictools.com/lua/Game-Script-Environment/Userdata/GuiInterface#createhorizontalslider
Если верить её имени, то это как раз-таки слайдер. Давайте поймём, как этим пользоваться. Для вашего удобства документация будет переведена.
Функции требуется 4 обязательных аргумента, это: имя виджета (в нашем случае просто PanelEmpty), максимальное значение, стандартное значение, функция которая будет вызываться. Рисуем простой PanelEmpty для слайдера нужных нам размеров, очень важно задать ему имя.
В скрипт добавляем следующую строчку:
self.gui:createHorizontalSlider("horSlider", 4, 0, "client_onSliderMoved")
И в результате наблюдаем наш слайдер на 4 деления! При его изменении вызывается функция onSliderMoved(self, value). Value - как раз-таки то значение, которое выбрал пользователь.
4. Код
Так, с теорией разобрались, а как собственно данный интерфейс добавить к коду? А всё просто! В прошлой части поговаривали об этом, но сейчас я расскажу по подробнее. Допустим, вы хотите чтобы когда пользователь нажимал на E, у него открывался ваш интерфейс, для этого в функции client_onInteract, не забывайте добавлять класс вашего скрипта, мы должны создать объект интерфейса и вызвать его, вот мой пример:
function MyClass.client_onInteract(self, character, state)
if state then
self.gui = sm.gui.createGuiFromLayout("$CONTENT_DATA/Gui/Layouts/MyGUI.layout")
self.gui:createHorizontalSlider("horSlider", 4, 0, "client_onSliderMoved")
self.gui:open()
end
end
Разберём по строчкам:
if state then - мы проверяем нажал ли пользователь на кнопку, а не отпустил, делаем мы это для того, чтобы интерфейс не открылся заново.
self.gui = sm.gui.createGuiFromLayout("$CONTENT_DATA/Gui/Layouts/MyGUI.layout") - создание GuiInterface из нашего layout.
self.gui:createHorizontalSlider("horSlider", 4, 0, "client_onSliderMoved") - добавляем слайдер из прошлой части.
self.gui:open() - показываем интерфейс.
Всё просто!
Зажимные кнопки делаются очень просто. Мы создаём переменную в начале или в onCreate, допустим Class.window = false, и в callback кнопки вызываем следующие 2 строки:
self.window = not self.window
self.gui:setButtonState("ваша кнопка", self.window)
5. Обобщение
А помните скрипты из той части и то, что я обещал рассказать как работают зажимные кнопки? Так вот, сейчас мы их портируем в Scrap Mechanic.
Создаём новый файл, добавляем 2 PanelEmpty... В общем то, что делали в том уроке, я лишь покажу готовый интерфейс. Подсказка: Для перемещения виджета по пикселям - удерживайте Shift. Вот то что получилось у меня.
Toggle кнопку попробуйте сделать сами, а сейчас будет код.
Calculator = class()
Calculator.window = false
Calculator.text = ""
function Calculator.client_onInteract(self, character, state)
if state then
self.gui = sm.gui.createGuiFromLayout("$CONTENT_DATA/Gui/Layouts/Calculator7.layout", false)
self.gui:setButtonCallback("WindowToggle", "client_windowToggle")
self.gui:setTextChangedCallback("Position", "client_editText")
self.gui:open()
end
end
function Calculator.client_windowToggle(self, button)
if button == "WindowToggle" then
self.window = not self.window
self.gui:setButtonState("WindowToggle", self.window)
self:client_editText("pos", self.text)
end
end
function string.split(inputstr, sep)
if sep == nil then
sep = "%s"
end
local t = {}
for str in string.gmatch(inputstr, "([^" .. sep .. "]+)") do
table.insert(t, tonumber(str))
end
return t
end
function Calculator.client_editText(self, editTextName, text)
self.text = text
if text ~= "" then
self.gui:setText("TipPosition", "")
else
self.gui:setText("TipPosition", "Введите свой Position")
end
local pos = string.split(text)
local newPos = ""
if #pos == 4 then
if self.window then
newPos = string.format("%s %s %s %s", 50-pos[3]/2, 50-pos[4]/2, pos[3], pos[4])
else
newPos = string.format("%s %s %s %s", 50-pos[3]/2, pos[2], pos[3], pos[4])
end
else
newPos = ""
end
self.gui:setText("NewPos", newPos)
end
Если вы всё правильно сделали, то вы увидите следующее:
Поздравляю! Вы портировали калькулятор в Scrap Mechanic! Layout данного чуда будет прикреплён. Всем до встречи! P.S. Position можно выделить и скопировать.
Calculator.layout