Никогда не делай pixel art игру в изометрии. Mini Painter Devlog #1

У тебя перед глазами первая часть девлога, посвященного пиксельной изометрической idle игре про ноулайфера который красит миниатюры - Mini Painter.

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

Mini Painter - Уютная изометрическая игра на рабочем столе

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

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

                               АКТ 1. “Отсутствие перспектив”

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

Автор: Arthur Vista

Звучит отлично? Да…Но рисовать ты будешь в два или три раза больше, чем во всех иных стандартных видах визуализации. Три грани любого объекта - это много. В нашем случае, когда проект должен был разрабатываться в короткие сроки, это оказалось критичным. Но это все еще мелочи...

Тут я собрал доску с пачкой туториалов по изометрии. Если интересно залетай. 

Тык на доску в pinterest

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

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

Но теперь я тебе покажу то, как создается обычный круг. 

Глаза налились кровью? У меня да. 

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

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

Для обычного человека это может выглядеть хорошо, но это не так.

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

А теперь о полезном. Эта статья очень крутая, низкий поклон автору. Тут вы узнаете все о построении объектов в изометрии и быстро вкатитесь в эту историю.

Тык на крутую статью

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

                            АКТ 2. “Иди на… все 8 сторон”

Если статика тебя не спугнула, поздравляю, ты на пути к званию топового изометриста. 

На самом деле, огромная проблема для игрового проекта в пиксель арте - анимации. А в изометрии, когда ты делаешь не пошаговую Into the Breach, а игру про жизнь персонажа внутри комнаты, анимации становятся катастрофой. 

Это не камень в огород Into the Breach, игра крутая и контента там много. Но для одного маленького меня 8 направлений ходьбы, айдла и других действий это перебор. Да, дублируется часть из них и остается 5, но тем не менее. 

 А теперь тебе нужно все это анимировать. Круто, правда? 

Выхода из этой проблемы нет. Будьте готовы делать много…очень много анимаций, либо ограничивайте своего геймдизайнера. 

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

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

Проблема - персонаж может взаимодействовать с объектами внутри сцены. При этом часть его тела может находиться ПОД объектом, а часть НАД объектом.

Пример - персонаж берет со стола объект. Его нижняя часть туловища под столом. Его руки находятся в плоскости стола, над столом и трогают что-то стоящее на столе.

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

Решение - работа со слоями внутри движка. Это очевидно и понятно. Но…

Вам нужно подготовить куски вашего персонажа и иметь их отдельные анимации. Тело отдельно, руки, которые будут находиться выше интерактивных объектов, отдельно. Если он берет какой-то объект, то “снапить” его к руке, и этот объект тоже должен находится на отдельном уровне слоя. Это заметная работа с “Order in Layer” (если вы на Unity) и с самой настройкой “куклы персонажа”, где часть конечностей отделена от тела. Хорошо, что это работа касается зачастую программиста. Но это процесс и он может занять время.

То как в идеале должен быть разрезан наш персонаж. 

Постараюсь более конкретно описать.

В идеальном мире нужно разделить все важные или проблемные части персонажа. Для каждой такой части создается отдельная анимация. Весь этот бутерброд собирается уже в вашем движке и делится на слои или уровни внутри него. В нашем случае мы могли настроить для тела, рук, объектов свой Order in Layer в Unity. Или даже создать отдельные Sorting Layer.

Если вы пользуетесь Unity, поймете о чем я.

Нам надо было быстро и мы обосра…простите, приняли тупое решение. Ты, как художник, можешь просто “запекать” объекты с которыми взаимодействует персонаж в саму анимацию. Если персонаж трогает миниатюру на столе, то вот прям все и засовывай в анимацию. 

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

Грустно. У тебя будет куча работы, пайплайн ужасный, но, если честно, это ускоряет процессы если вы готовы работать 24 часа в сутки. А я порой был готов, о чем горько жалею плача в душе.

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

                                   АКТ 3. “Ты заперт в кубе”

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

Если вы помните предыдущие проблемы: 

То быстро поймете, что мы были загнаны в угол. Кастомизация персонажа - отменяем. Уйдет много времени на анимации, что 100% невозможно окупить. 

Свободная кастомизация квартиры - отменяем. Тут нам важно понимать и знать, что будет делать персонаж с объектами, и контролировать их местоположение. Дать возможность игроку поставить кресло в любую точку комнаты - не наш вариант. Конечно, у игрока есть возможность покупать разные предметы и улучшать их. Телевизоры, игровые приставки, постеры, коврики, даже кота можно завести.

Окно покупок в нашей игре. 

Но проблема прошлых актов сохраняется, на примере кресла я расскажу как это работает. 

Отлично, у персонажа есть телевизор и пока он сидит на полу и смотрит сериал. Ты хочешь порадовать своего ноулайфера удобным креслом и просто покупаешь его, но знай это литры пролитых слез художника.  Шутка, но смотрите. Персонаж садится на кресло и его тело находится за креслом. Отлично, можно не париться со слоями, все просто! Но нет, в идеальном мире мы держим руки на подлокотниках, удобно сидим, наслаждаемся процессом. Удобство нужно передать в игре. И вот у тебя рука с пультом уже лежит на подлокотнике, а персонаж ловко переключает каналы. Это значит, что мы делаем отдельную анимацию для каждого кресла, которое есть в игре. Сколько кресел столько и анимации. Долго и муторно. Ошибка предпродакшена и пайплайна, старайтесь избегать таких ошибок.

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

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

Растягивается объект не в изометрическом формате, что далеко от идеала. 

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

            Финал. “Нормально делай, нормально будет”

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

И немного о проекте. Совсем недавно мы опубликовали страницу игры в Steam. Теперь собираем вишлисты и потихоньку рассказываем о нашем проекте. Будем рады вашему вниманию. 

Спасибо за потраченное время. Играйте в хорошие игры.