Как я разрабатывал игру «Угадай рисунок» для Twitch
Еще с появления первых Twitch Plays стримов я очень полюбил подобный жанр трансляций. Появляется уникальная возможность понаблюдать за чатом, как за единым разумом, который находит способ пройти игру до конца. Как в основном выглядят стримы Twitch Plays: есть игра, управление в которой привязано к чату определенными командами в зависимости от контроллера, которым эта игра управляется:
UP – Идти вверх
DOWN – Идти вниз
A – Выполнить действие под кнопкой А
И так далее…
Одним из самых популярных Twitch plays стримов было прохождение Dark Souls и Pokémon.
Еще в феврале прошлого года у меня появилась идея сделать игру крокодил специально для Twitch, где пользователи сами бы могли загадывать свои слова, просто загружая изображение, которое бы потом постепенно вырисовывалось для зрителей. Тогда я стал разрабатывать алгоритм, который составляет маршруты рисования по изображению.
И так, как же оно работает?
Возьмем к примеру изображение наполеона. Как мы видим одна из первых проблем преобразования изображения в маршруты заключается разности толщины линий. Для этого нам нужно получить скелет данных линий:
Белые точки на изображении мы можем преобразовать в массив, перебором которого находим соседей каждой точки с учетом вектора движения. На выходе получаем индивидуальные маршруты, имеющие начало и конец.
Далее мы соединяем линии друг с другом для реалистичности рисования и добавляем им толщину как раз за счет сравнения скелета линий и оригинального изображения. Вуаля! Мы получаем отсортированный массив точек с толщиной, который можно легко нарисовать в Canvas. Вот такие чудеса творят Numpy и Scikit-image.
А теперь делаем из этого игру
Итак, я рассказал вам об идее и ее реализации у которой была одна главная проблема - скорость обработки. Из за ленивости и совмещения работы с очным обучением я смог продолжить развитие данного проекта ровно через год, добавив к алгоритму еще и параллельное вычисление. Набравшись решимости и опыта в разработке сайтов было решено создать сам сервис для трансляции.
Основным орудием труда был выбран фреймворк Polymer, сильно полюбившийся мной за этот год. Он прекрасно позволял разделить сайт на компоненты, что очень помогло не запутаться в будущем. Серверная часть сайта разрабатывалась на Django.
Страница трансляции
Страница для отправления своего изображения
После 2-х месяцев упорного кодинга в свободное время, мы все таки смогли воплотить в жизнь мою долгожданную мечту - собственную трансляцию Twitch plays, где игроки не только могут поучаствовать в отгадывании слова, но и загадать свои собственные варианты.
Twitch: https://www.twitch.tv/awsvinci (подпишитесь, чтобы не пропустить трансляцию)
Сайт: https://awsvinci.com/
AwsVinci_love_Pikabu1
AwsVinci_love_Pikabu2
AwsVinci_love_Pikabu3
AwsVinci_love_Pikabu4
AwsVinci_love_Pikabu5
AwsVinci_love_Pikabu6
AwsVinci_love_Pikabu7
AwsVinci_love_Pikabu8
AwsVinci_love_Pikabu9
AwsVinci_love_Pikabu10
