Курс Пиксель-арт "Les Forges Pixel Art Course".

[AAA]

Курс пиксель-арта

Это перевод публикации «Les Forges Pixel Art Course».

pdf на английском.
http://www.zrodfects.com//Les%20Forges% ... rback).pdf

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Предисловие

Есть много определений пиксель-арта, но здесь мы будем использовать такое: изображение пиксель-арт, если оно создано целиком руками, и присутствует контроль над цветом и позицией каждого пиксела, который нарисован. Несомненно, в пиксель арте включение или использование кистей или инструментов размытия или машин деградации (degraded machines, не уверен), и других опций ПО, которые «современны», нами не используются (вообще-то put at our disposal значит «в нашем распоряжении», но по логике вроде правильнее так). Он ограничен инструментами такими как «карандаш» и «заливка».

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

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

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

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

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

Часть 1: Правильные инструменты


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

1.Некоторые старые вещи

Когда выбираешь ПО для создания пиксель-арта, люди часто думают: «Выбор ПО? Это безумие! Всё что нам нужно для создания пиксель-арта, это paint!(видимо игра слов, рисование и программа)» Трагическая ошибка: Я говорил о плохих инструментах, это первый. Paint имеет одно преимущество (и только одно): он уже есть у вас, если вы запустили Windows. С другой стороны, у него куча недостатков. Это (неполный) список:

* Вы не можете открыть более одного файла одновременно
* Нет управления палитрой.
* Нет слоёв или прозрачности
* Нет непрямоугольных выделений
* Мало горячих клавиш
* Ужасно неудобно

Вкратце, вы можете забыть про Paint. Сейчас мы посмотрим настоящее ПО.

2. В конце концов...

Люди тогда думают: «Ладно, Paint слишком ограничен для меня, так я буду использовать моего друга Photoshop (или Gimp или PaintShopPro, это одно и то же), которые имеют тысячи возможностей.» Это может быть хорошо или плохо: если вы уже знаете одну из этих программ, вы можете делать пиксель-арт (отключив все опции для автоматического антиалиасинга, и выключив многое из продвинутого функционала). Если вы ещё не знаете эти программы, тогда вы потратите много времени, изуччая их, даже хотя вам не нужна вся их функциональность, что будет пустой тратой времени. Вкратце, если вы уже используете их долгое время, вы можете создавать пиксель-арт (я лично использую Photoshop по привычке), но иначе, много лучше использовать программы, которые специализируются на пиксель-арте. Да, они существуют.

3. Сливки

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



Charamaker 1999 — хорошая программа, но распространение, кажется, приостановлено.



Graphics Gale намного более интересна и легка в использовании, и она идёт по цене около $20, что не так уж плохо. Добавлю, пробная версия не ограничена по времени, и идёт с достаточным набором, чтобы сделать достаточно хорошую графику. Только она не работает с .gif, что не такая уж проблема, поскольку .png в любом случае лучше.



ПО более часто используемое пиксельными художниками, это ProMotion, которая (явно) более удобна и быстра чем Graphics Gale. А, да, она дорогая! Вы можете купить полную версию за скромную сумму… 50 евро ($78).
Позвольте не забыть наших друзей на Mac! Pixen хорошая программа, доступная для Macintosh, и она бесплатна. К несчастью я не могу сказать вам больше, потому что у меня нет Mac. Заметка переводчика (с французского): пользователи Linux(и другие) должны попробовать JDraw, и GrafX2. Я убеждаю вас попробовать их все в демо версиях, и посмотреть которая подходит вам по удобству. В конце концов это дело вкуса. Просто знайте, что однажды начав использовать программу, может быть очень сложно переключиться на что-то другое.

Продолжение следует…

Заметки переводчика с французского на английский

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

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

Я программист, а не художник или переводчик, перевожу для своих друзей художников, но что добру пропадать, пусть будет тут.
Оригинал на французском где-то здесь www.lesforges.org
Перевод с французского на английский здесь: opengameart.org/content/les-forges-pixel-art-course
Я переводил с английского, потому что французский не знаю.
И да, это моя первая публикация, поэтому рекомендации по оформлению приветствуются.

[AAA]

Часть 2: Линии и кривые

