Графика для игры Magic Shoes команды NAOTeamFull

Графика для игры Magic Shoes команды NAOTeamFull

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

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

Мы почти сразу решили взять какую-то простую стилистику для графики, я ориентировался на стиль игр Playgendary, так как он относительно простой в реализации, да и просто давно хотел сделать что-то похожее. Собрав немного рефов из похожих игр и прочей графики, я начал рисовать, начав с набора тайлов для сборки уровней. Для красоты я решил сделать закруглённые углы и края, что, возможно, было ошибкой, учитывая сроки. В первый раз я решил сделать стыковки между тайлами «пола» и «стены», но ещё когда я не проработал все варианты, тайлов уже было больше 40 штук: всё из-за теней и объема стен, ведь из-за них на тайлах пола могли попадаться куски тени, скругления внутренних углов, и всего этого по несколько вариантов.

Пропорционально, но вариантов стыковки, кажется, было бесконечно много​
Пропорционально, но вариантов стыковки, кажется, было бесконечно много​

Тогда я решил оставить пол в покое и все стыки уместить внутри тайлов стен. Пришлось переделывать буквально каждый тайл, но задача уже ощущалась более выполнимой. Я сделал 36 тайлов, скинул их программисту, но пока собирал ему примеры стен разной формы, понял, что не хватает ещё нескольких тайлов. Добавил ещё три тайла, обновил тайлсет, перепроверил, всего стало хватать.

​Вторая версия, горизонтальные линии толщиной в один тайл стали тонкими, а вертикальные — наоборот, толстые, но можно считать, что это из-за изометрии.
​Вторая версия, горизонтальные линии толщиной в один тайл стали тонкими, а вертикальные — наоборот, толстые, но можно считать, что это из-за изометрии.

Изначально планировалось, что на уровне появятся всякие декоративные объекты, деревья, листочки, камни, но после базового тайлсета я занялся персонажами и тайлы отложил (спойлер: к этому мы уже не вернулись).

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

Графика для игры Magic Shoes команды NAOTeamFull

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

​Так родился первый персонаж игры

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

После первого персонажа я занялся некоторыми деталями интерфейса и мелкими фиксами графики, а потом решил заняться главным героем. Сначала я хотел сделать ему совсем другую форму тела, отличающую его от врага, но в итоге такая комплекция показалась мне самой удачной. Одной из особенностей главного героя я решил сделать ботинки: по моей задумке, именно они оставляют след на клетках позади героя (оттуда потом и родилось название игры).

​
​Idle-анимация главного героя

Анимации передвижения были сделаны примерно так же, как у противника. Я хотел было сделать анимацию бега влево зеркальным разворотом root-кости в Spine, но тогда между анимациями не было бы аккуратной интерполяции — плавного перехода между ними — и при переключении направления персонажа бы плющило, так что анимацию бега в стороны всё-таки собирал два раза.

Основной частью графики для проекта занимался я, но потом подключились другие художники, до этого занимавшиеся сольными проектами для хакатона: Hiyorin и Severleet. Они дорабатывали UI, а также двух других персонажей. Так как внятных гайдлайнов по стилю/форме и референсов я не дал, их графику пришлось немного подгонять под первых двух персонажей и под использование в Spine. Например, хвост у призрака я «выпрямил», чтобы потом можно было гнуть его в любую сторону.

Графика для игры Magic Shoes команды NAOTeamFull

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

Последним обработанным персонажем стал бомбометатель. К счастью, у него не было анимаций передвижения, поэтому сделан он был быстро (когда времени до конца оставалось совсем немного).

Графика для игры Magic Shoes команды NAOTeamFull

На этом персонаже я уже не стал раскладывать все части тела на отдельные изображения и просто обошелся подробной сеткой. Для дыма использовал анимацию из давно хранящегося в моих файлах пака 2D-эффектов, который использовался во многих предыдущих проектах. Пока делал сетки на персонажей в таком низком разрешении, чувствовал себя разработчиком под что-то уровня PS1 (только с куда более крутым ПО, полагаю).

Среди прочих анимаций: свечение тайла позади главного героя и палец-туториал по управлению.

Персонажи в HD​
Персонажи в HD​

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

Графика для игры Magic Shoes команды NAOTeamFull

Команда планирует опубликовать заметку о разработке этой игры с точки зрения программирования, а я за себя могу сказать, что это был крутой опыт. Отдельно как художник я принять участие просто не успевал, так как занимался не просто иллюстрациями, но, как говорится, «не очень-то и хотелось», интереснее было поработать в команде, тем более она попалась крутая. Хотелось бы, конечно, доделать эту игру, нормально встроить дополнительные анимации и эффекты, но в любом случае даже опыт работы в таком стиле и в таком режиме будет полезным. До этого я всего раз пытался участвовать в геймджеме, но тогда я не выложился как следовало (к счастью, тогда я был не основным художником). Спасибо DTF и Playgendary за это мероприятие, надеюсь, что оно не последнее.

1919
7 комментариев

Ух сочно, четко, теперь в серьез начал подумывать таки купить этот чертов спайн, а то эти юнити кости совсем не то =\

Очень советую! Я до этого собирал в Animate (Flash), и в Unity просто рай после него. Каждая кнопка с пояснением, при этом всё очень интуитивно.

1

Мне нравится,хорошо сделал

Отличная графика получилась. 👍😇

ГГ из за моноброви своей выглядит злым=((

Он сначала ещё злее вышел, потом я чуток поднял брови. Стоило поискать баланс их цвета/размера/положения, конечно, но на тот момент важнее было в принципе сделать персонажа. Если бы допиливали дальше, то и над контрастом с игровым полем поработали бы, и много ещё над чем.