Игра под мышь на телефоне: не двигается вообще ничего

Большинство людей открывают браузерные игры с телефона. Мы это знали, и всё равно Salt & Stone — градостроитель на голом скалистом острове с торговлей через внутреннее море — был сделан под мышь. Камера, размещение здания и его выбор держались на событиях мыши.

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

Одна строка, без которой не работает ничего

Теперь игра использует pointer events — единый путь для мыши, пера и пальца. Само по себе это на телефоне ничего не меняет, и виноват браузер.

По умолчанию браузер забирает себе перетаскивание одним пальцем как прокрутку страницы, а двумя пальцами — как её масштабирование. Холст игры получает сообщение, что жест отменён, и больше ничего. Исправление — одна строка CSS на холсте, которая говорит браузеру, что касания здесь принадлежат странице: touch-action: none. Она должна быть в таблице стилей, а не выставляться скриптом задним числом.

Три вещи, которых нет у пальца

Каждой нужен свой ответ. Отобразить их один к одному на действия мыши не получается.

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

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

Нет колёсика и правой кнопки. Ими здание поворачивали и откладывали. На сенсорном экране это две кнопки по 56 пикселей, которые появляются, только пока вы что-то держите, чтобы в остальное время не загромождать экран.

Спрашивайте, что это за устройство, а не какой ширины экран

Кнопки к тому же пришлось увеличить. Обычно для этого берут медиазапрос по ширине экрана, и здесь он путает оба случая: у планшета ширина 1024 пикселя, но ему нужны элементы под палец, а узкому окну браузера на десктопе — нет.

Поэтому переключатель размеров спрашивает, грубый ли основной указатель — то есть палец, — а не какой ширины окно. На сенсорном устройстве кнопки панели вырастают с 28 до 46 пикселей, а карточки зданий — с 56 до 84.

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

Тот же урок в экшене

У Husktide была другая проблема. Игра рисовала себя в фиксированном прямоугольнике 16:9 и масштабировала его под экран. На вертикально поставленном телефоне от этого оставалась полоса посередине экрана с чёрным сверху и снизу: игра занимала 26% дисплея.

Исправление — выбирать форму игрового прямоугольника по форме экрана до старта игры, сохраняя общее число пикселей, чтобы все измерения раскладки оставались верными. На вертикальном телефоне теперь занято 99,9%.

Это вскрыло вторую проблему. Всё рисуется в собственных единицах игры, а потом масштабируется вниз, поэтому кнопка высотой 52 единицы на повёрнутом боком телефоне может превратиться в 27 реальных пикселей — слишком мало, чтобы надёжно попадать. Теперь размер каждой зоны нажатия считается из одного числа, выведенного из реального масштаба, так что на экране она всегда получается не меньше 44 пикселей.

Общий вывод

«Работает на мобильных» — это не фича, которую добавляют в конце. Схему управления, построенную вокруг парящего курсора, колёсика и второй кнопки, нужно перепроектировать под палец, а не переназначить. А первый тест — самый скучный: открыть игру на телефоне и попробовать сделать первое, что сделал бы игрок.

Сыграйте в Salt & Stone на том, что у вас в руках.