Если вы ещё не состоявшийся художник, лучший путь начать рисовать, делать это карандашом, после чего обводить чернилами, затем раскрашивать. То же самое применимо и к пиксель-арту: первый шаг в изображении, это обозначить контуры — этот шаг называется «штриховой рисунок» (Lineart). Штриховой рисунок — это очень важный шаг для достижения хорошего результата. Несколько пикселей вашего изображения, могут являться большей его частью (в противоположность рисованию, где масштаб позволяет больше допущений) так что ошибка в один или два пикселя, может сделать так, что ваш персонаж будет выглядеть искажённым. Для ясности, точность штрихового рисунка является Р-Е-Ш-А-Ю-Щ-Е-Й для успеха пиксель-арта.

1. Прямая



Штриховой рисунок состоит в основном из линий и кривых, и мы начнём обсуждение с прямых линий. Те из вас, кто учился в математическом классе знают, что линия характеризуется её наклоном. Это коэффициент «изменения y», к «изменению x». В этом курсе мы будем представлять этот коэффициент как y:x. Таким образом идеальная диагональная от «слева внизу» к «справа вверху» линия, это прямая 1:1. Вот некоторые простые правила и их коэффициенты, иллюстрирующие эту идею.



В пиксель-арте, линии которые используют эти простые коэффициенты (0:1, 1:2, 1:1, 2:1 и 1:0) называются «идеальные линии». Они делают ваше изображение хорошо выглядящим, потому что глаз без труда может им следовать. Они, это ещё не всё, что вы можете рисовать, вы можете использовать например «вспомогательные» линии, чередуя сегменты длиной 2, с сегментами длиной 1 (для имитации сегментов с длиной 1.5 — смотрите пример изображения). Результат намного менее эстетичен (особенно поскольку изображение увеличено в 4 раза, чтобы вы могли видеть что случилось) и показывает почему это так важно, использовать эти типы линий осторожно. Они всё ещё полезны, и вы научитесь украшать в следующих разделах этого курса.

2. Кривые

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



Здесь только одно правило, чтобы добиться плавной кривой: длина сегментов будет меняться в прогрессивной манере, и вы должны избегать прямых углов. Ладно, это два правила, но фактически, второе является частью первого. Например: в Зелёной вы можете видеть хорошую кривую, которая следует этому правилу великолепно. (Слева направо, длина 5 4 3 2 2 1 1 1 2 3 3 3 2 1 1 2 2 1 2 1 2 1 1). Красная кривая с другой стороны, бесстыдно пренебрегает (заметьте прямой угол, который появляется в кривой). В конце концов, хорошая техника рисования кривой, это нарисовать кривую рукой (мы получим нечто похожее на красную кривую) и затем поправить её, пока она не будет следовать «правилу». Это гарантирует что кривая будет выглядеть как вам нужно. Вот и всё о кривых. В заключение я оставлю вам несколько простых примеров этого курса. Первое — это дракон, с кривыми иллюстрирующими принципы очерченные выше; второе — это меч, который показывает, что иногда более угловатые линии (посмотрите на наконечник и эфес) могут также быть полезны в некоторых случаях.



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

[AAA]

Часть 3: Перспективы

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

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

1. Перспективы — и почему множественное число?

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

В 2D видеоиграх, простейшая используемая перспектива называется «аксонометрическая». Что это за зверь? В аксонометрическом представлении пространства, объект представлен тремя координатами (X, Y и Z), каждая из которых постоянно растёт в определённом направлении. В частности это значит, что две параллельные линии в реальности, будут параллельны и в аксонометрической перспективе, и размер объекта не меняется, независимо их расстоянию от наблюдателя. Наконец есть бесконечное число аксонометрических перспектив, поскольку художник абсолютно свободен в размещении трёх направленных осей по своему выбору. Мы рассмотрим три наиболее часто используемых аксонометрических проекции (смотрите картинку).



Это называется изометрической перспективой: ось Y должна быть наклонена на 30 градусов для соответствия определения изометрического вида, но поскольку это невозможно с простым пиксель-артом, она представлена через линию 1:2 (смотрите предыдущий раздел) и угол только 26.5651 градуса (я избавлю вас от вычислений ведущих к этому выводу). Этот вид в частности годится для тактических RPG, потому что он может представить убедительную глубину и высоту. Но не подходит для карт в традиционных программах создания RPG (например RPG Maker) из-за формы тайлов.



