ScreenGui в Roblox: адаптивное меню и кнопки для компьютера и телефона

Для меню Roblox создайте ScreenGui в StarterGui, добавьте Frame и TextButton, а обработчик кнопки поместите в LocalScript. Используйте событие Activated, размеры через Scale, AnchorPoint для привязки и UISizeConstraint, чтобы меню оставалось удобным на телефоне и компьютере.

Содержимое StarterGui копируется в PlayerGui каждого игрока, а экранный интерфейс работает на клиенте. Кнопка не должна сама менять монеты, выдавать предмет или подтверждать победу. Она управляет локальным видом и при необходимости отправляет серверу узкий запрос через RemoteEvent. Такое разделение делает меню быстрым, а игровые правила защищёнными.

ScreenGui Roblox: меню и кнопки с плавным открытием

Создайте ScreenGui с именем MainGui, внутри Frame Menu и TextButton OpenButton. У Frame задайте AnchorPoint 0.5, 0.5 и Position 0.5, 0, 0.5, 0. Скрипт ниже находится внутри ScreenGui. Он меняет масштаб через UIScale, поэтому анимация не ломает рассчитанное положение.

local TweenService = game:GetService("TweenService")
local gui = script.Parent
local menu = gui:WaitForChild("Menu")
local button = gui:WaitForChild("OpenButton")
local scale = menu:FindFirstChildOfClass("UIScale") or Instance.new("UIScale")

scale.Parent = menu
menu.Visible = false

local function setMenuOpen(isOpen)
    menu.Visible = true
    scale.Scale = isOpen and 0.92 or 1

    local tween = TweenService:Create(
        scale,
        TweenInfo.new(0.18, Enum.EasingStyle.Quad),
        { Scale = isOpen and 1 or 0.92 }
    )
    tween:Play()

    if not isOpen then
        tween.Completed:Once(function()
            menu.Visible = false
        end)
    end
end

button.Activated:Connect(function()
    setMenuOpen(not menu.Visible)
end)

Для реального меню добавьте отдельную кнопку закрытия и флаг состояния, потому что Visible меняется только после завершения закрывающей анимации. Во время tween временно блокируйте повторное нажатие или отменяйте предыдущую анимацию. Если кнопка запускает покупку, LocalScript показывает ожидание и отправляет itemName через RemoteEvent, а успех получает обратно.

Offset, Scale и ограничения

Не пытайтесь сделать весь интерфейс только на Scale. На очень широком мониторе панель станет огромной, а на маленьком телефоне слишком тесной. Комбинируйте относительную основу с ограничениями и внутренними отступами. В Studio включайте эмуляцию разных устройств, затем проверяйте опубликованную версию на физическом телефоне.

Практика: соберите MainGui и добейтесь плавного открытия Menu

Откройте пустой Baseplate и соберите меню с нуля: ScreenGui с именем MainGui в StarterGui, внутри Frame Menu и TextButton OpenButton. Успех выглядит так: первое нажатие показывает Frame и растягивает его с 0.92 до полного размера за 0.18 секунды, повторное нажатие сжимает и прячет. Весь код лежит в LocalScript внутри MainGui, серверный Script здесь не нужен.

Теперь сломайте меню намеренно. Замените Scale в Position и Size на крупные значения Offset и включите в Studio эмуляцию телефона: панель, собранная под окно ноутбука, вылезет за край экрана или займёт его целиком, потому что пиксели не пересчитываются под другое разрешение. Второй эксперимент: жмите OpenButton несколько раз подряд, пока идёт закрывающий tween. Функция setMenuOpen читает menu.Visible, а он ещё равен true, поэтому состояние собьётся: реальному меню нужен отдельный флаг и блокировка кнопки на время анимации.

Дальше добавьте в Menu отдельный CloseButton и флаг состояния, чтобы открытие и закрытие не зависели от текущего значения Visible. Повесьте UIAspectRatioConstraint на карточки внутри меню, тогда квадратные иконки не расплющатся на широком мониторе. Если кнопка запускает покупку, пусть LocalScript показывает ожидание и отправляет itemName через RemoteEvent, а результат подтверждает сервер.

Частые ошибки и почему они появляются

Интерфейс часто выглядит хорошо только в том окне, где его собирали. Причина обычно в больших Offset для Position и Size. Вторая проблема появляется, когда один LocalScript знает обо всех экранах и серверных правилах сразу. Третья связана с кнопками: MouseButton1Click работает для мыши, а Activated удобнее для нескольких способов ввода.

Самопроверка