Интерфейс в Roblox: как сделать один HUD для телефона и для ПК
Большинство игр делают интерфейс под клавиатуру, а потом как-нибудь растягивают под телефон. В Roblox это перевёрнутый приоритет. Разбираю один HUD, который честно работает на обоих.
Как сделать интерфейс в Roblox, который работает и на телефоне, и на ПК?
Собрать одну раскладку и переключать её по типу ввода, а не по размеру экрана. На телефоне кнопки навыков уходят в дугу под большой палец, на ПК на их месте подписи клавиш. Подсказки меняют текст по устройству: «Press E» или «Tap». Масштаб считается от короткой стороны экрана, иначе на планшете интерфейс выглядит детским.
В Roblox большинство игроков приходит с телефона. При этом интерфейс обычно рисуют под монитор, а потом растягивают под экран поменьше, и на телефоне кнопки оказываются там, куда палец не достаёт.
Я собрал демо HUD, где это сделано наоборот. В него можно поиграть.
Переключаться по вводу, а не по размеру
Первое решение: раскладка выбирается по тому, чем человек играет, а не по ширине экрана.
Это разные вещи. Планшет шириной с ноутбук, но играют на нём пальцем. Ноутбук с сенсорным экраном может быть и тем, и другим, причём в течение одной сессии: человек положил мышь и ткнул пальцем.
Поэтому игра смотрит на последний использованный тип ввода и перестраивается. На касании кнопки навыков собираются в дугу в правом нижнем углу, под большой палец. На клавиатуре дуга исчезает, а на иконках появляются подписи клавиш.
Размер считается от короткой стороны
Вторая вещь, на которой ломается большинство интерфейсов: масштаб привязывают к ширине.
На телефоне в горизонтали ширина большая, а высота маленькая, и интерфейс, рассчитанный по ширине, съедает весь экран. На планшете наоборот: всё выходит крупным и детским.
Считать надо от короткой стороны и ограничивать сверху и снизу. Тогда на любом устройстве элемент занимает примерно одну и ту же долю поля зрения, а не одну и ту же долю экрана.
Обучение через действие, а не текст
Третье — не про вёрстку, а про то, ради чего интерфейс существует.
При первом запуске экран затемняется вокруг одной кнопки, вокруг неё пульсирует кольцо, и текст подсказки подходит устройству: «Press E» на ПК, «Tap» на телефоне. Одно действие, в нужный момент, без списка правил.
Дальше короткий квест: пять раз попасть по манекену. Каждое попадание даёт всплывающую цифру урона, вспышку и шаг на полоске. Потом баннер о выполнении, новый уровень и открытие закрытого навыка с анимацией.
Это не украшение. Игрок узнаёт механику, выполняя её, и получает подтверждение после каждого шага. Правила, прочитанные в начале игры, не запоминает никто.
Что проверять до того, как рисовать
Три вещи, которые дешевле решить заранее.
Читается ли интерфейс на ярком фоне: полоска здоровья на светлой текстуре исчезает, если у неё нет своей подложки. Видно ли состояние навыка: перезарядка, недоступен, только что открылся — это три разных вида, а не три подписи. И работают ли правила на сервере: если урон считает клиент, игра сломается в первый же день.
Всё в демо сделано кодом на Luau, без чужих ассетов, и проверено в режиме игры, а не на картинке.
Что дальше
Открыть демо и потыкать: HUD Demo, телефон и ПК. Что входит в такую работу, собрано на странице про интерфейсы Roblox.
Нужен HUD или обучение для вашей игры — пришлите игру и нужные экраны.