Разработка: прототипы мини-игр в ProtoPie
В блоге сервиса ProtoPie опубликовали пост про топ-15 вдохновляющих прототипов. Два из них были сделаны нашим арт-директором Женей Гребенщиковым. Женя поделился с нами историями, как появились идеи этих прототипов и как они были реализованы.
А теперь слово Жене.
Прототип Squid Game по сериалу «Игра в кальмара»
Я сделал прототип, вдохновившись корейским сериалом «Игра в кальмара». Сначала придумал, как могла бы выглядеть авторизация в игре, наделал всяких анимаций, постарался передать стилистику сериала в интерфейсе. После опубликовал демонстрацию вступительного ролика в «ТикТоке». Видео с демонстрацией набрало более 30 000 просмотров и более 3 000 лайков. Это вдохновило меня продолжить заниматься проектом, и на следующих выходных я придумал игровые механики для первых трех уровней.
В первые минуты игры пользователи должны улыбнуться в камеру. Программа делает снимок игрока и присваивает ему номер — в точности как в сериале
«Красный свет — зеленый свет». В сериале игроки должны пересечь поле, двигаясь только тогда, когда горит зеленый свет. В прототипе игры я реализовал движение персонажа зажатием пальца по экрану. Для стилизации набрал скриншотов из сериала, нарисовал что-то похожее на персонажей шоу в стилистике пиксель-арта, создал три-четыре кадра для имитации движения и сел собирать прототип.
Сделать перебегание поля было довольно легко, нужно было только отладить сложность игры. Поэтому я начал усложнять игру и делать формулы ускорения: типа чем дольше жмешь, тем быстрее движется персонаж. Добавил ограничение максимальной скорости, чтобы было более реалистично, и реализовал постепенную остановку, по закону инерции. Потестил игру на жене и близких друзьях, понял, что 45 секунд достаточно сложно для новичков, но легко для тех, кто уже сделал 50+ забегов. В итоге тестирование и отлаживание игры заняло больше времени, чем сама реализация.
Но одному бегать как-то грустно, да и в сериале поле перебегала целая толпа игроков, поэтому я решил сделать ботов. Для внешней кастомизации добавил рандомные номера на куртки и задал разный цвет волос. Также хотелось добавить пасхалку: в сериале был дед, который дошел до последнего уровня. Поэтому я сделал персонажа с седыми волосами, который почти всегда проходит первый уровень. Самым интересным было сделать искусственный интеллект для игроков. У ботов есть различные тактики: кто-то бегает мелкими перебежками, кто-то рискует (и часто выбывает из игры).
Для любителей пасхалок я добавил на поле седого персонажа — отсылка к О Иль Наму, пожилому игроку под номером 001
«Сахарные соты». В сериале нужно было иголкой выпилить геометрическую фигуру из сахарного леденца. Тут я решил, что нужно будет вырезать одну из четырех рандомных фигур иголкой, управляя ею пальцем. И чем дольше иголка находится на леденце, тем «сильнее» нажатие. Реализовал это с помощью функции вибрации у телефона, поэтому в браузере полностью прочувствовать импакт игры не получится.
В игре «Сахарные соты» самым сложным оказалось реализовать геометрию. Мне нужно было проверять, попадает ли точка (кончик иголки) на грань геометрической фигуры. Если с квадратом и кругом проблем особо не было, то с зонтиком и треугольником я возился очень долго. Чтобы реализовать геометрию треугольника, пришлось открывать учебники по геометрии для восьмого класса и искать способы определения, попадает ли точка в треугольник. Оказалось, что в учебнике такого нет, и это олимпиадная задача. Кстати, сделать зонтик оказалось намного проще: здесь проверка на попадание в несколько секторов и один прямоугольник.
Помимо геометрии, надо было отрегулировать сложность: если игрок долго держит иглу над леденцом, она должна расколоться. Опять куча тестов, и я столкнулся с новой проблемой: тестируя игру, я уже наловчился вырезать фигурки и в итоге усложнял игру для себя. А когда дал попробовать поиграть друзьям, они долго не могли вырезать даже что-то простое.
В сериале игроки вырезали из карамели круг, треугольник, зонт и звезду. Но из-за сложности в реализации геометрии фигур в прототипе звезду пришлось заменить на квадрат
«Перетягивание каната». Для соревнования с перетягиванием каната я придумал игровую механику и даже начал ее реализовывать, но коронавирус не дал мне закончить разработку. Поэтому в текущей версии игры его нет, но я думаю вернуться к разработке и закончить эту мини-игру.
В сериале матч по перетягиванию каната проходит между двумя командами. Побеждает та команда, которой удастся сбросить с обрыва команду противников
Мини-игра Sound Wizard
Попробовать сыграть
(играть можно только с мобильных устройств)
Идея такого прототипа пришла мне в голову еще в 2020 году. Я подумал, что было бы весело сделать игру, на которую нужно орать, и дать поиграть в нее знакомым стримерам. Это был бы топовый контент. Накидал в ProtoPie демоверсию, где квадрат увеличивался в размерах в зависимости от громкости шума вокруг телефона. Тестировать такое дело дома не очень удобно: жена и ребенок в соседних комнатах. Поэтому так и «забил» на эту идею, записав ее в бэклог идей своего «Ноушена». Затем, больше чем через год, во время каких-то размышлений, занимая пальцы, катал по столу свою модельку машинки «ДеЛориан» из фильма «Назад в будущее». И тут мне в голову пришла цитата из этого фильма.
Марти: «Ты говоришь мне, что создал машину времени… из ”ДеЛориана”?»
Док Браун: «Ну я как подумал: если создавать машину времени из автомобиля, то почему бы не сделать это со стилем?»
Так появилась идея: почему бы не сделать джойстик… из «ДеЛориана». Вспомнил про свою задумку с игрой, на которую надо орать, и понял, что смогу спокойно тестить прототип, катая машинку по столу возле телефона. В итоге сделал «демку», в которой происходит калибровка уровня шума и реализовано простенькое управление: средний шум — персонаж идет, громкий шум — персонаж прыгает. Записал видео с демонстрацией прототипа — всем понравилось. Кстати, его же добавили в статью о самых вдохновляющих прототипах.
В мини-игре пользователь управляет персонажем-магом, изменяя уровень шума возле телефона: средний шум — персонаж идет, громкий шум — прыгает
На этом реализация прототипа остановилась. Заняться дальнейшей разработкой игры и добавить уровни пока не было времени. Но думаю, тут можно много чего придумать. Например, чтобы один из уровней можно было пройти, напевая какую-нибудь песню.
Такие кликабельные прототипы мы делаем не только для развлечений, но и для наших клиентов. С помощью прототипов можно протестировать бизнес-идею без больших затрат. А еще продемонстрировать продукт инвесторам или просто поэкспериментировать с дизайном приложения.