Свет и цвет в компьютерных играх. Руководство для начинающих!

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

Всем привет! Меня зовут Шаров Александр, сейчас я занимаю должность Principal Environment Artist в игровой компании и в этой статье хочу поделиться вводными знаниями, которые помогут вам лучше понимать, как работает свет(цвет) и для тех, кто всегда хотел разобраться, почему эта тема такая важная. В игровой индустрии я около 8 лет, имею различный опыт как в мобильной разработке, VR-проектах, а также принимал участие в создании ААА проектов.

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

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

Первый пример — из перезапуска God of War 2018 года.

Здесь свет помогает направить взгляд игрока, выделить контрасты и показать ключевую точку фокуса: куда игрок должен идти и что его там примерно ждёт. Так же свет дополнительно создает определенную атмосферу, которая вызывает те или иные эмоции и вау-эффект.

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

Второй пример — из свежей God of War: Ragnarök.

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

Третий и четвёртый скриншоты — из игры Horizon Forbidden West и дополнения Burning Shores.

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

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

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

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

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

Теория цвета исследует и рассказывает, как цвета создаются, как они взаимодействуют между собой и как они влияют на эмоции и настроение людей.

В рамках разработки игр есть много областей, в которых цвет играет ключевую роль: UI, VFX, Light, Environment, Cinematic. Например, в UI/UX часто нужна какая-то индикация, чтобы отличать союзников от врагов. Исторически сложилось, что союзники в играх помечаются синим или зелёным цветом, а враги красным. Это нужно, чтобы сразу можно было отличить, где свой, а где чужой.

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

В Environment-области же красный оттенок света создаёт напряжение, тем самым либо подготавливая игрока к активным действиям, либо вызывая страх. А оттенками жёлтого часто подсвечивают объекты, с которыми можно взаимодействовать — и их легко заметить на фоне всего остального окружения.

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

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

Разберем основы, которые полезно знать — и начнём с композиции.

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

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

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

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

Ниже приведены примеры, как композиция и постановка кадра работает на передачу задумки режиссёром.

Но это кино. А теперь давайте разберём, как композиция может работать в играх. Для примера хочу взять локацию из игры God of War Ragnarök.

На мой взгляд(#14), в этом ракурсе из игры хорошо подходит правило «Золотого треугольника». Вероятно, художники руководствовались и другими, но я разберу только конкретный метод. Для удобства, я выделил его зелёным цветом.

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

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

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

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

В этом примере мы рассмотрели один конкретный кадр с одним ракурсом. Но ведь персонаж может посмотреть вокруг себя на 360 градусов. Что делать тогда? В этом случае разработчики выбирают несколько главных точек-ракурсов, которые важны с точки зрения геймплея. Они будут фундаментом. Остальное, чего не хватает, уже дорабатывается по ходу разработки, после чего собирается в одно целое. То есть, продумывается то, как игрок попадает в локацию, как он выходит из нее, что ключевого исходя из геймплея он должен увидеть. И в этом участвует огромный спектр специалистов: концепт художники, художники по свету, художники по окружению и т.д.

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

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

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

Другой важный приём — контраст и работа с тонами. Важно помнить: с точки зрения восприятия тон всегда важнее цвета. Именно тон больше всего и создаёт объём и визуально разделяет картинку. Взгляните на пример ниже: добавление цвета на первую картинку без работы с тоном не делает большой разницы — изображение всё равно ощущается плоским, его части сливаются в одно. При этом стоит уделить тону внимание — и даже чёрно-белый рисунок считывается очень чётко, появляется явный контраст. Сразу становится понятно, как части изображения взаимодействуют друг с другом.

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

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

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

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

HUE — по сути основной цвет. SATURATION — интенсивность или чистота цвета. LIGHTNESS (Value) — темнота или яркость цвета, она определяет его форму и глубину.

В любом кадре и на любой иллюстрации (если мы говорим про профессиональные работы) сочетания цветов подбираются не просто так, а исходя из определённого принципа — по цветовому кругу. Эта концепция появилась ещё в 19 веке: впервые её упоминает в своей книге «Искусство цвета» (The Art of Color) швейцарский художник Йоханнес Иттен.

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

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

Тоже комплиментарные цвета. Здесь работает контраст по свету — теплый свет от фонарей и холодный лунный свет от всей локации.

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

Сплит-комплементарные цвета. Тут есть отчётливо выделенный синий цвет волос и несколько дополнительных противоположных цветов вроде жёлтого и бордового.

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

Важный аспект при работе со светом — это понимание целевой аудитории, для кого вы делаете игру/фильм/арт. От этого зависит, с какой стороны нужно будет подойти к работе. Направления можно примерно разделить на два типа — реализм и стилизация. (Естественно, всё это условно и сильно зависит от проекта, арт-дирекшна и того, на какую аудиторию всё рассчитано.)

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

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

Если говорить конкретно про свет и цвет: реализму присуще более нейтрально-холодные оттенки, без ярко выраженных акцентов. Вот, например, кадр из фильма «Дюнкерк» и игры Сall of Duty: WWII.

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

Подведём итог нашего вводного материала. Свет и цвет что в играх, что в фильмах — один из самых мощных инструментов для создания настроения и передачи игрокам эмоций. Но для правильной работы с ним нужно знать определенную художественную базу, а заодно поиграть в разные игры и, если есть возможность, почитать специальную литературу — можете начать с книги Джеймса Гарни «Цвет и свет» (Color and Light by James Gurney). Всё это поможет сильно поднять ваши навыки. Остальное дело за практикой.

И еще раз про канал, где стараюсь делиться полезными материалами по разработке со всеми желающими. Заходите в гости, милости просим!

#games #lightning #gamedevnews #gamedevelopment #education