Перейти к содержанию

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


ArtyomK

Рекомендуемые сообщения

  • Модераторы
MrShandy
post оценил MrShandy!

ArtyomK получил '300' баллов.

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

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

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

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

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

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

image.thumb.png.737452fea90f17f4da2f60654205ce31.png

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

2. Toggle кнопка

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

image.thumb.png.b7caea1a58ec604e0bf5c6fc6e2bebe4.png

  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 

Если верить её имени, то это как раз-таки слайдер. Давайте поймём, как этим пользоваться. Для вашего удобства документация будет переведена.

image.translated.jpg.7c2ca3ed7348970eb13259ba46709426.jpg

Функции требуется 4 обязательных аргумента, это: имя виджета (в нашем случае просто PanelEmpty), максимальное значение, стандартное значение, функция которая будет вызываться. Рисуем простой PanelEmpty для слайдера нужных нам размеров, очень важно задать ему имя.

image.thumb.png.6707df1d82e909b11b4b2c51a750222b.png

В скрипт добавляем следующую строчку:

self.gui:createHorizontalSlider("horSlider", 4, 0, "client_onSliderMoved")

И в результате наблюдаем наш слайдер на 4 деления! При его изменении вызывается функция onSliderMoved(self, value). Value - как раз-таки то значение, которое выбрал пользователь.

image.thumb.png.44ac3a191e5ad4740855cdb85845fbea.png

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. Вот то что получилось у меня.

image.thumb.png.9507cd9d6e9be2e19e987855b47b7e70.png

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

Если вы всё правильно сделали, то вы увидите следующее:

image.thumb.png.7a2cc3918f328a75d938a5a9bc6ff3d7.png

Поздравляю! Вы портировали калькулятор в Scrap Mechanic! Layout данного чуда будет прикреплён. Всем до встречи! P.S. Position можно выделить и скопировать.

Calculator.layout

Изменено пользователем ArtyomK

Слежу за контентом и работоспособностью ScrapTools...

Ссылка на комментарий
Поделиться на другие сайты

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

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.



×
×
  • Создать...