Фундамент рисунка и теория цвета

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

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

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

Точка: Начало координат и центр притяжения

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

> «Точка — это первоэлемент, из которого рождается всё остальное. Она статична, но таит в себе бесконечный потенциал движения». > > Василий Кандинский, теоретик абстрактного искусства

Визуальная гравитация

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

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

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

Точка на практике: Пуантилизм и пиксель-арт

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

!Фрагмент картины Жоржа Сёра

Наш глаз сам смешивает эти точки на расстоянии, создавая иллюзию объема, света и тени.

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

Линия: Точка, пришедшая в движение

Если точка статична, то линия — это чистая динамика. Знаменитый художник Пауль Клее описывал линию как «точку, которая пошла погулять».

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

Психология направления

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

* Горизонтальные линии: Ассоциируются с линией горизонта, спящим человеком, поверхностью воды. Они транслируют покой, стабильность, смерть или отдых. В платформерах длинные горизонтальные линии земли дают игроку чувство безопасности. * Вертикальные линии: Ассоциируются с деревьями, стоящим человеком, небоскребами. Они выражают силу, рост, сопротивление гравитации, величие. Вертикальные колонны в дизайне уровня сразу делают локацию более монументальной. * Диагональные линии: Ассоциируются с падающим деревом, бегущим человеком, склоном горы. Это нестабильность, динамика, скорость, агрессия. Если вы хотите нарисовать динамичную позу персонажа в атаке, его тело должно строиться по диагонали. * Плавные кривые (S-образные линии): Ассоциируются с реками, изгибами тела, растениями. Они передают мягкость, органичность, грацию и жизнь. * Ломаные, зигзагообразные линии: Ассоциируются с молнией, разбитым стеклом, шипами. Они транслируют опасность, хаос, электрическое напряжение.

!Психология линий

Характер линии и типичные ошибки

Линия может быть уверенной и жесткой, а может быть мягкой и прерывистой. Характер линии (её толщина, прозрачность, текстура) рассказывает историю объекта еще до того, как зритель поймет, что именно нарисовано.

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

Как с этим бороться:

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

Используйте технику «призрачной линии» (Ghosting). Прежде чем коснуться бумаги (или планшета), проведите рукой нужное движение в воздухе 2-3 раза. Почувствуйте траекторию. И только на 3-4 раз опустите инструмент и проведите линию одним уверенным движением.

Лучше уверенная ошибка, чем неуверенная правильность. Проведите линию одним махом. Если она легла не туда — отмените действие (Ctrl+Z) или сотрите, и проведите заново. Не пытайтесь «чинить» кривую линию мелкими штрихами.

Пятно (Форма): Масса и силуэт

Когда линия замыкается сама на себя, или когда множество точек сливаются воедино, рождается пятно (или форма). Если точка — это координата, а линия — это граница, то пятно — это масса.

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

Силуэт — король дизайна

В игровой индустрии (особенно в 2D и пиксель-арте) концепция пятна реализуется через силуэт. Силуэт — это сплошное темное пятно, повторяющее очертания объекта.

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

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

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

!Древнегреческая амфора

Позитивное и негативное пространство

Работа с пятном неразрывно связана с концепцией пространства.

* Позитивное пространство — это само пятно, сам объект, который вы рисуете (например, фигура человека). Негативное пространство — это пустота вокруг объекта и внутри* его контуров (например, просвет между рукой человека и его туловищем).

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

> Негативное пространство так же материально, как и позитивное. Форма пустоты определяет форму объекта.

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

Визуальный вес пятна

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

От чего зависит визуальный вес пятна:

| Характеристика | Больший визуальный вес (притягивает глаз) | Меньший визуальный вес (отступает на фон) | | :--- | :--- | :--- | | Размер | Крупные пятна | Мелкие пятна | | Тон | Темные пятна на светлом фоне (высокий контраст) | Светлые пятна на светлом фоне (низкий контраст) | | Сложность | Сложные, изрезанные формы | Простые геометрические формы (круг, квадрат) | | Изоляция | Одинокое пятно в пустом пространстве | Пятно в группе других пятен |

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

Синтез: Как они работают вместе

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

Точка привлекает внимание. (Например, яркий блик на глазу персонажа).

Линия направляет взгляд. (Например, вытянутая рука персонажа, указывающая в сторону врага).

Пятно удерживает массу и форму. (Например, общий массивный силуэт фигуры, который делает персонажа устойчивым).

Ритм и повторение

Когда мы начинаем повторять эти элементы, возникает ритм. Ритм в рисунке сродни ритму в музыке.

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

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

Практическое применение в геймдеве

Давайте рассмотрим, как эти три элемента применяются при создании простого игрового ассета — например, зелья здоровья.

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

Линия (Контур и детали): Затем мы добавляем линии. Мы обводим контур (в пиксель-арте это часто делается более темным оттенком основного цвета). Мы добавляем пару изогнутых линий внутри пятна, чтобы показать объем стекла и уровень жидкости.

Точка (Акценты): В самом конце мы ставим несколько ярких белых точек на изгибе стекла. Это блики. Они мгновенно делают материал «стеклянным» и влажным, притягивая взгляд к предмету.

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

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

Правило третей и золотое сечение в композиции

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

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

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

Холст как пространство для режиссуры

Прежде чем расставлять объекты, необходимо понять природу самого холста. В контексте разработки игр холст — это экран монитора или смартфона, который имеет жесткие границы и определенное соотношение сторон (aspect ratio), например, 16:9 или 4:3.

Границы кадра — это не просто края картинки. Это активные элементы композиции. Расстояние от объекта до края кадра создает визуальное напряжение. Если персонаж стоит слишком близко к краю, зритель чувствует тесноту и дискомфорт. Если вокруг персонажа слишком много пустого пространства, он кажется потерянным и одиноким.

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

Правило третей: Избавление от скучного центра

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

Правило третей (Rule of Thirds) — это метод упрощенного композиционного структурирования, при котором холст мысленно делится на девять равных частей двумя равноудаленными горизонтальными и двумя вертикальными линиями.

Представьте себе сетку для игры в крестики-нолики, наложенную на ваш экран. Эта сетка создает два типа важных зон:

Линии третей — четыре прямые линии (две вертикальные, две горизонтальные).

Точки пересечения (узлы внимания) — четыре точки, где эти линии пересекаются.

!Сетка Правила третей на примере игрового экрана платформера.

Как использовать точки пересечения

Психологические исследования движения глаз (eye-tracking) показывают, что при взгляде на новое изображение человек редко смотрит точно в центр. Взгляд инстинктивно сканирует изображение по определенным паттернам, и точки пересечения третей являются естественными магнитами для нашего внимания.

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

* Верхняя левая точка: Часто используется как стартовая точка для чтения изображения (в культурах, читающих слева направо). Идеальное место для лица говорящего персонажа в диалоговом окне. * Нижняя правая точка: Отличная зона для размещения конечной цели уровня или важного предмета, к которому должен прийти игрок.

Как использовать линии третей

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

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

* Горизонт на нижней трети: Отдает 2/3 кадра небу. Используется, чтобы показать масштаб, грандиозность облаков, высоту башен или чувство свободы. * Горизонт на верхней трети: Отдает 2/3 кадра земле. Применяется, когда главное действие происходит на поверхности, чтобы показать детали ландшафта, пропасти или подземелья.

Правило пространства (Активное пространство)

В геймдеве правило третей тесно связано с правилом пространства (Rule of Space). Оно гласит: перед движущимся или смотрящим объектом должно быть больше пустого пространства, чем позади него.

Если ваш пиксельный рыцарь бежит вправо, его не следует рисовать в центре экрана. Камера должна сместить его на левую вертикальную линию трети. Таким образом, 2/3 экрана справа остаются свободными. Это пространство называется «активным» или «ведущим» (leading space). Оно показывает игроку, куда движется персонаж, и дает время среагировать на появление врагов или препятствий.

Золотое сечение: Математика природной гармонии

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

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

Математически золотое сечение обозначается греческой буквой (фи) и выражается формулой, где меньшая часть относится к большей так же, как большая ко всему целому:

Где: * — большая часть отрезка. * — меньшая часть отрезка. * — иррациональное число, приблизительно равное .

Числа Фибоначчи и Золотая спираль

На практике художникам сложно высчитывать пропорцию в уме. Поэтому для построения композиции по золотому сечению часто используют последовательность Фибоначчи — числовой ряд, где каждое последующее число равно сумме двух предыдущих: 1, 1, 2, 3, 5, 8, 13, 21 и так далее.

Отношение соседних чисел Фибоначчи (например, 21 / 13) стремится к числу .

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

!Интерактивное построение Золотой спирали через числа Фибоначчи

Как спираль управляет взглядом

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

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

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

Классические художники эпохи Возрождения виртуозно использовали этот принцип.

!Картина Леонардо да Винчи «Мона Лиза»

Сравнение: Трети против Золотого сечения

Хотя эти концепции похожи, они служат немного разным целям и создают разное настроение.

| Характеристика | Правило третей | Золотое сечение (Спираль) | | :--- | :--- | :--- | | Сложность | Простая сетка 3x3. Легко применять на лету. | Сложная пропорция 1:1.618. Требует тщательного планирования. | | Динамика | Создает напряжение и четкий ритм. | Создает плавное, органичное перетекание форм. | | Фокусные точки | 4 равнозначные точки. | 1 главная точка (центр спирали) и путь к ней. | | Применение в играх | Расположение UI, прицела, позиционирование камеры в геймплее. | Концепт-арт, сплеш-экраны, катсцены, дизайн сложных боссов. |

Визуальный вес и баланс

Использование сеток и спиралей теряет смысл, если вы не понимаете концепцию визуального веса (Visual Weight).

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

Тональный контраст: Самый мощный инструмент. Темное пятно на светлом фоне (или наоборот) обладает огромным весом.

Размер: Крупные объекты тяжелее мелких.

Цвет: Теплые и насыщенные цвета (красный, оранжевый) визуально тяжелее холодных и приглушенных (синий, серый).

Детализация: Зона с высокой плотностью пикселей и мелких деталей притягивает взгляд сильнее, чем гладкая заливка.

Лица и глаза: Человеческий мозг запрограммирован искать лица. Даже крошечное лицо персонажа в углу экрана будет иметь колоссальный визуальный вес.

Принцип рычага в композиции

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

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

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

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

Направляющие линии (Leading Lines)

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

Направляющие линии — это любые линии в изображении, которые буквально указывают на главный объект. Они работают как дорожные указатели для глаз.

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

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

Когда нужно нарушать правила

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

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

Когда использовать центральную композицию:

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

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

Иконки и UI-элементы: Иконка зелья в инвентаре должна читаться мгновенно. Здесь не нужна сложная режиссура взгляда — объект должен быть в центре.

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

В следующей статье мы спустимся на микроуровень и разберем анатомию самого пикселя: как рисовать идеальные линии, избегать «зубцов» (jaggies) и применять сглаживание (anti-aliasing) для создания профессиональной графики.

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

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

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

Что такое визуальный вес?

В реальном мире вес — это сила, с которой объект давит на опору из-за гравитации. На плоском экране гравитации нет.

Визуальный вес (Visual Weight) — это мера того, насколько сильно элемент изображения притягивает к себе взгляд зрителя.

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

Факторы, определяющие визуальный вес

Визуальный вес не берется из ниоткуда. Он складывается из нескольких характеристик объекта. Чем больше этих характеристик применено к элементу, тем «тяжелее» он становится.

Тональный контраст (Value Contrast): Это абсолютный чемпион среди всех факторов. Глаз человека эволюционно настроен реагировать на резкие перепады света и тени (чтобы вовремя заметить хищника в кустах). Абсолютно черное пятно на белом фоне обладает максимальным весом. Бледно-серое пятно на белом фоне — минимальным.

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

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

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

Узнаваемость (Лица и глаза): Психологический фактор огромной силы. Человеческий мозг содержит специальные нейронные сети для распознавания лиц (веретенообразная извилина). Даже схематично нарисованное лицо из трех пикселей в углу экрана перевесит огромный, но абстрактный камень в центре.

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

Пример из практики: Вам нужно нарисовать темную пещеру (фон). В ней стоит огромный каменный голем (враг), а на полу лежит крошечный золотой ключ (цель). Голем большой (фактор 2) и детализированный (фактор 4), но чтобы игрок не пропустил ключ, вы делаете голема холодного сине-серого цвета с низким контрастом относительно стен пещеры. Ключ же вы делаете крошечным, но ярко-желтым (фактор 3) и добавляете ему резкий белый блик (фактор 1). В итоге крошечный ключ визуально «весит» столько же, сколько огромный голем, и игрок легко его находит.

Визуальный баланс: Принцип качелей

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

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

Существует два основных способа сбалансировать композицию.

Симметричный (формальный) баланс

Самый простой и древний способ. Вы берете визуальный вес на одной стороне холста и зеркально отражаете его на другой.

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

| Плюсы симметрии | Минусы симметрии | Применение в играх | | :--- | :--- | :--- | | Мгновенно считывается зрителем | Может выглядеть скучно и статично | Дизайн интерфейсов (UI), инвентарь | | Вызывает чувство величия и покоя | Лишена внутреннего движения | Архитектура храмов, алтари, тронные залы | | Идеальна для концентрации внимания в центре | Предсказуема | Дизайн арен для битв с боссами, иконки предметов |

Асимметричный (неформальный) баланс

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

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

Где: * — визуальный вес объекта (сила). * — расстояние от объекта до центра холста (плечо рычага).

!Схема визуального баланса в стиле минимализма на светлом фоне. Визуализация принципа качелей (рычага). Слева близко к центру расположен большой бледно-серый круг (низкий контраст, большой размер). Справа на самом краю длинной доски расположен маленький ярко-красный круг (высокий контраст, маленький размер). Качели находятся в идеальном горизонтальном равновесии на треугольной опоре. Подписи: 'Большая масса, низкий контраст' слева и 'Малая масса, высокий контраст' справа.

Как это работает на практике: Представьте детские качели-балансир. Слева садится взрослый мужчина весом 100 кг (). Чтобы качели пришли в равновесие, справа должен сесть ребенок весом 25 кг (). Но ребенок должен сесть в 4 раза дальше от центра (), чем мужчина ().

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

!Интерактивная симуляция визуального баланса (качели-балансир). На экране горизонтальная доска на центральной опоре. Пользователь может добавлять на доску геометрические фигуры (квадраты, круги). Для каждой фигуры есть ползунки: 'Размер' (от 1 до 10), 'Тональный контраст' (от светло-серого до абсолютно черного) и 'Цвет' (холодный синий или теплый красный). При изменении параметров фигура становится визуально 'тяжелее' или 'легче', и доска соответственно наклоняется. Цель пользователя — уравновесить сложную композицию из нескольких фигур с одной стороны, добавив одну или две фигуры с другой стороны, меняя их размер, цвет и контраст, а также расстояние от центра.

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

Вес пустоты: Негативное пространство

