Главное Авторские колонки Вакансии Образование
603 3 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Bird - is the word! (Или как мы разрабатывали игру ко Дню рождения)

На днях нашей студии исполнился аж целый год! Мы подумали, что это отличный повод сделать что-то как говорится «just for fun».
Мнение автора может не совпадать с мнением редакции

Хотелось сделать что-то игровое, плюс применить технологию, которую мы недавно использовали на одном из проектов.

В результате получилась относительно простая по механике танцевальная игруха с Сойкой в главной роли. Чтобы ничего не отвлекало от танца весь остальной интерфейс сделали простым и легким.

Главный экран игры

b_55faa435a5eac.jpg

Для того, чтобы птичка танцевала плавно, пришлось изрядно помучаться с движениями. Кстати, она состоит из блоков размером 8 px.

b_55faa583ead25.jpg

Ну и подарок для всех фанатов старых любимых 8 Битных игр — наш специальный мобильный джойстик в качестве управления!

b_55faa71fccfb8.jpg

А теперь немного про то, как это было )

Игра сделана на JavaScript с помощью двух элементов canvas, на бэкенде Node.js, для связи телефона и компьютера используется Socket.IO, в качестве базы данных была взята Mongo DB. Для сборки был использован Gulp.

Начало

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

  1. Игра была сделана в режиме "for fun", а значит некритично, если будут какие либо ошибки или тормоза;
  2. Хотелось на личном опыте испытать все прелести и тонкости разработки пусть небольшой, но все-таки игры;
  3. Жажда экспериментов с оптимизацией и выбора более подходящих решений по реализации.

К начальной разработке мы подошли c принципом KISS наперевес, благодаря чему довольно быстро была написана первая рабочая версия только для десктопа, в котором птица делала всего одно движение. К сожалению, fps держался на уровне 35-45, было это далеко от идеала, и мы приступили к первым оптимизациям. Сначала игра жила в одном canvas в котором было все, мы разделили холст на две части, где отдельно рисовалась сойка и бегающие кнопочки. Это частично помогло, потому что игре теперь не нужно было очищать и перерисовывать огромный холст размером 860 на 650 пикселей (это как никак 559000 точек). В добавок ко всему немного привели в порядок код. В целом это помогло и fps поднялся до 40-50, но до заветных 60 кадров нужно было еще ползти и ползти.

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

Когда все работы были завершены fps снова упал. Пришлось снова вернуться к оптимизации.

Вот краткий список тех вещей которые действительно помогли:

  1. Принцип DRY (убрали огромную часть лишнего кода);
  2. Следом YAGNI (и снова код стал короче);
  3. Бритва Окамма (упростили слишком сложные участки кода);
  4. Спорные моменты проверяли в jsPerf (тут и ежу понятно);
  5. Оптимизация изображений (спрайт кнопочек для игры с клавиатуры занимает всего 320 байт); b_55fbf1815a1b9.jpg

После всего этого игра стала на порядок играбельнее и гораздо приятней глазу и мы испытали маленький коллективный оргазм от получившегося результата ))

(Хотя, конечно, текущая реализация не без проблем).

b_55fbf6a57b5a4.jpg

b_55fbf6c08c33a.jpg

b_55fbf6cd6e112.jpg

В общем и целом, после проделанной работы, мы сделали для себя пару выводов:

  1. Делать что-то в режиме "for Fun" (особенно незнакомое), очень неплохо развивает;
  2. Принципы программирования забывать не стоит, они работают и всегда будут работать;
  3. "А теперь, дискотека!" (с)
0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
Заинтригован! Решил тыкнуть, на "дискотеку"... а там ничего ))) Где игрулина?
Ответить
SOIKA
Дизайн-студия современных решений
Andrey Pekarskiy
Небольшая ошибка решена. Можете заходить и играть :)
Ответить
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
а ну ка.. а ну ка... сча потестим )))
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.