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

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

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

Наша следующая "жертва" - это поразительная и потрясающая игра Final Fantasy 3. Она считается наиболее красивой среди оригинальных игр этой серии, и вы сами видите, почему:

Final Fantasy 3

Final Fantasy 3

Final Fantasy 3

Final Fantasy 3

FF3 вызывает меньший восторг, чем Secret of Mana3, но в этом нет ничего удивительного, ведь SoM3 была сделана позже. В общем, FF3 не так уж СИЛЬНО впечатляет, однако если бы вы умели рисовать подобную графику, то тогда вам стоило бы написать об этом собственное руководство, хех. Ну ладно, мы собрались поучиться на примере этих скриншотов, а не опускать их, так что начнём-ка с самого верхнего:

Final Fantasy 3

Это шаблон, образующий "пол" в главных частях города. Вы видите поверхность, заполненную по данному шаблону, его чуть увеличенный вариант и 900% версию. Если исключить коричневые камни, то серые булыжники состоят из угадайте скольких оттенков?.. Из четырёх. Сюрприз, сюрприз! Не так уж и много можно сказать об этом шаблоне, но заметьте, как использован наитемнейший оттенок на каждом камне: тонкая линия в один пиксел то здесь, то там. Остальные части камней нарисованы другими оттенками. Изучите их самостоятельно. А теперь обратите внимание на заполненную шаблонами поверхность... Вы можете утверждать, что она состоит из повторяющихся квадратиков? Да легко. Плохой Squaresoft! ПЛОХОЙ! (SquareSoft - фирма, создатель игры Final Fantasy. - прим. пер.) Но мы простим их на сей раз, так как игра в целом превосходна. Вы видите, что наличие коричневого камня в шаблоне приводит к проявлению "сетки". Чтобы побороть её, они могли бы сделать шаблон вообще без камней, ещё один с двумя камнями и ещё шаблон с одним камнем где-нибудь слева внизу. Внемлите мне, ибо я критикую сам Squaresoft, хех. Ладно, двигаем дальше, поговорим о чём-нибудь "поинтереснее".

Final Fantasy 3 Final Fantasy 3

Взгляните на картинку слева. Она интересна... но почему? Я думаю, из-за деталей. Я видел много попыток сделать городскую зону, спускающуюся к воде, и обычно дело заканчивалось чем-то наподобие картинки справа. Вроде всё то же самое - город подходит вплотную к воде... Но выглядит скучно, особенно по сравнению с вариантом слева. Там есть не только дорожка, выложенная камнем с синим оттенком: с одной стороны у неё ограждение из коричневых кирпичиков, а с другой чуть выступают верхние булыжники, которыми облицована вся набережная. Для большей интересности картины имеется даже парочка швартовочных тумб. Обратите внимание на переход к воде. Справа - один и тот же шаблон с булыжниками, затем вода. Зато слева верхний ряд набережной не трогали, следующий же сделали темнее, а затем камни как будто просвечивают сквозь толщу воды, и поэтому она похожа именно на воду, а не на нефть или что-то другое. Хотелось отметить эти детали. Теперь перейдём ко второму скриншоту.

Final Fantasy 3

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

Final Fantasy 3

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

Final Fantasy 3

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

Final Fantasy 3

Final Fantasy 3

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

Final Fantasy 3

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

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

Окей, хватит разглядываний, я мог бы часами разбирать по косточкам такие игры, как Chrono Trigger, Zelda, Shining Force 2, Phantasy Star IV и т.д., но это заняло бы вечность, и я бы выполнил всю работу за вас. Вы уже должны уметь взять карту и разобраться, что и как там сделано. Какие цвета использованы, как построены различные зоны, какие графические эффекты применены. Вскоре вы станете делать это автоматически, и такой навык очень важен, если вы хотите обучаться искусству рисования.

Содержание:

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

  урок 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 Алексей Гаркушин