Создание графики для градостроительной стратегии

Доброго времени суток, господа и дамы!

Меня зовут Давид, я основатель и арт-директор студии El'ton Digital. Мы рисуем графику для игр на аутсорсе.

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

Началось с того, что я вышел на контакт с ребятами из D&D GAMES. Если интересно чем занимаются парни, велком к ним на страничку.

В данном случае у них был заказ на разработку мобильной игры. Проект называется Fronterra, это градостроительный симулятор, в котором игроку предлагается построить свое маленькое королевство на необитаемом острове. И вот разработчикам потребовался подрядчик для создания графики. Набирать фрилансеров-одиночек неудобно с организационной точки зрения. За всеми нужно следить: кто что делает и на каком этапе, нет ли ни у кого технических ошибок и совпадает ли у всех общая стилистика проекта. Я же могу сразу организовать команду, внутри которой будет вся необходимая организация, коммуникация и артдирекшн. А решать все вопросы можно через меня одного.

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

· 26 спрайтов домиков

· Игровая карта, огромная и детально проработанная

· Набор объектов для ландшафта, неопределенного количества – столько, сколько потребуется для того, чтобы выглядело красиво.

Технически, команда из нескольких человек сможет отрисовать этот объем за поставленный срок, но ведь необходимо не просто нарисовать, но, прежде всего, сделать и утвердить с заказчиком концепты. К сожалению, многие заказчики, по неопытности не совсем правильно представляют процесс продакшна графики. Им кажется, что условный домик можно взять и нарисовать за день, а значит 26 домиков – это как раз месяц работы. На самом деле, все начинается с эскизов, которые могут пройти несколько итераций. И тут многое зависит от самого заказчика: от того насколько четко и ясно было составлено техническое задание (чтобы художник без труда уловил замысел), насколько оперативно осуществляется обратная связь во время различных согласований, ну и в целом, на сколько заказчик привередлив (надеюсь, это не обидное слово?).

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

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

Как я уже писал, театр начинается с гардероба, сериал «Ведьмак» с разочарования, а любой арт – с эскиза!

Ребята из D&D GAMES дали нам список всех необходимых построек, по сути, просто перечень названий с кратким описанием в одно предложение. Описания были вполне красноречивые, сеттинг был ясен (фэнтези с элементами стимпанка), стилистические референсы предоставлены (в том числе из нашего же прошлого проекта). Поэтому проблем с концептами не возникло. Утверждалось все как по маслу!

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

Из технических моментов, хочется напомнить юным художникам и художниковшам, что рисуя изометрию, важно всегда сверяться с сеткой. Причем даже на стадии эскиза. Чтобы как можно раньше у вас и у вашего заказчика было четкое понимание, как будет выглядеть объект. Нюанс в том, что изометрия, хоть и кажется похожей на обычную перспективу, на деле сильно от нее отличается: некоторые детали объекта, которые в перспективе были бы с крыты, в изометрии видны, другие выглядят совсем по другому, короче, нюансов хватает. И, кстати говоря, изометрия изометрии рознь. Сетки бывают разные, а общего у них только то, что линии идут параллельно друг к другу, но вот степень «раскрытия» ракурса разный. Этот момент обязательно нужно согласовать с заказчиком перед началом работы. Обычно я просто напрямую прошу у заказчика сетку и мы работаем по ней. Так проще и не будет путаницы.

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

Теперь пару слов о стилистике. В данном случае мы имеем дело с казуалкой. Это значит, что все объекты и детали объектов должны быть крупными, выразительными и яркими. Вот небольшой, но важный лайфхак – любая деталь должна иметь не только очертания, но и толщину. То есть она должна быть объемной и это должно быть хорошо видно. При таком подходе количество деталей снизится, но повысится выразительность картинки. В работах неопытных художников я часто вижу, что у казуальных домиков «нарисованы» окна, черепица, доски и тд. То есть они решены просто линиями и цветом, и остаются плоскими. Так нельзя делать, каждый объект должен быть четко обозначен и иметь объем.

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

