Bird - is the word! (Или как мы разрабатывали игру ко Дню рождения)
Хотелось сделать что-то игровое, плюс применить технологию, которую мы недавно использовали на одном из проектов.
В результате получилась относительно простая по механике танцевальная игруха с Сойкой в главной роли. Чтобы ничего не отвлекало от танца весь остальной интерфейс сделали простым и легким.
Главный экран игры
Для того, чтобы птичка танцевала плавно, пришлось изрядно помучаться с движениями. Кстати, она состоит из блоков размером 8 px.
Ну и подарок для всех фанатов старых любимых 8 Битных игр — наш специальный мобильный джойстик в качестве управления!
А теперь немного про то, как это было )
Игра сделана на JavaScript с помощью двух элементов canvas, на бэкенде Node.js, для связи телефона и компьютера используется Socket.IO, в качестве базы данных была взята Mongo DB. Для сборки был использован Gulp.
Начало
Мы решили изобретать свой велосипед, хотя понимали, что использовав готовые движки для игр, было бы проще и быстрее. Причин на это у нас было три:
- Игра была сделана в режиме "for fun", а значит некритично, если будут какие либо ошибки или тормоза;
- Хотелось на личном опыте испытать все прелести и тонкости разработки пусть небольшой, но все-таки игры;
- Жажда экспериментов с оптимизацией и выбора более подходящих решений по реализации.
К начальной разработке мы подошли c принципом KISS наперевес, благодаря чему довольно быстро была написана первая рабочая версия только для десктопа, в котором птица делала всего одно движение. К сожалению, fps держался на уровне 35-45, было это далеко от идеала, и мы приступили к первым оптимизациям. Сначала игра жила в одном canvas в котором было все, мы разделили холст на две части, где отдельно рисовалась сойка и бегающие кнопочки. Это частично помогло, потому что игре теперь не нужно было очищать и перерисовывать огромный холст размером 860 на 650 пикселей (это как никак 559000 точек). В добавок ко всему немного привели в порядок код. В целом это помогло и fps поднялся до 40-50, но до заветных 60 кадров нужно было еще ползти и ползти.
Сильно не заморачиваясь с оптимизацией, продолжили работу. Ведь нужно еще было сделать такие важные части, как баллы, множитель баллов, анимацию различных движений сойки, таблицу рекордов, вывод первой пятерки игроков, момент поражения и самую главную фичу - возможность управления игрой с мобильного устройства.
Когда все работы были завершены fps снова упал. Пришлось снова вернуться к оптимизации.
Вот краткий список тех вещей которые действительно помогли:
- Принцип DRY (убрали огромную часть лишнего кода);
- Следом YAGNI (и снова код стал короче);
- Бритва Окамма (упростили слишком сложные участки кода);
- Спорные моменты проверяли в jsPerf (тут и ежу понятно);
- Оптимизация изображений (спрайт кнопочек для игры с клавиатуры занимает всего 320 байт);
После всего этого игра стала на порядок играбельнее и гораздо приятней глазу и мы испытали маленький коллективный оргазм от получившегося результата ))
(Хотя, конечно, текущая реализация не без проблем).
В общем и целом, после проделанной работы, мы сделали для себя пару выводов:
- Делать что-то в режиме "for Fun" (особенно незнакомое), очень неплохо развивает;
- Принципы программирования забывать не стоит, они работают и всегда будут работать;
- "А теперь, дискотека!" (с)