Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Доброго времени суток, уважаемые читатели. Я не знаю делал ли кто-то что-то подобное до меня, поэтому я решил поделиться идеей моего pet-проекта и отнять у вас немного времени.
Вначале был кролик
С детства я любил играть в игры, сейчас мало что изменилось. Еще больше мне нравится провести пару часов в игре с с друзьями/коллегами/детьми. К сожалению не всегда под рукой оказывается консоль с контроллерами. Именно эту сложность я и попытаюсь решить.
Идея использовать в качестве контроллера свой телефон возникла в моей голове очень давно. На протяжении многих лет я продолжал думать на эту тему, но откладывал реализацию по массе причин. В итоге сменил несколько работ переехал из северной столицы в первопрестольную и наконец решил сделать хотя бы demo-версию, чтобы понять насколько эта идея хороша.
Все началось с того,что однажды летом прошлого года я предложил сыну помочь придумать персонажа для игры. Так появился кролик..
Основная идея
Представьте, что к вам пришли внезапные гик-гости, настолки на даче, консоль в ремонте, а по зомбоящику полнейшая дичь? Отлично! Вы открываете сайт с игрой на компьютере/smartTV/проекторе/планшете/.../на чем угодно где есть браузер, сканируете qr код своим телефоном, который тут же превращается в контроллер и вперед!
Как веб-разработчик я вовсе не понимаю в разработке игр, поэтому в качестве жанра для демо-версии основной идеи я выбрал двухмерный шутер с пиксельной графикой.
Сам по себе процесс разработки и отрисовки спрайтов занял не больше пары недель, но все делалось в свободное время и демка была закончена спустя 8 месяцев, после появления первого изображения первого персонажа.
Персонажи
В качестве участников перестрелки были выбраны следующие существа: кролик, гусь, человек, собака. Каждый персонаж был нарисован в 4-х направлениях (right, left, front, back) и в 2-х состояниях (стоит, идет). Весь процесс вместе с анимацией для ходьбы занял дней 5 с учетом дачных, домашних и прочих дел.
Я не буду углубляться в процесс рисования и анимации пиксельных персонажей, скажу только, что старался придерживаться минимума цветов, а перед тем как приступить к рисованию посмотрел несколько роликов на 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-версия максимально простая для понимания.
Фронтенд со стороны браузера с игрой
Тут вышло немного посложнее, но тоже достаточно просто.
Всего в игре используется 4 класса:
СlassGame - управляет игрой.
ClassEntity - в нем всего 2 метода конструктор и рисование объекта.
ClassFlower (наследуется от ClassEntity) - добавляет немного декораций.
ClassPerson (наследуется от ClassEntity) - для рисования и перемещения персонажей.
ClassBullet (тоже наследуется от ClassEntity) - для рисования и перемещения пулек.
Еще есть отдельный js файл в котором создается объект игры и запускается игровой цикл.
Немного о ClassGame ниже.
ClassGame
Я не стану описывать подробно, так это займет массу вашего и моего времени. Если появятся вопросы, я с радостью на них отвечу. Если в 2-х словах, то этот класс управляет всей игрой.
Заводит новую сессию в базе данных и получать из нее текущее состояние персонажей.
Рассчитывает размеры всего отображаемого на экране в зависимости от размеров 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-код, таким образом вопрос с тактильными ощущениями будет решен
В конечном счете можно будет просто покупать у стримингового сервиса вышеупомянутый контроллер, вместо того, чтобы покупать целую консоль.
и т. д.
Как видите, простор для размышления просто безграничен. И мне кажется эта идея потенциально имеет хорошее будущее.
Я с радостью отвечу на все ваши вопросы и послушаю ваши мысли по поводу написанного выше.