Это называется планиметрической перспективой. На этот раз ось Y наклонена на 45 градусов от горизонтали, и является прямой 1:1. Очень мало игр используют это (самая известная из них, это Boktai), но она всё же может быть интересной и богатой в объёме. Эта перспектива могла бы быть более распространённой, и это остаётся на ваше усмотрение, использовать ли её.



И наконец последняя (и менее привлекательная), это знаменитая перспектива 3/4: ось Y наклонена влево, соединяясь с осью Z. Это вид, который используют большинство RPG, и мы обсудим его подробнее.

2. Всё о виде 3/4



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

Позвольте начать с простого примера: бочка (это элемент любого набора город / заброшенная шахта / дом / и т.д.). Что в ней интересного? КРУГЛАЯ КРЫШКА. Не эллипс, как чаще видно. Это так по двум причинам:

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

Здесь нет наклона. Вы должны принять это во всех горизонтальных плоскостях, которые видны сверху, если вы хотите делать 3/4 последовательно.



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



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

3. Extension possible vanishing points underground



Хорошо, я надеюсь вы ещё всё понимаете, потому что здесь будет немного сложнее. Я говорил вам в начале части, не принимать во внимание точку перспективы. Сейчас мы этим немного займёмся. Одного маленького напоминания (смотрите слева) возможно хватит, чтобы вы поняли идею относительно одноточечной перспективы. Как вы можете видеть, где-то есть точка (не на картинке) куда указывают все горизонтальные линии (поскольку снимок сделан на равнине, с земли) — это называется точка схода (vanishing point). Вам не нужно знать больше, для понимания этой статьи, но если тема интересует вас, я советую почитать курс по рисованию перспективы.

http://www.conceptart.org/forums/showth ... ?p=1485587

Позвольте вернуться к нашему курсу — как мы используем эти точки схода? Для улучшения наших перспектив! В отличие от картины изображающей Версальский дворец (узнали?), точки схода будут притягивать вертикальные линии. В идеале, нам бы хотелось исправить точки, и нарисовать их сверху нашей карты, но это несовместимо с системой, используемой в RPG основанных на тайлах. Решение — присвоить индивидуальную точку схода каждому объекту нашего набора тайлов. Это немного менее элегантно, но результат хорош! Вот два скриншота Golden Sun и Golden Sun 2, это единственные игры использующие эту технику, которые я знаю. Шин любезно выделил некоторые точки схода этих изображений.






Заметьте, что все точки схода размещены под объектами (поскольку камера направлена сверху вниз) и всё почти одной и той же глубины (чтобы всё выглядело единообразно). Последний краткий комментарий: чем ниже ваши точки схода, тем ближе вы к стандартной перспективе 3/4, так что размещая ваши точки схода в «бесконечность», вы получаете результат близко к чистому 3/4 (магия, да?).

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

[AAA]

Часть 4: Тень и свет

Сегодня мы перейдём из 2D в 3D, в то время как останемся в 2D. Вы увидите (или нет). С тем что мы обсуждали до сих пор, вы сможете делать красивые штриховые рисунки и рисовать предметы с корректной перспективой. Это хорошее начало, но этого недостаточно чтобы делать пиксель-арт. В этой части мы взглянем на затенение. Это набор техник, которые позволит нам ваять наши пейзажи и персонажей чтобы представить объём (и я избавлю вас от долгого рассказа о традиционной важности этой части, ЭТО ПРОСТО СУПЕР ВАЖНО).

1. Зачем нужна тень?

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



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



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

Вещи не всегда так просты как эта сфера по нескольким причинам:

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

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

2. И как это делать?

Хороший вопрос! Я помогу вам немного. Первое что вам нужно сделать, это разместить ваш источник света (наиболее часто это бывает справа вверху, или слева вверху, так как обычно это солнце):




Теперь вы должны обдумать объём вашего объекта в 3 измерениях ( в противоположность плоскому пространству на вашем экране) чтобы успешно определить освещённые области (и как интенсивно свет воздействует на них), и затем раскрасить их используя эту информацию. Чтобы отчасти упростить эту проблему, вы можете думать как старый добрый Playstation (Паупи, спасибо тебе за изображение сферы в 3D) и мысленно разделить объект на различные полигоны и посмотреть на освещение каждого из них. Вообще говоря, необходимо определить области «преимущественно в тени» и «преимущественно яркие», а не напрямую обращаясь к деталям (плохая идея). По пути хорошо бы постепенно заменить чёрные контуры штрихового рисунка на полезные цвета и оставить место для большей детальности (пиксель может быть бесценным!).



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

