Мобильное управление: чтобы в твою игру можно было играть пальцем

Самая частая причина, по которой хорошая игра не взлетает: автор играл в неё мышью. На телефоне выясняется, что действие висит на клавише E, кнопка размером в палец не помещается, а половину экрана закрывает собственный большой палец.

Разберём, как это чинится. Всё делается штатными средствами, ничего доустанавливать не нужно.

Что Roblox делает за тебя#

Хорошая новость: ходьбу и камеру платформа берёт на себя. На телефоне сама появляется виртуальная ручка слева и вращение камеры перетаскиванием справа, на геймпаде работают стики. Твоя задача — только действия: удар, прыжок с особым эффектом, взаимодействие, инвентарь.

Определи устройство правильно#

Первая ошибка новичка — определять телефон по ширине экрана. Так планшет считается телефоном, а ноутбук с сенсорным экраном — компьютером. Правильный способ один: спросить у UserInputService, какие способы ввода вообще доступны.

local UserInputService = game:GetService("UserInputService")

local touch = UserInputService.TouchEnabled
local keyboard = UserInputService.KeyboardEnabled
local gamepad = UserInputService.GamepadEnabled

-- Телефон и планшет: касание есть, клавиатуры нет.
local isMobile = touch and not keyboard

-- Важно: устройство может быть сразу и тем, и другим.
-- Ноутбук с сенсорным экраном — это touch + keyboard,
-- и отбирать у него клавиши нельзя.

Обрати внимание на последний комментарий. Правильная логика — не «или-или», а «и то, и другое»: клавиши работают всегда, а экранные кнопки просто появляются там, где есть касание.

Кнопка действия: делай через ContextActionService#

Можно нарисовать TextButton руками и повесить на него обработчик. Но тогда придётся отдельно писать то же самое для клавиатуры и отдельно для геймпада — три копии одного действия, которые рано или поздно разъедутся.

ContextActionService решает это одним вызовом: ты описываешь действие один раз и перечисляешь, чем его вызывают. Экранную кнопку он рисует сам, и только там, где нужно.

local ContextActionService = game:GetService("ContextActionService")
local Enum = Enum

local ACTION = "Attack"

local function onAttack(_, state)
    -- Начало нажатия. Без этой проверки действие сработает
    -- дважды: на нажатии и на отпускании.
    if state ~= Enum.UserInputState.Begin then
        return Enum.ContextActionResult.Pass
    end

    print("удар")

    return Enum.ContextActionResult.Sink
end

-- true во втором аргументе = нарисовать экранную кнопку на телефоне.
ContextActionService:BindAction(
    ACTION,
    onAttack,
    true,
    Enum.KeyCode.E,
    Enum.KeyCode.ButtonR2
)

ContextActionService:SetTitle(ACTION, "Удар")
ContextActionService:SetPosition(ACTION, UDim2.new(1, -140, 1, -140))

Всё: на компьютере действие висит на E, на геймпаде — на правом триггере, на телефоне появилась кнопка. Логика написана один раз.

Размер и место кнопки#

Здесь начинается то, что не видно на большом экране. Палец — это не курсор: он толще и закрывает собой то, во что целится.

Интерфейс: масштабируй, а не задавай в пикселях#

Второй источник мучений — окна, сделанные в жёстких пикселях. На компьютере окно ровно посередине, на телефоне занимает весь экран и уезжает за края.

• размеры задавай в долях: UDim2.fromScale(0.4, 0.3), а не в пикселях;
• положи в ScreenGui объект UIScale и меняй его в зависимости от размера экрана;
• вместо ручной расстановки бери UIListLayout и UIGridLayout — они пересчитаются сами;
• IgnoreGuiInset у ScreenGui оставь выключенным, иначе интерфейс залезет под вырез камеры;
• у текста включи TextScaled, но обязательно поставь UITextSizeConstraint — без него подпись превращается в нечитаемые три пикселя.

Убери то, чего на телефоне быть не должно#

Подсказки вроде «нажми F, чтобы заблокировать» на телефоне бессмысленны и занимают место. У ProximityPrompt для этого есть готовое поведение: он сам показывает клавишу на компьютере и кружок под палец на телефоне, ничего дописывать не нужно.

А вот собственные надписи придётся прятать руками:

local UserInputService = game:GetService("UserInputService")
local hint = script.Parent:WaitForChild("KeyboardHint")

local function refresh()
    hint.Visible = UserInputService.KeyboardEnabled
end

refresh()

-- Способ ввода меняется на ходу: человек подключил геймпад
-- или отложил его и взялся за экран. Подписываемся и обновляем.
UserInputService.LastInputTypeChanged:Connect(refresh)

Чек-лист перед публикацией#

1. Открыл игру в эмуляторе на самом маленьком телефоне — ничего не уехало за край.
2. Все действия доступны без клавиатуры.
3. Кнопки не меньше 44 точек и не липнут друг к другу.
4. Ничего важного не закрыто большим пальцем в правом нижнем углу.
5. Текст читается без прищуривания.
6. Проверил на настоящем телефоне, а не только в Studio.
7. В настройках игры на сайте Roblox отмечены телефон и планшет — иначе игра просто не появится в мобильном поиске.

Последний пункт пропускают чаще всего. Игра может быть идеально приспособлена под палец, но если в настройках не отмечены поддерживаемые устройства, мобильные игроки её не увидят — а это как раз то самое большинство.