Игры про бокс: как я превратил бой с тенью в Monster Punch

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

Так родился Monster Punch, одна из игр про бокс на SlayFit. Она запускается в браузере, следит за движением через веб-камеру и превращает каждый удар в попадание по летящему монстру. Идею в простом виде можно описать одной фразой. А вот чтобы всё ощущалось честно, пришлось повозиться гораздо дольше.

Зачем я сделал боксёрскую игру для браузера

Браузерные игры мне нравятся тем, что первое решение лёгкое: открыл ссылку и играешь. Между любопытством и игрой нет ни страницы в магазине приложений, ни загрузки, ни настройки контроллера.

Здесь это важно особенно. Игра в бокс онлайн должна давать попробовать идею, прежде чем просить к чему-то привязываться. Для Monster Punch нужны только веб-камера и достаточно места, чтобы верхняя часть тела помещалась в кадр. Если камеры нет, демо-режим покажет, как устроен раунд, на имитации ввода.

Веб-камера не видит удар

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

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

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

Распознать движение было только полдела

Сначала я хотел засчитывать попадание, как только система заметила удар. И сразу почувствовал, что это неправильно: можно было бить пустоту и всё равно наносить монстру урон.

Теперь каждый распознанный кулак остаётся активным лишь очень короткое окно удара. Пока оно открыто, кулак должен пересечься с монстром на экране. Монстр не просто ждёт события «удар». Удар должен попасть туда, где цель находится на самом деле.

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

Блоку нужен был свой понятный жест

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

Жест работает, потому что он достаточно простой для распознавания и достаточно непохожий на удар, чтобы их не путать. Он ещё и задаёт раунду полезный ритм. Постоянно бить не всегда правильный ответ. Иногда обе руки нужно поднять.

Как я сделал так, чтобы значил каждый удачный удар

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

К концу раунда игра становится напряжённее. Монстры появляются чаще и двигаются быстрее. Так в короткой сессии возникает естественная кривая. В начале у игрока есть время понять управление. А в финале требуются более быстрые решения и более чистые движения.

Раунд можно выбрать на одну, две, три или пять минут. Я хотел, чтобы Monster Punch работала и как быстрая передышка, и как более длинная тренировка с боем с тенью. Очки, лучшее комбо и примерная активность дают каждой попытке понятный итог, а таблица лидеров даёт азартным игрокам цель.

Чему меня научила Monster Punch

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

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

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

Попробуй игру в бокс онлайн

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

Бесплатно · Без загрузки · Веб-камера или демо · Раунды от одной до пяти минут.

Загляни в другие игры SlayFit с веб-камерой или прочитай, как я сделал Relic Hunter на Three.js и ИИ-картинках.