Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Дизайн-студия современных решений
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
29
Эбиа

Эбиа

www.ebia.ru

16
Enlite

Enlite

enlited.ru

16
Amarket

Amarket

amarket.io

15
likearea

likearea

smm.li

14
Relap

Relap

relap.io

12
RockinRobin

RockinRobin

www.rockinrobin.co

12
E-Commerce and Venture projects

E-Commerce and Venture projects

Продажа товаров от производителей оптом и в розницу

11
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Cookiezz

Cookiezz

cookiezz.com.ua

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

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

241 3 В избранное Сохранено
Авторизуйтесь
Вход с паролем
На днях нашей студии исполнился аж целый год! Мы подумали, что это отличный повод сделать что-то как говорится «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
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
GreenRed brand studio
разработка логотипа за 99$
Панченко Андрей
Заинтригован! Решил тыкнуть, на "дискотеку"... а там ничего ))) Где игрулина?
Ответить
SOIKA
Дизайн-студия современных решений
Andrey Pekarskiy
Небольшая ошибка решена. Можете заходить и играть :)
Ответить
GreenRed brand studio
разработка логотипа за 99$
Панченко Андрей
а ну ка.. а ну ка... сча потестим )))
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать