Опыт создания графики для 4X стратегии

Опыт создания графики для 4X стратегии

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

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

Эта статья об одном из таких случаев.

Меня зовут Давид, я руководитель студии El'ton Digital. Уже некоторое время мы создаем графический контент для игры Rule The Galaxy. Игра представляет собой глобальную пошаговую стратегию в космосе, она делается в духе старой школы, с огромным количеством механик, хардкорными элементами, глубоким микроменеджментом. Игра все еще в разработке. Да и для нас, скорее всего, еще найдется работа, но мы уже успели реализовать несколько интересных задач.

Среди них:

- Сет звездолетов разных классов.

- Сет символов (иконок), отображающих функции зданий в интерфейсе.

- Сет зданий и построек.

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

1. Звездолеты

Вкратце техническое задание выглядело так: необходимо нарисовать спрайты 8 звездолетов для боевого режима игры, разделенных на 4 класса – танк, дамагер, разведчик и хиллер. Каждый класс в 2ух вариациях, послабее и посильнее. Они должны быть выполнены в одной стилистике (в плане дизайн-решений), в одной цветовой схеме.

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

Для нас ключевым моментом была классовость кораблей. Класс определяет функцию, а функция должна диктовать визуал. Это нужно для двух моментов:

1) Что бы корабли в итоге выглядели правдоподобно, так как в реальности в дизайн всегда подчинен функции (точнее дизайн – это совокупность функции и визуала).

2) Что бы игрок мог без труда идентифицировать тот или иной корабль по его назначению.

Прежде всего, мы начали работать над общими формами. Дизайн плотно опирается на психологию, а если быть точнее, на подсознательное восприятие человека тех или иных вещей. Исходя из этих мыслей, мы вывели следующие визуальные формулы: танк должен иметь мощный, монолитный силуэт. Он предназначается для того, что бы принимать на себя огонь противника, защищать. Дамагер, наоборот, нужен для нанесения урона. Его образ должен быть заостренный, хищный, в нем должна прослеживаться динамика и агрессия. Разведчик это самый быстрый юнит, значит, его логично сделать легким и технологичным, использовать какие-то аэродинамические формы (да я знаю, что в космосе нет атмосферы, но все мы выросли на Звездных Войнах и Стартреке). Хиллер восстанавливает здоровье других юнитов, он лечит. Его образ должен быть максимально дружелюбный и мягкий, он должен вызывать соответствующие эмоции, это скорее всего что-то округлое.

Различные эскизы, а так-же референсы от заказчика
Различные эскизы, а так-же референсы от заказчика

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

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

Хвост пришлось несколько укоротить - спрайты должны умещаться в пределы гекса
Хвост пришлось несколько укоротить - спрайты должны умещаться в пределы гекса

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

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

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

В ходе работы ни один арахнофоб не пострадал
В ходе работы ни один арахнофоб не пострадал

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

Милое, добродушное яйцо
Милое, добродушное яйцо

После утверждения этого этапа, дело осталось за малым – нарисовать все в чистовом виде. Это уже дело техники. Здесь нет никаких секретов. Нам нужно было использовать одну шаблонную цветовую схему для реализации, а в дальнейшем, в игре цвет кораблей можно уже менять как угодно. Мы выбрали схему черно – красно – желтую. Где черным цветом нарисованы технические элементы (нижний слой корпуса), красным – основной корпус и защита, желтым - различные энергетические элементы. При реализации цветовой схемы мы использовали классический метод, при котором должен быть основной цвет, занимающий примерно 60% площади (красный), дополнительный цвет, приблизительно 30% (черный), и нюансный цвет, необходимый для привлечения внимания – 5-10% (желтый). Если вы хотите обратить внимание зрителя на определенные места в композиции, выделяйте их именно нюансным цветом (это не аксиома, но это работает). Главные особенности нюансных цветов в том, что они должны быть контрастны и их должно быть мало в процентном соотношении. Только тогда они будут работать как надо.

Опыт создания графики для 4X стратегии

Итоговые звездолеты нарисованы по слоям, это важно для геймплея, так как в игре их можно будет «разбирать». Желтые кружочки на корпусах – это места крепления для будущих пушек (к слову, сами пушки мы не рисовали, не знаю почему).

По такой схеме проходило деление по слоям
По такой схеме проходило деление по слоям

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

