Как я собрал игру с управлением взглядом с помощью ИИ

Привет, меня зовут Дмитрий Подлужный. Я UX-дизайнер и человек, умеющий руководить направлениями и делать хороший бизнес-продукт. Еще я веду канал UX Point — можно подписаться. А вообще больше обо мне можно узнать на моем сайте podluzny.ru.

Но здесь я в роли экспериментатора. Я пробую вайб-кодинг, чтобы найти новые возможности его применения в формировании пользовательского опыта. Ну и просто, чтобы не отстать от жизни.

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

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

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

Поэтому я пошел в ChatGPT и написал первый промпт проекта:

ИИ предложил несколько вариантов, но меня они не устроили. Я начал уточнять предпочтения в диалоге. Например, попросил, чтобы это была стрелялка. Зная технические ограничения, сразу указал, что управление должно идти от положения лица, а не глаз.

После нескольких итераций я попросил сделать компактное описание.

Работая с вайб-кодингом, я заметил одну дилемму: если делать слишком детальное описание проекта, шанс получить результат «не туда» возрастает. Если же описание компактное, выше вероятность, что основная канва проекта пойдет в нужном направлении.

С этим промптом я и пошел в v0, чтобы сгенерировать код проекта.

Я пробовал разные вайб-платформы. У всех есть свои плюсы и минусы, но для меня самой сбалансированной оказалась v0. Там можно достаточно экономно делать проекты, а качество получается вполне достойное.

Первая версия была почти не рабочей. Выяснилось, что рабочая область слишком маленькая. Затем несколько промтов подряд не могли подключиться внешние библиотеки, не отображалось видео. Потом было еще что-то.

В итоге примерно к тринадцатому промпту приложение приобрело вид, который уже можно было считать рабочим.

Чтобы было веселее, я добавил в приложение таблицу лидеров. А чтобылидеры отображались не только локально, данные для нее я стал сохранять во внешней базе Supabase.

Остальные доработки касались управления прицелом и настройки голосового управления.

С самого начала я дал v0 инструкцию выносить параметры системы в отдельный блок. Это хороший подход: он позволяет потом локально настраивать код. Иногда проще самому что-то поправить, чем долго добиваться этого от ИИ.

Следующим шагом стало изменение алгоритма управления прицелом. Хотелось, чтобы он реагировал на поворот головы.

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

И тут начался тупеж ИИ.

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

Но у меня уже есть алгоритм поведения в таких случаях.

Когда ИИ начинает ходить по кругу, причин может быть много, и выбить его из этого состояния почти невозможно. Есть два варианта, которые у меня работают:

В этот раз я выбрал второй путь. Я взял код проекта и пошел с ним в ChatGPT и Gemini. В этом проекте я успел поработать с обеими моделями.

Какие-то правки я вносил вручную по рекомендациям ChatGPT. А в некоторых случаях просто просил написать целиком код компонента и копировал его обратно в v0. Это и решило проблему.

Для меня результатом стало несколько важных выводов.

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

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

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

Ну и еще одним результатом стала эта статья. Возможно, кто-то из вас найдет в ней несколько полезных подходов для своих работ.

В конечном счете, можете сделать себе такой же проект в Figma Make, Lovable или v0. Тут финальный промт для проекта.

Спасибо, что нашли время прочитать эту статью. Ваши мысли и отклики для меня действительно важны. Делитесь впечатлениями или вопросами, я обязательно отвечу.