До сих пор мы говорили о весе самих объектов (позитивном пространстве). Но в композиции пустота также имеет вес.

Негативное пространство (Negative Space) — это области холста, не занятые ключевыми объектами. Это небо, пустая стена, гладкая поверхность воды.

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

Негативное пространство работает как усилитель для позитивного пространства через принцип изоляции.

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

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

Визуальная иерархия: Режиссура взгляда

Когда вы понимаете, как создавать вес и как его балансировать, вы можете выстроить визуальную иерархию (Visual Hierarchy). Это упорядочивание элементов по степени их важности.

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

Первичное чтение (Фокусная точка): Самый тяжелый элемент. То, что зритель видит в первую секунду. Здесь должен быть максимальный тональный контраст, самые теплые цвета и самая высокая детализация. В игре это обычно главный герой, смертельная угроза или ключевой предмет.

Вторичное чтение (Контекст): Элементы среднего веса. Они поддерживают фокусную точку и рассказывают историю. Зритель замечает их на 2-3 секунду. Это могут быть второстепенные враги, платформы, по которым нужно прыгать, или архитектура уровня.

Третичное чтение (Детали и фон): Самые легкие элементы. Низкий контраст, холодные цвета, размытые формы. Они создают атмосферу, но не отвлекают от геймплея. Это облака на горизонте, текстура камней в тени, дальний лес.

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

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

В следующей статье мы перейдем от общих законов композиции к микроуровню. Мы разберем анатомию самого пикселя: как рисовать идеальные линии, избегать «зубцов» (jaggies) и применять сглаживание (anti-aliasing) для создания профессиональной графики.

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

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

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

Парадокс цифрового художника: RGB против RYB

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

Ваш монитор излучает свет. Он работает в цветовой модели RGB (Red, Green, Blue — Красный, Зеленый, Синий). Если смешать эти три луча света на максимальной яркости, вы получите чистый белый цвет. Это называется аддитивным (слагательным) смешением.

Однако человеческое восприятие гармонии формировалось тысячелетиями в реальном мире, где мы видим не излучаемый свет, а отраженный от поверхностей. Традиционная живопись использует модель RYB (Red, Yellow, Blue — Красный, Желтый, Синий). Если смешать эти три краски, они поглотят весь свет, и вы получите грязно-черный цвет. Это субтрактивное (вычитательное) смешение.

> Цветовой круг Иттена построен на традиционной модели RYB. Несмотря на то, что мы рисуем на цифровых экранах (RGB), для подбора гармоничных палитр, создания атмосферы и управления вниманием мы всегда используем логику круга Иттена (RYB), так как она идеально описывает психологию человеческого восприятия.

Швейцарский художник и теоретик искусства Иоганнес Иттен преподавал в легендарной школе Баухаус. Он структурировал хаос оттенков, создав логичную систему из 12 цветов, разделенных на три уровня иерархии.

!Схема цветового круга Иттена

Уровень 1: Первичные цвета (Фундамент)

В самом центре системы Иттена находится треугольник. В его углах расположены три первичных цвета (Primary Colors):

* Красный * Желтый * Синий

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

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

Применение в геймдеве: Если вы посмотрите на классические игры эпохи 8-бит и 16-бит, вы увидите тотальное доминирование первичных цветов. Марио (красный и синий), Пакман (желтый), Соник (синий). Использование чистых первичных цветов делает объекты максимально читаемыми на любом фоне.

В современном дизайне уровней первичные цвета часто резервируют для критически важных элементов: Красный:* Взрывоопасные бочки, зоны поражения боссов, индикатор низкого здоровья. Желтый:* Монеты, ключи, интерактивные уступы, за которые можно ухватиться. Синий:* Чекпоинты, дружественные NPC, мана.

Уровень 2: Вторичные цвета (Первое смешение)

Если мы возьмем первичные цвета и смешаем их попарно в равных пропорциях (50/50), мы получим три вторичных цвета (Secondary Colors). На круге Иттена они образуют перевернутый треугольник (или шестиугольник, если смотреть вместе с первичными).

Красный + Желтый = Оранжевый

Желтый + Синий = Зеленый

Синий + Красный = Фиолетовый

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

Применение в геймдеве: Оранжевый:* Сохраняет энергию красного, но лишен его агрессии. Часто используется для обозначения огня, осенних биомов или предупреждающих знаков, которые не означают мгновенную смерть. Зеленый:* Цвет жизни, природы и восстановления. Традиционный цвет аптечек (в противовес красному кресту, который часто заменяют из-за авторских прав), ядов (в кислотных оттенках) и выносливости (stamina). Фиолетовый:* Самый редкий цвет в природе. В играх он почти всегда ассоциируется с магией, мистикой, инопланетными технологиями или порчей (corruption).

Уровень 3: Третичные цвета (Нюансы и реализм)

Внешнее кольцо круга Иттена состоит из 12 секторов. Шесть из них занимают уже известные нам первичные и вторичные цвета. Оставшиеся шесть пустых мест заполняются третичными цветами (Tertiary Colors).

Третичный цвет получается при смешивании одного первичного и одного соседнего с ним вторичного цвета. Названия третичных цветов всегда состоят из двух слов, где на первом месте стоит первичный цвет:

* Желто-оранжевый * Красно-оранжевый * Красно-фиолетовый * Сине-фиолетовый * Сине-зеленый (бирюзовый) * Желто-зеленый (салатовый)

Зачем нужны третичные цвета? Если первичные и вторичные цвета — это каркас, то третичные — это плоть вашего рисунка. В реальном мире мы редко видим чистый зеленый или чистый синий. Листва в лесу состоит из сотен оттенков желто-зеленого на свету и сине-зеленого в тени.

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

Тепло-холодность: Температура цвета

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

Теплые цвета

К ним относятся желтый, желто-оранжевый, оранжевый, красно-оранжевый, красный и красно-фиолетовый. Они ассоциируются с солнцем, огнем и теплом.

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

Холодные цвета

К ним относятся желто-зеленый, зеленый, сине-зеленый, синий, сине-фиолетовый и фиолетовый. Они ассоциируются с водой, льдом, небом и тенью.

Свойство: Холодные цвета имеют меньший визуальный вес. Оптически они «отступают» на задний план, кажутся более далекими. Они пассивны и успокаивают взгляд.

| Характеристика | Теплые цвета | Холодные цвета | | :--- | :--- | :--- | | Оптический эффект | Выступают вперед (кажутся ближе) | Отступают назад (кажутся дальше) | | Визуальный вес | Высокий (тяжелые) | Низкий (легкие) | | Эмоция | Энергия, агрессия, радость, тревога | Спокойствие, меланхолия, тайна, отчуждение | | Роль в игре | Главный герой, враги, снаряды, UI-акценты | Фоны, небо, дальние горы, тени |

Пример из практики (Воздушная перспектива): Вспомните любую качественную 2D-игру с параллакс-фоном (например, Hollow Knight или Ori). Передний план, где бегает персонаж, часто имеет теплые акценты (светящиеся грибы, факелы). Но чем дальше слои фона уходят вглубь экрана, тем более синими и холодными они становятся. Это имитация атмосферного рассеяния: толща воздуха между зрителем и объектом фильтрует теплые лучи, пропуская только холодные.

Если вы нарисуете дальнюю гору ярко-оранжевой, она визуально «прыгнет» на передний план, разрушив иллюзию глубины, и игрок попытается на нее запрыгнуть.

Проблема «Грязи» и как ее избежать

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

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

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

Как избежать грязи в пиксель-арте:

Ограничьте палитру. Не используйте все 12 цветов круга в одном спрайте. Выберите 2-3 основных цвета.

Смешивайте соседей. Если вам нужно сделать плавный переход от желтого к красному, не пытайтесь сделать это через серый или черный. Пройдите по краю круга: Желтый → Желто-оранжевый → Оранжевый → Красно-оранжевый → Красный. Это сохранит чистоту цвета.

Используйте сдвиг тона (Hue Shifting). Это золотое правило пиксель-арта. Когда вы рисуете тень на красном яблоке, не просто делайте красный цвет темнее (ближе к черному). Сдвиньте его по цветовому кругу в сторону холодного цвета (к фиолетовому). А блик сдвиньте в сторону теплого (к желтому). Тень станет красно-фиолетовой, а блик — желто-оранжевым. Объект сразу станет объемным и живым.

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

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

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

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

Аббревиатура HSV расшифровывается как Hue, Saturation, Value (Тон, Насыщенность, Светлота). Иногда в программах можно встретить вариант HSB (Brightness вместо Value), но математически и визуально это одно и то же. Понимание этих трех характеристик — это водораздел между новичком, который подбирает цвета наугад, и профессионалом, который точно знает, как получить нужный оттенок для тени, блика или фона.

Почему художники не используют RGB?

Прежде чем разбирать HSV, давайте ответим на частый вопрос: почему мы не рисуем в RGB?

Как мы уже знаем, мониторы работают в модели RGB (Red, Green, Blue). Любой пиксель на экране состоит из трех микроскопических лампочек (красной, зеленой и синей). Смешивая их яркость от до , компьютер получает миллионы цветов.

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

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

1. Тон (Hue): Имя цвета

Цветовой тон (Hue) — это то, что мы в быту называем словом «цвет». Красный, синий, желтый, бирюзовый — всё это различные тона. С точки зрения физики, тон определяется длиной световой волны, отраженной от объекта.

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

* (и ) — Красный * — Желтый * — Зеленый * — Голубой (Cyan) * — Синий * — Пурпурный (Magenta)

> Аналогия: Представьте себе радиоприемник. Изменение параметра Hue — это вращение ручки настройки частоты. Вы переключаетесь с одной радиостанции (цвета) на другую.

Применение в геймдеве: В играх параметр Hue часто используется для создания вариаций объектов без перерисовки спрайтов. Этот прием называется Palette Swapping (замена палитры). Например, в классических RPG вы можете встретить одного и того же монстра (слизня или гоблина), но разного цвета. Зеленый слизень — слабый монстр из начальной локации, а красный (сдвиг Hue на ) — огненный слизень с повышенным уроном. Это экономит память игры и время художника.

2. Насыщенность (Saturation): Сочность и чистота

Насыщенность (Saturation) определяет интенсивность, или «чистоту» цвета. Она показывает, насколько цвет далек от нейтрального серого.

Насыщенность измеряется в процентах от до : * При мы имеем максимально чистый, спектральный цвет (например, лазерно-красный). * При цвет становится приглушенным, пастельным (пыльно-розовый или кирпичный). * При цвет полностью исчезает, оставляя только оттенок серого.

> Аналогия: Представьте стакан свежевыжатого, концентрированного апельсинового сока — это насыщенности. Если вы начнете доливать в него чистую воду, сок будет становиться всё более блеклым и водянистым, пока не потеряет свой вкус и цвет. Добавление воды — это снижение параметра Saturation.

Применение в геймдеве: Насыщенность — это мощнейший инструмент управления вниманием игрока. Человеческий глаз биологически запрограммирован реагировать на яркие, насыщенные пятна (в природе это могут быть спелые ягоды или ядовитые насекомые).

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

Интерактивные элементы и UI: Полоска здоровья, кнопки, сундуки с лутом, снаряды врагов рисуются с высокой насыщенностью ( - ).

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

Фон (Background): Деревья, горы, здания на заднем плане должны иметь пониженную насыщенность ( - ). Если вы нарисуете траву на фоне чистым зеленым цветом ( Saturation), она будет «кричать» на игрока, отвлекая его от геймплея и создавая визуальный шум.

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

3. Светлота (Value): Количество света

Светлота (Value) определяет, насколько цвет темный или светлый. Это количество света, которое попадает на объект.

Светлота также измеряется в процентах от до : * При цвет освещен максимально ярко. * При цвет превращается в абсолютно черный, независимо от того, какие значения стоят в Hue и Saturation. В полной темноте все кошки серы (а точнее, черны).

> Аналогия: Представьте, что вы смотрите на красное яблоко в комнате с диммером (регулятором яркости лампы). Яблоко всегда остается красным (Hue не меняется), но по мере того, как вы убавляете свет, оно становится бордовым, затем темно-коричневым, и, наконец, когда лампа выключена — черным. Это изменение параметра Value.

Применение в геймдеве: Как мы выяснили в статье про тон и контраст, Value — это фундамент любого рисунка. Именно разница в светлоте создает иллюзию объема (блик, полутень, собственная тень). Если перевести вашу игру в черно-белый режим (убрав Hue и Saturation), она всё равно должна оставаться читаемой. Если силуэты сливаются, значит, у вас проблемы с контрастом по Value.

!Трехмерная модель цветового пространства HSV в виде цилиндра

Трехмерное пространство цвета

Если объединить все три параметра, мы получим трехмерную фигуру — цилиндр или конус (в зависимости от визуализации в конкретной программе).

* Движение по кругу (периметру) — это изменение Hue. * Движение от центральной оси к внешнему краю — это изменение Saturation. * Движение снизу вверх по вертикальной оси — это изменение Value.

!Интерактивная модель HSV: управление тоном, насыщенностью и светлотой

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

Практическая магия: Сдвиг тона (Hue Shifting)

Теперь, когда мы понимаем анатомию цвета в HSV, мы можем разобрать самую важную технику в цифровой живописи и пиксель-арте — сдвиг тона (Hue Shifting).

Представьте, что вам нужно нарисовать тень на зеленом листе дерева. Самая частая ошибка новичка — взять базовый зеленый цвет и просто сдвинуть ползунок Value (Светлота) вниз, сделав его темнее.

Такой подход называется Straight Shading (прямое затенение). Результат всегда выглядит пластиковым, безжизненным и «грязным». Почему? Потому что в реальном мире тени не просто темнее, они имеют другой оттенок из-за влияния окружающей среды (например, синего света неба, рассеянного в тенях).

Чтобы объект выглядел живым, при рисовании тени и света нужно изменять все три параметра HSV одновременно.

Правило тепло-холодности

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

Алгоритм создания палитры со сдвигом тона:

Давайте создадим палитру для красного плаща персонажа.

1. Базовый цвет (Midtone): Выбираем чистый красный цвет. * H: (Красный) * S: (Достаточно насыщенный) * V: (Хорошо освещенный)

2. Создаем Тень (Shadow): Тень должна быть темнее, менее насыщенной (в темноте цвета блекнут) и более холодной. * V (Светлота): Уменьшаем до . * S (Насыщенность): Уменьшаем до . * H (Тон): Сдвигаем в сторону холодного цвета (к синему/фиолетовому). Меняем с на (Малиново-фиолетовый).

3. Создаем Блик (Highlight): Блик должен быть светлее, менее насыщенным (ближе к белому свету солнца) и более теплым. * V (Светлота): Увеличиваем до . * S (Насыщенность): Уменьшаем до (высветляем цвет). * H (Тон): Сдвигаем в сторону теплого цвета (к желтому). Меняем с на (Оранжевый).

