Добрый день, дорогие читатели! Я особо не хотел больше писать на тему Яндекс Игр, но тут подвернулась одна тема, которая думаю была бы интересна и очень полезна тем, кто создает HTML5 игры и планирует, чтобы в них играли не только с ПК, но и с мобильных устройств с сенсорным управлением. Статья не большая, но уверен, что очень полезная. Просто супер полезная!!! Так что дочитайте ее до конца. Пишу, если честно, даже не столько для вас, как для себя, чтобы не забыть! :-)
Истоки проблемы
Как-то раз, проходя модерацию на Яндекс Игры по одной из своих игр, я получил отказ по ряду причин в числе которых была и такая:
Т.е. при игре на устройствах с сенсорным экраном, тапы иногда не срабатывали с первого раза, в то время как на ПК клики мышки очень четко считывались.
В этом же письме было еще несколько замечаний, которые я поправил, но с этим замечанием я вообще не понимал откуда проблема: я перекопал весь код, перечитал форумы и справки и совершенно не мог понять истоки проблемы. Уже хотел плюнуть на все и просто не размещать игру на Яндекс Играх, или просто отключить галочку о том, что игра поддерживается и на мобильных устройствах, оставив ее только на ПК. Но в последний раз решил рискнуть и отправить на модерацию версию с исправлением всех косяков, кроме этого. И на мое удивление модерация прошла и игру разместили.
Хотя это косяк присутствовал и он очень мешал игре, я чуть позже сам проверял с нескольких своих устройств, и четко видел эту проблему. Причем не только в этой игре, но и во всех предыдущих!
Но прошло какое-то время, я уже заканчивал свои эксперименты с Яндекс Играми и благополучно забыл об этой проблеме.
Откуда пришло решение?
Вы не поверите, но решение нашлось совершенно случайно! В прошлой статье я писал о том, как важно быть внутри инди сообщества и делиться опытом и советами. Вот эта статья, если вы еще не читали:
Так вот, в какой-то момент ко мне в ВКонтакте в личку написал человек, который рассказал вот о чем: на данный момент он поддерживает и развивает расширение SDK для Яндекс Игр под движок Game Maker, ну и сам соответственно занимается созданием игр на этом движке и размещает их на Яндексе. Причем вышел он на меня именно по этим статьям в Дзене! Хех, все таки это не такое уж и бесполезное занятие, как я думал ранее. )) А то мне постоянно кажется, что я пишу в пустоту.
Так вот, мы разговорились с ним, он поделился результатами одной из своих игр (спойлер, они в разы лучше, чем у моих игр, которые использовал для эксперимента - около 60к руб. за месяц) и рассказал в целом как работает площадка, какие игры туда нужны, как там зарабатывать и пр. Так же он скинул ссылку своей игры в Яндексе.
Я думаю, этот человек будет не против, если я немного прорекламирую его игру:
Так вот, я сразу обратил внимание не только на кол-во игроков, но и на то, как четко там срабатываются тапы с телефона в отличии от моих игр, в то время, как игра была создана на том же движке Game Maker. И я конечно не мог не спросить в чем же секрет и в чем у меня была проблема.
Решение
Так вот, оказалось, что это ограничение на уровне JavaScript'а, которое необходимо снять.
Т.е. мы прописываем метод, который предотвращает выполнение стандартного действия, связанного с событием касания. В данном случае, он предотвращает стандартное действие браузера при касании экрана, что может включать в себя прокрутку страницы.
Как я понял, когда мы играем с мобильного и прикасаемся к экрану, то считываются сначала события прокрутки экрана и только после может считаться тап в самой игре.
Как это поправить? Оказалось, что очень просто. Когда вы собрали билд под HTML5, то необходимо не размещать сразу архив на Яндекс Играх, а распаковать его, отредактировать файл index.html, и потом снова запаковать в zip и уже отправить архив на Яндекс Игры.
Какие правки необходимы в index.html и каким образом их внести? Я открыл файл для редактирования просто обычным текстовым редактором (тот же блокнот вполне сгодится). В сам файл необходимо внести такой участок кода:
<script>
document.addEventListener('touchstart', e => {
e.preventDefault();
}, {passive: false})
</script>
И все. Куда его встроить? Я методом подбора вставил его в это место в файле:
Т.е. это практически самый конец файла. И вот, закинул я все обратно в архив, загрузил в черновик на Яндекс Игры, дождался проверки, запустил игру с телефона и О ЧУДО! тапы срабатываются идеально! ))
Ну и в благодарность за помощь этого человека размещу здесь ссылку на его Boosty. Там он так же публикует некоторые обучающие статьи по Game Maker'у, и в частности больше всего внимания уделяет HTML5 играм и SDK Яндекс Игр для Game Maker, которое он самостоятельно дорабатывает и развивает! Не думайте, что это реклама и что он просил меня об этом. Просто, как писал в прошлой статье, в инди-сообществе все должны помогать друг другу, как говорится - услуга за услугу! ;-)
Спасибо, что дочитали статью до конца! Надеюсь она действительно окажется вам интересной и полезной. Ставьте лайки, оставляйте комментарии, подписывайтесь, делитесь - это все мотивирует меня писать дополнительные статьи на данном канале. Прошу прощения, что публикую что-то редко, как уже писал в начале - времени сейчас не так много. Но буду стараться находить несколько минут и рассказывать о чем-то интересном.