3. Избежать две ошибки

a. Подушечное затенение (Pillow shading)

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




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

b. Понимание без понимания

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



ОШИБКА.

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

4. Окружающее освещение

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



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



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



Наконец, как маленький пример чего можно достичь с этой технологией в большем масштабе, вот вам скриншот Историй Фантазии (Tales of Phantasia) на Super NES, в которой стены и колонны освещены факелами обеспечивая красивую демонстрацию окружающего освещения (небо это «основной» источник света).

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

http://www.itchy-animation.co.uk/tutorials/light01.htm

[AAA]

Часть 5: Цветовые палитры

1. Когда и почему выбирать палитру?

Хороший вопрос, почему в конце концов я начал об этом? Просто потому что палитра — это 50% качества вашей работы. На всём протяжении игры важно иметь последовательные палитры, потому что они существенно способствуют общей атмосфере. В общем, что составляет разницу между хорошей и неудачной графикой, это в значительной степени палитра. «Хорошо, это важно иметь хороший выбор, я сделаю это в конце». А-та-та, конечно нет! Палитра работает от начала до конца, когда вы рисуете пиксель-арт. Для меня это первое и последнее что я делаю: я начинаю с создания стартовой палитры в углу моего изображения, затем я подстраиваю её по мере продвижения, затем, как закончу, я трачу время на улучшение её. Улучшения в основном обусловлены «чутьём», то что вы изучите здесь, может быть поставлено под сомнение: это просто стартовая точка.

2. Магия HSL

a. Обзор

На компьютере, все цвета представлены шестнадцатеричным кодом ( который использует символы 0 1 2 3 4 5 6 7 8 9 A B C D E F) из 6 символов. Например код #000000 — это чёрный, белый — это #FFFFFF, и #FF0000 — чистый красный. Ничего сложного. Этот код может быть разделён на три сегмента из двух цифр (# — это просто признак): первые две цифры относятся к красной компоненте цвета, следующие два — зелёной, и последние два — синей. Через комбинирование этих трёх значений, вы получаете любой цвет. Например, #FF0000 — это чисто красный, потому что красная часть максимизирована (FF), а зелёная и синяя часть равна нулю. Шестнадцатеричные коды могут быть сконвертированы в десятичные для удобства дискуссии (не всем нравится читать шестнадцатеричные коды, как вам и мне) — каждая пара между 00 и FF, это число от 0 до 255. Теперь я выбрал цвет, который я использую в моём пиксель-арте, например пурпурный #6A146A (Красный 106 — Зелёный 20 — Синий 106). Ладно, этот цвет неплох, но он не очень мне подходит… Я хочу что-то более живое, более интенсивное. Я говорю себе, что чтобы сделать это более интенсивным, мне просто нужно увеличить три компоненты… вы говорите, что это только сделает цвет более белым и бледным. Плохо, я затемню немного, уменьшу каждую компоненту на 10… снова промашка! Я затемнил мой цвет, но я не хочу серый… ах ах. Сложно выбрать точные цвета таким образом. Но появляется Зорро, чтобы спасти! ( В данном случае, Зорро — это палитра HSL). Вы конечно знаете, что для нашего мозга неестественно делить цвет на три компоненты (RGB — Red Green Blue, то есть Красный Зелёный Синий). Палитра HSL просто другой способ указать цвет: здесь используются не компоненты RGB, а три компоненты видимые и узнаваемые невооружённым глазом, Hue — оттенок, Saturation — насыщенность, Brightness — яркость. Оттенок между 0 и 360 — это просто цвет: красный (0), жёлтый (60), зелёный (120), голубой (180), синий (240), розовый(300) и Красный (360). Если вы наблюдательны, вы заметили, что два цвета по краям одинаковы. Конечно все промежуточные цвета, между теми которые я упомянул — существуют. Насыщенность между 0 и 100, это интенсивность цвета. Чем более цвет насыщен, тем более он интенсивен. Насыщенность 0 соответствует серому. И яркость от 0 до 100, проще всего для понимания: это определяет стремится цвет к чёрному или белому. Во всех программах по пиксель-арту, представленных в 1 части, вы можете выбрать цвет при помощи HSL, и у вас нет причин не использовать это. Немного практики, и вы сможете легко получить цвет который вы представили, тогда как с RGB это заняло бы много времени.