| Зона | Hue (Тон) | Saturation (Насыщенность) | Value (Светлота) | Визуальный результат | | :--- | :--- | :--- | :--- | :--- | | Блик | (Сдвиг к желтому) | (Ближе к белому) | (Светлее) | Светло-оранжевый | | База | (Красный) | (Сочный) | (Норма) | Чистый красный | | Тень | (Сдвиг к фиолетовому) | (Бледнее) | (Темнее) | Темно-бордовый |

Использование сдвига тона мгновенно делает пиксель-арт профессиональным. Цвета начинают переливаться и взаимодействовать друг с другом. Этот принцип работает для любых материалов: от золотых монет до каменных стен замка.

Управление палитрой: Избегаем «кислотности»

Вторая частая ошибка при работе с HSV — злоупотребление ползунком Saturation. Когда новичок открывает палитру, рука сама тянется в правый верхний угол цветового квадрата, где цвета самые яркие и «вкусные» (, ).

Если нарисовать всю игру такими цветами, у игрока через 10 минут заболят глаза. Это называется «кислотной» или «неоновой» графикой.

Чтобы сбалансировать цвета, профессиональные художники используют правило, заимствованное из дизайна интерьеров: Правило 60-30-10.

* 60% экрана должны занимать доминирующие цвета с низкой насыщенностью ( - ). Это фоны, земля, стены зданий, небо. Они создают атмосферу и не утомляют глаз. * 30% экрана занимают вторичные цвета со средней насыщенностью ( - ). Это крупные объекты на уровне, платформы, деревья на переднем плане. * 10% экрана (или меньше) отводится под акцентные цвета с высокой насыщенностью ( - ). Это персонаж, важные предметы, эффекты заклинаний, UI.

Такое распределение создает визуальную иерархию. Глаз игрока отдыхает на спокойном фоне (60%) и мгновенно фокусируется на ярких, насыщенных деталях (10%), которые важны для прохождения игры.

Резюме

Модель HSV — это пульт управления цветом. * Hue (Тон) выбирает сам цвет на круге Иттена. * Saturation (Насыщенность) определяет, сколько в цвете серого. * Value (Светлота) решает, сколько на объект падает света.

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

В прошлой статье мы разобрали анатомию цвета через призму модели HSV (Тон, Насыщенность, Светлота) и научились делать цвета живыми с помощью сдвига тона. Теперь у нас есть точные инструменты для настройки любого оттенка. Однако перед художником встает следующий, более масштабный вопрос: как заставить разные цвета работать вместе?

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

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

Геометрия цвета: Зачем нужны схемы?

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

Цветовые схемы — это визуальные аккорды. Они решают три главные задачи в геймдеве и иллюстрации:

Управление вниманием: Помогают отделить главного героя от фона.

Создание настроения: Задают атмосферу локации (мрачное подземелье, солнечный пляж, токсичное болото).

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

Аналогичная гармония: Соседство и спокойствие

Аналогичная (или родственная) цветовая схема образуется из трех-четырех цветов, которые расположены вплотную друг к другу на цветовом круге.

Например: Желтый, Желто-зеленый и Зеленый. Или Синий, Сине-фиолетовый и Фиолетовый.

Психология и применение

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

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

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

> Если вы рисуете густой мистический лес, использование аналогичной схемы (от глубокого сине-зеленого в тенях до салатового на свету) создаст плотную, обволакивающую атмосферу. Фон не будет «кричать» и отвлекать игрока от геймплея.

Главная опасность: Потеря контраста

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

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

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

!Интерактивный цветовой круг для подбора гармоний

Комплементарная гармония: Битва противоположностей

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

Комплементарная гармония строится на двух цветах, которые находятся строго друг напротив друга на цветовом круге (угол между ними равен ).

Классические пары: * Красный и Зеленый * Синий и Оранжевый * Желтый и Фиолетовый

Психология и применение

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

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

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

Интерфейс (UI): Полоска здоровья часто красная, а мана — синяя. Если фон игры зеленый, красная полоска здоровья будет привлекать максимум внимания в критический момент.

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

Феномен Orange & Teal

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

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

!Схемы цветовых гармоний на круге Иттена

Главная опасность: Визуальная вибрация

Самая частая ошибка новичков при работе с комплементарными цветами — использование их в равных пропорциях и с одинаковой, максимальной насыщенностью (Saturation = ).

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

Как укротить комплементарную схему: Здесь на помощь приходит правило 60-30-10, которое мы обсуждали ранее.

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

> Пример правильного баланса: > Темный, приглушенный фиолетовый фон ночного города (доминирующий, площади, Saturation ). И на этом фоне — маленькое, но невероятно яркое желтое окно, в котором горит свет (акцент, площади, Saturation ). Глаз зрителя мгновенно и без напряжения найдет это окно.

Сплит-комплементарная гармония: Золотая середина

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

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

Например, вы выбрали Синий. Его прямой антипод — Оранжевый. Но вместо оранжевого вы берете Желто-оранжевый и Красно-оранжевый. На цветовом круге эта схема образует узкий треугольник (букву Y).

Преимущества сплит-схемы

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

Больше вариативности: У вас появляется три цвета вместо двух, что позволяет детальнее проработать материалы в пиксель-арте (например, использовать один теплый цвет для бликов металла, а второй — для кожаных ремней).

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

| Характеристика | Аналогичная схема | Комплементарная схема | Сплит-комплементарная | | :--- | :--- | :--- | :--- | | Количество цветов | 3-4 соседних | 2 противоположных | 3 (база + 2 напротив) | | Контраст тонов (Hue) | Низкий | Максимальный | Высокий | | Эмоция | Спокойствие, единство | Динамика, конфликт | Сложность, баланс | | Лучшее применение | Фоны, вода, леса | UI, взрывы, фокусные точки | Дизайн персонажей, боссы |

Практика: Собираем палитру для пиксельного спрайта

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

Шаг 1: Выбор схемы и ролей Яд ассоциируется с опасностью и кислотностью. Выберем комплементарную схему: Фиолетовый (стеклянная колба и тени) и Желто-зеленый (сама ядовитая жидкость).

* Доминанта (60%): Фиолетовое стекло. Оно будет темным и менее насыщенным. * Акцент (10%): Желто-зеленое свечение яда. Оно будет ярким и максимально насыщенным.

Шаг 2: Построение фиолетовой рамки (Стекло) Нам нужны три оттенка для объема колбы. Используем сдвиг тона:

База: Классический фиолетовый (Hue , Sat , Val ).

Тень: Сдвигаем тон в холодный синий, уводим светлоту вниз (Hue , Sat , Val ).

Блик стекла: Сдвигаем тон к теплого розовому, резко повышаем светлоту и роняем насыщенность почти до белого (Hue , Sat , Val ).

Шаг 3: Построение зеленого акцента (Яд) Жидкость светится изнутри, поэтому ее логика света будет обратной.

База: Ядовито-зеленый (Hue , Sat , Val ).

Ядро свечения (Блик): Сдвигаем к желтому, делаем ярче (Hue , Sat , Val ).

Края жидкости: Сдвигаем к изумрудному, чтобы плавно перейти в фиолетовое стекло (Hue , Sat , Val ).

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

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

Температура цвета: Теплые и холодные оттенки

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

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

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

Физика и психология: Разделение круга

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

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

Теплые цвета (от красного до желто-зеленого) ассоциируются с солнцем, огнем, песком и кровью. Они вызывают ощущение энергии, опасности, уюта или агрессии.

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

| Характеристика | Теплые оттенки (Красный, Оранжевый, Желтый) | Холодные оттенки (Синий, Голубой, Фиолетовый) | | :--- | :--- | :--- | | Эмоциональный фон | Активность, радость, тревога, уют | Покой, грусть, тайна, свежесть | | Физиологический эффект | Учащают пульс, привлекают внимание | Замедляют дыхание, расслабляют глаз | | Применение в UI/UX | Кнопки призыва к действию (Call to Action), урон, предупреждения | Фоны, неактивные элементы, мана, щиты |

> Важное правило: Не путайте температуру (Temperature) со светлотой (Value). > > Новички часто думают, что если добавить в цвет белый (сделать его светлее), он станет холоднее, а если добавить черный — теплее. Это ошибка. Светло-голубой и темно-синий — оба холодные. Бледно-желтый и темно-коричневый — оба теплые. Температура зависит исключительно от положения цвета на спектре (Hue), а не от его яркости.

Относительность температуры: Главный секрет художников

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

Главный закон гласит: Температура цвета всегда относительна.

Не существует абсолютно теплого или абсолютно холодного цвета в вакууме. Цвет приобретает свою температуру только в сравнении с соседом по холсту.

Возьмем, к примеру, красный цвет. Казалось бы, что может быть теплее? Но красный бывает разным:

Кадмий красный имеет легкую примесь желтого (сдвиг тона в сторону оранжевого). Это теплый красный.

Краплак (Ализарин) имеет легкую примесь синего (сдвиг тона в сторону фиолетового). Это холодный красный.

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

!Интерактивный компаратор температуры цвета

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

Как управлять температурой через Hue Shifting

Вспоминаем технику сдвига тона (Hue Shifting) из прошлых уроков. Теперь мы понимаем ее истинный смысл. Когда мы сдвигаем ползунок Hue при рисовании тени или блика, мы на самом деле меняем температуру цвета.

* Чтобы сделать цвет теплее, сдвигайте Hue в сторону желтого/оранжевого. * Чтобы сделать цвет холоднее, сдвигайте Hue в сторону синего/голубого.

Если вы рисуете зеленую траву, теплый блик на ней будет желто-зеленым, а холодная тень — сине-зеленой (изумрудной). Это создает вибрацию и живость, которых невозможно добиться, просто меняя ползунок светлоты (Value).

Пространственная иллюзия: Выступающие и отступающие цвета

Температура цвета — это мощнейший инструмент управления глубиной пространства на плоском 2D-экране. Этот эффект основан на физике рассеяния света в атмосфере Земли.

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

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

!Картина Альберта Бирштадта, демонстрирующая воздушную перспективу

Применение в геймдеве и левел-дизайне

Знание этого оптического обмана позволяет художникам управлять вниманием игрока и разделять планы (Foreground, Midground, Background).

Задний план (Background): Горы, дальние леса, небоскребы на горизонте всегда должны быть окрашены в холодные, малонасыщенные оттенки (синие, голубые, фиолетовые). Это физически «отталкивает» их вглубь монитора.

Передний план (Foreground): Земля под ногами персонажа, деревья на переднем плане должны содержать теплые оттенки (коричневые, теплые зеленые, охристые). Это «вытаскивает» их к зрителю.

Интерактивные объекты: Если вы хотите, чтобы игрок заметил сундук, рычаг или врага на фоне холодных декораций подземелья, сделайте их теплыми (красными, золотыми). Они мгновенно «отклеятся» от фона.

> Ошибка новичка: Нарисовать дальний лес ярко-желтым или теплым салатовым цветом. Как бы вы ни уменьшали размер деревьев, теплый цвет будет ломать перспективу, заставляя дальний план визуально лезть вперед и сливаться с персонажем.

Температура освещения: Теплый свет — холодная тень

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

В природе свет редко бывает идеально белым (нейтральным). Он всегда имеет температуру. И эта температура диктует цвет теней по правилу противоположностей.

Правило: Если источник прямого света теплый, то тени будут холодными. И наоборот.

Почему так происходит? Это не магия, а физика взаимодействия двух источников света.

Сценарий 1: Солнечный день (Теплый свет / Холодная тень)

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

Прямой свет: Солнце — это мощный источник теплого света. Освещенная сторона колонны окрасится в теплые желтовато-оранжевые оттенки.

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

!Влияние температуры освещения на собственные и падающие тени объекта

Сценарий 2: Пасмурный день или Зима (Холодный свет / Теплая тень)

Ситуация меняется, если небо затянуто плотными облаками.

Прямой свет: Облака работают как гигантский софтбокс, рассеивая свет. Освещение становится холодным, голубоватым или стерильно-белым.

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

Сценарий 3: Искусственное освещение

В интерьерах или ночных сценах правило работает так же безотказно: * Персонаж стоит у костра (теплый свет). Его освещенная сторона оранжевая. Теневая сторона, освещенная луной или ночным небом, будет глубоко синей. * Персонаж стоит под неоновой синей вывеской (холодный свет). Освещенная сторона синяя. Тени будут казаться теплыми, вбирая в себя рефлексы от окружения.

Практика: Избавляемся от «грязных» теней

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

Чтобы тень выглядела живой, она должна иметь температуру.

Алгоритм покраски красного плаща солнечным днем:

База (Полутень): Нейтральный красный.

Свет: Сдвигаем Hue в сторону оранжевого (теплее), повышаем Value (светлее), немного снижаем Saturation (чтобы не было «кислотности»).

Тень: Сдвигаем Hue в сторону фиолетового (холоднее), снижаем Value (темнее), можно слегка повысить Saturation для глубины.

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

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

Воздушная перспектива: Влияние атмосферы на цвет и тон

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

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

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

Физика иллюзии: Почему воздух не прозрачный

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

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

Этот процесс описывается физическим явлением, известным как рэлеевское рассеяние.

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

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

Три столпа воздушной перспективы

Чтобы убедительно передать глубину пространства на плоском холсте, необходимо управлять тремя характеристиками цвета (вспоминаем модель HSV: Hue, Saturation, Value). Атмосфера влияет на каждую из них по строгим правилам.

1. Сжатие тона (Value Compression)

Это самое важное правило воздушной перспективы. Тон (светлота) всегда важнее цвета для восприятия формы и глубины.

По мере удаления объекта контраст между его светом и тенью неуклонно падает. Атмосфера работает как осветляющий слой: * Темные участки (тени) светлеют быстрее всего. Воздух сам по себе светится (отражая свет неба), и это свечение перекрывает глубокие тени далеких объектов. * Светлые участки (блики) тускнеют и сливаются с цветом неба.

В результате тональный диапазон объекта сужается. Если на переднем плане мы используем всю шкалу от 0% (глубокая тень) до 100% (яркий блик), то на заднем плане этот диапазон может сжаться до узкой полоски между 70% и 80% светлоты.

| План (Расстояние) | Тональный диапазон (Value) | Контраст | Описание теней | | :--- | :--- | :--- | :--- | | Передний (Foreground) | От 10% до 90% | Максимальный | Глубокие, почти черные в местах окклюзии | | Средний (Midground) | От 40% до 80% | Средний | Заметно осветленные, мягкие | | Задний (Background) | От 70% до 85% | Минимальный | Бледные, сливаются с локальным цветом | | Глубокий фон (Skyline) | От 85% до 90% | Нулевой (Силуэт) | Отсутствуют, объект выглядит плоским пятном |

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

2. Потеря насыщенности (Saturation Drop)

Второе правило гласит: чем дальше объект, тем менее чистым и ярким кажется его цвет.

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

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

3. Сдвиг тона цвета (Hue Shifting к цвету среды)

Третий столп — изменение самого оттенка. Локальный цвет объекта постепенно заменяется цветом атмосферы.

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

