UI в Roblox: ScreenGui, кнопки и адаптация под телефон

Больше половины игроков Roblox сидят с телефона, и интерфейс, нарисованный на широком мониторе, у них превращается в кашу. Поэтому UI собирают в относительных единицах и проверяют в эмуляторе устройств.

Из чего собирается интерфейс

  • ScreenGui в StarterGui — контейнер экрана; копия выдаётся каждому игроку
  • Frame — панель, внутри которой лежит остальное
  • TextLabel и ImageLabel — то, что просто показывают
  • TextButton и ImageButton — то, на что нажимают
  • UIListLayout, UIPadding, UICorner — раскладка, отступы и скругления без ручных координат

Scale вместо Offset

У размеров и позиций в UI две части: Scale — доля экрана, Offset — пиксели. Панель шириной 400 пикселей на телефоне займёт весь экран, а панель шириной 0.4 Scale — везде одинаковые сорок процентов.

Рабочее правило: размеры и позиции — в Scale, отступы и толщину рамок — в Offset. Ограничить пропорции помогает UIAspectRatioConstraint, а минимальный размер текста — TextScaled вместе с UITextSizeConstraint.

Кнопка, которая реагирует

StarterGui/Shop/Open.client.lua
  1. local button = script.Parent
  2. local panel = script.Parent.Parent:WaitForChild("Panel")
  3.  
  4. button.Activated:Connect(function()
  5. panel.Visible = not panel.Visible
  6. end)

Activated работает и на мышке, и на тапе, и на геймпаде — в отличие от MouseButton1Click.

Проверка на устройствах

  • Включи эмулятор устройств во вкладке Test и пройдись по телефонам и планшетам
  • Помни про вырезы экрана: держи важное подальше от краёв
  • Кнопка меньше примерно 44 пикселей на телефоне не нажимается пальцем
  • Не закрывай интерфейсом джойстик и кнопку прыжка

Читай дальше

Скрипты Чем Script отличается от LocalScript и ModuleScript и почему это главный вопрос в Roblox. Оптимизация Части, детализация, лишние циклы и Micro Profiler — что реально влияет на FPS. Монетизация Как устроены Game Pass и Developer Product и почему нельзя продавать преимущество вслепую.