b. Рампы и оттенки

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



Это бородатый карлик, а ниже палитра, которая использовалась при его создании. Эта палитра содержит три рампы: синюю, красную и оранжевую. (Небольшое замечание, необязательно организовывать палитру как я. Обычно она намного более неряшлива чем эта). В каждой рампе я упорядочил цвета от тёмного (слева) к светлому (справа). Обратите внимание, что чисто белый и чисто чёрный (большие прямоугольники) являются частью двух моих рамп: Потому что эти два цвета имеют насыщенность 0 (белый и чёрный, это чисто серый), они могут принадлежать любой рампе, также и с любым другим серым. Старейшие из вас возможно уже видели изображения из игр Commodore 64. Цветовые палитры отображались на этой машине содержавшей множество оттенков серого, чтобы позволить художникам создавать различные рампы. -Теперь, когда мы знаем основы, нам интересны основные концепции изменения цветового оттенка. Мы имеем склонность верить, что все цвета имеют тот же оттенок и насыщенность, и только яркость меняется когда вы на свету или в тени. Но это не так! Что я не сказал в прошлой части, это что ваши объекты освещены синим небом и жёлтым солнцем, а это значит, что ваш оттенок будет меняться немного на протяжении рампы. Наиболее часто реальность вещей очень сложна, и требует знания освещения которое я не упоминал, но в пиксель-арте вы можете спокойно использовать следующие правила:
-при затемнении увеличивается насыщенность
-при осветлении уменьшается насыщенность
-при затемнении оттенок становится более синим
-при осветлении оттенок становится более жёлтым



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



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

c. Метод Ксенодрогена

Метод Ксенодрогена, названный в честь его изобретателя — это метод выбора точного цвета вашей рампы, без (слишком большой) ошибки. Этот метод не абсолютное для соблюдения правило, но если вы имеете чувство цвета, оно позволит вам создавать красивые рампы. Этот метод базируется на сложном в создании, но лёгком в использовании правиле: «В рампе оттенок, насыщенность и цвет, меняются в одном направлении. Их изменения (вторая производная, математически говоря), также меняются в одном направлении». Мы уже обсудили первое выражение, и мы даже говорили в каком направлении оттенок и насыщенность должны меняться. Второе выражение позволит нам определить количество этих изменений: в рампе, каждое изменение компонента (оттенок, насыщенность и яркость) должно быть больше и больше, или меньше в течение рампы. Представьте 5-цветную палитру, на которые мы будем ссылаться как A, B, C, D и E. Я могу например менять насыщенность на 1 между A и B, и на 5 между B и C, снова на 5 между C и D, и на 12 между D и E. С другой стороны было бы неправильно делать что-то вроде 2 3 2 1 4, что могло бы привести к своего рода эффекту «йо-йо». Подводя итог, я могу менять скорость с которой я меняю оттенок или насыщенность, но я должен менять скорость в том же направлении.



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

3. Хороший вкус

a. Чёрный и белый

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

b. Ловушки

У начинающих есть две тенденции:
-использование перенасыщенных цветов
-использование цветов основанных на предположениях, вместо наблюдений.
Помните, что трава не всегда зелёная, вода и небо не всегда синие, а цвета персонажа могут варьироваться зависимо от тона кожи и освещения. Время дня и окружающий свет — меняют цвет; взгляните вокруг себя, и научитесь. (Если вы смотрите на ваши цвета в RGB, цвет вашей травы (например) не должен быть 00 для красной и синей компонент. Море и небо не должны быть чисто синими, и даже камни, которые нам кажутся серыми, должны иметь некоторые вариации в цвете, следуя этим правилам. Использование HSL может помочь вам избежать попадания в эту ловушку) Я решил завершить эту часть также как начал, и напомнить вам, что эти правила не высечены в камне, а просто советы. Эта часть даёт вам много правил по выбору хороших цветовых палитр, но самые важные вещи — это хороший вкус и практика. Также если вы думаете что можете улучшить вашу палитру за рамками правил, не стесняйтесь делать это. В конечном счёте главное результат.