!Интерактивная визуализация воздушной перспективы

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

Правило: Дальний план всегда стремится к цвету неба (или доминирующей атмосферы).

Детализация и края: Фокус камеры

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

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

Для пиксель-арта это правило является спасательным кругом.

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

Как применять потерю деталей в пиксель-арте:

Передний план: Используйте мелкие кластеры пикселей, высокий контраст, прорисовывайте фактуру материалов (камень, дерево, металл).

Средний план: Увеличьте размер пиксельных кластеров. Уберите мелкие блики. Оставьте только крупные формы света и тени.

Задний план: Используйте сплошные заливки (Flat colors) или минимальный градиент. Никакого дизеринга (dithering) и текстур. Только чистый, читаемый силуэт.

!Разделение 2D-сцены на планы

Практика: Метод слоеного пирога в 2D-играх

В 2D-играх (особенно платформерах и метроидваниях) иллюзия глубины создается с помощью технологии параллакса (Parallax Scrolling) — когда разные слои фона движутся с разной скоростью.

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

Слой 1: Интерактивный план (Foreground / Gameplay Layer)

Это слой, по которому бегает персонаж. Здесь находятся враги, платформы, сундуки. * Тон: Полный диапазон. Самые темные тени (окклюзия) и самые яркие блики. * Цвет: Максимальная насыщенность. Теплые оттенки (коричневая земля, зеленая трава) активно выступают вперед. * Детали: Высокая детализация. Четкие контуры (Lineart), если этого требует стиль.

Слой 2: Ближний фон (Midground 1)

Деревья, растущие сразу за игровой зоной. * Тон: Тени становятся светлее (нет чистого черного). Блики приглушаются. * Цвет: Насыщенность падает на 20-30%. В зеленый цвет листвы подмешивается немного синего неба (Hue shift). * Детали: Контуры становятся мягче. Исчезает мелкая текстура коры.

Слой 3: Дальний фон (Midground 2)

Лес вдалеке. * Тон: Контраст минимален. Объекты выглядят как плоские пятна с легким намеком на объем. * Цвет: Насыщенность падает на 60%. Цвет становится явно сине-зеленым. * Детали: Внутренних деталей нет. Форма читается только за счет силуэта.

Слой 4: Горизонт (Background)

Далекие горы у самого неба. * Тон: Очень светлые, всего на 5-10% темнее самого неба. * Цвет: Почти монохромный голубой/синий. Насыщенность стремится к нулю (серо-голубой). * Детали: Абсолютно плоские силуэты. Никаких линий или теней.

> Практический совет для Aseprite: Чтобы быстро создать дальний план из объекта переднего плана, создайте новый слой поверх объекта, залейте его цветом неба, установите режим наложения (Blend Mode) на Normal и снизьте непрозрачность (Opacity) до 60-80%. Это математически точно сымитирует плотность атмосферы.

Ошибки новичков и как их избежать

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

Ошибка 1: Черные тени на горизонте

Самая частая проблема. Художник рисует далекую гору и добавляет в ее расщелины глубокие черные тени, чтобы показать объем. Почему это не работает: Черный цвет имеет нулевую светлоту (Value = 0). В реальном мире слой воздуха между вами и горой светится, физически не позволяя черному цвету дойти до ваших глаз. Черная тень вдалеке мгновенно ломает перспективу, визуально «вытаскивая» гору на передний план. Решение: Используйте пипетку (Eyedropper), чтобы проверить тон теней на дальнем плане. Они должны быть светлее, чем освещенные участки на переднем плане!

Ошибка 2: Игнорирование цвета среды

Художник рисует ночную сцену с фиолетовым небом, но дальние объекты делает просто темно-серыми. Почему это не работает: Атмосфера всегда передает свой цвет объектам. Серый цвет выглядит неестественно и грязно (эффект «грязного монитора»). Решение: Всегда сдвигайте Hue дальних объектов в сторону цвета неба. Ночью дальние горы должны быть темно-фиолетовыми или темно-синими, а не серыми.

Ошибка 3: Обратная воздушная перспектива

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

Подводя черту: Управление вниманием

Воздушная перспектива — это не просто дань реализму. Это мощнейший инструмент композиции и геймдизайна.

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

Это позволяет вам направить 100% внимания игрока на передний план: на главного героя, платформы, ловушки и интерактивные объекты. Вы создаете визуальную иерархию, где графика помогает геймплею, а не спорит с ним за внимание зрителя.

Психология цвета: Эмоциональное воздействие палитры

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

Теперь пришло время ответить на вопрос: зачем мы выбираем тот или иной цвет?

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

Корни восприятия: Биология против Культуры

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

Биологические ассоциации

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

* Красный: Цвет крови, огня и спелых ягод. Он сигнализирует о крайней важности объекта. Это либо источник энергии (пища, тепло), либо смертельная угроза (хищник, рана). Именно поэтому красный цвет имеет максимальный визуальный вес и мгновенно приковывает внимание. * Синий и Голубой: Цвета ясного неба и чистой воды. В природе они означают отсутствие непогоды и наличие жизненно важного ресурса. Синий снижает частоту пульса и вызывает чувство безопасности. * Зеленый: Цвет густой растительности. Сигнализирует о плодородии, наличии укрытия и пищи. * Желтый и Черный: Классический природный паттерн предупреждения (апосематическая окраска). Осы, ядовитые змеи и лягушки используют этот контраст, чтобы сказать: «Не трогай меня, это опасно».

Культурный контекст

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

> Белый цвет в западной культуре символизирует чистоту, невинность и мир (платье невесты, белый флаг). Однако в ряде стран Азии (например, в Китае и Японии) традиционный белый — это цвет траура и смерти.

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

Эмоциональный спектр базовых цветов

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

Красный: Энергия, Агрессия, Жизнь

Красный — самый активный цвет. Он визуально выступает вперед (вспоминаем правило тепло-холодности) и требует немедленной реакции.

* В геймдизайне: Используется для индикации урона, вражеских атак (красные зоны AoE), взрывоопасных бочек и критически важных кнопок. В дизайне персонажей: Красный плащ или броня выдают лидера, агрессивного воина или страстного героя. Спартанцы в God of War или Данте из Devil May Cry* не случайно носят красное.

Желтый: Радость, Тревога, Безумие

Желтый — самый светлый цвет спектра (имеет наивысший показатель Value среди чистых цветов). Он первым бросается в глаза даже при слабом освещении.

* Позитивный аспект: Солнечный свет, золото, сокровища, божественное сияние. Желтый часто используют для подсветки интерактивных объектов (желтая краска на уступах, по которым можно карабкаться). * Негативный аспект: В сочетании с черным — знак радиации или биологической угрозы. Слегка смещенный в зеленую сторону (Hue Shift), желтый вызывает ассоциации с болезнью, гниением и безумием.

Зеленый: Природа, Исцеление, Токсичность

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

* Позитивный аспект: Безопасные зоны, магия исцеления, друиды, эльфы. * Негативный аспект: Яд, кислота, некромантия.

Как один цвет может означать и жизнь, и смерть? Все дело в характеристиках HSV. Чистый, насыщенный зеленый с легким уходом в желтый (салатовый) ассоциируется с весной. Но если мы снизим светлоту (Value) и добавим неестественное свечение, мы получим классический «кислотный» цвет, сигнализирующий об опасности.

Синий: Спокойствие, Интеллект, Холод

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

* В геймдизайне: Безопасные комнаты (Safe Rooms), технологичные интерфейсы (Sci-Fi голограммы), магия льда и иллюзий. * В дизайне персонажей: Синий часто носят маги, тактики, хладнокровные убийцы или персонажи с трагичным прошлым. Он символизирует контроль над эмоциями.

Фиолетовый: Тайна, Магия, Роскошь

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

* В играх: Цвет тайной магии (Arcane), космической пустоты, порчи (Corruption) и инопланетных технологий. Если вы хотите показать, что объект не принадлежит этому миру, сделайте его фиолетовым.

Контекст решает всё: Влияние Насыщенности и Светлоты (HSV)

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

Эмоция цвета рождается на пересечении всех трех параметров: Hue (Тон), Saturation (Насыщенность) и Value (Светлота).

Давайте посмотрим, как меняется характер красного цвета при изменении его параметров:

| Параметры (Примерно) | Визуальный результат | Эмоция и Ассоциация | Применение в играх | | :--- | :--- | :--- | :--- | | H: 0, S: 100%, V: 100% | Чистый алый | Экшен, энергия, аркадность | Платформеры, UI, взрывы | | H: 0, S: 100%, V: 30% | Темно-бордовый | Угроза, кровь, хоррор | Логово босса, игры на выживание | | H: 0, S: 30%, V: 100% | Пастельно-розовый | Нежность, инфантильность, покой | Романтические сцены, милые NPC | | H: 0, S: 20%, V: 40% | Серо-коричневый | Увядание, грязь, реализм | Постапокалипсис, окопы |

Правило насыщенности: Высокая насыщенность (Saturation > 80%) всегда воспринимается как нечто искусственное, аркадное или магическое. В реальном мире чистые цвета встречаются редко. Если вы делаете мрачную игру (Dark Fantasy), ваша главная задача — снизить общую насыщенность палитры, оставив яркие цвета только для спецэффектов (VFX) и глаз монстров.

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

!Интерактивный симулятор психологии цвета

Цветовое программирование (Color Scripting)

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

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

!Цветовой сценарий игрового уровня

Как это работает на практике? Представьте, что вы рисуете уровень для метроидвании:

Начало уровня (Исследование): Игрок попадает в кристальную пещеру. Вы используете аналогичную гармонию из синих и бирюзовых оттенков. Насыщенность средняя. Эмоция: спокойствие, интерес, холод.

Нарастание напряжения (Препятствия): По мере продвижения вглубь, синий цвет начинает сдвигаться (Hue Shift) в сторону фиолетового, а освещение становится темнее (Value падает). Появляются первые враги с желтыми светящимися глазами (комплементарный контраст к фиолетовому). Игрок подсознательно чувствует, что атмосфера сгущается.

Кульминация (Босс): Игрок падает на арену. Фиолетовый фон резко сменяется агрессивным красно-оранжевым освещением от лавы. Насыщенность максимальная. Контраст бьет по глазам. Эмоция: адреналин, опасность, ярость.

Развязка (Награда): Босс повержен. Красное освещение гаснет. Открывается дверь наружу, откуда льется теплый, мягкий золотисто-желтый свет. Эмоция: триумф, облегчение, тепло.

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

Практика: Психология цвета в Пиксель-арте

В пиксель-арте, особенно при работе с ограниченными палитрами (8, 16 или 32 цвета), психология цвета становится вопросом выживания. У вас нет возможности передать эмоцию через сложную мимику персонажа размером 16x16 пикселей. Цвет берет эту задачу на себя.

1. Изоляция персонажа от фона

Чтобы персонаж читался, его цветовая температура должна контрастировать с фоном. Если ваш уровень — это холодный синий замок, сделайте главного героя теплым (красный плащ, оранжевая броня). Это не только выделит его визуально, но и создаст психологический нарратив: «Живой, горячий герой против мертвого, холодного мира».

2. Ограничение палитры для создания настроения

Чем меньше цветов вы используете, тем сильнее их психологическое воздействие. * Монохромная палитра (разные оттенки одного цвета) создает гнетущее, сновидческое или ностальгическое настроение (вспомните зеленые экраны Game Boy). * Сплит-комплементарная палитра (например, темно-синий фон, акценты оранжевого и розового) отлично подходит для создания атмосферы киберпанка или синтвейва — она кричащая, искусственная и энергичная.

3. Использование цвета как геймплейного маркера

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

Управление вниманием через диссонанс

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

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

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

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

Ограниченные палитры: Зачем сокращать количество цветов

Современные мониторы способны отображать более 16 миллионов оттенков (стандартный 24-битный цвет RGB). В любом графическом редакторе, будь то Photoshop или Aseprite, вам доступна бесконечная палитра, где вы можете выбрать цвет с точностью до единого пикселя на цветовом круге. Казалось бы, это абсолютная свобода для художника.

Однако, если вы посмотрите на работы профессиональных пиксель-арт художников, вы заметите странную тенденцию: они намеренно ограничивают себя. Они рисуют целые миры, используя всего 32, 16, 8 или даже 4 цвета.

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

Парадокс выбора и страх чистого холста

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

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

> Ограничение — это катализатор креативности. Когда у вас есть только три цвета, чтобы передать объем, фактуру и освещение, вы перестаете бездумно кликать по палитре и начинаете думать формами, контрастом и силуэтом.

Исторический контекст: От нужды к стилю

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

* Nintendo Entertainment System (NES): Системная палитра состояла всего из 54 цветов. На один спрайт (персонажа или объект) можно было назначить только 3 цвета плюс один прозрачный. * Game Boy: Экран мог отображать ровно 4 оттенка (от темно-зеленого до светло-зеленого). Художникам приходилось передавать материалы камня, воды, кожи и металла, используя только эти четыре градации тона.

Сегодня у нас нет таких ограничений памяти. Мы используем ограниченные палитры (Limited Palettes) исключительно ради эстетики, визуального единства и контроля над вниманием зрителя.

Три фундаментальные причины сокращать палитру

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

1. Визуальная гармония и единство (Cohesion)

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

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

Это создает эффект цветового гамута (Color Gamut) — визуального клея, который связывает все элементы сцены воедино. Зритель подсознательно считывает, что все объекты находятся в одном пространстве и освещены одним источником света.

2. Принудительный фокус на тоне (Value)

В предыдущих статьях мы установили важнейшее правило: Тон (Value) важнее Цвета (Hue). Человеческий глаз распознает форму и глубину благодаря разнице в светлоте, а не благодаря разнице оттенков.

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

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

3. Скорость и итеративность

В геймдеве время — деньги. Если ваш персонаж состоит из 150 уникальных оттенков, создание анимации бега из 8 кадров превратится в кошмар. Вам придется следить за каждым пикселем, чтобы цвета не «поплыли».

Если персонаж нарисован 6 цветами, вы можете анимировать его в разы быстрее. Более того, ограниченная палитра позволяет использовать технику Palette Swapping (Замена палитры). Вы можете создать одного врага (например, гоблина), а затем программно заменить его 6 цветов на другие, получив ледяного гоблина, огненного гоблина или элитного гоблина-босса, не перерисовывая ни одного пикселя.

!Интерактивный симулятор постеризации и ограничения палитры

Анатомия палитры: Цветовые рампы (Color Ramps)

Ограниченная палитра не собирается случайным образом. Она строится из цветовых рамп (от англ. ramp — скат, уклон).

Цветовая рампа — это последовательность оттенков одного базового цвета, выстроенная от самого темного (тень) к самому светлому (блик). Обычно рампа состоит из 3–5 цветов.

Как построить правильную рампу: Правило сдвига тона

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

Правильная рампа строится по трем осям HSV:

Базовый цвет (Midtone): Ваш локальный цвет объекта. Например, нейтральный красный.

