гайд Изучаем оригинальные интерфейсы и создаем свои в Scrap Mechanic

[ArtyomK 5]

Вновь bonjour! Вы попали во вторую часть серии гайдов "Мастерская моддера". Как вы помните, в прошлой части мы изучили основы Layout Editor, в этой части мы научимся:

1. Изучать оригинальные интерфейсы и интерфейсы других модов.
2. Toggle кнопка
3. Слайдер
4. Как прикрутить к детали интерфейс.
5. Мы обобщим знания полученные за ту и эту часть на реальном примере.

Без лишних слов начнём с первого пункта.

1. Оригинальные интерфейсы

Изучение других интерфейсов не мало важная часть! Из них мы сможем узнавать различные скины. Давайте возьмём к примеру интерфейс контроллера. Для этого: 

Нажмите Файл -> Открыть... -> Перейдите по пути Scrap Mechanic -> Data -> Gui -> Layouts (тут вы увидите все возможные папки в которых хранятся интерфейсы) -> Interactable -> Interactable_Controller.layout

Страшно... Но мы всё поймём! Начнём с кнопки.

2. Toggle кнопка

Изучим её атрибуты

1. Skin - ToggleButton
2. 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

Разберём по строчкам:

1. if state then - мы проверяем нажал ли пользователь на кнопку, а не отпустил, делаем мы это для того, чтобы интерфейс не открылся заново.

2. self.gui = sm.gui.createGuiFromLayout("$CONTENT_DATA/Gui/Layouts/MyGUI.layout") - создание GuiInterface из нашего layout.

3. self.gui:createHorizontalSlider("horSlider", 4, 0, "client_onSliderMoved") - добавляем слайдер из прошлой части.

4. 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

Изменено 26 апреля, 2023 пользователем ArtyomK