Pull to refresh

Kwiki — управляй руками!

Self Promo
http://kwikithebird.com augmented reality game

Добрый день, Хабрасообщество

Эта публикация заинтересует тех, кто не равнодушен к инновациям в пользовательских интерфейсах, а также увлеченных Дополненной Реальностью (Augmented Reality).

Если рассмотреть ближе работу человеческого мозга, постараться воссоздать те задачи, которые он выполняет, в частности, те, которые мы принимаем как должное, можно убедится, насколько огромно количество производимых мозгом вычислений. Например, обнаружение движения и слежение за ним, или различие более одного объекта, их движения относительно друг друга, их скорости и расстояния между ними.

Отмечу сразу, что Kwiki The Bird и разработка подобных игр не является основным направлением деятельности нашей компании. Целью игры была проверка возможностей различных алгоритмов по определению/трекингу движений веб-камерой компьютера.

Что у нас получилось:



В игру можете поиграть здесь: http://kwikithebird.com

Маркетинг часть:

Для раскрутки игры мы выбрали платформы для распространения бесплатных инди игр – по типу kongregate. Лучшими по нашему мнению оказались: http://www.kongregate.com, http://www.gamemontage.com. Количество просмотров/игр в день публикации составило 500 человек, без дополнительных способов раскрутки.

Концепция игры:

Технология распознавания движений, алгоритмы которой существуют сейчас (ниже ссылки), достаточно сыра. Неточность трекинга. Вначале мы думали о скрытии таких неточностей оригинальной идеей игры – пьяной птички, которой сложно управлять.

Нашей задачей не было длительное время удерживать пользователя в игре. Поскольку для таких игр это невозможно, так как, управляя камерой (в большинстве случаев встроенной в верхние панели лэптопов, iMac'ов и просто стоящие на мониторе), очень быстро устают руки. А именно это ваш контроллер, находящийся постоянно в воздухе. Поэтому хотелось увидеть вирусное распространение игры среди аудитории.

Собственно это получилось, по статистике (каждый пользователь, игравший в игру, приводил своего друга, что видно из фотографий, сделанных в процессе игры).

Поэтому хочу назвать этот пункт более-менее успешным. Все-таки игры с новым интерфейсом управления, а именно веб камерой – вирусны и могут распространять сами себя.

Далее, посмотрев популярный ролик о птичке Киви, которая не умеет летать и стремится в небо, – Киви(YouTube Most Adorable video of 2006). Мы решили сделать своего рода сиквел, использовав идею о птичке киви, что должно было скрыть некоторые недостатки в технологии.

Техническая часть:

Работа дизайнера – 20 часов

http://kwikithebird.com augmented reality game

1. Создание образа самого главного героя — Квики.
2. Дизайн 20 уровней игры.
3. Дизайн трофеев (по 3 на каждую подгруппу уровней — Земля, Над землей ночью, Небо, Космос). Трофеи не несут никакого особого значения, но увеличивают интерес пользователя, что, в общем-то, стимулирует продолжать игру и лететь выше.
4. «Плохие объекты», свои для каждого уровня, за поимку которых у пользователя отнимаются очки.
5. «Смертельные» враги, столкновение в которыми означает завершение игры.

Работа flash программиста (логика игры) – 40 часов

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

Запустив первый тест игры среди наших коллег/друзей, на удивление, мы увидели, что у многих получается управлять птичкой несмотря на недостатки технологии и разные световые условия (темная/светлая комната). И поэтому было решено добавить “смертельные объекты” на старших группах уровней:
http://kwikithebird.com augmented reality game
Это Грозовая туча, самолет и НЛО, не хабранло конечно, но достаточно впечатляющее на последней подгруппе уровней – Космос.

Более того, некоторые тестеры, даже умудрялись читить, жульничать, управляя птичкой только вверху экрана и собирая все плохие/хорошие объекты, набирая максимальное количество очков.

Работа по программированию (facebook) — 20 часов

Т.к. У нас уже имелся опыт создания фейсбук-приложений, с этой игрой мы решили попробовать выйти именно на рынок (хотя это громко сказано, учитывая цели которые мы ставили перед собой) фейсбука.

Были добавлены основные аспекты:

  • facebook connect для stand alone приложения (игры с сайта),
  • функция автоматической публикации результатов в новостную ленту,
  • Возможность просмотра активности игры прямо с сайта stand alone и кнопочка I Like, которая влияет на выдачу результатов в поиске на фейсбук, больше всего.


Работа с алгоритмами распознавания жестов – 80 часов

Здесь, пожалуй, самое интересное, чем хочется поделиться с Вами. Какие алгоритмы мы использовали, что изменяли, а главное, зачем:

Вдохновила работа Гранта Скинера и конечно Марио Клингерманна aka Quasimondo. У последнего, кстати, достаточно большое количество примеров портированных с С, openCV, во флеш, по распознаванию лиц и трекингу, а так же тому что называется NFT (Natural Feature Tracking) и трекингом цветных объектов.

Последний алгоритм в списке, но не последний для нас, а наоборот первый, который хочется отметить – это алгоритм распознавания движений Джастина Виндла.

Т.к. Птичка у нас должна летать мы должны были не только определять движение, но и делать его трекинг.

Собственно схожесть наших алгоритмов была в разделение экрана на сетку, мы усредняем цвета в рамках каждой ячейки/сегмента с регулярным интервалом. Разница в яркости в рамках каждого сегмента (от одного расчета к следующему) будет определять, действительно ли имело место движение в этой области экрана.http://kwikithebird.com augmented reality game

Проанализировав все работы, именно этот подход оказался наиболее точным для нас. Хотя, в действительности, требуется много действий получитьПиксель(), установитьПиксель(), а также преобразование этих результатов в цвет, насыщенность, яркость объектов, каждый из которых достаточно тяжел для мозга нашего компьютера – процессора. Хороший компьютер, конечно, справляется с этим легко, например iMac 3.06GHz справляется с этим на ура.

Резюмируем, как это работает во Flash:



  • После того, как объект камеры создан, он прошел в класс MotionTracker, который расширяет объект Point. MotionTracker класс содержит два BitmapData объекта, один представляющий текущие данные из веб-камеры, а другой используется для хранения предыдущего кадра.
  • При обновлении метод вызывается, новый кадр рисуется поверх предыдущего используя различие фильтра.
  • Результаты получает ColorMatrixFilter, увеличивая контрастность изображения и сбросив темные участки (с меньшим движения) далее на задний план.
  • Фильтр размытия затем применяется нами в целях дальнейшего снижения уровня шума и формировать “Участи Движения” из районов, где больше движения происходит.
  • Трешхолд вызывается в результате BitmapData, фактически в результате чего сетку рядом с черными пикселями следует игнорировать, а всем светлым пикселям присваивается “движение обнаружено”.


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

Параметры которые составляют – это яркость, blur (размытие), контраст и интервал сегментов той самой сетки.

Планы на будущее



  1. Запуск вконтакте после создания второй бета-версии и устранения всех багов.
  2. Добавить режим игры тренировка или how to.
  3. Автоматическое определение активной камеры.
  4. Добавление больше дизайна и звуковых эффектов.
  5. Изменение анимации действий Квики.
  6. Размещение фотографий пользователя на стенах друзей в facebook, повышение sharing параметра.
  7. Изменение фоновой музыки :).


Благодарю за внимание.

На последок, фан видео «как играют в Квики»:
Tags: дополненная реальностьaugmented realityигры
Hubs: Self Promo
Total votes 75: ↑65 and ↓10 +55
Comments 42
Comments Comments 42

Popular right now