Тень (Shadow): Снижаем Value (делаем темнее), немного снижаем Saturation (чтобы тень не «кричала») и сдвигаем Hue в холодную сторону (ближе к фиолетовому/синему).

Свет (Highlight): Повышаем Value (делаем светлее), снижаем Saturation (блик выбеливает цвет) и сдвигаем Hue в теплую сторону (ближе к оранжевому/желтому).

Пример идеальной рампы для золотой монеты: * Тень: Темно-коричневый с уходом в красный. * База: Насыщенный оранжево-желтый. * Свет: Светло-желтый. * Блик: Почти белый с легким лимонным оттенком.

Контраст внутри рампы

Распространенная ошибка — делать цвета в рампе слишком похожими друг на друга. Если разница в светлоте между базовым цветом и тенью составляет всего 5-10%, на экране они сольются. Это называется Banding (полосатость) — оптическая иллюзия, при которой плавные градиенты в пиксель-арте выглядят как грязные ступеньки.

Чтобы избежать этого, шаги светлоты в рампе должны быть уверенными.

Контраст = Светлота светлого оттенка - Светлота темного оттенка.

Если вы работаете в шкале Value от 0 до 100, старайтесь, чтобы шаг между цветами в рампе был не менее 15-20 единиц. Лучше иметь жесткую, рубленую тень из 2 цветов, чем «мыльный» градиент из 5 цветов, которые почти не отличаются.

Магия пиксель-арта: Объединение цветов (Color Sharing)

Если для каждого материала (кожа, сталь, дерево, ткань) создавать свою отдельную рампу из 4 цветов, ваша палитра быстро разрастется до 40-50 оттенков. Это уже не ограниченная палитра.

Настоящее мастерство пиксель-арта заключается в технике Color Sharing (Разделение/Объединение цветов). Это процесс, при котором один и тот же цвет используется в разных рампах для разных целей.

!Схема объединения цветовых рамп

Как работает Color Sharing на практике

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

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

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

Идем дальше. Самый светлый цвет в коричневой рампе (светлая кожа) может иметь желтоватый оттенок. Почему бы не использовать этот же цвет как базовый полутон для золотого амулета? А самый светлый серый цвет брони может стать бликом на этом же амулете.

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

Преимущества объединения цветов

Экономия палитры: Вы радикально сокращаете количество цветов, что критически важно для ретро-стилистики.

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

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

Пошаговый алгоритм: Создаем палитру из 16 цветов

Давайте перейдем от теории к практике и соберем универсальную палитру из 16 цветов, подходящую для создания игрового уровня (например, леса с руинами).

Шаг 1: Определение тонального диапазона (Value Scale)

Прежде чем думать о цветах, создайте шкалу светлоты. Для 16 цветов нам понадобится примерно 4-5 уровней светлоты. Создайте 5 серых квадратов: от почти черного (Value 10%) до почти белого (Value 95%). Это скелет вашей палитры.

Шаг 2: Выбор цвета атмосферы (Универсальные тени)

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

Берем два самых темных серых квадрата из Шага 1 и окрашиваем их в глубокий темно-синий и насыщенный фиолетово-синий. Эти два цвета будут общими тенями для всех объектов на уровне (деревьев, камней, земли).

Шаг 3: Создание базовых рамп (Midtones)

Определяем основные материалы уровня: * Листва: Нужна зеленая рампа. Создаем средний зеленый и светлый желто-зеленый. * Земля/Дерево: Нужна коричневая рампа. Создаем средний коричневый и теплый оранжево-коричневый. * Камень/Руины: Нужна серая рампа. Создаем средний сине-серый и светлый серый.

Шаг 4: Расстановка акцентов (Комплементарные цвета)

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

Основной цвет уровня — зеленый. Комплементарный (противоположный) к нему — красный. Добавляем в палитру яркий красный и светло-розовый (для бликов). Эти цвета будут использоваться только для ядовитых грибов, глаз монстров или зелий здоровья.

Шаг 5: Сшивание и полировка (Color Sharing)

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

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

Типичные ошибки при работе с ограниченной палитрой

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

1. Цвета-сироты (Orphan Colors)

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

Почему это плохо: Это нарушает цветовую гармонию и тратит ценный слот в ограниченной палитре. Как исправить: Используйте Color Sharing. Замените этот голубой на самый светлый цвет из вашей серой или зеленой рампы. В контексте кольца зритель все равно поймет, что это драгоценный камень, благодаря контрасту.

2. Слишком много полутонов (Midtone Bloat)

Художник создает рампу из 6 цветов, где 4 цвета находятся в среднем диапазоне светлоты (Value от 40% до 60%), один очень темный и один очень светлый.

Почему это плохо: Полутона сливаются друг с другом. Картинка выглядит «мыльной», теряется резкость, свойственная хорошему пиксель-арту. Форма становится плоской. Как исправить: Удалите лишние полутона. Оставьте один цвет для собственной тени, один для базы и один для света. Увеличьте контраст между ними.

3. Игнорирование фона при выборе палитры

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

Почему это плохо: Цвета персонажа и фона имеют одинаковую светлоту (Value) или одинаковую температуру. Нет визуального разделения планов. Как исправить: Применяйте правило тепло-холодности и воздушной перспективы. Если фон холодный и низкоконтрастный, персонаж должен быть теплым и высококонтрастным. Палитра персонажа должна содержать самые темные и самые светлые пиксели на экране.

Анализ шедевра: Палитра DB32

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

В чем ее гениальность?

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

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

Идеальное сшивание: Желтая рампа плавно перетекает в зеленую, красная — в фиолетовую. Вы можете взять любой цвет из DB32, и он гарантированно будет гармонично смотреться рядом с 4-5 другими цветами.

Заключение фундаментального блока

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

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

Теперь у вас есть прочный фундамент. В следующих шагах мы перейдем к сугубо практическим вещам: мы откроем Aseprite, изучим анатомию самого пикселя, научимся бороться с «зубчатыми» линиями (jaggies) и начнем применять всю эту теорию для создания реальной игровой графики.

