Фоны старых квестов — методы разработки, секреты, советы / мопед не мой :: habr :: длиннопост :: Pixel Art (Пиксель Арт, Пиксель-Арт) :: Weilard

Фоны старых квестов — методы разработки, секреты, советы

Сегодня мы исследуем вопрос разработки фонов «как в старых адвенчурах». Это не совсем то, чего вы от меня ожидали. Однако, очередная часть «Галопа Пикселя» задерживается по двум серьезным причинам. Во-первых, главы посвященные анимации требуют — качественной анимации, иначе они не смогут претендовать на лавры материала обучающего. Во-вторых, «галопу» необходима ещё одна публикация до начала цикла об анимации, который уже находится в разработке. Связано это с тем, что я занимаюсь не только классическим пиксель-артом, но и тем, что выходит за пределы канонических разрешений, и у меня, определенно, есть чем поделиться. К сожалению, такой тип пиксель-арта сейчас более моден, чем классика, если судить по откликам публики.

Давайте, впрочем, вернемся к теме сегодняшней публикации. Считаю это маленьким открытием, и мне непременно нужно поделиться им с теми, кто собирается соединить некоторый отрезок своей жизни с тем, что может называться классической адвенчурой. Быть может это поможет вернуть на рынок игры, которые немного оттеснят «хипстерский пиксель» заменив его на то, что может напомнить времена лучших игр от «Westwood Studios», «Sierra» и «Lucas Arts». Предположу вскользь, что множество художников и так знают это. И, тем не менее — я не заметил публикаций на эту тему. Наша братия не спешит делиться своими секретами, сохраняя некую монополию на собственные открытия.

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

Прелюдия

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

Поскольку я не одобряю мимолетные связи, мой взор всё чаще устремляется назад в прошлое. И чем дальше я двигаюсь по реке времени, тем слаще и притягательней для меня становится то, что я называю классикой. Классика в моём понимании – игры до того момента когда весь мир перешел на режим SVGA, отчалив и навеки покинув обитель разрешения меньшего — VGA. Чаще всего игры того времени использовали разрешение 320х200 пикселей.

Меня всегда занимал вопрос – как именно делались эти фоны. В качестве примера я приведу изображения из игр «Westwood Studios». Это мой фаворит. Контора, повлиявшая на мое творчество настолько сильно, что я решил делать игры именно в этом стиле. Художники которой определили вид и цвета моих работ на десятки лет вперед. Я часто слышал об этих фонах – «какой изумительный пиксель-арт».

Давайте сразу перейдем к кульминации не характерной для моих публикаций. Я не уверен, что это чистый пиксель-арт. К этому выводу я пришел два месяца назад. Пришел окончательно. Сформировал объяснение. Выработал сходную технику. Сейчас я представлю вам свои наработки, а вы определите для себя, прав я или нет. Хочу сразу отметить, что это относится только к фонам. Вне сомнения интерфейс игр, оформление, шрифты, игровые персонажи и их анимация – это стопроцентный пиксель-арт, не разбавленный и хорошей крепости. Здесь у меня сомнений нет. И даже если я ошибаюсь в своей теории, это никак не помешает вам делать фоны похожие на фоны старых игр.

В качестве точки опоры мы возьмем несколько изображений из легендарных игр «Legend of Kyrandia» и «Lands of Lore». Я считаю их пиковыми на тот момент, с точки зрения проработки арта, с точки зрения анимации и цвета. Не говоря уже о техническом исполнении.



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

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

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

Путь

Давайте быстро проанализируем то, чем характерен пиксель-арт и чем характерны изображения старых игр. Во-первых – лимитированная палитра, редко выходившая за 256 цветов в один момент времени на экране. Во-вторых – резкие формы с фактически ручным сглаживанием в несколько пикселей по контурам этих резких форм. В-третьих, разрешение 320х200. Как нам получить нечто подобное?

Первое что приходит на ум – уменьшить изображение. Давайте проведем эксперимент. Возьмем одну из моих ранних работ. И уменьшим её.



Автоматическое сглаживание и фильтрация сохраняют картинку максимально приближенной к исходнику. Но это не сильно напоминает графику старых игр (уменьшенные изображения выведены с увеличением 2x чтобы вы могли видеть результаты более наглядно).



Теперь пробуем сохранить изображение в индексированной палитре посредством сохранения изображений для сети (Save as Web). Сколько бы мы не выбирали цвета – это не дает нам необходимого изображения, хотя оно и похоже на нечто старое. Весьма отдаленно, надо отметить. Даже если сохранить Джима в 32-ух цветах, он никак не напоминает пиксель-арт.



Существует режим фильтрации – без сглаживания. Иначе Nearest Neighbor (preserve hard edges). То есть изображение сохраняется максимально близким к оригиналу. Без сглаживания, без адаптации изображения. Без какой-либо фильтрации.



Примечание: Это ваша дверь в мир старого. Не то чтобы она сразу доведет куда нужно, но без неё точно не обойтись. Никак.


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



Парадоксальность ситуации заключается в том, что если вы получаете пиксель-арт из изображения или подготовленного вами арта – вы негодяй и жулик. Но если вы сделаете тоже самое в стиле «pixel by pixel» то вы будете молодцом и хорошим парнем, который намучался порядочно, но смог сделать такую-же работу, маниакально выставляя пиксель за пикселем на виртуальный холст. Разумеется преобразованное таким образом изображение ещё не пиксель-арт, любой артист работает аккуратнее делая всё руками. И тем не менее… допустим вы разработчик игр. У вас жмут сроки, и вам нужно выпустить продукт через месяц. Есть кто-то кто полагает, что ваши крики «зато я сделал всё честно» будут волновать окружающую вас публику? Волновать вашего потребителя? Ему и дела нет, как и что вы делаете. Зато он легко скушает вас с селёдочкой под водочку, и даже не поперхнётся если вы сваляете дурака, и задержите релиз.

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

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

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

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

