Наклон телефона как руль, как джойстик, как наклонная плоскость для шарика в лабиринте: сенсоры ориентации превращают корпус устройства в контроллер, и веб-игра на их основе ощущается нативной без единой строчки платформенного кода. Стандарт DeviceOrientation отдаёт странице углы поворота устройства в пространстве, а игра превращает их в наклон доски, поворот машины или параллакс фона.
Возможность дешёвая, но с подводными камнями, о которых молчат туториалы: разрешение на мобильном Safari требует жеста пользователя, гироскоп дрейфует, сырые углы дрожат, поворот экрана переворачивает оси, и часть аудитории вообще сидит за десктопом. Ниже разобран весь путь: что именно отдают события, как честно просить разрешение, как чистить сигнал, калибровать ноль и строить управление, которое играется и не бесит.
Углы альфа бета гамма что именно отдаёт событие ориентации устройства
Событие ориентации несёт три угла. Гамма это наклон влево и вправо вокруг оси, идущей сквозь телефон от уха к уху, диапазон до девяноста градусов в обе стороны. Бета это наклон вперёд и назад вокруг оси, проходящей через экран слева направо, полный диапазон до ста восьмидесяти. Альфа это поворот вокруг вертикальной оси, компасный курс от нуля до трёхсот шестидесяти, самый шумный и самый зависимый от магнитных помех из трёх.
Для наклонного управления в портретной ориентации рабочая лошадка это гамма, для обзора и параллакса бета, альфа служит в играх с курсом вроде кораблей и самолётов. Значения приходят потоком событий с частотой кадров дисплея, и подписка на событие отдаёт поток навсегда, без повторных запросов.
Система координат привязана к устройству, а не к экрану: при повороте интерфейса в ландшафт оси остаются с корпусом, и игра обязана пересчитывать углы под текущую ориентацию, иначе шарик катится по диагонали ровно тогда, когда пользователь повернул телефон удобнее.
Диагностика проще всего живым экраном: три полосы, обновляющиеся углами, и любые подписи странных поведений видны глазами за минуту. Тест на реальном устройстве незаменим, эмуляторы рисуют углы фантазийно.
Разрешение на iOS и вежливый запрос сенсоров по жесту пользователя
Мобильный Safari закрывает сенсоры до явного разрешения, и запрос обязан исходить из обработчика жеста: касания или щелчка. Метод запроса возвращает обещание, отказ молчит навсегда до перезагрузки страницы, поэтому кнопка включить наклон это не украшение, а обязательный элемент интерфейса честной игры.
Сенсоры доступны только в защищённом контексте: страница по обычному протоколу не получит ни событий, ни разрешения, и локальная разработка ведётся на локальном хосте, который защищён по определению. Игру, случайно выложенную по незащищённому протоколу, узнают по молчащим углам.
async function enableTilt() {
if (typeof DeviceOrientationEvent.requestPermission === "function") {
await DeviceOrientationEvent.requestPermission();
}
window.addEventListener("deviceorientation", (e) => {
state.alpha = e.alpha;
state.beta = e.beta;
state.gamma = e.gamma;
});
}Порядок кода имеет значение: сначала жест, потом запрос, потом подписка, и любой промежуточный экран между жестом и запросом ломает цепочку. Определение поддержки сенсоров проверяется до показа кнопки, чтобы десктоп не предлагал наклонять монитор.
Хороший тон в интерфейсе: кнопка объясняет, зачем нужен наклон, а не просто требует разрешение. Игрок, который понял, что наклон станет рулём, соглашается охотнее, чем игрок, которому непонятная кнопка предлагает неизвестно что.
Отказ это штатный сценарий, а не ошибка: игра обязана предложить клавиатуру или касания и продолжать работать. Экран с единственным управляющим элементом, недоступным без разрешения, выгоняет игрока навсегда.
Разбор идёт от физики к продукту: сначала углы и события, затем обработка и калибровка, затем жанры и честные замены для тех, у кого сенсоров нет. Код в статье короткий и рабочий, а правила в конце работают чек-листом перед релизом.
Чтение сенсоров в игровом цикле сглаживание и зоны нечувствительности
Сырые углы дрожат: рука не статична, сенсор шумит, и шарик без обработки дёргается на месте. Первое лечение это сглаживание: цель читается из события, а рабочее значение подтягивается к ней долей кадра, и коэффициент подбирается по ощущению отклика, слишком мягкое управление плывёт, слишком резкое трясётся.
let target = 0;
let smooth = 0;
window.addEventListener("deviceorientation", (e) => {
target = clamp(e.gamma / 30, -1, 1);
});
function frame(dt) {
smooth += (target - smooth) * 0.1;
ball.x += smooth * dt * 240;
}Второе лечение это зона нечувствительности: малые наклоны до пары градусов игнорируются, чтобы удержание устройства почти ровно не двигало ничего. Зона снимает усталость руки: держать телефон идеально неподвижно невозможно, и игра, требующая этого, уступает любому пальцевому конкуренту.
Третье лечение это ограничение диапазона: полный ход управления размазывается на комфортные пятнадцать-тридцать градусов, дальше наклон не усиливает эффект. Человек быстро устаёт держать телефон на боку под сорок пять градусов, и физиология важнее эффектности.
События копятся в переменные, а игровая логика читает их в кадре цикла отрисовки: смешивать обработку события с логикой кадра значит зависнуть от частоты сенсоров, а они не обязаны совпадать с кадрами.
Частота сенсоров не регулируется кодом, зато регулируется цена: подписка живёт только на экране с наклонным управлением и снимается на паузах, в меню и на свёрнутой вкладке. Игровой цикл тоже почивает на паузе, иначе игра греет карман и разряжает батарею, и игрок узнаёт об этом раньше разработчика.
Калибровка нуля и дрейф гироскопа как держать управление честным
Игрок сидит, лежит, держит телефон на весу, и удобное нейтральное положение у всех разное. Калибровка нуля запоминает текущие углы как прямое положение: одна кнопка или короткий жест, и наклоны считаются от того, как человеку удобно держать устройство. Игра без калибровки честна только для сидящих ровно, а таких меньше половины.
Дрейф это вторая половина правды о гироскопах: показания медленно уходят, особенно после энергичных поворотов, и шарик постепенно начинает тянуть в сторону. Лечение живое: перекалибровка кнопкой, мягкое самонулевание при долгой тишине наклонов или автокоррекция по гравитации из события движения, где она есть.
Событие движения устройства отдаёт ускорения, вектор гравитации в покое указывает вниз, и по нему честно определяется горизонт независимо от дрейфа гироскопа. Смесь двух источников это компромисс: гироскоп даёт скорость реакции, гравитация даёт якорь правды, и фильтр смешивает их по известной схеме с коэффициентом доверия.
Калибровка обязана быть заметной в интерфейсе: тихая перекалибровка посреди раунда ощущается как жульничество, поэтому она делается в паузах, до старта или по явной команде игрока.
Калибровка в ландшафте заслуживает отдельной строки: нейтраль в повёрнутом корпусе это другие числа, и ноль запоминается по текущей ориентации, а не один раз навсегда. Автоповорот экрана в момент запоминания портит ноль мгновенно, поэтому кнопка калибровки на секунду блокирует поворот.
Гравитация и абсолютная ориентация два события для разных игр
Событий ориентации два, и разница в системе отсчёта. Обычное событие отдаёт повороты относительно устройства, наклонился телефон и поехали углы, и для игр этого достаточно в девяти случаях из десяти. Абсолютное событие отдаёт курс относительно Земли, с опорой на компас, и служит играм с картой и направлением: приложения с навигацией по курсу, симуляторы направления, шутеры с поворотом корпуса вокруг.
Выбор события это выбор жанра: лабиринт и гонка живут на относительных углах, компасные задачи требуют абсолютных. Абсолютные углы дороже по батарее и шумят рядом с металлом, поэтому без нужды их не берут.
Магнитометр, участвующий в альфе, боится магнитных чехлов, автомобилей и корпусов мебели: курс уходит на десятки градусов рядом с металлоломом, и игра с абсолютным курсом обязана иметь перекалибровку и предупреждение о среде. Относительные углы от этого не страдают, и это ещё один аргумент в их пользу для обычных жанров.
Дальше идёт различие подписи движения: событие движения отдаёт ускорения по осям, и по всплескам ускорения ловятся встряхивания, удары корпусом, жесты подбрасывания. Мини-игры на встряхивание собираются на порогах ускорения с дебаунсом, и тряска не обязана быть ориентацией.
Экранная ориентация завершает карту: подписка на смену ориентации и блокировка ландшафта для гоночных корпусов делают управление предсказуемым, иначе поворот интерфейса посреди заезда меняет оси под колесом.
Управление наклоном в жанрах от лабиринта до гонки и камеры
Лабиринт это эталонное применение: углы отображаются в наклон плоскости, шарик катится по физике, и точность управления ощущается мгновенно. Гонки берут гамму как руль с возвратом в ноль по калибровке, а бета служит газом и тормозом, если разработчик не боится двуручного хвата.
Камера в трёхмерных жанрах управляется наклоном как джойстиком обзора: маленькие углы это поворот головы, большие это поворот корпуса. Танцевальные и спортивные мини-игры берут ускорения для распознавания жестов, от встряхивания до ударов корпусом, и здесь главная работа в фильтрации ложных срабатываний.
Просмотр панорам наклоном это отдельный жанр: камера вращается по бете и гамме, сцена обёрнута вокруг игрока, и телефон превращается в окно. Здесь важен гистерезис на краях, чтобы доворот до упора не дёргал картинку, и мягкое ограничение угла обзора, потому что шея не вращается на триста шестьдесят.
Параллакс фона это дешёвый и благодарный эффект: фоновые слои смещаются на доли углов, и глубина появляется без затрат на графику. Игры-головоломки используют наклон как скрытый канал: наклонил устройство и увидел сцену с другой стороны, и механика получает второе измерение без единой новой кнопки.
Правило жанра одно: наклон обязан быть единственным или ясным источником управления, смешение наклона и касаний в один канал превращает руки в спагетти. Разделение каналов по назначению, наклон за направление, касание за действия, читается телом без обучения.
Тестовый парк для сенсорной игры это минимум три устройства: маленький телефон, крупный планшет и что-то среднее в тяжёлом чехле. Управление, настроенное на лёгком телефоне, на планшете требует других порогов, и разница в массе это разница в усталости, которую аналитика не покажет.
Замены и доступность когда наклон недоступен игра обязана играть дальше
Десктоп, отказ в разрешении, старое устройство, доступность: причин не иметь наклона больше, чем кажется, и каждая обязана встречать игру, а не стену. Замены строятся из стандартного набора: стрелки и мышь за наклон, касание-перетаскивание за руль, кнопка калибровки, скрытая без сенсоров.
Функциональное определение стоит в одном месте: список возможностей сенсора проверяется при старте, интерфейс собирается из доступных схем, и игра не предлагает то, чего нет. Схема управления объявляется словами в меню: наклон, клавиши, касание, и игрок выбирает осознанно.
Порядок сборки сенсорного управления свёрнут в короткую лестницу:
- проверить поддержку и собрать интерфейс из доступных схем;
- запросить разрешение по жесту с объяснением на кнопке;
- читать углы в переменные и потреблять их в кадре отрисовки;
- сгладить сигнал и вырезать зону нечувствительности;
- дать калибровку нуля и перекалибровку в паузах;
- пересчитать оси под ориентацию экрана и заблокировать нужную;
- держать замену управления для всех без сенсоров.
Наклон телефона это самое естественное управление на свете: человек держит устройство и так, и игра, которая научилась читать это удержание, получает интуицию вместо обучения. Мост из трёх углов и пары фильтров соединяет физику ладони и физику игры, и именно за такие мосты мобильный веб и любят. Мост стоит дёшево, живёт годами и не требует ничего, кроме честного отношения к шуму и калибровке.