Адаптивный интерфейс

Цель

Научиться располагать интерфейс с учётом разных размеров экрана.

Подготовка и расположение объектов

StarterGui → ScreenGui → Frame MainPanel → UIAspectRatioConstraint (AspectRatio=1.8), UIPadding; TextLabel Caption; LocalScript внутри ScreenGui.

Пошаговая работа

Задай MainPanel размер UDim2.fromScale(0.7,0.3), Position=UDim2.fromScale(0.5,0.5), AnchorPoint=(0.5,0.5).
Внутрь MainPanel добавь UIPadding и UIAspectRatioConstraint.
Проверь режимы устройства в эмуляторе Studio и включи LocalScript с диагностикой ширины.

Код Luau

local UserInputService = game:GetService("UserInputService")
local camera = workspace.CurrentCamera
local panel = script.Parent:WaitForChild("MainPanel")
local caption = panel:WaitForChild("Caption")
local function refresh()
    camera = workspace.CurrentCamera
    if not camera then return end
    local width = camera.ViewportSize.X
    panel.Size = width < 600 and UDim2.fromScale(0.90, 0.35)
        or UDim2.fromScale(0.55, 0.32)
    caption.Text = width < 600 and "Узкий экран" or "Широкий экран"
end
local viewportConnection
local function bindCamera()
    if viewportConnection then viewportConnection:Disconnect() end
    camera = workspace.CurrentCamera
    if camera then viewportConnection = camera:GetPropertyChangedSignal("ViewportSize"):Connect(refresh) end
    refresh()
end
workspace:GetPropertyChangedSignal("CurrentCamera"):Connect(bindCamera)
bindCamera()

Проверяем результат

Панель подстраивается под ширину окна; на телефоне она занимает большую долю экрана.

Частая ошибка

Scale и ограничения помогают, но на маленьких экранах дополнительно проверь шрифты и расположение кнопок.

Усложнение

Добавь UISizeConstraint для минимальной и максимальной ширины.

Для преподавателя

Проверь результат в Play и в эмуляторе мобильного устройства. Сделай собственные скриншоты Roblox Studio перед публикацией.