Данный текст в первую очередь ориентирован на художников, которые только начинают работать с Match-3 объектами, тем не менее и погруженные в Match-3 специалисты, наверняка, тоже смогут подчеркнуть для себя что-то полезное.
Речь пойдет про подход именно к созданию “фишек”. Для наглядности мы рассмотрим несколько принципиально разных техник, которые были использованы при отрисовке арта для проекта Bewitching Forest от студии Pictolabra. Тем же, кто еще не знаком с теорией (поверьте, не все так просто с этими “фишками”), очень рекомендую старинную, но не потерявшую актуальность, статью от законодателя мод в мире Match-3 - https://render.ru/ru/playrix/post/1337
Первое! Выбор объектов для фишек
Художник!!! Ни в коем случае не позволяй выбирать объекты, которые ты будешь рисовать без твоего участия. Ни продюсер, ни геймдизайнер, ни кто-либо еще не сможет представить в голове как в финале будет выглядеть готовый объект, а ты можешь.
У Match-3 фишек есть жесткие ограничения:
они должны помещаться в квадрат, в свою ячейку на поле;
они должны быть разных цветов, которые им подходят и не выглядят странно;
они должны быть максимально простыми, без мелких деталей;
они должны соответствовать сеттингу игры;
Поэтому стоит ограничивать полет фантазии не рисующих коллег, которые без конца предлагают странные варианты длинных и узких объектов, которые ты просто не сможешь перевоплотить в округлую, пухлую фишечку.
Процесс выбора объектов для фишек долгий и муторный. Наш сеттинг про домик в сказочном лесу, окруженный садом и грядками, диктовал нам фруктово-ягодно-лесную тематику. В итоге, после долгих экспериментов, мы выбрали достаточно банальный, но очень привычный для пользователя набор базовых элементов. Яблочки, цветочки и листочки присутствуют чуть ли не в каждом втором Match-3 проекте и соответствуют примерно тем же цветам.
Выбор цветов для базовых элементом мы опустим, в Match-3 играх цветовая схема плюс/минус везде одинаковая, и перейдем к самому интересному и, надеюсь, полезному - к созданию фишек.
Ура! Наконец то начинаем “рисовать”
Рисовать именно в кавычках, потому что создание фишек больше похоже на смесь моделинга, рендера, дизайна и только в последнюю очередь классического 2D рисунка, по крайней мере в нашем исполнении.
Рассмотрим три подхода к созданию фишек:
2D (листочек)
3D (ракета)
2D+3D (бомба)
Но перед этим еще немного занудной информации. Каждая фишка у нас будет “смарт объектом”, встроенным в общий псд файл. Это обязательно и необходимо нам по нескольким причинам:
исходный файл, в котором мы создаем изображение фишки, очевидно, должен быть больше (все просто, рисуем в разрешении 1000 на 1000 пикселей, а затем уменьшаем до 100 на 100 пикселей и получаем четкое изображение без артефактов и следов от кисти);
в процессе создания фишки или в процессе подгонки фишек друг к другу по цвету, тону, размеру, нам необходимо оценивать в режиме реального времени, как то или иное изменение смотрится на фоне общей картины;
В итоге workspace выглядит примерно так:
Слева — псд, хранящий в себе смарт объекты фишек, справа — открытый смарт. Внося правки в исходник листочка, или какой-либо другой фишки, мы сразу видим как повлияло то или иное изменение на финальное изображение.
2D листочек
Обычно для упрощения процесса и его ускорения мы используем связку 3D и 2D, делаем так называемые “3D болванки”, рендерим и потом красим. Это эффективный метод и его мы опишем чуть ниже. В случае с листочком, создавать 3D модель бессмысленно. Экономии времени не будет, скорее наоборот. У листочка много прожилок, рифленые края, в довершении ко всему он еще и плоский. Поэтому в нашем случае мы идем в Фотошоп и используем замечательные инструменты группы «Перо». По сути это инструментарий для создания векторных изображений в Фотошопе.
Конечно, можно пойти по привычному для художника пути и использовать старую добрую кисть, но как бы ни была крепка рука, получить гладенькую, чистенькую фишку будет очень сложно. Кроме того, придется приложить значительно больше усилий. Плюс вектор хорош еще и тем, что править контур для получения идеального результата можно легко и просто, сколько душе угодно.
Шаг первый - контур
На этом этапе ничего сложного. По заранее подготовленному скетчу создаем векторный контур будущего листочка. Так как это изображение векторное, обводы получаются плавные и гармоничные. Как ни крути, кистью такой результат получить сложно. Уже на этом этапе смотрим, как будущая фишка вписывается в свое место на поле.
Шаг второй - законченная форма фишки и основные элементы
Продолжаем работать с инструментом Pen tool и создаем прожилки и черешок листочка. Каждую прожилку и черешок кладем в папку для того, чтобы как бы объединить отдельные объекты в один, но не мерджим их, чтобы всегда можно было оперативно что-то поправить. Далее применяем к папке, содержащей в себе все наши элементы, стандартные эффекты Фотошопа (тень, градиент). Не стоит пренебрегать стандартными эффектам Фотошопа, это только кажется, что они смотрятся простенько, но при уменьшении объекта и при условии, что эффекты настроены аккуратно, ненавязчиво — результат может вас удивить. Прожилки закончены, наложено несколько эффектов и градиентов, теперь не забываем проверить фишку на поле.
В ячейку ложится хорошо и уже даже смотрится более менее.
Важно! Обводку и тень фишкам настраиваем исключительно в общем псд файле, не в исходниках фишек. Это связано с тем, что исходники обычно отличаются друг от друга по размеру, да еще и при настройке их скейла в общем файле их размер может меняться относительно друг друга. Эти аспекты неизбежно приведут к незначительным, но заметным глазу различиям в толщине обводок и теней.
Шаг третий — время мягкой кисти
Финальная стадия отрисовки нашего листочка. На этой стадии мы вооружимся самой простой мягкой кистью.
Будем работать именно мягкой кистью для того, чтобы финальное изображение было без артефактов от мазков. На наш взгляд “живописность” не совсем подходит Match-3 фишкам.
До этого все было просто и быстро, но на этом этапе необходимо запастись терпением и не пытаться сделать все в одном слое — чем больше слоев, тем лучше. Проще будет откатывать изменения, просто отключая слои или настраивая прозрачности светотеневых коррекционных слоев.
Все, готово! Если оценивать финальное изображение, то есть ощущение, что картинка мыльная. Фактически так и есть, но при уменьшении исходного изображения до размера фишки на поле, появляется необходимая резкость без каких либо графических артефактов. Обязательно помним — рисуем в большом размере, смотрим в маленьком!
3D ракета
В нашем случае ракета представляет собой “голый” рендер с настроенными материалами, которые максимально вписываются в общую картину.
Чистое 3D без вмешательства 2D художника используется достаточно редко, так как не передает ощущение “ламповости”. Но в нашем случае мы решили, что ракета должна вращаться вокруг своей оси и спиральный узор при вращении должен привлекать внимание к ракете. Средствами Spine 2D подобный результат достичь сложнее, чем отрендеренной покадровой анимацией.
В итоге на настройку материалов и освещения ушло больше времени, чем если бы мы использовали 3D болванку и покрасили бы ее в Фотошопе. Но анимация потребовала такого решения и теперь вполне очевидно, что можно встроить чистый рендер без дорисовки и цветокоррекции в одну линейку с обработанными/нарисованными в фотошопе объектами.
2D+3D бомба
Самая интересная часть нашего повествования — совмещение двух предыдущих техник.
Сначала стоит объяснить, для чего вообще стоит использовать 3D болванку, ведь при должном умении художник может все сделать руками.
Первое — это банально может ускорить процесс. Зачастую намного быстрее замоделить даже простой объект, нежели заниматься его построением. Плюс к этому, достаточно единожды настроить освещение для рендера болванок и далее просто менять объекты, и на выходе получать болванки с единообразным освещением и плотностью теней. Кроме того, в случае, когда над фишками работает несколько художников (это как раз наш кейс), при использовании 3D меньше шансов поймать стилистические нестыковки в работе нескольких специалистов, обладающих разными навыками и стилями. В общем, это действительно удобно, да и придумали это не мы. Самый известный проект,использовавший подобный подход в разработке фишек — это Homescapes. А еще желательно, чтобы именно художник сам для себя моделил болванки. Если эта работа будет поручена 3D моделлеру, то затея становится сомнительной, так как появляется необходимость готовить очень подробный скетч, придется проводить некоторое количество дополнительных итераций между 2D и 3D художниками, в общем время, потраченное на работу увеличится. В студии Pictolabra оба художника, работающие над фишками и прочими игровыми объектами, умеют и моделить, и рисовать. Это не сложно, для подобных задач не нужно быть сеньором 3D моделлером, необходимо только желание и немного времени на освоение базового инструментария.
Итак, начнем с моделинга нашей мультяшной бомбы.
Создаем три примитива и формируем основу нашей бомбочки. Проще простого! Под силу любому новичку. Стоит только немного приплюснуть сферу по оси Y — будет симпатичнее смотреться, не так геометрически правильно, как абсолютно правильная сфера.
Далее уплотняем сетку, придаем бомбе более плавные формы и сглаживаем.
Обычно мы используем серый материал при рендере и уже потом раскрашиваем объект в фотошопе
Серая болванка отлично колеруется любыми доступными в Фотошопе средствами. Главное настраивать материал модели таким образом, чтобы рендер не содержал абсолютно черный цвет в тенях и абсолютно белый на освещенных участках. В противном случае подкорректировать изображение будет очень сложно.
Но так как мы уже настраивали цвета на примере ракеты, то и на бомбе грех не воспользоваться проделанной работой. Кстати, выбор расцветки не случаен. Двухцветные спец фишки (ракеты, бомбы, петарды) хорошо заметны на фоне одноцветных базовых фишек. Очень удачная цветовая схема. Самый известный проект, использующий такое решение — все тот же вышеупомянутый Homescapes.
Теперь рендер. Главный секрет рендера очень мягкий, рассеянный свет. Рассеянный свет предотвратит появление резких теней и жестких бликов. Необходимо помнить, что мы делаем основу и если будет необходимо, то усилим тени или блики уже в фотошопе.
Болванка готова. Пока выглядит сухо и не очень симпатично. Значит пора отправиться в фотошоп.
Первое, что мы сделаем в 2D - нарисуем фитиль, используя вышеописанный инструмент «Перо» и мягкую кисть. Фитиль можно было и замоделить, но художник решил сделать в 2D, так ему показалось быстрее.
Ну а дальше — финалим рендер, накладывая огромное количество слоев, масок с цветокорректирующими слоями, эффектов и так далее. При этом после каждого изменения сохраняем смарт объект и смотрим, как он смотрится в общей массе,оцениваем. В среднем, в каждом исходнике содержиться от 30 до 50 слоев, а в некоторых и того больше.
Все, готово, но не совсем…
Проверка фишек на устройствах.
Вроде как очевидный момент, но в пылу работы художники иногда забывают регулярно проверять, как Math-3 поле с фишками выглядит на устройстве. В результате, если игнорировать просмотр на устройстве, то легко можно переборщить с детализацией фишек и т.д. Также нередка ситуация, когда цветопередачи монитора и мобильного устройства сильно отличаются. Этот аспект тоже необходимо учитывать и отсматривать итерации как можно чаще. В процессе проверки своей работы на девайсе лучше использовать качественное устройство и не пытаться подгонять результат под цветопередачу бюджетного смартфона.
Небольшое наблюдение из нашей практики. Изначально по яркости и чистоте цветов наших фишек мы ориентировались на проект Homescapes. У нас получились яркие, сочные фишки и художникам это нравилось! Но мы заметили, что бюджетные матрицы на Android устройствах очень плохо отображают мягкие градиенты светотени на наших максимально ярких фишках. В итоге у них теряется объем и привлекательность. Кроме того, в процессе тестирования прототипа начали поступать жалобы от коллег на то, что глаза быстро устают. Некоторые матрицы не только плохо отображали светотень, но и превращали чистые цвета фишек в ярко-кислотные. При этом на iOS устройствах все выглядело замечательно. В итоге мы решили “погасить” наше поле с фишками.
Задача внезапно оказалась не самой простой. Пришлось долго и муторно настраивать цветовые и тональные взаимоотношения фишек. Важно было, чтобы ни одна из фишек не “проваливалась” на фоне других и наоборот, не выходила на передний план. Кроме того, разница между фишками, решенными в пастельных тонах и неприятными, “серыми” минимальна. Чуть переборщили с десетурацией — и все, получилось неприятное, серое месиво. Плюс к этому пришлось поработать с бэками и с UI элементами, чтобы они тоже не перетягивали на себя излишнее внимание. В итоге, на наш взгляд, удалось сбалансировать цвета таким образом, чтобы не выжигать сетчатку и при этом оставить ощущение яркой игры.
Заключение.
Все вышеописанные приемы и подходы к созданию Match-3 элементов ни коим образом не являются обязательными или кем-то рекомендуемыми. Это просто один из вариантов пайплайна, который подходит нам и возможно неприменим в команде художников, обладающих иным набором навыков. В общем, неважно как делать, главное чтобы было удобно, быстро и качественно. Нам удобно так.
В следующий раз мы расскажем про то, как мы создавали 3D мету в казуальном стиле (пока еще редкое явление в казуальных играх), на какие грабли мы наступили и что бы сделали иначе.
И напоследок )
По хорошему, работа над фишками не останавливается никогда. Она продолжается на протяжении всей жизни проекта. Если ориентироваться на топовые Match-3 игры, то в некоторых, на протяжении жизни проекта, фишки перерисовывались по многу раз.
Даже у нас, в очень юном проекте, уже прошел процесс полишинга и перерисовки некоторых фишек.
Первый грибок выглядит неестественно по цвету, он очень дробный из-за пятен на шляпке и его форма тоже оставляет желать лучшего. Но в первой итерации нам казалось, что он ОК. Только позже, когда был создан весь базовый набор фишек и графика дополнительных механик, стало очевидно, что он выбивается из общей картины. Так что идеал недостижим, но стремиться к нему надо!
КОНЕЦ!