```

Создание гармоничной цветовой палитры для игрового ассета

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

Представьте, что вы открываете пустой холст. Ваша задача — нарисовать игровой ассет (любой отдельный элемент игры: бочку, меч, зелье или персонажа). У вас есть знания о свете, тени и цветовом круге, но с чего именно начать выбор цветов? Как из бесконечного спектра собрать те самые 8–12 оттенков, которые сделают предмет объемным, сочным и вписанным в игровой мир?

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

Шаг 1: Контекст и локальный цвет

Главная ошибка новичков — пытаться раскрасить объект в вакууме. Цвет не существует сам по себе; он всегда зависит от освещения и окружения.

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

Однако в игре нейтрального белого света почти не бывает. Поэтому задайте себе три вопроса:

Какова функция этого ассета? (Это фоновый камень, который не должен привлекать внимание, или сундук с лутом, который игрок обязан заметить?)

Из какого материала он сделан? (Матовое дерево поглощает свет, а глянцевый металл отражает окружение).

В какой среде он находится? (Теплый солнечный день, холодная пещера, ядовитое болото).

> Цвет объекта = Локальный цвет + Цвет источника света + Цвет окружающей среды (рефлексы).

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

Шаг 2: Базовые цвета и правило 60-30-10

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

Здесь на помощь приходит правило пропорций 60-30-10, пришедшее из классического дизайна и архитектуры. Оно гласит, что для создания гармоничного образа цвета должны распределяться неравномерно:

* 60% — Доминирующий цвет. Это основа вашего ассета. Обычно это нейтральный или наименее насыщенный цвет, который задает общее настроение и формирует основную массу предмета. * 30% — Вторичный цвет. Он поддерживает доминирующий, но отличается от него по тону или светлоте. Создает визуальный интерес и разбивает монотонность. * 10% — Акцентный цвет. Самый яркий, насыщенный и контрастный оттенок. Используется точечно для привлечения внимания к ключевым деталям (глаза персонажа, магический кристалл, лезвие оружия).

!Инфографика: применение правила 60-30-10 на примере фэнтезийного зелья

Рассмотрим применение этого правила на примере дизайна рыцаря: * 60% — Холодный серый (стальная броня, покрывающая большую часть тела). * 30% — Теплый темно-коричневый (кожаные ремни, сапоги, рукоять меча — создает контраст материалов). * 10% — Насыщенный красный (плюмаж на шлеме и герб на груди — фокусные точки для глаз игрока).

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

Шаг 3: Построение цветовых рамп (Свет и Тень)

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

Вспоминаем важнейшее правило из предыдущих уроков: нельзя просто добавлять черный для тени и белый для света. Это убивает цвет, делая его «грязным» и «пластиковым». Мы обязаны использовать сдвиг тона (Hue Shifting).

Механика сдвига тона

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

Как это работает математически на шкале HSV (Hue, Saturation, Value):

* Базовый цвет (Midtone): Ваш исходный локальный цвет. * Свет (Highlight): Увеличиваем светлоту (), немного снижаем насыщенность (, так как яркий свет выбеливает пигмент) и сдвигаем ползунок тона () в сторону желтого/оранжевого. * Тень (Shadow): Снижаем светлоту (), увеличиваем насыщенность (, так как в тени цвет часто кажется более густым) и сдвигаем ползунок тона () в сторону синего/фиолетового.

Сравнение подходов

Давайте посмотрим, как выглядит рампа для красного плаща при неправильном и правильном подходах.

| Параметр | «Мертвая» рампа (Без сдвига) | «Живая» рампа (Hue Shifting) | | :--- | :--- | :--- | | Блик | Светло-красный (розоватый) | Оранжево-желтый (теплый свет) | | База | Чистый красный | Чистый красный | | Тень | Темно-красный (бордовый) | Холодный пурпурный/фиолетовый | | Окклюзия | Почти черный | Глубокий темно-синий |

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

!Интерактивный симулятор цветовых рамп: сравнение линейного градиента и сдвига тона

Шаг 4: Унификация палитры (Color Sharing)

Если вы создадите три идеальные рампы для дерева, металла и ткани, ваш ассет может выглядеть разрозненно. Цвета будут существовать отдельно друг от друга. Чтобы «склеить» предмет воедино, применяется техника Color Sharing (объединение цветов).

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

Общая тень (Ambient Shadow)

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

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

Это дает два мощных эффекта:

Сокращает количество цветов в палитре.

Создает иллюзию, что все части предмета находятся в одной и той же среде и освещены одним и тем же рассеянным светом.

Общий блик

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

Практический кейс: Палитра для Магического Сундука

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

Задача: Нарисовать старый деревянный сундук, окованный железом, внутри которого светится магический зеленый кристалл. Сундук стоит в темном подземелье.

Шаг 1: Контекст. Среда темная и холодная (подземелье). Значит, общие тени будут уходить в холодный сине-фиолетовый. Источник света двойной: тусклый рассеянный свет подземелья и яркий внутренний зеленый свет от кристалла.

Шаг 2: Пропорции (60-30-10). * 60% — Дерево (коричневый). * 30% — Железо (серый). * 10% — Кристалл и его свечение (неоновый зеленый).

Шаг 3: Создание рамп. Нам нужно около 10-12 цветов. Строим три рампы:

Дерево: Базовый коричневый. Тень сдвигаем в фиолетовый. Свет сдвигаем в желтый.

Железо: Базовый сине-серый (металл отражает холодное подземелье). Тень уводим в глубокий синий. Свет делаем бледно-голубым.

Кристалл: Базовый изумрудный. Свет — салатовый. Блик — почти белый с каплей зеленого.

Шаг 4: Унификация и рефлексы. Теперь магия. Мы не оставляем эти рампы изолированными: * Берем самый темный сине-фиолетовый из рампы железа и используем его как самую глубокую тень для щелей между досками дерева. * Берем базовый изумрудный цвет кристалла и добавляем его как рефлекс на внутренние металлические скобы и края деревянной крышки. Железо и дерево начинают отражать свет кристалла. * Берем салатовый цвет (свет кристалла) и используем его как блик на металлических заклепках, которые находятся ближе всего к источнику магии.

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

Шаг 5: Проверка контраста (Тест с прищуриванием)

Даже самая красивая палитра бесполезна, если ассет не читается на экране. В пылу работы с оттенками (Hue) легко забыть о светлоте (Value).

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

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

> Математическое правило читаемости: . Если разница в светлоте (Value) между соседними ступенями вашей рампы меньше 10-15%, они сольются на экране монитора, создав эффект грязи.

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

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

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

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

Психология базовых форм

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

Квадрат: Стабильность и искусственность

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

* Эмоциональный посыл: Надёжность, тяжесть, неповоротливость, порядок, упрямство, защита. * Применение в играх: Тяжёлая броня паладина, сундуки, сейфы, индустриальные здания, неподвижные платформы. Если вы создаёте класс персонажа «Танк», его силуэт должен вписываться в массивный прямоугольник.

Круг: Жизнь и дружелюбие

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

* Эмоциональный посыл: Мягкость, доброта, упругость, магия, невинность, подвижность. * Применение в играх: Монетки, магические щиты, зелья, дружелюбные NPC. Вспомните Пакмана, Кирби или слаймов из любой RPG — их дизайн целиком построен на кругах, что делает их визуально приятными и «безопасными» (даже если они враги).

Треугольник: Динамика и агрессия

Треугольник — самая нестабильная и агрессивная форма. Если он стоит на вершине, он готов упасть в любую секунду (максимальное визуальное напряжение). Его острые углы ассоциируются с клыками, шипами и лезвиями.

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

!Базовые геометрические фигуры в дизайне персонажей

> «Форма всегда следует за функцией. Если персонаж должен колоть — делайте его острым. Если должен защищать — делайте его квадратным». > > Луис Силва, концепт-художник

Сравнительная таблица форм

| Форма | Визуальный вес | Ассоциации | Типичный игровой архетип | | :--- | :--- | :--- | :--- | | Квадрат | Максимальный (тяжёлый) | Камень, стена, коробка | Танк, стражник, рабочий | | Круг | Средний (парящий) | Облако, пузырь, мяч | Целитель, питомец, маг | | Треугольник | Лёгкий (направленный) | Огонь, молния, клинок | Разбойник, злодей, стрелок |

Пропорции: Отношение частей к целому

Сама по себе форма — это лишь половина дела. Вторая, не менее важная часть — это пропорции.

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

Где — это коэффициент пропорции (aspect ratio), — ширина объекта, а — его высота. Например, если ширина спрайта сундука 32 пикселя, а высота 16 пикселей, то . Это означает, что сундук в два раза шире своей высоты, что делает его визуально очень устойчивым.

Правило 70 / 30 / 10 (Контраст масс)

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

В дизайне существует золотое правило распределения масс (пропорций), которое помогает создать гармоничный, но не скучный объект:

70% (Большая масса): Основной объём, задающий базу. Например, массивный торс кузнеца.

30% (Средняя масса): Вторичный объём, поддерживающий базу. Например, ноги кузнеца.

10% (Малая масса / Акцент): Мелкая деталь, привлекающая внимание. Например, маленькая голова кузнеца или яркая пряжка на поясе.

Контраст между огромным торсом (70%) и маленькой головой (10%) мгновенно сообщает игроку: «Этот парень невероятно силён физически, но вряд ли отличается высоким интеллектом». Вы рассказали историю, просто изменив пропорции трёх прямоугольников.

!Интерактивная демонстрация пропорций персонажа

Пропорции и возраст (Правило голов)

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

* Реалистичный взрослый человек: 7.5 – 8 голов. * Подросток: 6 голов. * Ребёнок: 4 головы. * Младенец: 3 головы.

В инди-играх и пиксель-арте реализм часто отходит на второй план ради читаемости. Появляется стиль Chibi (чиби), где персонаж имеет пропорции 1:1 или 1:2 (голова занимает половину или треть всего тела).

Зачем это нужно? В низком разрешении (например, спрайт 16x24 пикселя) лицо — это самая важная часть для передачи эмоций. Если вы сделаете реалистичные пропорции (8 голов), то на голову останется всего 3 пикселя. Вы не сможете нарисовать ни глаза, ни рот. Искажение пропорций в пользу огромной головы решает эту техническую проблему и делает персонажа более милым (так как пропорции отсылают к младенцам).

Деконструкция: Рентгеновское зрение художника

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

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

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

Пример из практики: Рисуем меч

Не пытайтесь сразу рисовать узоры на гарде или сколы на лезвии.

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

Острие лезвия — это треугольник, прикреплённый к вершине прямоугольника.

Гарда (защита для рук) — это горизонтальный прямоугольник, пересекающий лезвие.

Навершие (противовес на конце рукояти) — это круг.

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

Как тренировать деконструкцию

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

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

От плоских фигур к пиксельной сетке

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

Однако, когда мы перейдём к пиксель-арту, мы столкнёмся с уникальной проблемой. Нарисовать идеальный квадрат из пикселей легко — пиксель сам по себе квадратный. Но как нарисовать идеальный круг или острый треугольник, используя только квадратные блоки?

Если просто набросать пиксели по кругу, форма получится зубчатой, «рваной» и грязной. Чтобы круг выглядел круглым при разрешении 32x32 пикселя, необходимо понимать математические алгоритмы расположения пикселей и принципы сглаживания (anti-aliasing).

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

Анализ референсов: Разбор чужих работ на формы и цвета

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

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

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

Зачем нужны референсы и правило «Франкенштейна»

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

В индустрии геймдева существует негласное правило: один референс — это плагиат, десять референсов — это исследование.

Чтобы создать уникальный игровой ассет, применяется метод «Франкенштейна». Вы не берете одну картинку целиком. Вы собираете мудборд (доску настроения) и берете разные аспекты из разных источников: * Из референса А вы берете силуэт и пропорции. * Из референса Б вы заимствуете цветовую палитру. * Из референса В вы изучаете фактуру материала (например, как ржавеет металл). * Из референса Г вы берете схему освещения.

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

Этап 1: Деконструкция формы и силуэта

Первый шаг в анализе любой работы — игнорирование деталей. Нас не интересуют заклепки на броне, текстура коры дерева или блики на стекле. Нас интересует фундамент.

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

Анализ пропорций (Правило 70/30/10)

Посмотрите на силуэт объекта. Как распределены его массы? Если вы анализируете дизайн успешного игрового персонажа (например, рыцаря), вы редко увидите равномерное распределение деталей. Скорее всего, вы обнаружите правило 70/30/10 в действии: * 70% силуэта занимает крупная, спокойная форма (массивный торс в броне). * 30% — средние формы, задающие ритм (наплечники, поножи). * 10% — мелкие, детализированные формы в зоне фокуса (шлем, узор на гарде меча).

Поиск 3D-примитивов

Попробуйте мысленно (или прямо поверх картинки, если работаете в графическом редакторе) обвести основные объемы красными линиями.

> «Не пытайтесь нарисовать глаз. Нарисуйте сферу, вставленную в глазницу, и оберните ее толщиной век. Только поняв базовый объем, вы сможете правильно положить на него свет». > > Эндрю Лумис, классик американской иллюстрации

Если вы анализируете концепт-арт сундука, найдите его базовый bounding box (ограничивающий куб). Определите, где находится линия горизонта и точки схода. Поймите, в какой перспективе (одноточечной или двухточечной) построен объект.

!Схема деконструкции сложного объекта на базовые составляющие

Этап 2: Анализ тона (Value) и освещения

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

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

Перевод в Grayscale

Сохраните референс и переведите его в черно-белый режим в любом редакторе (в Aseprite это можно сделать через Sprite -> Color Mode -> Grayscale, в Photoshop — создав корректирующий слой Black & White).

Теперь задайте себе следующие вопросы:

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

Как разделены планы? Проанализируйте воздушную перспективу. Вы заметите, что объекты на переднем плане имеют полный диапазон от черного до белого (100% контраст). Объекты на среднем плане теряют самые темные тени (контраст падает до 60%). Задний план превращается в светло-серые силуэты (контраст 10-20%).

Где источник света? Найдите самые светлые плоскости (свет) и самые темные (собственная тень). Линия между ними — это терминатор. По направлению падающей тени вычислите, под каким углом светит виртуальное солнце или лампа.

Тест с прищуриванием

Если под рукой нет графического редактора, используйте биологический инструмент — прищур. Сильно прищурьте глаза, глядя на референс. Мелкие детали исчезнут, и вы увидите работу как набор из 3-4 крупных тональных пятен. Это позволяет оценить читаемость силуэта. Если при прищуривании персонаж сливается с фоном, значит, автор референса допустил ошибку в тональном балансе (или это намеренный камуфляж).

!Интерактивный инструмент для анализа референсов: переключение между оригиналом, картой тона и геометрическим каркасом

Этап 3: Анализ цвета и «Ловушка пипетки»

Когда форма и тон понятны, можно переходить к цвету. И здесь новичков поджидает самая опасная ошибка — «Ловушка пипетки» (Eyedropper Trap).

Кажется логичным: если вам нравится цвет неба на фотографии или арте, нужно просто взять инструмент «Пипетка» (Eyedropper), кликнуть по картинке и забрать цвет в свою палитру. Но результат почти всегда выглядит грязно и неестественно.

Почему пипетка врет?

Оптическое смешение и артефакты. Цифровые изображения (особенно JPEG) содержат шум и артефакты сжатия. Кликнув пипеткой в «чистое синее небо», вы можете случайно попасть в серый, фиолетовый или даже зеленоватый пиксель, который появился из-за компрессии.

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

| Действие | Результат новичка (Пипетка) | Результат профи (Анализ) | | :--- | :--- | :--- | | Цель | Получить цвет тени на красном плаще | Понять логику построения тени | | Метод | Клик пипеткой в темный участок | Оценка HSV (Hue, Saturation, Value) | | Итог | Грязно-бордовый или черный цвет | Понимание, что автор сдвинул тон (Hue) в фиолетовый, повысил насыщенность (Sat) и снизил светлоту (Val) |

Как правильно анализировать цвет

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

Определите локальные цвета. Какого цвета объект на самом деле, без учета света и тени?

Найдите цветовую гармонию. Откройте цветовой круг Иттена. Какие цвета доминируют на референсе? Это комплементарная схема (синий против оранжевого)? Аналогичная (зеленый, желто-зеленый, желтый)?

Проверьте правило 60-30-10. Найдите доминирующий цвет (фон, основная масса), вторичный цвет (поддержка) и акцентный цвет (мелкие, самые насыщенные детали).

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

Практический пример: Разбор скриншота

Допустим, мы анализируем скриншот из качественной 2D-игры (например, лесной уровень), чтобы понять, как нарисовать свой тайлсет.

1. Форма: Мы видим, что деревья на переднем плане не прорисованы до каждого листика. Они сгруппированы в крупные массы, напоминающие сферы и цилиндры. Силуэты читаются четко за счет негативного пространства между ветвями.

2. Тон: Переводим скриншот в Ч/Б. Замечаем строгую иерархию. Передний план (земля, по которой бежит герой) — самый темный, почти черный (Value 10-20%). Средний план (игровые платформы и враги) — средний серый (Value 40-60%). Задний план (далекий лес и небо) — очень светлый (Value 80-90%). Это классическое разделение планов, которое не дает игроку запутаться, где интерактивные объекты, а где декорации.

3. Цвет: Анализируем палитру. Локальный цвет леса — зеленый. Но мы видим, что тени на деревьях не темно-зеленые, а глубокие сине-фиолетовые. Блики на листьях — теплые желто-оранжевые. Автор использовал комплементарный контраст (желто-оранжевый свет против сине-фиолетовых теней), чтобы оживить скучный зеленый цвет. Насыщенность распределена неравномерно: фон тусклый (низкий Saturation), а главный герой и важные предметы — яркие (высокий Saturation).

Резюме метода

Анализ референсов — это мост между теорией и вашей собственной практикой. Не пытайтесь изобретать велосипед, когда рисуете сложный материал (золото, стекло, кожу) или необычный ракурс. Найдите 3-5 качественных фотографий или артов профессионалов.

Разбейте их на слои восприятия: сначала найдите скрытые 3D-примитивы, затем оцените тональный контраст в черно-белом режиме, и только в конце проанализируйте логику цветовых сдвигов. Забирайте идеи, принципы и физические законы, объединяйте их через метод «Франкенштейна», и ваши собственные работы приобретут профессиональную глубину и убедительность.

Переход в 3D: Построение куба, цилиндра и сферы

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

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

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

Иллюзия глубины: Как обмануть мозг

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

Перекрытие (Overlapping): Если объект А закрывает собой часть объекта Б, мозг безошибочно делает вывод, что объект А находится ближе. Это самый простой и древний способ показать глубину.

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

Перспектива: Геометрическая система, описывающая, как объекты искажаются в пространстве.

В игровой индустрии, особенно в 2D и pixel art, используются два принципиально разных подхода к перспективе.

Линейная перспектива vs Изометрия

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

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

| Характеристика | Линейная перспектива | Изометрия | Применение в играх | | :--- | :--- | :--- | :--- | | Точки схода | Есть (одна, две или три) | Нет | Линейная: фоны для файтингов, визуальные новеллы. | | Искажение размеров | Объекты вдали меньше | Размеры неизменны | Изометрия: стратегии, градостроительные симуляторы, RPG (Diablo, Hades). | | Параллельные линии | Сходятся вдалеке | Остаются параллельными | Изометрия идеальна для тайловых игр, так как один ассет можно ставить в любое место экрана. |

Для инди-разработчика понимание изометрии критически важно. Если вы рисуете домик для стратегии, его крыша и основание должны подчиняться строгим параллельным сеткам, иначе здание будет казаться «кривым» по отношению к остальному миру.

Куб: Фундамент трехмерного мира

Куб (или прямоугольный параллелепипед) — это объемная версия квадрата. Это самая важная фигура в арсенале художника. Почему? Потому что куб служит идеальным bounding box (ограничивающим контейнером) для любого другого сложного объекта.

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

Как построить изометрический куб

Построение куба без точек схода (в изометрии) — это отличная тренировка пространственного мышления.

Нарисуйте вертикальную линию. Это будет ближайшее к вам ребро куба.

От нижней точки этой линии проведите две диагональные линии вверх под углом примерно 30 градусов к горизонтали (в пиксель-арте это классическая линия «два пикселя в сторону, один вверх»).

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

Опустите вертикальные линии от краев «крыши» вниз.

Соедините нижние точки параллельными диагоналями.

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

!Интерактивная демонстрация вращения куба

> «Если вы не можете нарисовать коробку под любым углом, вы не сможете нарисовать ничего сложнее коробки. Все формы в мире вписываются в параллелепипед». > > Ким Джон Ги, мастер пространственного рисунка

Цилиндр: Мост между углами и плавностью

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

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

Анатомия эллипса

Главная сложность при рисовании цилиндра кроется в его основаниях. В 3D-пространстве круг, на который мы смотрим под углом, искажается и превращается в эллипс.

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

У эллипса есть две математические оси: * Большая ось: Самая длинная линия, проходящая через центр эллипса. * Малая ось: Самая короткая линия, проходящая через центр перпендикулярно большой оси.

!Анатомия цилиндра и эллипса в перспективе

Степень раскрытия эллипса

То, насколько эллипс выглядит «круглым» или «сплюснутым», зависит от его положения относительно линии горизонта (уровня ваших глаз).

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

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

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

Сфера: Абсолютный объем

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

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

Как же заставить зрителя поверить, что перед ним объемный шар, а не плоский блин, если мы пока не используем свет и тень?

Контурные линии (Cross-contours)

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

Эти линии огибают форму шара. На плоском рисунке именно они задают объем.

Нарисуйте идеальный круг.

Определите, куда «смотрит» ваша сфера. Поставьте там точку (полюс).

Нарисуйте эллипс, который проходит через центр круга — это будет экватор.

Нарисуйте второй эллипс, перпендикулярный первому — это будет нулевой меридиан.

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

Деконструкция в 3D: Собираем сложные объекты

Теперь, когда у нас есть три базовых 3D-примитива (куб, цилиндр, сфера), мы можем применить навык деконструкции, о котором говорили в прошлой статье, но уже в трехмерном пространстве.

Любой объект реального мира — это просто конструктор Lego, собранный из этих трех деталей.

Давайте разберем дизайн классического фэнтезийного зелья маны:

Колба: Это большая сфера.

Горлышко: Это цилиндр, который врезается в верхнюю часть сферы.

Пробка: Это маленький цилиндр, вставленный в горлышко.

Ободок на горлышке: Это тор (бублик), который можно представить как цилиндр, обернутый вокруг другого цилиндра.

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

Толщина линии как инструмент объема

Даже на этапе линейного наброска (лайн-арта), до работы с цветом, вы можете усилить ощущение объема с помощью толщины самой линии (line weight).

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

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

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

Основы линейной перспективы: Одна точка схода

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

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

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

Анатомия перспективы: Два главных термина

Вся система линейной перспективы держится на двух фундаментальных понятиях. Без их понимания любой рисунок будет казаться «кривым» и неестественным.

1. Линия горизонта (Уровень глаз)

Линия горизонта — это воображаемая горизонтальная линия, которая всегда находится строго на уровне ваших глаз, независимо от того, куда вы смотрите.

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

В рисунке линия горизонта определяет, под каким углом зритель (или игрок) смотрит на сцену: Высокий горизонт (вид сверху): Зритель смотрит на объекты сверху вниз. Часто используется в RPG (например, классические части Zelda*), чтобы показать больше земли и игрового пространства. * Низкий горизонт (вид снизу): Зритель смотрит на объекты снизу вверх. Этот прием делает персонажей или здания монументальными, угрожающими и величественными. * Горизонт по центру: Нейтральный вид, типичный для шутеров от первого лица или визуальных новелл.

2. Точка схода

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

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

!Фреска Пьетро Перуджино «Вручение ключей апостолу Петру»

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

Механика одноточечной перспективы

Существует несколько видов линейной перспективы (с одной, двумя и тремя точками схода). Мы начнем с самой базовой — одноточечной перспективы.

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

Правила одноточечной перспективы предельно строги:

Лицевые грани остаются плоскими: Любая поверхность, которая смотрит прямо на вас, рисуется как обычная 2D-фигура (квадрат, прямоугольник). У нее нет перспективных искажений. Вертикальные линии остаются строго вертикальными, а горизонтальные — строго горизонтальными.

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

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

| Положение объекта | Что видит зритель | Пример из жизни | | :--- | :--- | :--- | | Выше горизонта | Лицевую и нижнюю грани | Летящая птица, потолок в комнате, крона высокого дерева. | | На линии горизонта | Только лицевую грань | Автомобиль, едущий прямо перед вами на плоской дороге. | | Ниже горизонта | Лицевую и верхнюю грани | Коробка на полу, стол, пол в комнате. |

!Интерактивная демонстрация одноточечной перспективы

Практика: Рисуем интерьер комнаты

Одноточечная перспектива — это классический инструмент для рисования интерьеров в играх (например, фонов для диалогов в визуальных новеллах или комнат в квестах point-and-click).

Давайте разберем процесс деконструкции и построения комнаты шаг за шагом.

Основа: Нарисуйте на холсте горизонтальную линию (линию горизонта). Поставьте на ней точку (точку схода). Обычно для комнаты ее ставят ближе к центру.

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

Углы комнаты: Проведите легкие линии от точки схода через каждый из четырех углов вашего прямоугольника и продлите их до краев холста.

Формирование пространства: Эти четыре диагональные линии только что создали пол, потолок и две боковые стены.

!Схема построения комнаты в одноточечной перспективе

Теперь, чтобы добавить в комнату объекты (например, ковер или стол), вы должны подчинить их этой же сетке.

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

Типичные ошибки новичков

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

Игнорирование точки схода для мелких деталей: Художник строит стены комнаты правильно, но забывает про перспективу при рисовании досок на полу, оконных рам или книг на полке. Правило: в одноточечной перспективе абсолютно все линии, уходящие вглубь, идут в одну точку.* * Слишком близкая точка схода: Если вы рисуете объект, и его ортогонали сходятся слишком резко (под очень острым углом), объект будет выглядеть неестественно вытянутым, как при съемке на сверхширокоугольный объектив («рыбий глаз»). В реальности точка схода часто находится далеко за пределами холста. * Смешивание перспектив: Попытка нарисовать один стул в комнате в одноточечной перспективе, а другой (повернутый под углом) — без учета новых точек схода. (О том, как вращать объекты в пространстве, мы поговорим в теме двухточечной перспективы).

Использование в пиксель-арте

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

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

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

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

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

Механика двухточечной перспективы

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

Правила построения меняются, но остаются строго логичными:

Линия горизонта неизменна: Она по-прежнему обозначает уровень глаз зрителя.

Две точки схода: На линии горизонта располагаются две точки (назовем их левой и правой). Они отвечают за две видимые боковые плоскости объекта.

Вертикали остаются вертикалями: Все вертикальные линии объекта (высота стен, углы коробок) рисуются строго параллельно боковым краям холста. Они не искажаются.

Горизонтали уходят в точки схода: Все линии, определяющие длину и ширину объекта, направляются либо в левую, либо в правую точку схода.

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

Проблема искажения: Почему кубы становятся «вытянутыми»

Главная ошибка новичков при работе с двухточечной перспективой — это расположение точек схода слишком близко друг к другу (например, обе точки находятся внутри холста). Если вы попытаетесь построить куб в таких условиях, его задние углы вытянутся, превратив фигуру в острый ромб. Объект будет выглядеть так, словно его сняли на экшен-камеру с объективом «рыбий глаз» (fisheye).

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

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

Где — левая точка схода, — правая точка схода, а — глаза зрителя. Если мы рисуем на небольшом листе бумаги или холсте в графическом редакторе и ставим обе точки схода внутри этого холста, мы искусственно заставляем этот 90-градусный угол вместиться в крошечное пространство. Мозг считывает это как экстремально близкое расстояние до объекта, что и вызывает сильное оптическое искажение.

!Интерактивная модель двухточечной перспективы — перемещайте точки схода и сам куб, чтобы увидеть, как меняется форма и возникает искажение

Конус зрения (Cone of Vision)

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

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

!Схема конуса зрения: объекты внутри 60-градусного сектора сохраняют естественные пропорции, а за его пределами — сильно искажаются

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

> Золотое правило перспективы: чтобы объект выглядел естественно, он должен целиком помещаться внутри 60-градусного конуса зрения. На практике это означает, что точки схода почти всегда должны находиться далеко за пределами вашего холста.

Если вы рисуете в Aseprite или Photoshop, не стесняйтесь сильно отдалять холст (Zoom Out) и ставить направляющие точки на пустом сером фоне рабочего пространства, далеко за границами самого рисунка.

Пошаговое построение объекта

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

Горизонт и точки: Проведите линию горизонта. Поставьте левую и правую точки схода далеко друг от друга (за пределами предполагаемого рисунка).

Ближайшее ребро: Нарисуйте вертикальную линию там, где будет находиться ближайший к зрителю угол сундука. Если линия пересекает горизонт, мы будем видеть сундук на уровне глаз. Если линия ниже горизонта — мы смотрим на сундук сверху (увидим крышку).

Боковые плоскости: От верхней и нижней точек этой вертикальной линии проведите легкие направляющие линии к левой точке схода и к правой точке схода. Вы получили две бесконечные стены.

Ограничение длины: Решите, насколько длинным и широким будет сундук. Нарисуйте две новые вертикальные линии между направляющими (одну слева от центрального ребра, другую справа).

Построение крышки (если сундук ниже горизонта): От верхней точки левой вертикали проведите линию в правую точку схода. От верхней точки правой вертикали — в левую точку схода. Там, где они пересекутся, образуется дальний угол крышки.

Сравнение перспектив в геймдеве

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

| Характеристика | Одноточечная перспектива | Двухточечная перспектива | Изометрия (без точек схода) | | :--- | :--- | :--- | :--- | | Фокус зрителя | Направлен вглубь, в центр экрана (коридор, дорога). | Направлен на сам объект, его объем и углы. | Равномерно распределен по всей сцене. | | Динамика | Статичная, театральная, затягивающая. | Динамичная, кинематографичная, реалистичная. | Механическая, стратегическая, «божественный вид». | | Применение в 2D играх | Фоны для визуальных новелл, данжен-кроулеры от первого лица. | Концепт-арт пропсов, фоны для файтингов, катсцены. | Тайловые RPG, градостроительные симуляторы, тактики. |

Особенности для пиксель-арта

В классическом академическом рисунке двухточечная перспектива — это основа основ. Но в пиксель-арте она применяется с большой осторожностью.

Проблема кроется в природе пикселей. Линии, идущие к точкам схода в двухточечной перспективе, имеют произвольные, постоянно меняющиеся углы наклона. В пиксельной графике любая линия, угол которой не равен строго 45 градусам (шаг 1 пиксель по диагонали) или 26.5 градусам (шаг 2 пикселя вбок, 1 вверх — классическая изометрия), превращается в неаккуратную «лесенку» (jaggies).

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

Поэтому в пиксельных играх двухточечную перспективу используют в основном для: * Концепт-арта: На этапе планирования дизайна персонажей и окружения до перевода их в пиксели. * Крупных статичных объектов: Большой босс, корабль или уникальное здание на заднем фоне, которое рисуется целиком, а не собирается из тайлов. * Иллюстраций и катсцен: Где важна кинематографичность, а разрешение картинки достаточно велико, чтобы сгладить неровности диагональных линий вручную (anti-aliasing).

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

Понятие тона (Value): Шкала светлоты и контраст

В предыдущих материалах мы научились превращать плоские пятна в объемные 3D-примитивы и располагать их в пространстве с помощью перспективы. Однако наши кубы и сферы пока остаются лишь проволочными каркасами или плоскими заливками. Чтобы зритель поверил в их объем, массу и материал, нам нужен свет. А там, где есть свет, неизбежно появляется тень.

В изобразительном искусстве и компьютерной графике за передачу света и тени отвечает тон (в англоязычной литературе используется термин Value).

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

Что такое тон и почему он важнее цвета

Тон — это степень светлоты или темноты объекта, независимо от его цвета. Представьте, что вы смотрите на мир через объектив старой черно-белой камеры. Все многообразие красок исчезает, оставляя лишь градации серого — от ослепительно белого до кромешно черного. Это и есть чистый тон.

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

Шкала светлоты

Для удобства работы художники используют шкалу светлоты — градиентную линейку, разбитую на определенное количество шагов. Самая популярная система делит диапазон на 9 или 10 ступеней, где 1 — это абсолютный черный (отсутствие света), а 10 — абсолютный белый (максимальная яркость).

В цифровой графике, включая пиксель-арт, тон часто измеряется в процентах яркости (от 0% до 100%) в цветовой модели HSB (Hue, Saturation, Brightness), где параметр Brightness как раз и отвечает за тональную составляющую.

> Главная ошибка новичков — пытаться использовать весь диапазон шкалы от 1 до 10 для каждого объекта на холсте. В реальности объекты редко бывают абсолютно черными или абсолютно белыми. Грамотное ограничение тонального диапазона (например, использование только значений от 3 до 7 для конкретного предмета) делает рисунок более реалистичным.

Анатомия света и тени

Чтобы убедительно нарисовать объемный предмет, необходимо понимать, как свет взаимодействует с формой. Давайте вернемся к базовой сфере, которую мы строили ранее, и поместим ее под направленный источник света (например, настольную лампу).

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

!Анатомия света и тени на базовой сфере

Блик (Highlight) — самое светлое пятно на объекте. Это прямое отражение источника света. Блик всегда находится на той точке поверхности, которая расположена перпендикулярно лучу света и взгляду зрителя. На матовых поверхностях (дерево, ткань) блик широкий и тусклый, на глянцевых (металл, стекло) — маленький и ослепительно яркий.

Свет или полутон (Midtone) — освещенная часть объекта. Здесь мы видим истинный цвет предмета. По мере того как поверхность формы начинает отворачиваться от источника света, полутон плавно темнеет.

Собственная тень (Core shadow) — самая темная часть на самом объекте. Она возникает там, куда прямые лучи света уже не попадают (поверхность отвернулась от света), но куда еще не доходит отраженный свет от окружения. Часто собственная тень выглядит как темная полоса (терминатор), разделяющая светлую и темную стороны предмета.

Рефлекс (Reflected light) — светлая полоска внутри теневой части объекта. Свет от лампы падает на стол, отскакивает от него и подсвечивает сферу снизу. Рефлекс критически важен для передачи объема! Без него предмет будет казаться плоским. Важное правило: рефлекс всегда темнее полутона. Отраженный свет теряет энергию, поэтому он никогда не может спорить по яркости с прямым освещением.

Падающая тень (Cast shadow) — тень, которую объект отбрасывает на поверхность (стол, землю). Она самая темная у основания предмета (зона окклюзии, куда свет вообще не проникает) и становится светлее и мягче по мере удаления.

Физика затухания света

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

Где — освещенность поверхности, — интенсивность источника света, а — расстояние от источника до поверхности.

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

!Интерактивная модель освещения — перемещайте источник света, чтобы увидеть, как меняются зоны света и тени на объекте

Контраст как инструмент управления вниманием

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

Наш мозг устроен так, что он автоматически ищет аномалии в визуальном поле. Глаз зрителя всегда, в 100% случаев, будет притягиваться к зоне максимального контраста. Если вы поместите яркую белую точку на темно-серый фон, взгляд мгновенно сфокусируется на ней.

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

!Картина Рембрандта «Философ в раздумье» — классический пример использования тонального контраста для управления вниманием зрителя

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

Группировка тона (Value Grouping)

Чтобы сцена не превратилась в визуальную кашу, художники используют метод группировки тона. Суть в том, чтобы разбить сложную сцену на 3-4 крупных тональных плана, прежде чем прорисовывать детали.

Рассмотрим типичный игровой фон (например, лес):

Передний план (Foreground): Самые темные силуэты (значения 1-3 по шкале светлоты). Деревья прямо перед камерой.

Средний план (Midground): Средние тона (значения 4-6). Основная игровая зона, где бегает персонаж.

Задний план (Background): Самые светлые тона (значения 7-9). Далекие горы и небо.

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

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

Применение тона в пиксель-арте

В пиксельной графике, где разрешение экрана может составлять всего 32x32 или 64x64 пикселя, тон становится вопросом выживания дизайна. У вас нет сотен пикселей, чтобы нарисовать плавный градиент или мелкие детали. Читаемость силуэта и формы должна считываться за доли секунды.

Тест с прищуриванием (The Squint Test)

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

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

Проблема «грязного» тона (Banding)

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

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

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

Направленный свет: Блик, полутень и собственная тень

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

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

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

Природа направленного света

В компьютерной графике и живописи свет условно делят на два типа: рассеянный (ambient) и направленный (directional).

Рассеянный свет — это свет пасмурного дня. Облака работают как гигантский софтбокс, рассеивая лучи солнца во всех направлениях. Тени становятся очень мягкими, почти невидимыми, а объекты кажутся более плоскими. Для выявления жесткой 3D-формы такой свет подходит плохо.

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

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

> «Свет лепит форму. Если вы не понимаете, откуда падает свет, вы не рисуете объект, вы просто раскрашиваете контур». > > Джеймс Гарни, художник и автор книги «Цвет и свет»

!Картина Яна Вермеера «Девушка с жемчужной серёжкой» — классический пример использования направленного света для выявления объема

Анатомия освещенной стороны

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

1. Полутень (Halftone / Midtone)

Несмотря на название, полутень (или полутон) относится к освещенной части объекта. Это зона, куда лучи света падают под углом.

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

Зачем нужна полутень:

Демонстрация локального цвета. Именно в зоне полутени мы видим истинный цвет объекта. Блик засвечивает цвет (делая его белым), а тень скрывает его в темноте. Если вы рисуете красное яблоко, свой самый сочный красный цвет оно покажет именно в полутени.

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

В пиксель-арте полутень часто занимает большую часть спрайта. Если вы рисуете персонажа, его базовая заливка (base color) — это, по сути, и есть полутень.

2. Блик (Highlight)

Блик — это самое светлое пятно на объекте. Важно понимать: блик — это не просто «светлое место», это прямое отражение самого источника света в поверхности объекта.

Позиция блика не фиксирована на объекте. Она зависит от трех факторов: положения источника света, формы объекта и положения глаз зрителя (или игровой камеры). Это подчиняется базовому закону оптики:

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

!Схема распределения света на игровом объекте: от блика до собственной тени

Как материал влияет на блик: Именно блик сообщает зрителю, из чего сделан предмет.

Матовые поверхности (дерево, глина, ткань): Поверхность на микроуровне шершавая. Лучи света отражаются в разные стороны. Блик получается широким, тусклым и размытым. На очень матовых объектах (например, бархат) блика может не быть вообще.

Глянцевые поверхности (пластик, полированное дерево): Поверхность более гладкая. Блик становится меньше по площади, но ярче и с более четкими краями.

Зеркальные поверхности (металл, стекло, вода): Поверхность идеально гладкая. Блик крошечный, ослепительно белый и имеет резкие, жесткие края. Часто в блике на металле можно разглядеть форму самого источника света (например, квадратное окно).

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

Анатомия теневой стороны

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

Терминатор (Линия светораздела)

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

Форма терминатора зависит от формы самого объекта:

На кубе терминатор — это жесткая прямая линия (ребро куба).

На сфере терминатор — это мягкий градиент, повторяющий форму экватора.

На цилиндре терминатор — это прямая линия, идущая вдоль оси цилиндра, но с мягким градиентом по краям.

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

Собственная тень (Core Shadow)

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

Почему она самая темная? Чтобы понять это, нужно вспомнить о рефлексе (отраженном свете), который мы упоминали в прошлой статье.

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

В результате образуется «мертвая зона» — полоса вдоль терминатора, куда не достает ни прямой свет, ни отраженный. Это и есть собственная тень. Она работает как темный барьер, зажатый между светлой полутенью и подсвеченным рефлексом краем объекта.

> Наличие четкой собственной тени — это секретный прием профессиональных художников. Именно она делает форму по-настоящему «трехмерной» и плотной. Без собственной тени объект кажется стеклянным или полым.

Типичные ошибки новичков в пиксель-арте

Перенос теории света в низкое разрешение пиксель-арта требует дисциплины. Ограниченное количество пикселей не прощает ошибок в тоне.

Ошибка 1: Pillow Shading (Теневая подушка)

Это самая распространенная и самая губительная ошибка начинающих пиксель-артистов.

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

Как исправить: Всегда определяйте источник направленного света (например, сверху-слева). Сместите самую светлую зону (блик и полутень) в сторону источника света, а самую темную (собственную тень) — на противоположную сторону. Форма сразу обретет вес и направление.

Ошибка 2: Грязные градиенты (Banding)

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

В пиксель-арте это разрушает форму. Глаз воспринимает такие переходы не как плавный градиент, а как набор плоских ступенек (эффект banding).

Как исправить: Используйте метод кластеризации (pixel clustering). Группируйте пиксели одного тона в крупные, читаемые пятна (кластеры). Для базового объема достаточно всего трех тонов:

Базовый цвет (полутень)

Цвет тени (собственная тень)

Цвет света (блик)

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

Ошибка 3: Игнорирование формы объекта

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

Часто новички рисуют тени прямыми линиями на круглых объектах, что мгновенно разрушает иллюзию 3D, которую мы так старательно строили на этапе наброска.

Практический алгоритм освещения спрайта

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

Определите источник света. Допустим, свет падает сверху и немного спереди-справа. Это классическое освещение для изометрических и top-down игр.

Залейте базовым тоном (Полутень). Закрасьте весь куб средним серым цветом. Это наш локальный цвет камня.

Разделите плоскости. Согласно нашему свету, верхняя грань куба смотрит прямо на свет — она будет самой светлой. Правая грань освещена по касательной — она останется базового цвета (полутень). Левая грань отвернута от света — она уходит в тень.

Добавьте собственную тень. На левой (теневой) грани, прямо на ребре, граничащем со светлой стороной, сделайте тон еще темнее. Это терминатор и собственная тень. Ближе к нижнему краю левой грани сделайте тон чуть светлее — это рефлекс от земли.

Поставьте блики. На верхнем правом ребре (которое ближе всего к свету) добавьте тонкую светлую линию. Так как камень — матовый материал, блик не должен быть чисто белым, достаточно сделать его на пару тонов светлее верхней грани.

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

Падающая тень и рефлекс: Взаимодействие объектов со средой

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

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

Природа падающей тени

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

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

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

Анатомия падающей тени

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

!Схема анатомии падающей тени: от жесткой окклюзии до размытой пенумбры

Падающая тень состоит из трех ключевых зон:

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

Умбра (Umbra). Это основная, центральная часть падающей тени. Сюда не попадают прямые лучи от основного источника света, но может попадать слабый рассеянный свет от неба или стен. Умбра имеет четкие границы у основания объекта.

Пенумбра (Penumbra или полутень падающей тени). Чем дальше тень уходит от объекта, тем более размытыми становятся ее края. Это происходит потому, что источник света (например, солнце) имеет физический размер. Лучи света начинают «огибать» препятствие, проникая в края тени. Кроме того, в эту зону попадает больше отраженного света от окружения.

> Важное правило: Чем ближе падающая тень к объекту, тем она темнее и резче. Чем дальше она от объекта, тем она светлее и размытее.

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

Математика длины тени

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

Длину тени можно вычислить с помощью базовой тригонометрии:

Где: * — длина падающей тени. * — высота самого объекта. * — угол падения лучей света (высота источника над горизонтом).

!Интерактивная симуляция зависимости длины тени от угла источника света

Давайте разберем, как эта формула работает на практике и как она влияет на геймдизайн:

Полдень (Угол близок к 90 градусам): Тангенс 90 градусов стремится к бесконечности, поэтому длина тени стремится к нулю. Тень прячется прямо под объектом. Такое освещение часто используется в top-down играх (например, классические части The Legend of Zelda*), так как короткие тени не перекрывают игровое пространство и не мешают считывать геометрию уровня. * Утро или вечер (Угол около 30 градусов): Тангенс 30 градусов равен примерно 0.57. Длина тени будет почти в два раза больше высоты объекта (). Длинные тени создают драматичное настроение, подчеркивают рельеф земли и часто используются в катсценах или играх с видом сбоку (платформерах) для создания кинематографичной картинки. * Закат (Угол стремится к 0): Тангенс стремится к нулю, а длина тени — к бесконечности. Тени растягиваются на весь экран, искажаясь по форме рельефа.

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

Рефлекс: Свет, который возвращается

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

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

Этот отраженный от окружения свет называется рефлексом (Bounce Light или Reflected Light).

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

Главное правило рефлекса

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

> Рефлекс всегда темнее полутени (освещенной части объекта).

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

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

Цвет рефлекса и интеграция в среду

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

Если рядом с этой стеной стоит серый рыцарь в стальных доспехах, теневая сторона его брони окрасится в красный цвет. Это явление называется color bleeding (перетекание цвета).

Именно цветные рефлексы позволяют «вписать» персонажа в окружение.

| Ситуация | Цвет прямого света | Цвет окружения (земли/стен) | Цвет рефлекса в тени объекта | | :--- | :--- | :--- | :--- | | Персонаж стоит на траве в солнечный день | Теплый желтоватый (Солнце) | Зеленый (Трава) | Мягкий зеленый | | Сундук в ледяной пещере | Холодный синий (Магия/Лед) | Голубой/Белый (Снег) | Яркий голубой | | Монстр в лавовом подземелье | Оранжевый (Лава) | Темно-красный (Камень) | Насыщенный красный/оранжевый |

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

Почему тени не бывают черными (Sky Light)

Если вы выйдете на улицу в ясный день и посмотрите на падающую тень от здания, вы заметите, что она не черная и даже не серая. Она синяя.

Это происходит из-за второго, глобального источника света — неба (Sky Light или Ambient Light).

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

Поэтому в классической живописи и качественном концепт-арте работает правило тепло-холодности: * Если прямой свет теплый (солнце, костер, лампа накаливания) тени будут холодными (синие, фиолетовые). * Если прямой свет холодный (луна, пасмурное небо, неоновая вывеска) тени будут казаться теплыми (коричневые, бордовые).

Использование чистого черного цвета (#000000) для теней — это табу в профессиональном рисунке (если только вы не рисуете в стиле нуар или комиксов с жестким контрастом). Черный цвет убивает объем и делает картинку «грязной». Всегда добавляйте в тень оттенок (Hue), противоположный по температуре источнику света.

Практика: Рисуем тень и рефлекс в пиксель-арте

Перенос этих сложных физических законов на холст размером 64x64 пикселя требует стилизации. У нас нет возможности рисовать плавные градиенты пенумбры, иначе мы получим эффект «грязных пикселей» (banding), о котором говорили в прошлой статье.

Вот пошаговый алгоритм создания правильного взаимодействия со средой для игрового спрайта (например, деревянной бочки):

Определите плоскость. Нарисуйте под бочкой горизонтальный эллипс. Это граница нашей падающей тени. Убедитесь, что перспектива эллипса совпадает с перспективой игры.

Залейте тень цветом. Не используйте черный. Возьмите цвет земли (например, коричневый песок), сдвиньте ползунок яркости (Value) вниз, а ползунок насыщенности (Saturation) немного вверх. Сдвиньте оттенок (Hue) в сторону синего или фиолетового. Залейте эллипс этим цветом.

Добавьте окклюзию. Прямо под основанием бочки, там, где она касается земли, проведите линию толщиной в 1-2 пикселя очень темным, почти черным цветом (но все еще с оттенком!). Это «приземлит» объект.

Сформируйте рефлекс на объекте. Перейдите к собственной тени на самой бочке. В нижней части этой тени, ближе к земле, замените темные пиксели на чуть более светлые, взяв оттенок от земли (песочный/коричневатый).

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

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

Материалы и фактуры: Матовые и глянцевые поверхности

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

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

Физика света: Микрорельеф поверхности

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

То, как именно свет отражается, подчиняется фундаментальному закону оптики — закону отражения света:

Где: * — угол падения (угол между падающим лучом и перпендикуляром к поверхности). * — угол отражения (угол между отраженным лучом и тем же перпендикуляром).

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

Зеркальное отражение (Глянец)

Если поверхность идеально гладкая на микроскопическом уровне (как полированное стекло или стоячая вода), все параллельные лучи света от источника падают на нее под одним и тем же углом. Следовательно, они и отражаются под одним и тем же углом, сохраняя свою структуру.

Это называется зеркальным отражением (Specular reflection). Свет отскакивает единым плотным пучком прямо в глаз наблюдателя. Именно поэтому на глянцевых поверхностях мы видим четкое отражение источника света — блик.

Диффузное отражение (Матовость)

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

Когда пучок параллельных лучей падает на такую поверхность, каждый отдельный луч ударяется о свой микроскопический склон под своим уникальным углом. В результате лучи отражаются в абсолютно разных направлениях, хаотично рассеиваясь в пространстве. Это называется диффузным отражением (Diffuse reflection).

> Матовая поверхность рассеивает свет во все стороны равномерно. Поэтому матовый объект выглядит примерно одинаково по яркости, с какой бы стороны вы на него ни посмотрели, и на нем нет ярко выраженного блика.

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

!Схема взаимодействия световых лучей с гладкой и шероховатой поверхностью

Анатомия блика: Индикатор материала

Блик — это не просто белая точка, которую художник ставит в конце работы для красоты. Блик — это отражение источника света на поверхности объекта.

Именно характеристики блика (его размер, яркость и резкость краев) сообщают мозгу зрителя информацию о том, насколько поверхность гладкая.

Размер блика. Чем более матовая (шероховатая) поверхность, тем шире по ней «размазывается» отраженный свет. На глянцевой поверхности блик крошечный и сконцентрированный.

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

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

!Интерактивная 3D-сфера с настройкой шероховатости материала

Рассмотрим пример с числами. Допустим, у нас есть источник света мощностью 1000 люмен. * Если он светит на глянцевый бильярдный шар, почти все 1000 люмен отразятся в одной точке площадью 1 квадратный сантиметр. Эта точка будет ослепительно яркой. * Если тот же свет падает на шерстяной клубок того же размера, эти 1000 люмен рассеются по площади в 50 квадратных сантиметров. Ни одна точка не будет ослепительной, свет распределится мягким градиентом.

Контраст и тональные переходы

Разница в фактурах диктует совершенно разные подходы к работе с тоном (Value), о котором мы говорили в шестой статье.

| Характеристика | Матовые поверхности (Глина, Дерево, Ткань) | Глянцевые поверхности (Стекло, Хром, Мокрый пластик) | | :--- | :--- | :--- | | Тональный диапазон | Узкий. Используются в основном средние тона. | Широкий. Присутствуют и чистый белый, и почти черный. | | Переходы (Градиенты) | Мягкие, плавные. Терминатор (граница света и тени) размыт. | Жесткие, резкие. Свет и глубокая тень могут находиться на соседних пикселях. | | Рефлексы от окружения | Слабые, мягко подсвечивают собственную тень. | Очень сильные. Объект работает как кривое зеркало. | | Собственная тень | Светлее, так как шероховатая поверхность лучше улавливает рассеянный свет. | Глубже и темнее, так как гладкая поверхность отражает свет направленно, и в тень он почти не попадает. |

Ошибка «Пластикового дерева»

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

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

Отражение окружения (Environment Mapping)

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

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

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

В классическом рисовании и пиксель-арте для имитации металла используется техника разделения полусфер:

Верхняя часть объекта отражает небо (или потолок). Она обычно светлее и имеет холодный оттенок (голубоватый).

Нижняя часть объекта отражает землю. Она темнее и имеет теплый оттенок (коричневый, зеленый — в зависимости от того, на чем стоит объект).

Линия горизонта. Между отражением неба и земли образуется резкая граница — линия горизонта. На круглых объектах она искажается, огибая форму.

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

Цвет блика: Диэлектрики против Металлов

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

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

Металлы (Золото, медь, латунь): Металлы уникальны тем, что они окрашивают отраженный свет в свой собственный цвет. Если вы светите белой лампой на золотую монету, блик не будет белым. Он будет ярко-желтым. У меди блик будет оранжево-красным.

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

Практика в пиксель-арте: Рисуем материалы

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

Пример 1: Матовый камень (Булыжник)

Палитра: Выберите 3-4 оттенка серого. Разница в яркости (Value) между ними должна быть небольшой (например, 30%, 45%, 60%).

Форма: Нарисуйте неровный силуэт.

Светотень: Распределите свет и тень крупными, неровными пятнами.

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

Блик: Отсутствует. Самое светлое место — это просто широкая зона базового светло-серого цвета.

Пример 2: Глянцевое стекло (Флакон с зельем)

Палитра: Выберите цвет жидкости (например, красный). Вам понадобится очень темный красный (почти черный) для краев, насыщенный красный для центра и чистый белый для блика. Разница в яркости экстремальная.

Форма: Идеально ровный, симметричный силуэт.

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

Блик: Поставьте резкий, жесткий белый блик (1-2 пикселя) со стороны источника света (слева сверху). Не делайте плавных переходов от белого к красному — блик должен «звенеть» на фоне стекла.

Отражения: Добавьте тонкую светлую линию по самому краю теневой стороны — это отражение света от окружения на гладкой поверхности стекла (френелевское отражение).

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