Элементы и составляющие визуального стиля
Исходный размер 1140x1600
Данный проект является учебной работой студента Школы дизайна или исследовательской работой преподавателя Школы дизайна. Данный проект не является коммерческим и служит образовательным целям
big
Исходный размер 2480x1350

Hollow Knight, 2017, фрагмент игрового экрана. / Rayman Legends, 2013, фрагмент игрового экрана. / BADLAND, 2013, фрагмент игрового экрана.

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

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

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

Элементарная структура изображения

big
Исходный размер 3484x1960

Линия

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

Линия, как видно из описания термина, может характеризовать изображаемые объекты несколькими способами. Во-первых, исключительно по описательному принципу: так как линия описывает силуэт объекта, можно предположить характер его «содержимого» — или же внутренней, относительно контура, части.

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

Исходный размер 5000x2500

Далее можно рассмотреть свойства линии на примерах, взятых из различных игр с 2D  графикой. Первая игра в списке для анализа — это проект Hidden Folks с механикой поиска предметов.

Исходный размер 2048x1152

Hidden Folks, 2017.

Можно видеть, что вся графика проекта строится практически исключительно на использовании линии.

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

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

Исходный размер 2480x1350

Hidden Folks, 2017, фрагменты игровых экранов.

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

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

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

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

Исходный размер 1920x1080

Hidden Folks, 2017.

Второй проект для анализа — пошаговая игра Darkest Dungeon в жанре roguelike с элементами RPG. На ее примере можно видеть, как линия и контур используются в качестве средства выразительности.

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

Исходный размер 1920x1080

Darkest Dungeon, 2016.

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

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

Исходный размер 2480x1350

Darkest Dungeon, 2016, фрагменты игровых экранов.

Цвет

Под цветом понимается визуальное ощущение, создаваемое из интерпретации световых потоков с разными свойствами и характеристиками.

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

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

Исходный размер 1920x1080

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

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

Цвета, относящиеся к спектру основных, часто интерпретируются как: красный — сила и страсть, синий — спокойствие и логика, желтый — веселье и дружба.

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

Исходный размер 1920x1080

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

Исходный размер 2038x1080

Rayman Legends, 2013.

Первый пример для обсуждения — платформер Rayman Legends с детальной 2D  графикой.

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

Это пример использования цвета для смыслового разграничения локаций и усиления их нарративных характеристик.

Зеленый цвет здесь отсылает к природному и естественному, что отлично подтверждается объектами в окружении, в «зеленых» сценах можно увидеть множество деревьев или объектов, сделанных из древесины, а также траву и листву, тоже зеленого цвета. Очевидно, что при таком подходе «зеленые» растительные локации сложно перепутать с «желтыми» песчаными уровнями, на которых цветовая палитра меняется в сторону охристых оттенков под стать песку.

Исходный размер 2480x1350

Rayman Legends, 2013, фрагменты игровых экранов.

Вторая игра, в которой стоит рассмотреть цветовое решение — это метроидвания Hollow Knight. Можно увидеть, что в игре используется ограниченная цветовая палитра.

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

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

Исходный размер 1920x1080

Hollow Knight, 2017.

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

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

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

Исходный размер 2480x1350

Hollow Knight, 2017, фрагменты игровых экранов.

Яркость

Исходный размер 1920x960

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

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

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

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

Исходный размер 1920x1080

Limbo, 2011.

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

Исходный размер 2480x1350

Limbo, 2011, фрагменты игровых экранов.

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

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

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

Исходный размер 1920x1080

Limbo, 2011.

Следующая игра для анализа — это платформер Trine 2  о трех персонажах, спасающих королевство. Здесь можно видеть пример того, как яркость сцен меняется от локации к локации и зависит от характеристик самого места.

Исходный размер 2480x1350

Trine 2, 2011, фрагменты игровых экранов.

Учитывается в том числе, является ли пространство изолированным и закрытым или находится под открытым небом и имеет просматриваемый горизонт.

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

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

Исходный размер 1920x1080

Trine 2, 2011.

пикча

Форма

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

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

Исходный размер 3200x1694

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

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

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

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

Исходный размер 4096x2304

Patapon, 2007.

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

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

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

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

Исходный размер 3732x2048

Patapon, 2007.

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

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

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

Исходный размер 2480x1350

BADLAND, 2013, фрагменты игровых экранов.

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

Здесь имеет значение не только характер формы, но и ее размер, а также отношение со средой, в которой эта форма находится.

Исходный размер 3840x2160

BADLAND, 2013.

Текстура

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

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

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

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

Исходный размер 3484x1960

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

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

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

Исходный размер 1920x1080

Cozy Grove, 2021.

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

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

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

Исходный размер 2480x1350

Cozy Grove, 2021, фрагменты игровых экранов.

Следующая игра, на которую стоит обратить внимание — это квест Samorost  3.

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

Исходный размер 1920x1080

Samorost 3, 2016.

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

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

Исходный размер 1920x1080

Samorost 3, 2016.

Эмоциональный эффект, заключенный в простых графических элементах и их сочетаниях

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

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

Исходный размер 1920x905

Итоги главы

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

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

Исходный размер 2480x1350

Samorost 3, 2016, фрагмент игрового экрана. / Trine 2, 2011, фрагмент игрового экрана. / Limbo, 2011, фрагмент игрового экрана.

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

Исходный размер 1920x905
Элементы и составляющие визуального стиля
Проект создан 01.01.0001
Глава:
1
2
3
4
Мы используем файлы cookies для улучшения работы сайта НИУ ВШЭ и большего удобства его использования. Более подробную...
Показать больше