Говоря об игровой карте, у наших заказчиков было общее представление о том, что должно получится в результате, но не было понимания, того как это должно быть реализовано. Карта планировалась очень большая (ее итоговый размер приблизительно 8500х4500 пикселей), и поначалу мы думали, что нам достаточно будет сделать конструктор из бесшовных тайлов для нескольких типов местности – воды, земли, берега, гор. А заказчики уже сами собрали бы из этого то, что им нужно. Но легко делать тайлы, если они прямоугольные, а вот если это изометрический ромб – вылезают проблемы. Например, они обязательно криво режутся и потом не стыкуются друг с другом. А еще границы разных типов местности могут выглядеть некрасиво, да и вообще полностью тайловая карта выглядит довольно искусственно, ей не хватает чуточку рукотворной живописности. Возможно, мы бы решили все эти проблемы, если бы у нас было больше времени. А его не было.

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

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

В этом разделе поучительная история будет следующая: Исходным материалом для создания карты послужила грубая схема заказчиков, в виде поля поделенного на квадратики разного цвета, показывающие, где будет вода, земля, горы, а так же зона для строительства домиков. Изучив схему, мы заметили несколько проблемных участков. Например, в паре мест горы, из-за того, что они имеют определенную высоту, перекрывали стоящие позади них клетки, предназначенные для застройки. Мы подредактировали схему карты, лишив ее таких вот «багов» и согласовали ее с заказчиками. А вот если бы мы бездумно нарисовали все как есть, то косяк карты всплыл бы на поздних этапах, а то и вообще при сборе билда игры. Переделывать пришлось бы все равно, но теперь на это ушло бы много времени и сил. В минусе оказались бы и мы и заказчики.

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

Итак, карта готова, мы разделили ее на несколько слоев – воду, сушу и горы. Теперь эту карту нужно чем-то заполнить.

Речь идет о всевозможных деревьях, ёлочках, камнях, кустиках и других элементов для карты. Здесь у парней из D&D не было конкретного ТЗ с контент-планом. Они знали, что нужны будут мостики через реку, еще им хотелось видеть руины. А в остальном они доверились нам.

Мы начали рассуждать. Карта довольно большая и на ней присутствуют различные биомы: открытые равнины, леса, горные местности, прибрежные зоны. При этом те же леса могут быть как лиственные, так и хвойные, а берег может быть морской или речной. Для каждой биомы должен быть предусмотрен свой набор объектов. И их должно быть не мало. По опыту мы уже знаем, что слишком уж сильно копипастить одни и те же ёлочки нельзя – это палится. Особенно когда пространства такие обширные. Значит, на каждый тип объектов должно быть довольно много похожих, но все-таки разных спрайтов. Но между желаниями и реальностью есть некоторые барьеры, например, временные или финансовые (да-да, никогда не забывайте про деньги, друзья мои). Это значит, что рисовать бесконечное количество уникальных объектов нецелесообразно. И снова мы обращаемся к компромиссным решениям (без которых в суровой игровой-индустрии никуда). Мы нарисовали ограниченное число по-настоящему уникальных объектов, а затем на их основе сделали множество других, похожих, но все же разных. Для этих целей все средства хороши – изменение размеров и пропорций, отображение слева направо, изменение цвета и так далее, словом, все, на что способен ваш фотошоп.

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

Итого, общее количество объектов для карты получилось 83 спрайта. Много, но благодаря чудодейственным методам размножения однотипных объектов, ушло на это не больше недели (считая этап эскизов). Но одно дело подготовить сет объектов, а другое дело — расставить их на карте. Да, иногда это берут на себя заказчики, но в данном случае это входило в нашу обязанность. Проблемы здесь были только в техническом плане. А именно, компьютер, хоть и обладающий весьма неслабым железом, люто страдал под гнетом сотен и сотен слоев фотошопа. И не забываем, что все это на огромной карте. Работать с таким монструозным документом то еще удовольствие, могу сказать это с уверенностью, потому как я же этим и занимался. В конечном итоге многие объекты были слиты и все же пришлось оставить довольно много отдельных слоев по просьбе заказчиков, да и чисто по техническим причинам (чтобы домики потом вставали как надо) В остальном это весьма творческий процесс, поэтому и подойти к нему нужно с фантазией и пониманием дела. Например, по берегам рек у нас расставлены ивы и камыши, леса разделены на широколиственные, смешанные и хвойные, а есть даже отдельная дубовая роща, в горах растут могучие секвойи, а на равнинах кустарники, луговые цветы и одиночные деревья. Эх, аж в деревню захотелось…

