Доброго времени суток, уважаемые читатели. Я не знаю делал ли кто-то что-то подобное до меня, поэтому решил поделиться идеей моего pet-проекта и отнять у вас немного времени.
Вначале был кролик
С детства я любил играть в игры, сейчас мало что изменилось. Еще больше мне нравится провести пару часов в игре с друзьями/коллегами/детьми. К сожалению не всегда под рукой оказывается консоль с контроллерами. Именно эту сложность я и попытаюсь решить.
Идея использовать в качестве контроллера свой телефон возникла в моей голове очень давно. На протяжении многих лет я продолжал думать на эту тему, но откладывал реализацию по массе причин. В итоге сменил несколько работ, переехал из северной столицы в первопрестольную, и наконец-то решил сделать хотя бы demo-версию, чтобы понять, насколько эта идея хороша.
Все началось с того,что однажды летом прошлого года я предложил сыну помочь придумать персонажа для игры. Так появился кролик.
Основная идея
Представьте - к вам пришли внезапные гик-гости, настолки на даче, консоль в ремонте, а по зомбоящику полнейшая дичь. Представили? Отлично! Вы открываете сайт с игрой на компьютере/smartTV/проекторе/планшете/.../на чем угодно, где есть браузер, сканируете qr-код своим телефоном, который тут же превращается в контроллер - и вперед!
Как веб-разработчик я вовсе не понимаю в разработке игр, поэтому в качестве жанра для демо-версии основной идеи я выбрал двухмерный шутер с пиксельной графикой.
Сам по себе процесс разработки и отрисовки спрайтов занял не больше пары недель, все делалось в свободное время и демка была закончена спустя 8 месяцев, после появления первого изображения первого персонажа.
Персонажи
В качестве участников перестрелки были выбраны следующие существа: кролик, гусь, человек, собака. Каждый персонаж был нарисован в 4-х направлениях (right, left, front, back) и в 2-х состояниях (стоит, идет). Весь процесс вместе с анимацией для ходьбы занял дней пять с учетом дачных, домашних и прочих дел.
Я не буду углубляться в процесс рисования и анимации пиксельных персонажей, скажу только, что старался придерживаться минимума цветов, а перед тем, как приступить к рисованию, посмотрел несколько роликов на youtube. Запомнилось мне только одно (ссылка не реклама, но после просмотра этого видео, я все понял, закрыл youtube и сел рисовать)
Подготовка к кодингу и первые сложности
Веб-разработка, как вы знаете, это достаточно большой стек различных технологий, поэтому необходимо было определиться с тем, что использовать, а что нет.
Я намеренно (чтобы сыну проще было потом разобраться в коде и доработать) пошел наиболее простым и наглядным путем, отказавшись от использования фреймворков, сторонних библиотеки и т.д. В итоге получилось:
фронт - html, canvas, css, js, canvas
бэк - php, mySQL
Нестареющая классика, так сказать.
В качестве хостинга я просто решил использовать свой хостинг от BEGET (в конце концов речь идет о демо-версии, к тому же у меня был бесхозный домен).
Быстренько поднял GIT - теперь самое интересное.
p.s. Спустя неделю разработки, зайдя после бани в гости к товарищу, я с удивлением обнаружил, что не все smartTV поддерживают canvas, поэтому canvas был заменен на div.
Логика в двух словах
При открытии страницы с игрой формируется уникальный id этой игровой сессии, создается новая строчка в базе данных и формируется qr-код для контроллера, в котором в качестве GET-параметра передается вышеупомянутый id (для генерации qr-кода я использовал API первой ссылки в гугле).
После сканирования кода телефоном мы позволяем выбрать из оставшихся персонажей и показываем контроллер для управления выбранным.
Со стороны страницы с игрой мы просто 10 раз в секунду (60 fps тут не надо) делаем запрос в базу, берем оттуда данные и на их основе считаем и рисуем текущее состояние игры на экране, реализуя таким образом игровой цикл.
Контроллер
Сами понимаете, у экрана телефона нет тактильного контакта, поэтому единственный способ сделать так, чтобы человек не промахивался по кнопкам - сделать их большими. Немного верстки на гридах и готово.
Для наглядности я оставил вывод на экран значения , которые падают в базу данных:
Логика работы контроллера такова:
нажали кнопку->изменили состояние объекта->положили в базу
отжали кнопку->изменили состояние объекта->положили в базу
Есть пара нюансов. При стрельбе необходимо через некоторое время "обнулять" свойство shoot (чтобы не было непрерывных очередей). Ну и в качестве событий для нажатия использовать touchstart и touchend соответственно. Ниже пример на jq для наглядности.
$(document).on("touchstart mousedown", ".button", function(e){
if (this.id==='fire') {
personToSend.shoot=1;
showPerson();//покажем на экране состояние
sendStateToDB(); //отправим его в базу
setTimeout(nullFire, 100); //обнулим стрельбу
} else {
personToSend.move=1;
personToSend.direction=this.id;
showPerson();
sendStateToDB();
}
}); Больше про контроллер сказать нечего. Как я и говорил, demo-версия максимально проста для понимания.
Фронтенд со стороны браузера с игрой
Тут вышло немного посложнее, но тоже достаточно просто.
Всего в игре используется 5 классов:
СlassGame - управляет игрой
ClassEntity - в нем всего 2 метода - конструктор и рисование объекта
ClassFlower (наследуется от ClassEntity) - добавляет немного декораций
ClassPerson (наследуется от ClassEntity) - для рисования и перемещения персонажей
ClassBullet (тоже наследуется от ClassEntity) - для рисования и перемещения пулек
Еще есть отдельный js файл в котором создается объект игры и запускается игровой цикл.
Немного о ClassGame ниже.
ClassGame
Я не стану описывать подробно, так как это займет массу вашего и моего времени. Если появятся вопросы, я с радостью на них отвечу. Если в двух словах - этот класс управляет всей игрой:
Заводит новую сессию в базе данных и получает из нее текущее состояние персонажей
Рассчитывает размеры всего отображаемого на экране в зависимости от размеров div'а с игрой
Хранит в себе состояние объектов
Добавляет, удаляет, изменяет состояние всех объектов на экране.
Несколько вещей, которые хотел сказать, но не пришлось к слову:
В ходе тестирования оказалось, что некоторые smartTV не умеют использовать cloneNode и не понимают append от js, хотя волшебным образом понимают append от jq. Поэтому и пришлось использовать эту библиотеку. (разбираться почему так происходит не было времени, да и я не bootstrap 5, чтобы совсем отказываться от jq)
Для придания игре 3-d эффекта близкие предметы я делал с большим z-index, дальние соответственно с меньшим
QR-код лучше читается на светлом фоне
Звук в игре нельзя запустить сразу, а можно только по клику на кнопку включения звука. Насколько я понял, такая ситуация считается нормальной в современном вебе. И действительно, зачем навязывать пользователю всякие лишние раздражители
Айфоны при дабл-клике увеличивают страницу, поэтому пользователи айфонов испытывают дискомфорт. У этой группы пользователей также могут возникнуть сложности со сканированием QR-кода стандартными средствами
Спрайты необходимо рисовать одинакового размера для всех состояний персонажа
Для отслеживания столкновений в данном случае идеально подходит решение задачи о пересечении 2-х квадратов с известными размерами сторон и координатами верхних левых вершин
Рисовать пиксельных персонажей очень занятно, анимировать их - боль
И пожалуй, последнее WebStorm - идеальная IDE. Жаль, что лицензия, которую выдал Яндекс Практикум, заканчивается завтра.
Пара мыслей напоследок
Демка, которую я сделал, конечно забавная, но не претендует на роль полноценной игры. Можно сыграть пару раз с друзьями за кружкой пива чая в гостях, или во время обеденного перерыва в офисе с коллегами. Однако, обратите внимание на то, какие перспективы открываются перед нами:
Можно портировать олдскульные игры и играть где угодно
Можно попробовать прикрутить стриминговые сервисы и играть где угодно
Можно не отображать контроллер в браузере мобильника, а написать приложение, которое будет сканировать и оно же будет контроллером
Можно придумывать игры с расширенным геймплеем ( у дочки в телефоне живет тамагочи и она его может выпускать в телевизор подруги, когда приходит в гости. Или покупка/продажа предметов в любимой RPG осуществляется при помощи drag and drop в мобильнике в то время как персонаж стоит возле лавки. Или покер с друзьями в пятницу, но карты у вас в мобильнике. Или настолки с картами, которые можно сканировать, а отображение игровой ситуации на большом экране и т.д. все ограничивается только фантазией)
Можно сделать механический контроллер, который будет подключаться к wi-fi и уметь сканировать qr-код, таким образом вопрос с тактильными ощущениями будет решен
В конечном счете можно будет просто покупать у стримингового сервиса вышеупомянутый контроллер, вместо того, чтобы покупать целую консоль.
и т. д.
Как видите, простор для размышления просто безграничен. И мне кажется, эта идея потенциально имеет хорошее будущее.
Я с радостью отвечу на все ваши вопросы и послушаю ваши мысли по поводу написанного выше.
Mishootk
Где-то я видел развлекаловку в торговом центре. Висит огромный телек, QR на приложение рядом, роутер раздает WiFi только для этой развлекухи, сеть открытая. В телеке аквариум. Сканируешь, качаешь, входишь, сажаешь рыбку, с телефона ею играешь, кормишь. Что там с монетизацией уже не помню.