Руководство по созданию пиксельной графики для игр

      Игры    Пикселарт    Уроки   Магазин    Ссылки    Контакт GAS 13    
  SO YOU WANT TO BE A PIXEL ARTIST?
Автор: Tsugumo (перевод 1-2 части Gas 13, перевод 3-11 части Smudgy, редакция Zuiki)

Часть 5.1: Разоблачение 'авторитетов'

Если вы любите RPG, тогда вы наверняка играли в наиболее выдающиеся игры этого жанра. В этом уроке я детально разберу некоторых из них, чтобы выяснить, почему они называются "великими". Начнём с игры Secret of Mana 3, наверное, самой красивой из виденных мною игр.

Secret of Mana 3

Secret of Mana 3

Secret of Mana 3

Впечатляет, не правда ли?... Давайте же выясним, ПОЧЕМУ картинка производит такой эффект. Взгляните на первый скриншот. Не обращайте внимания на деревья и кучки грязи, смотрите пока только на почву. Что отличает эти шаблоны от моих примеров, нарисованных раньше (например, вокруг бревенчатого домика в уроке про градиент)? Разница очень интересная. Присмотревшись, вы поймёте, что они (разработчики) не просто взяли один шаблон с травой и заполнили им всю поверхность земли вокруг деревьев и т.д., а потом сказали: "Ну что ж. Это вот лес". На первой картинке есть цветы примерно четырех видов, а также трава переменной "длины", участки с грязью и кустарники. Конечно, всё отлично нарисовано, но всё же любой может это повторить. Разберём по косточкам маленький кусочек из этого скриншота. Кстати, помните, я рассказывал про избавление от "сетки" в шаблонах? Как видите, в SoM3 c этим успешно справились. Я понятия не имею, где у них начинается один шаблон и заканчивается другой, поэтому выбрал кусок почвы наугад. Это и есть успех:

Secret of Mana 3

Итак, всё внимание на траву. Посчитайте, сколько там использовано оттенков. Три. Да, всего три цвета. Столько же было и в нашей траве из предыдущего урока. "Но это совсем не похоже на трёхцветную траву! Если глядеть издалека, кажется, что там куча оттенков!" Сущая правда, и, однако, оттенков там всего три. Так КАК ЖЕ они этого достигли? Взгляните на участок травы с розетками из длинных мечевидных листьев. Вы увидите отдельные фрагменты ("поверхность" листьев), нарисованные самым светлым зелёным цветом. Его там много. Также там есть немного "среднего" зелёного оттенка, которым обведены светлые участки. Теперь вглядитесь в более "плоский" кусок, похожий на нижние части листьев, прямо по центру участка. Обратите внимание на цвета: на этот раз здесь есть только тёмный и средний оттенки зелёного. Светлые точки разбросаны там и сям, изображая кое-где проглядывающие листья. Всё остальное - просто отдельные пикселы. Половина из них формой листья не напоминает! Квадраты, линии, нарисованные средним зелёным оттенком. Прямо как фигурки в Тетрисе... Но во время игры эта мешанина выглядит как трава. Итак, мы поняли: чтобы заставить что-то казаться светлее, не обязательно добавлять более светлый оттенок, можно использовать большее количество имеющегося цвета. Пока не забыл: взгляните, кажется, будто у окончания травянистой зоны справа внизу использован ещё один оттенок зелёного. На самом деле это не так... Яркий зелёный цвет дерева заставляет этот участок травы ВЫГЛЯДЕТЬ светлее. Мы обсудим подобный эффект позже. Продолжим и взглянем на второй скриншот.

Secret of Mana 3

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

Secret of Mana 3

Secret of Mana 3

"Что случилось? Всё стало таким плоским!" Именно так. К тому же, если вы прищуритесь, то заметите, что теперь грязь и трава сливаются сильнее, чем на первоначальной картинке. А всё из-за тёмного оттенка (тени), точнее, его отсутствия. Теперь взгляните на исходный скриншот и запомните, где ИМЕННО данный оттенок расположен. Этот цвет никогда не встречается на "открытых" пространствах (из светлых тонов). Четвёртый оттенок всегда находится рядом с тёмными тонами. Будто мы взяли картинку, с которой я только что убрал все тёмно-коричневые участки, и рядом с некоторыми коричневыми фрагментами добавили более тёмных точек. В грязи словно появились дыры различной глубины. Поэтому поверхность выглядит каменистой и более рельефной, чем, например, трава, так как трава нарисована только тремя оттенками. А что будет, если более тёмный тон добавить как раз к траве? Взгляните:

Secret of Mana 3

Secret of Mana 3

Если вы сравните оба варианта, то заметите, что трава из четырёх оттенков немного "объёмнее"... Как будто внизу в тени есть другие листья. В принципе, прикольно смотрится... Но, опять же, прищурьтесь. Какая трава больше "выпячена", как будто её посадили на грядках? Левая. А вот почему? Из-за четвёртого оттенка. Прежде там было много пикселей третьего "довольно тёмного зелёного" оттенка, поэтому трава казалась посаженной на ровной поверхности. И мы считали, что трава растет высокими кустиками, поскольку тень под ними не такая уж и тёмная. В случае травы из четырёх тонов нам труднее отличить эту тёмную тень от четырёх земляных тонов, так как нам кажется, что там есть позеленевшая грязь или что-то похожее. Может быть, вы заметили, я использовал в траве гораздо больше тёмного оттенка, чем даже у земли... И это приводит к тому, что трава выглядит посаженной в ямке. Расслабьте глаза и посмотрите - земляная дорожка как будто выше травы... Это естественное умозаключение: что светлее, то ближе. Поэтому насыпь ближе к камере - она светлее. Трава, смесь светлых и тёмных пикселей, отодвинута назад. И это всё из-за одного оттенка.

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

