Внутриигровой магазин — одна из функций, которые можно создавать в собственных проектах на Roblox Studio. Для этого необходимо в первую очередь создать меню — интерфейс, в котором будут все требуемые кнопки. В этом туториале онлайн-школа программирования «Пиксель» расскажет про элементы для создания пользовательского интерфейса в Roblox Studio.
Мы создадим фреймы, изменим внешний вид меню, добавим кнопки и объекты, а также поделимся скриптами на языке программирования Lua.
Помимо текстовых инструкций, мы еще записали видео, вы можете найти его в конце статьи вместе с ссылками на другие полезные уроки.
Подготовка к работе над интерфейсом в Роблокс
ScreenGUI
ScreenGui — это объект для хранения всех остальных элементов интерфейса на экране игрока, на него можно добавлять фреймы, текстовые поля, кнопки. Он должен располагаться в папке StarterGui.
Давайте добавим данный элемент в нашем редакторе, чтобы впоследствии расположить на нем нужные нам элементы:
Компоненты интерфейса и внешний вид меню в Roblox Studio
Frame
Это компонент интерфейса, который представляет собой прямоугольную область, в которой можно размещать другие элементы интерфейса. Фреймы используются для группировки и организации элементов интерфейса как отдельные контейнеры.
Внутрь нашего компонента ScreenGui добавим 2 фрейма и расположим их следующим образом:
У фреймов есть следующие интересные нам параметры:
- цвет;
- прозрачность;
- обводка;
- цвет и толщина обводки;
Давайте настроим фреймам эти параметры:
Добавление текста на меню
TextLabel
Это компонент интерфейса, который используется для отображения статического текста на экране. Он позволяет выводить информацию, заголовки, инструкции и другой текстовый контент в пользовательском интерфейсе.
Давайте добавим каждому фрейму по текстовому лейблу:
У лейбла мы можем настроить не только обводку, цвет и прозрачность, но и сам текст: изменить его шрифт, начертание и размер. Настроим данные параметры для каждого из фреймов:
Вид и содержимое меню GUI
UIcorner
Данный объект позволяет модифицировать элементы интерфейса — добавить им скругление.
Добавим его к нашим лейблам:
ViewportFrame
Это компонент интерфейса, который позволяет отображать 3D-содержимое. Он используется для создания окон или панелей, где можно показывать трехмерные модели, видео или другие элементы, связанные с игровым миром.
Давайте добавим данный фрейм в нашу первую рамку и настроим ему размер:
Добавление объекта и кнопки в меню в Roblox Studio
Теперь перейдем к этапу настройки данного фрейма. Добавим в наш мир объект, который мы хотим отобразить:
Далее расположим камеру таким ракурсом, в котором мы хотели бы видеть обьект внутри нашего фрейма, и дублируем элемент камеры из Workspace:
Продублированный элемент камеры поместим внутрь нашего ViewportFrame:
В параметрах фрейма найдем пункт CurrentCamera, нажмем на пустое поле и появившимся курсором выберем объект камеры, который мы переместили внутрь фрейма:
После чего перемещаем объект внутрь фрейма в нашей иерархии:
После этого можем убрать прозрачность у нашего вьюфрейма, получим такой результат:
TextButton
Элемент текстовой кнопки служит для создания какого-либо события при нажатии, давайте добавим кнопку с ценой на наш фрейм с покупкой:
Также можем настроить закругление у кнопки.
Добавим следующий скрипт на кнопку:
В данном скрипте мы обращаемся к кнопке и ее событию при нажатии. В нем мы запускаем функцию, в которой создаем переменную сообщения, задаем ей текст и ждем 3 секунды до уничтожения.
Таким образом при нажатии кнопки у нас выведется сообщение о том, что у нас недостаточно денег для покупки.
ScrollingFrame
Данный вид фрейма обладает свойством прокрутки, в нем удобно делать списки и вертикально располагать множество элементов.
Давайте добавим его в наш фрейм продажи и настроим следующим образом:
ImageLabel
Это лейбл с изображением, для добавления картинки в его параметр нужно вставить ссылку на ассет картинки.
Добавим несколько таких лейблов на наш прокручивающийся фрейм и изображения для них:
Добавим кнопку открытия и закрытия магазина, для этого внутри нашего ScreenGui добавим кнопку «магазин»:
На нее добавим следующий скрипт для GUI в Roblox:
В нем мы создаем переменную статуса наших фреймов, при нажатии на кнопку меняем статус на противоположный и записываем его в параметр Visible у двух фреймов. Таким образом наша кнопка включает и отключает видимость нашего магазина.
Наше меню готово, вы можете внести свои изменения, чтобы подстроить фрейм под свою игру. Если туториал оказался полезным, оставьте комментарий и поделитесь ссылкой на свой проект.
Как учиться дальше?
Если вы хотите узнать больше о создании игр в Роблокс, приходите на курсы по программированию или моделированию в онлайн-школе «Пиксель», наши преподаватели помогут разобраться в программе и создать многоуровневые проекты, а также воплотить свои собственные идеи в реальность. Чтобы не пропустить новые видео, подпишитесь на наш Дзен-канал.