[AAA]

Часть 6: Сглаживание (Anti-aliasing)

Где весь ваш пиксель-арт становится красивым. Или нет. На самом деле это зависит от того, насколько ужасен он был прежде.



1. План атаки

Если вы имели смелость читать нынешних специалистов по новостям видеоигр, вы возможно уже видели журналистов жалующихся на алиасинг (aliasing — ступенчатость линий) в некоторых играх. Алиасинг — это явление, которое происходит, когда объект на переднем плане находится перед фоновым цветом, и граница между этими объектом и фоном проявляется как ужасная, острая грань. 3D игры являются основной жертвой явления, так как автоматические алгоритмы сглаживания требуют больших вычислительных затрат. Пример ниже, взят из Final Fantasy III версии Nintendo DS. Наложение спектров особенно заметно по краям черного цвета в одежде.



2D игры затронуты мало, потому что там всегда есть старый добрый пиксель-артовский антиалиасинг (сглаживание), чтобы сгладить все эти ужасные контуры, и сгладить переходы между объектами и фоном. На самом деле здесь не требуется алгоритмов. Вы просто думаете об этом заранее. Подумайте немного, если желаете. Мы можем выделить три ситуации, в которых явление алиасинга может встречаться, и мы будем действовать соответственно. Первый случай: у меня есть два разных цвета на моём спрайте, и переход между этими двумя цветами разительный. В этом случае мы можем применить сглаживание, чтобы смягчить переходы. Второй случай: переход между одним из моих персонажей и пейзажем позади него, весь в ступеньках (помогите!). Это может быть сложно, поэтому поделим это на два случая:
-если мне повезло: на самом деле это значит «я знаю цвет фона, который будет показан на моём спрайте». В этом случае вы можете сгладить грани вашего спрайта, чтобы быть уверенным, что переход между ним и пейзажем не будет слишком резким.
-если мне не очень повезло: иногда это невозможно, предсказать цвет фона, на котором ваш спрайт будет показан (например если герой игры идёт через множество фонов). В этом случае не делайте ничего. Вот и всё. Это будет глупо, менять грани вашего спрайта чтобы сгладить переходы, так как вы не знаете в какой цвет будет переход. Хорошо, теперь вы знаете почему и когда использовать сглаживание… осталось выяснить как его использовать!

2. Атака!

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



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



Позвольте рассмотреть маленькую оранжевую дугу, яростно сталкивающуюся с чёрным фоном. Слева — зверь в его естественном состоянии. Справа — последовательные этапы процесса сглаживания. Мы начнём с упоминания, что грани дуги круга, это серия сегментов, длина которых от 1 до 3 (это должно вам напомнить главу про кривые). Мы возьмём каждый сегмент отдельно, рассматривая линии изображения, одну за другой. В случае вертикальных сегментов (не здесь), мы рассмотрим колонки изображения, одну за другой. На каждой линии, смягчаем переход на обе стороны от границы, но внимание: если вы отклоняетесь за границу ваших двух цветов, вы разрушите оригинальную форму (и станете ближе к примеру того, как не нужно делать). Ваши буферные тени не должны распространяться за концы сегментов линий выше и ниже, это кажется очень сложным, но фактически это не так, взгляните на последний рисунок, сегменты из 1 пикселя, могут принимать только 2 пикселя сглаживания, потому что если они перетекут на соседние сегменты, они создадут очень неприятный эффект, названный «полосатость» (и достаточно близко к плохому примеру выше). Не делайте контур вокруг вашей фигуры. Если необходимо, можно делать некоторые коррективы, если несмотря на все меры предосторожности, слегка искажается фигура объекта, но сейчас у нас не тот случай. Также знайте, что необязательно сглаживать сегменты длиной 1, которые довольно хороши и сами по себе.

3. Полная победа!

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




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



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

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

[AAA]

Часть 7: Текстуры и размытие
https://opengameart.org/content/chapter ... -dithering

Перевод ожидается...

[AAA]

Часть 8: Мир тайлов

https://opengameart.org/content/chapter ... d-of-tiles

Перевод в стадии перевода