Если все идет слишком гладко, значит что-то тут не так. И вот, когда до дедлайна оставалось три недели (а желательно было уложиться в две), ребята из D&D сообщили, что им таки нужен GUI – система интерфейсов, и они хотят чтобы этим занялись именно мы. Я планировал отказаться, потому что, по правде говоря, не верил, что можно уложиться в сроки. Конечно, контента предлагалось сделать не то чтобы очень много, все таки мы делаем демо игры с ограниченным функционалом, но, тем не менее, это большой блок работы. Я чувствовал ответственность за результат в случае неудачи, но, в конце концов, именно чувство ответственности побудило меня согласиться. Ведь заказчики, не факт, что успеют вовремя найти другого исполнителя (хотя слово «вовремя» уже и тогда было неуместно). А если найдут, то не факт, что сработаются, не факт, что исполнитель справится с задачей и не завалит сроков, не факт, что он выдержит нужную стилистику и еще много чего «не факт». А у нас было больше шансов сделать все как нужно, и поэтому я взялся. Пришлось немного покранчить.

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

Когда речь идет о таком большом и комплексном проекте, как этот, всегда необходимо иметь резерв времени. Когда все элементы (домики, карта, объекты, интерфейсы) отдельно были готовы, пришло время собирать это все в единое целое. То есть делать мокапы. Для того чтобы убедиться что визуалка работает.

Вот что я понимаю под этой фразой:

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

Чтобы эта задача была решена, картинка игры должна быть как бы многослойной (визуально), и слои эти должны легко считываться. Различие слоев должно быть в уровне контрастности и иногда детализации. Но главное контрастность! Мы сами этого не замечаем, но, глядя на что-то, в первую очередь различаем тон, а не, скажем, цвет. Поэтому именно тоновые отношения в картинке должны работать слаженно.

В рассматриваемой игре визуальные «слои» следующие:

1. Фон. Самый бледный. Он не имеет никакой интерактивности и несет не так уж много информации. Вода, земля, горы входят в этот список.

2. Элементы ландшафта. Чуть ярче. Они более выражены, потому что задают тон картинке и потому что имеют частичную интерактивность (небольшая гемплейная особенность).

3. Постройки. Довольно яркие. Это основные внутриигровые элементы, с которыми взаимодействует игрок. Они нажимаются, строятся, апгрейдятся и тд.

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

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

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

И вот, мы, наконец, превозмогли. С честью и достоинством сдали все исходники, но надо же, и тут работа еще не закончилась! И нет, речь идет не о правках, это дело мы, хвала богам, вовремя согласовали. Просто надо понимать, что для любой игры требуется немало сопутствующего контента. А именно: рекламные баннеры, иконки разных размеров, промо-скриншоты, а нашем случае, даже микросайт для терминала с парой кнопочек и QR-кодом. Это, конечно, кажется мелочью, но для продакшна и маркетинга игры вещи немаловажные. Не стоит это недооценивать.

Ну что ж, история подошла к концу, надеюсь она была для вас интересна, полезна, а, быть может и поучительна. Для нас это был отличный опыт, спасибо парням из D&D за доверие. На сегодняшний день игра уже выложена на Google Play, насколько я понимаю пока в тестовом режиме, но уже каждый может скачать, пощупать. Напоминаю, игра называется Fronterra.

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

D&D GAMES

Fronterra

El'ton Digital

Развернутая презентация проекта у нас на Behance

#long #опыт