Про поддержку мобильных устройств

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

Чтобы исправить это недоразумение, пришлось подтянуть верстку под маленькие экраны, переверстать инвентарь, который никак не хотел влезать в маленькие экраны телефонов, ну и конечно адаптировать управление под сенсорные экраны. И тут есть ряд пунктов, которые нужно учесть.

Первая проблема — это перемещение. Выдумывать тут особо нечего, поэтому я добавил виртуальный стик, двигая который можно регулировать направление движения персонажа.

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

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

Его положение задается CSS стилем, который обновляется каждый раз когда игрок двигает палец по экрану. Все бы ничего, только я, не подумав, хранил координаты кружка в состоянии React компонента, чтобы на каждое обновление координат указателя, вызывалась перерисовка стика. Так делать не надо было.

Помимо базовой логики добавил еще парочку удобств. Скачал даже для этого колду на свой телефон, чтобы посмотреть как вообще принято управление в мобильных играх делать.

Первое удобство — адаптивное изменение скорости бега. Скорость передвижения меняется в зависимости от того как сильно отклонен стик от центра. Ну, чтобы можно было идти пешком и наслаждаться Next Gen графикой, любоваться цветами, ходить по берегу моря.

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

На Андроиде при добавлении стика возникла проблема — если нажать одним пальцем на стик, то нажатия другим пальцем по кнопкам не вызывают “click” событие. Поэтому в случае мобилы пришлось переехать на прослушивание других событий вроде “pointerup”. В iOS такой проблемы не было, но там своих проблем хватает. И по сравнению с ними эта покажется пустяком.

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

С телефонами и планшетами все сложнее. Экраны могут быть довольно большими. Особенно если речь идет о планшете. И учитывая что руки обычно заняты держанием устройства, то тянуться к центру экрана, может быть совсем неудобно.

На помощь приходит однокнопочный геймплей и костыли от мира консольного гейминга, а именно — автоприцеливание.

Воспользовавшись уже реализованной системой обнаружения коллизий, можно добавить один большой круглый коллайдер для игрока, который будет сообщать нам информацию обо всех объектах, попадающих в его радиус. Далее, извлекаем список всех объектов, обладающих хитбоксами, и вот у нас есть набор потенциальных целей для атаки. Остается добавить всего лишь одну кнопку, по нажатию на которую, будет выбран ближайший противник. Зная его координаты, можно определить направление удара.