Это был довольно длительный этап, который долго не приводил к нужным результатам. Раз за разом. Последний год я стал усиленно рисовать. Попробовал разные стили и стал постепенно склоняться к классической схеме рисования концептов и графики. Без использования 3D, без каких-либо финтов и хитростей. Как и в случае пиксель-арта я опустился на самое дно, к истокам. И предположил, что будет неплохо научиться рисовать одной единственной кистью, делая это так, чтобы это напоминало традиционную живопись.

Традиционный мазковый подход привел меня к следующим изображениям. Сохранение их по указанному выше способу приводило к следующим результатам.



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



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


Примечание к рисунку: Интеграция и сравнение фонов будет проведена чуть ниже, сразу после окончания презентации работ по персонажам (похожим на персонажей игры «Lands of Lore»)

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

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



Его я рисовал намеренно склоняясь к той палитре, которой характерны многие изображения квестов от «Westwood Studios». Мягкие градиенты на коже, четкое и холодное контровое освещение c аккуратными штрихами, там где это необходимо (волосы, акценты на глазах). То есть даже в исходнике Саймон уже напоминает одного из героев «Lands of Lore». Финальный аккорд – уменьшение.



Затем небольшая партия выполненная ансамблем индексированной палитры.



Будучи соединенным с классическим пиксель-артом в тех местах, где к этой несуществующей игре добавляется интерфейс мы имеем полную иллюзия графического контента старых игр. Если бы «Westwood Studios» делали бы игру по нашему любимому «Светлячку» тогда, то скорей всего она выглядела бы примерно так. Но мы должны убедиться, что всё так, а не иначе, не так ли?

Давайте интегрируем наши изображения в интерфейс и оформление игр «Westwood Studios» — «Legend of Kyrandia» и «Lands of Lore».



Слева представлен десатурированный вариант (обесцвеченный), а справа с яркой приветливой гаммой. Также Саймон уменьшен и помещен в то место, где ранее находилась иконка Конрада (персонаж игры «Lands of Lore»). Вполне очевидно, что такой арт мог бы быть в игре, и что он выглядит довольно гармонично. В принципе, можно было бы сохранить его в существенно меньшей палитре по цветам, а затем немного поработать кисточкой, чтобы арт был совершенно похож на арт художников из Вествуд. Очередь за фоном.



Точно также — уменьшаем изображение в соответствующем режиме, и сохраняем в индексированной палитре. Верхний вариант слишком пастельный, поэтому имеет смысл подбавить яркости цветов, и можно видеть, что Брендон (персонаж игры «Legend of Kyrandia») вполне мог бы бродить и по такому миру. То есть картинка не выглядит чем-то инородным.

Финал

Из всего вышесказанного можно сделать вывод, что изначально фоны художников «Westwood Studios» были классической живописью. Затем оцифрованной и сохраненной в той палитре, которую использовала игра. После этого добавлялся интерфейс, персонажи и другие элементы. Анимация также делалась на базе этих работ. Она не содержала множество кадров, но была крайне детально проработана. Как? Теперь мы знаем.

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

• Уменьшать изображения до размера старых разрешений (320х200)
• Уменьшение изображение производить в соответствующем режиме.
• Сохранять изображение в индексированной палитре, имитируя ограничения тех лет.
• Готовить исходное изображение в определенной стилистике.

Удивительно то, что занятия пиксель-артом стимулировали меня на занятия классическим рисунком. Можно сказать, что во многих случаях именно пиксель-арт подсказал мне как лучше рисовать в большом разрешении. И это не единственное из моих маленьких открытий. Похожая статья пойдет следом. Где мы научимся готовить графику как в «Fallout». Не современном, разумеется. А в том самом. Старом.

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

Переводим дух

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

К чему я это? У вас могло сложиться впечатление, что всё вышесказанное и показанное сложно. Отнюдь. Для человека, который ещё только начинает путь – да. Но для того, кто рисует – нет. Каждый из таких фонов может создаваться за один рабочий день (тех о которых я писал выше). Восьмичасовой. Это будет не самый честный вид пиксель-арта, но это – рабочий день. Это важно. Две работы ниже, совсем другое дело…




Пиксель-арт производимый с нуля занимает существенно больше времени. Эти две работы создавались, примерно, по 16-20 часов каждая, могли бы занять и больше, если бы не было соответствующего опыта. Безусловно, они срубили свои овации на соответствующих ресурсах. Но это именно «мой пиксель больше», а не что-либо ещё. Публичное доказательство – «я умею». Смею напомнить, что подобные амбиции и размахивание квадратиками не имеет ничего общего с разработкой контента для игр.

Приведу аналогию. Рыцарский турнир. На нём рыцари сражаются между собой, а где-то сверху сидит знатная дама, и, в общем и целом, победившему рыцарю может что-то обломится. Если он будет вести себя некрасиво, то скорей всего его бой не придется по душе ни даме, ни публике вокруг. Стало быть надо проявить себя во всей красе, показать все красивые приёмы, что вы умеете делать, как-то картинно упасть, снова вскочить, нанести пару эффектных ударов, парировать удары противника… словом – устроить прекрасный спектакль.

Работка игр это не бой на потеху публике и не рыцарский турнир. Это побоище. Битва. И ваша задача – выжить в этой битве. Когда вам нужно выживать, уж поверьте, вам не до красивых ударов. Вы сделаете всё, что угодно, чтобы вернуться домой. Ваше «возвращение» есть игра, ушедшая в печать. Никто не увидит ваших страданий, вашего пота и крови пролитой в сражении с ней. Все увидят лишь финальный результат.