Скриншот из билда игры с применением «наших» звездолетов
Скриншот из билда игры с применением «наших» звездолетов

2. Набор иконок

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

Задача стояла так: необходимо нарисовать 30 символов, обозначающих функцию 30ти различных построек.

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

Итоговый сет голограмм
Итоговый сет голограмм

После некоторых обсуждений мы выработали следующий пайплайн: делается эскиз, утверждается с заказчиком, делается 3D модель в SketchUP, затем модель рендерится в KeyShot и в конце добавляется постобработка в Photoshop. В этой цепочке рендер модели нам нужен был для того, что бы добиться правдоподобного эффекта полупрозрачного материала, и этот эффект затем закрепляется постобработкой.

Над проектом работали два человека. Один – работал над эскизами, второй моделил и рендерил. Благодаря такой системе мы смогли поставить работу на поток: пока один постепенно выдавал готовые эскизы, другой заканчивал предыдущие изображения.

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

Опыт создания графики для 4X стратегии

Хочу еще раз обратить внимание на то, что мы использовали метод 3D моделирования не просто потому что захотелось, а потому что в данном случае необходимо было добиться нужной передачи материала. Делать это вручную и «на глаз», не то что бы очень сложно, но в принципе не имеет смысла, если есть специализированные инструменты.

Хотя работа была достаточно объемной, мы выполнили ее за 2 недели (примерно 10 рабочих дней). Эта задача была для нас достаточно непривычной, поэтому реализовать ее было вдвойне интересно!

Скриншот из билда игры с применением «наших» голограмм
Скриншот из билда игры с применением «наших» голограмм

3. Постройки

А вот следующая задача нам была уже знакома. Дело в том, что на изометрических домиках мы, можно сказать, собаку съели. Хотя в фантастическом сеттинге еще не работали.

Задание было такое: Нарисовать шесть из десяти платформ для космической колонии (оставшиеся четыре платформы были уже готовы), и 30 построек, которые можно было бы строить на этих платформах (по 3 на каждую платформу). Все в изометрии.

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

Платформы, включая уже готовые, по своей функции были следующими:

1. Жилой сектор

2. Торговый сектор

3. Ремонтный сектор

4. Сектор добычи металла

5. Сектор хранения металла

6. Сектор добычи микросхем

7. Сектор хранения микросхем

8. Сектор добычи антиматерии

9. Сектор хранения антиматерии

10. Военная база

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

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

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

1) Эскиз и его утверждение

2) Моделирование трехмерной болванки для соблюдения четкой геометрии

3) Итоговый рендер в Photoshop

Опыт создания графики для 4X стратегии

В данном случае моделирование нужно было, что бы не накосячить с геометрией в изометрической проекции. Конечно, для этого можно использовать и изометрическую сетку и рисовать по ней, но в нашем случае это было бы лишней тратой времени: над проектом трудилось 2 человека и пока один делал одну модель, второй рендерил предыдущую, затем получал следующую готовую модель и рендерил ее. Таким образом, мы смогли наладить поток в работе. Если бы объекты рисовались сразу вручную, то художник тратил бы время и на «черчение», и на заливку тоном, и на рендер. А так моделер выдавал ему уже готовую модель в нужной перспективе с базовой светотенью и даже наложенными локальными цветами.

Итоговый сет построек
Итоговый сет построек

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

Спасибо, что уделили время, продолжайте следить за творчеством нашей студии, а так же подписывайтесь на сообщество Rule The Galaxy

5151
31 комментарий

Как вам там в начале двухтысячных? Свежо и здорово, видятся радужные перспективы? :)

П.С. не знаю что бы меня сейчас заставило играть в игру с артами в стиле первых КР.

12
Ответить

Внезапно есть игроки которые не дрочат на графику.

2
Ответить

Все, конечно, хорошо, но не надо клоны всяких clash of clans называть 4X-стратегиям.

22
Ответить

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

Ответить

Читаешь заголовок ожидаешь статью про графику для игры уровня Stellaris. Ну да ладно

14
Ответить

Ребят, а вы в курсе, что ваши постройки друг от друга неотличимы? Удачный дизайн только у сектора добычи антиматерии, остальное сливается. Особенно если это для мобилки.

2
Ответить

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

1
Ответить