Secret of Mana 3

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

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

Действительно, выглядит как 3D... Но помните, что это всего лишь куча пикселов на экране, из таких же состоит и этот текст. Сферы кажутся расположенными впереди или позади друг друга... Они разделены. Пригнаны вместе, но ощущаются как разные части единого целого. Это достигается путём правильного подбора оттенков, а не разделительной чёрной линией контура... Посмотрите на середину нашей модели... Пикселы в основном окрашены в один тон, и поэтому мы воспринимаем отдельные сферы как цельный объект. Посмотрите, что происходит, когда одна сфера находит на другую. Разница цветов заметна сильнее. На тройке сфер, идущих по диагонали из левого верхнего угла в правый нижний, эта разница видна очень чётко. Переход от тёмных, почти чёрных тонов к белому цвету. Поэтому они воспринимаются как отдельные куски чего-то большего. Теперь присмотритесь внимательнее к дереву:

Secret of Mana 3

Уловили закономерность? Там, где на сферах были наиболее светлые тона, на дереве это желтый оттенок. Ближе к концу "секции" оттенок темнеет, и так до начала следующей "секции", которая выделяется своим светло-жёлтым цветом на фоне темно-зелёного. Гляньте на нижние слева листья дерева: они В САМОМ ДЕЛЕ тёмные, не так ли? Но посмотрите внимательнее (игнорируя тёмно-фиолетовые/синие оттенки, я расскажу о них позже)... На самом деле они не тёмные, там просто нет никакого жёлтого. Тот же приём был использован для травы! Тёмные оттенки, со всех сторон окруженные светлыми, КАЖУТСЯ нам отдалённее. Вот и ствол дерева вроде бы светлее, чем земля... Но это не так. Он состоит из тех же самых оттенков, что и земля. Просто на стволе имеются большие по размеру зоны светлого цвета, поэтому он кажется светлее, чем земля. Каждый пиксел находится на стратегически выверенном месте.

Теперь я объясню смысл загадочных фиолетовых и синих пикселов... Согласно теории цвета, тени НИКОГДА не бывают чёрными. В них всегда есть немного синего, всегда. При использовании чёрного изображение становится "плоским", неинтересным. Чёрный с небольшим добавлением цвета выдвигает тень вперед, делает ближе к "камере". Поэтому темнейшие части дерева вовсе не чёрные: это очень тёмные оттенки зёленого. И согласно правилу "синей тени", затенённая часть дерева тёмно-синяя и тёмно-фиолетовая. Вообще-то, именно синий использовать для теней необязательно, просто всегда помните про этот момент. Не используйте сплошных чёрных теней (хотя всякое бывает, может, это даст классный эффект в какой-нибудь ночной сцене). Теперь перейдём к третьему скриншоту, песчаному пляжу:

Secret of Mana 3

Я обязан отметить, что это великолепный пример полного отсутствия "сетки". Почти невозможно уяснить, где какой шаблон находится. И вот ещё что. Как часто мы видели, как авторы какой-нибудь ролевой игры берут "песочный" шаблон, размножают его по всему экрану наподобие "травяного" и и думают, что у них получился пляж. А теперь ещё разок взгляните на этот скриншот... Здесь есть не только разные типы песка (от дюн в середине до увлажнённых участков вдоль прибоя), но также и оранжевые камни и торчащие стебли засохшей травы. На это действительно интересно смотреть.

"Поразительно! Этот песок, должно быть, включает целые тыщщи разных оттенков!" Что ж, посчитайте их. В жёлтом песке всего лишь ЧЕТЫРЕ оттенка. И всё равно мы видим различные песчаные участки... Основная жёлтая часть, тень у дюн, лёгкая тень перед зоной мокрого песка и, наконец, тёмный мокрый песок. И все это сделано одними и теми же четырьмя оттенками. Увлажнённый песок - это сплошной тёмный оттенок, без участия других цветов... поэтому он выглядит плоским и гладким (вы ведь сами видели такой песок на пляже). Зона, отделяющая светлый песок от смоченного, - это просто длинная линия из пикселов среднего цвета. Жёлтый песок состоит из самого светлого оттенка. Дюны и насыпи нарисованы небольшим количеством среднего оттенка. Для больших теней у подножия дюн применялся самый тёмный цвет. Наверное, трудно заметить, но в нём есть небольшая примесь синего цвета.

Содержание:

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

  урок Photoshop пиксельное меню
Пиксельное меню
Урок пикселарт
anti aliasing
Antialiasing
Урок пикселарт
 
  изометрия
Изометрия
Урок пикселарт
so you want to be a pixel artist
So you want to...
Урок пикселарт
 
  пиксельное лицо
Пиксельное лицо
Урок пикселарт
урок пиксельной графики анимация водных поверхностей
Анимация воды
Урок пикселарт
 
  изометрический бассейн
Бассейн
Урок пикселарт
Урок рисования
Урок рисования
Урок Photoshop
 
  Урок фотошоп рисунок по фотографии
Рисунок по фото
Урок Photoshop
рисуем волосы Урок фотошоп
Рисуем волосы
Урок Photoshop
 
  рисуем волосы Урок фотошоп
Рисуем волосы
Урок Photoshop
Урок Photoshop рисуем глаза
Рисуем глаз
Урок Photoshop
 

(c) 1997-2016 Алексей Гаркушин