Pixelart area

Want to be a pixel artist? #11 - Анимируем простую атаку

defaultNick — Wed, 02 May 2012 15:56:56 GMT

На этой странице МНОГО анимированных гифов... Они могут чуть подтармаживать. Чтобы посмотреть их на нормальной скорости, кликните на каком-либо гифе правой кнопкой и выберите пункт просмотра картинки в отдельном окне.

Итак, мы ознакомились с основами создания и анимирования спрайта... но на одних только копировании и вставке вы далеко не уедете. Если ваш персонаж должен вертеться вокруг своей оси, вам придётся рисовать его в новых позах, так или иначе. Как обычно, сначала давайте взглянем на примеры из игры Street Fighter Alpha 3:

$CUT$

Если анимации подтормаживают, это даже хорошо... Попробуйте подсчитать количество кадров в каждой анимации. Также оцените разнообразие присутствующих движений. Круговой удар Гила длится 9 кадров. Его слабенький удар - это простой тычок на 5 кадров. Здесь только 2 кадра были нарисованы с нуля: начальный кадр "стояния" и конечный, где рука выброшена вперёд. Промежуточные довольно легко получить, работая непосредственно с пикселами, тут использовался такой же подход, как и при анимации дыхания. Я поставил посередине гифы Карины, ну, потому что они клёво смотрятся, хех... Великолепные движения. Удары ногами имеют хорошую хлёсткость, удар с оборота тоже замечательно выглядит. Удар Сагата - это всего лишь пара кадров, потому что после завершения движения ногой в обратном порядке идут кадры, использованные ранее... Таким способом можно существенно сократить количество использованных кадров, только не перебарщивайте. Данный метод прокатил у Сагата, а вот на ударе Гила (вверху справа) не сработал бы, так как он выбрасывает руку строго горизонтально и она не идёт вниз, как при окончании удара... поэтому, если пустить кадры в обратном порядке, получится, что Гил бьёт кого-то сзади локтём. Вам решать, какое движение будет подходящим в атаке... Если у вас есть что-нибудь вроде видеокамеры, вы можете даже заснять себя совершающим нужное движение и посмотреть, какие конечности куда идут при настоящем ударе.

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

В этих спрайтах идея такова - нарисовать от руки каждый кадр, отсканировать и перевести в пикселы. Исходя из собственного опыта рисования спрайтов, я по-прежнему настаиваю, что нужно упрощать себе работу, где только можно, то есть рисовать для анимации лишь необходимое... Конечно, вы МОЖЕТЕ детально проработать лицо в каждом кадре, но для этого нет особой причины, так как мысленно вы себе представляете, что "выражение лица во время анимации будет постоянным". Точно так же и при рисовании кадров... Если вы знаете, что "в 5-м кадре будет слегка двигаться рука", то незачем тратить время на отрисовку 5-го кадра, ибо вы его создадите на стадии пиксельной обработки. Будь у вас большая компания с кучей художников, с отдельной командой для раскадровки и ещё одной для ретрейсинга этих самых кадров, вам волей-неволей пришлось бы показывать в кадре каждую деталь, так как люди, занимающиеся переводом бумажных рисунков в пикселы, попросту не знали бы, чем заполнять промежуточные кадры, так как данное знание оставалось бы у художников в головах. Вот кое-какие наброски из Капкомовского Street Fighter:

Тут много кадров... Верхний пример ещё ничего, но вот на нижнем их просто огромное количество, а там показано малюсенькое движение. Последние 3 кадра практически неразличимы, эти изменения можно нарисовать непосредственно в пикселах... НО - Capcom большая компания, и если у вас такая же туча народу, то вы можете позволить себе подобные вещи. Если вы когда-либо видели спрайты из Street Fighter 3 (я не нашёл ничего в сети, так что вам придётся сходить в зал игровых автоматов, чтобы посмотреть их, а заодно, пока будете там, зацените игру Capcom VS SNK, потому что в ней потрясные анимации), то поймёте, почему здесь нарисовано столько кадров... Это выглядит ЧРЕЗВЫЧАЙНО плавно. На практике мы могли бы обойтись каждым вторым кадром из верхнего ряда, всё равно анимация была бы превосходной. Кадры сверх необходимых сделают её плавнее, но это необязательно, ибо мозг наблюдателя и так заполнит пробелы на месте пропущенных кадров. Именно поэтому не стоит перемещать кулак на один пиксел за раз при анимации удара... Оставьте приличные "скачки", и мозг зрителя сработает не хуже компьютера: "Окей, он переместился оттуда вот туда" - и сам воссоздаст несуществующие кадры за те доли секунды, что идёт анимация. Обратное утверждение неверно: нехватка кадров, особенно при перемещении объекта на заметную дистанцию, смотреться будет УЖАСНО.

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

Слишком много кадров, и желаемый эффект не получится... Как раз поэтому большинство 3D-анимаций смотрятся плохо. Куча фреймов, и всё движется ТАК плавно, что реалистичным быть просто не может. Это распространнёная ошибка начинающих, т.к. при работе в 3D компьютер добавляет кадры в промежутках и люди этим злоупотребляют. Лучше меньше, да лучше... Как в пинке Карины, посмотрите на те гифы вверху. У неё знатный выхлест в этом ударе, и это ВЫГЛЯДИТ мощно. Нога отставлена назад, согнута в колене и выброшена вперёд - там и впрямь всего три кадра. Показывайте только значимое, ибо избыток фреймов может всё испортить. Наверняка в третьем SF было огромное количество кадров, но только в "медленных" частях. В верхней последовательности от руки нарисованных поз можно видеть, что в движении этого парня кадров хватает... К сожалению, следующий кадр обрезан, но там корпус персонажа развёрнут на 180 градусов относительно последнего видимого фрейма (наблюдаемая там рука - левая). Движение очень плавное, но они знали, когда нужно обойтись меньшим числом кадров и что быстрый скачок делает анимацию живее и красивее. Опять же, этому вы можете научиться, только изучая работы других. Итак, достаньте себе пару анимешных фильмов (начните со Street Fighter, его можно найти где угодно) и изучите сцены с драками кадр за кадром.

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

В качестве персонажа я избрал девчонку в свободных штанах... почему именно в свободных, прояснится чуть позже. Я сделал серию набросков в углу страницы, чтобы уточнить движение... Получилось 7 кадров. Хочется всё-таки 8. В том кадре, где её нога находится вверху и собственно наносит удар, штанина на этой ноге свисает вниз. Я добавлю кадр, в котором нога и корпус останутся в том же положении, а вот штанина продолжит движение вверх по инерции, ведь так обычно происходит на самом деле. Я не рисовал такого раньше, но попробую сейчас. Чем больше я пишу в этом руководстве, тем больше самобучаюсь. Итак, я собираюсь добавить этот кадр с выхлестом штанины и выяснить, какой получится эффект. И заметьте, я не собираюсь его РИСОВАТЬ... Я сделаю этот кадр на уровне пикселов, так как работы тут будет немного, а если бы я его нарисовал, то после ретрейсинга он был бы похож на предыдущий фрейм и почему бы тогда не начать как раз с этого предыдущего? Я могу убрать последний кадр, когда она возвращает ногу - не знаю, понадобится ли он... Одного фрейма с согнутой в колене ногой может быть достаточно для наблюдателя, и он поймёт, что она ставит ногу на место. Следующий шаг - превратить наброски во что-то более осмысленное:

Каждый из этих набросков умещается на четвертинке обычной бумаги формата А4. Они отсканированы тем же способом, который я объяснял в главе о рисовании спрайтов, можете посмотреть её, если хотите узнать о подходящих настройках сканера и т.д. Идеально будет завести блокнот и работать с ним, потому что можно пролистывать его и сразу наблюдать ваши анимации, к тому же, все страницы в нём одного размера. У меня под рукой блокнота не было, зато я нашёл пачку бумаги и сымпровизировал, нарисовав маленькие направляющие уголки слева вверху и справа внизу. Когда я подкладывал сверху новый лист бумаги для следующего кадра, то следил, где были маркеры, чтобы выровнять листы. Если вы работаете в условиях ограниченного размера спрайта (например, не больше 64х64 пикселов), вам могут понадобиться рамки, обозначающие ваш размер... Разметьте себе квадрат, чтобы не выходить за допустимые пределы. Слава богу, размеры спрайтов в наши дни не имеют ограничений.... В игре Marvel VS Capcom Мегамэн изображён маленьким спрайтом, а Халк в то же время просто огромен. НО работать с ограничениями - в целом полезно, это приучает всё продумывать заранее.

Я решил-таки выкинуть последний кадр и добавил лицо, это не заняло много времени. По какой-то причине я нарисовал ногти на пальцах ног, которые, как можно видеть на уменьшенных версиях картинок, превратились в большие чёрные пятна. То же самое произошло и с пальцами, а я ведь совсем чуть-чуть уменьшил кадры, я ещё не получил нужный размер. Да, я сделал ей перевязанную правую руку в первом кадре, но потом решил избавиться от бинта... это из-за отзеркаливания. Вы ведь вряд ли захотите рисовать кадры для каждого бойца в правой и левой стойке. К тому же, в большинстве современных игр спрайты обычно рисуют направленными в одну сторону, а игровой движок зеркалит их в другую сторону. Старые игры (в дни SNES/Genesis) использовали этот подход ради экономии места. Особенно это относится к файтингам, потому что там МНОГО кадров... Небольшая ремарка: на штанах одного персонажа из Street Fighter вдоль штанины было написано MAXIMUM, потому что это слово при вертикальном написании (буква под буквой) в обычном и отзеркаленном виде выглядит одинаково. Если бы там было, допустим, слово FIGHTING, некоторые буквы перевернулись бы задом наперёд, и художникам пришлось бы рисовать набор зеркальных кадров, где изменены только эти буквы, что совершенно неэкономно с точки зрения места.

Вы скажете: "Ну, это бьло в старых играх... как насчёт нашего времени, когда нет ограничений на количество спрайтов в игре?" Хотите верьте, хотите нет, но этот подход до сих пор практикуется... Я интересовался и добыл скриншоты игры Guilty Gear X (один из новых и невероятных файтингов, если не превосходящий, то равный Капкомовским вещам в плане графики), там я увидел парня с мечом, он его носит на левом плече и вытаскивает правой рукой... А когда он смотрит в другую сторону? Меч оказывается на другом плече и вытаскивается левой рукой! Обычно люди этого не замечают, потому что действия разворачиваются быстро и их голова занята мыслями, какую кнопку нажимать, чтобы этим мечом ударить.

Я думаю, игры до сих пор зеркалят спрайты как раз потому, что в них используется гораздо БОЛЬШЕ кадров, чем в старых играх... Там атака занимала 3 фрейма, сегодня это 8 фреймов. Вам придётся рисовать по 8 кадров для левой стойки и для правой, при этом придётся вносить много изменений. Там, где меч при ударе будет идти к экрану (и от него в перевёрнутой ситуации), вам придётся рисовать этот удар с другой стороны корпуса, это потребует много работы, и есть ненулевая вероятность, что этого никто даже не заметит. И ещё вопрос, понравится ли это игроку... Это может несколько сбивать с толку: одна и та же атака выглядит иначе в различных стойках, люди начнут раздумывать: "Будет урон больше, если я смотрю вправо? Или я бью быстрее, когда смотрю влево?" В общем, переворачивание спрайтов (флиппинг) - это нормально... Все это делают. Именно поэтому у большинства персонажей симметричный дизайн.

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

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

Вы можете поинтересоваться: "Почему бы не использовать прежние кадры? Зачем тратить время на полный ретрейсинг, когда на этих рисунках и так получены тонкие и аккуратные линии?" Для начала, у них неправильный размер... но уменьшить-то их я могу хоть сейчас, так что это не проблема. Главная причина - это анти-алиасинг (сглаживание)... На этом этапе - это самый опасный враг... Смотрите...

Anti-aliasing - это способ сглаживания рисунка... Если там присутствует чёрная линия на белом фоне, то внутри и вокруг неё добавляются пикселы серого, и издалека линия кажется более "гладкой", ровной. Это, безусловно, хорошо для плакатов и т.п., но для спрайтов это не подходит. Из-за того, что пикселы при этом смешиваются, получаются оттенки светло-серого (вместо белого) по краям контура спрайта, как видно на рисунке выше. В играх не используется анти-алиасинг (за исключением новейших трёхмерных), потому что процесс расчёта новых оттенков для всего подряд довольно медлителен. Если спрайт перемещается на фоне радуги, то алгоритм должен рассчитать новые цвета для каждого пиксела фона... это не подходит для сегодняшних игр. В приставочных играх всё выглядит чуть более сглаженно, из-за того, что экран телевизора даёт небольшой эффект анти-алиасинга... причина в их способе показа изображения. Играя на компьютере (на эмуляторе, например), вы видите все пикселы до единого, так как экран монитора более точен. В общем, анти-алиасинг может испортить ваш спрайт. Вы, конечно, можете уменьшить спрайт, а потом убрать эти лишние пикселы, но, как оказалось, этот процесс занимает столько же времени, сколько повторный ретрейсинг, поэтому обычно я делаю последнее. Ещё один довод против анти-алиасинга: пальцы и ногти слились в одно целое и их трудно различить. Делая ретрейсинг пикселами, я могу выделить эти детали и сделать их чётче. Последний камень в огород - спрайт после анти-алиасинга состоит аж из 37 цветов. Если вы работаете с палитрой из 256 цветов (стандартный размер для палитры VGA, а также для приставок SNES и Genesis), то вы, считай, влипли. 37 цветов только для "чёрного и белого". А если бы у вас были разные цвета для куртки, штанов, кожи и т.д.? Смешавшись с чёрными контурами, они дали бы, допустим, 120 цветов, а это уже почти половина палитры... А вы ещё хотели 3 персонажа на экране и фон впридачу, ага, щаз... Ну а делая рейтресинг вручную, вы можете контролировать конечное число цветов. Даже в игре Capcom VS SNK, это самый новый и красивый файтинг, для каждого спрайта используется только 16 цветов.

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

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

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

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

ДРУГАЯ важная деталь - это оттенки и тени цветов, шейдинг. Шейдинг - это изменение основных цветов спрайта с учётом расположения источника света, в данном случае он находится впереди нашей героини. "Но когда мы переворачиваем спрайт, так, что она смотрит в другую сторону, то получается, что источник света также двигается! И что будет, если она дерётся против самой себя? Будет похоже, будто источник находится между персонажами! Это не будет странно?" В теории да... но как в случае с переворачиванием оружия и тому подобных вещей, вам придётся жертвовать кое-какими принципами. Можно продублировать каждый кадр и изменить освещение в них, но это займёт кучу времени и кадров, и всё ради эффекта, который, скорее всего, останется незамеченным. Даже создатели последних файтингов придерживаются такого мнения... Можно источник света расположить между спрайтом и экраном игрока, чтобы тени возникали у контура персонажа. Правда, это выглядит странновато, к тому же, нельзя показать объём в самом персонаже: например, уже не положишь тень на дальнюю ногу, а этот простой приём помогает игроку представить персонажей трёхмерными, а не плоскими картонками.

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

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

Want to be a pixel artist? #10 - Оживляем спрайты

defaultNick — Wed, 02 May 2012 15:55:00 GMT

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

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

Тут очень важен размер спрайта. Работая с персонажами таких больших размеров, как представленные выше, вы можете поэкспериментировать с различными вариантами вдоха-выдоха... Но если вы присмотритесь, то заметите, что головы у них практически не меняют своих положений. Голова Коди (парень в тюремной робе) приподнимается на один пиксел, идёт в сторону на два, затем опускается на один, возвращается вправо, и всё повторяется по-новой. У Гена (мастер кунг-фу в фиолетовом прикиде) голова всего лишь ходит туда-обратно. У Гая она вообще не двигается. Ведь если вы хотите изобразить персонажа спокойного, то, скорее всего, его голова не будет так сильно дёргаться, как, например, у Балрога. Это что касается больших спрайтов. Если же вы примените подход "сдвинуть корпус на один пиксел в каждом кадре - вот тебе и дыхание" к маленьким спрайтам, то получится следующее:

По идее, этот персонаж движется совсем по чуть-чуть, по пикселу за раз... Голова идёт вверх, потом вбок, а затем возвращается обратно. Точно так, как было в движении у Коди. Ну так ПОЧЕМУ ЖЕ выглядит всё так, будто этот персонаж хочет выполнить удар головой и одновременно кого-то сзади пихнуть локтём? Перемещение на 1 пиксел в спрайте шириной в 100 пикселов приводит к получению малозаметного движения, так как смещение составляет лишь 1% от общей ширины. В спрайте шириной 20 пикселов такое же перемещение будет соответствовать смещению в 4%, т.е. движение получилось в 4 раза энергичнее, чем у большого спрайта. Разница в размерах создаёт некоторые проблемы, над которыми приходится поломать голову. При рисовании анимации дыхания существует некоторый предел в габаритах спрайта (он зависит от формы и размера персонажа). Если его не переступать, то всё будет хорошо. Поэтому большими спрайтами можно "дышать" по-разному, а вот с маленькими следует быть осторожными...

"Да, но как насчёт таких старых игр, как Final Fight, Ninja Turtles и им подобных? Я помню, в них персонажи замечательно вдыхали и выдыхали." Извини, приятель, память подвела тебя. Я точно также заблуждался до тех пор, пока не взглянул на эти игры... Персонажи там вообще не шевелятся. Черепашки двигаются, но они не "дышат" (нет заметного вдоха и выдоха)... Там использовалась так называемая анимация "бездействия". Она запускалась, когда персонажи скучали без дела. Помните - если подождать достаточно, ёж Sonic притопнет ногой, герой Bubsy постучит по экрану, Рафаэль периодически вращал своим шестом и т.д... Такого рода фишки легко было делать даже в маленьких спрайтах, так как это были выразительные, ощутимые движения (а не еле заметные вдохи-выдохи грудью). Ладно, вернёмся к обсуждению анимации дыхания, только запомните, что в ваших маленьких спрайтах подобный труд может никто и не заметить. Вряд ли мы ожидаем увидеть у RPG спрайта 16х16 глубокое грудное дыхание, а вот если его не будет у какого-нибудь большого спрайта, то тут можно смело хаять художника. Делать дыхание или не делать - это зависит от размеров и общей формы персонажа. Так, идём дальше.

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

Он хорошо анимирован, даже заметно, как он легонько пружинит на носках... но присмотритесь внимательно, особенно уделите внимание грудной клетке. Она не меняет своей формы и очертаний. Только верхняя часть груди смещается вверх на один пиксел, когда Лонг достигает верхней точки в своём движении. Тени и очертания мускулов остаются прежними в течение всей анимации. Его голова... тоже не меняется, за исключением пары пикселов в причёске. Разве художник в данном случае сканировал бумажные наброски каждый раз, чтобы получить очередной кадр? Нет, конечно. Он сделал работу с помощью магического набора инструментов, известных как "копирование и вставка". Они будут вашими лучшими друзьями при создании анимаций. Итак, не имея перед собой нарисованных от руки набросков с анимацией дыхания Фей Лонгa, я не сильно ошибусь, если скажу, что первый кадр на бумаге был прорисован полностью от начала и до конца, со всеми деталями... но все последующие наверняка использовали упрощённую форму корпуса и головы. Может быть, на некоторых стояли надписи вроде "сдвинуть грудь вниз на пиксел" или "сделать подрагивание волос во 2-м и 3-м кадрах"... но не было резона на бумаге РИСОВАТЬ это самое подрагивание, так как при сканировании набросков всё равно получилась бы нечёткая размазня.

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

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

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

Теперь он более живой. Мужик покачивается точно так же, как это делал Балрог из примеров, приведённых выше (Балрог послужил основой для нашего спрайта, потому что мне нравится его поза и анимация). Это результат несложных поправок. В первой "дыхательной" анимации у меня было 4 разных кадра с перемещающейся грудью. На этот раз я хотел, чтобы, начиная с бёдер, двигалось всё тело и чтобы было видно сгибание ног. Это привело к тому, что однопиксельное движение на пике дыхания (помните, в начале анимации тело двигалось по 2 пиксела, а в "пике" на 1 пиксел, мы это сделали для пущего реализма) превратилось в двухпиксельное, из-за того, что вначале я сдвинул вверх отдельно корпус, а затем сместил его опять, но уже вкупе с бёдрами. В общем, это было даже слишком, я не этого хотел, и пришлось убить два кадра из первой анимации (верхнюю и нижнюю точку в его покачивании) и заново собрать кадры уже со смещением и торса и бёдер, также я отобразил ноги в новом положении. Теперь добавим деталей:

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

И это БЫЛО сложно, хех... Не сильно заморачиваясь с выбором, я решил обойтись круговыми движениями. Так как руки совершают полный круг, я не мог просто пройтись через 4 кадра в следующем порядке 1-2-3-4-3-2-1-2-3-4... как раньше, потому что получились бы странные полукруговые движения. Пришлось сделать 6 кадров, и в каждом передвигать руки в новое положение. Это было неприятно, зато теперь у него движется всё тело. Ну, стало похоже на танец буги (под фоновую музыку), но вы-то поняли идею... Если бы я продумал движение кулаков заранее, получилось бы что-то менее танцевальное, ну а в целях данного руководства сойдёт и так, хех. Может, надо было просто сместить руки туда-сюда на пару пикселов, как делает Cагат Май Тай, ну да ладно, оставим круги. Опять же, при выборе движений вы должны исходить из характера персонажа и его настроя/физиологии/стиля драки/и т.д. И не забывайте облегчать себе жизнь, не делая лишнюю работу - если вы анимируете маленькие движения, то делайте это на стадии пиксельной обработки.

------------o------------

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

Я отказался от круговых пассов руками и остановился на идее простенькой задержки при их движении, чтобы они слега отставали от движения тела на один пиксел по высоте... Маленькое такое улучшение, оно может сделать анимацию более естественной. Один-два пиксела, на которые смещаются руки, "отклеивают" их (руки) от груди и выдвигают вперёд. Другой подход - взять да сделать один кулак отстающим в движении от второго. Мы как бы разбиваем мужичка на куски и перемещаем их... Когда вверх-вниз смещалась верхняя часть торса (в начальной анимации), то всё тело казалось монолитным. Заставляя руки чуть отставать, всего на пиксел, мы отделяем их от корпуса. Чтобы фрагментировать тело ещё больше, можно добавить "отставание" одному кулаку и получить 3 движущихся куска. Хотя тогда возникнет вопрос, хотите ли вы, чтобы персонаж ТАК сильно двигался, и вам придётся выбрать, ваш герой шевелит руками одновременно или порознь. В анимациях от Capcom руки Бланки двигаются вместе, потому что сам он делает большое монстроподобное движение... А вот Ген совершает маленькое круговое движение каждой рукой. Как я уже объяснял, всё зависит от типа создаваемого персонажа.

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

Want to be a pixel artist? #9 - Создание спрайтов для игр-сражений

defaultNick — Wed, 02 May 2012 15:52:44 GMT

Итак, мы поработали над созданием маленьких 16х16 спрайтов: Они просты, милы и традициональны для консольных RPG-игр. "Но я хочу сделать экшн-игру: что-нибудь с большими спрайтами! Ну вы знаете, что-то вроде файтинга от Capcom (компания Capcom прославилась своими играми для игровых автоматов - прим. пер.)". Быть может, из-за настоятельного желания рисовать классные, большие спрайты, вы пропустили предыдущие секции туториала и не занимались созданием маленьких изящных спрайтиков. Если я прав, то вернитесь и прочтите пропущенное. Хоть размер спрайтов изменился, все же базовые принципы, описанные ранее, остаются в силе. Окей, предполагаем что вы читали предыдущие главы и теперь по-настоящему готовы к созданию спрайта, который будет "драться".

Для начала, разрешите мне отметить что техника, которую я сейчас опишу, подходит не только для файтинга ( файтинг - игровой жанр, обычно на экране симулируется схватка двух бойцов - прим.пер). Я использую данный термин повсеместно, потому что позы и положения для учебных спрайтов представляют собой различные боевые стойки. Но сама по себе техника и концепции могут быть применены в различных типах игр: Игра Earthworm Jim, вероятно была сделана с помощью такого же подхода. Учитесь на всём, на чём только можно и адаптируйте изученное под свои нужды. Но мы отвлеклись, теперь давайте взглянем на пару примеров из игры Street Fighter Alpha 3.

Вот это действительно нарисовано со знанием дела. Каждый персонаж обладает своим собственным неповторимым видом. Например, Зангриф - это большая гора мускулов, а Сакура в сравнении с ним маленькая тонкая худышка. Также отметьте существенную разницу в ширине спрайтов этих двоих. Значит, художники не были ограничены некоторыми максимальными размерами спрайтов. Сакура - это спрайт 76х87, Зангриф - 116х111. Но помните, что обычно стандартным размером считается 100 пикселей в высоту. Ширина обычно будет меньше.

Метод, который использует компания Capcom, неизвестен. У них нет туториалов, либо других разъяснений, касающихся процесса создания спрайтов, что не удивительно, ведь у них и так полно других забот. Всё же я добыл кое-какую информацию, путём анализа их спрайтов и собирая отрывки полезных сведений то тут то там. Давайте рассмотрим картинки Чун-Ли из Street Fighter 3:

Все кадры нарисованы от руки, затем отсканированы и переведены в цифровую форму пиксель за пикселем. Может быть у Capcom есть специальная программа, которая осуществляет рэйтрейсинг (здесь рэйтрейсинг- это процесс перевода нечётких отсканированных изображений, в более аккуратные пиксельные рисунки- прим. пер.). Так как у нас нет такой программы, мы будем всё делать пиксель за пикселем. Это отнимает много времени. Трудно представить что разработчики такой игры как SF3 обрабатывали таким способом каждый кадр. Но опять же, я не имею понятия, как они это делали, так что догадки строятся только на том, что мы видим. Так или иначе, они делали рэйтресинг - каждый спрайт совершенен. Линия, вырисовывающая мускулы, имеет ширину в один пиксель. Отсутствуют "пятна" пикселей (они появляются, когда вы рисуете линии мышью, и передерживаете кнопку мыши), и нет анти-аллиасинга на линиях (обычно это происходит при уменьшении картинки до требуемого размера спрайта). Это всё означает, что им приходилось поправлять всё ручками, чтобы получить такие великолепные спрайты. Может быть надписи на японском на этой большой картине говорят "Это инструкции как именно мы рисовали наши спрайты", но я не знаю японский. :)

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

Мне стоит отвлечься, и объяснить, что на самом деле существуют различные способы создания спрайтов. Выбор метода, зависит только от уровня ваших навыков, мастерства и размера создаваемых спрайтов. Если вы делаете спрайты для RPG размером 16х16, нет резона сперва рисовать их на бумаге, сканировать и т.д. Работайте сразу в пикселях. При отсутствии навыка рисования на бумаге, разумнее сразу перейти к рисованию пикселями. Два других метода, применимых при отсутствии сканера или навыка рисования от руки:

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

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

В этом туториале, я буду использовать Photoshop 4.0, но постараюсь использовать его простейшие возможности. Разговаривая об анти-алиасинге и ему подобных вещах, я подразумеваю что они реализованы и в других программах для рисования. И думаю, вы умеете пользоваться одной из них. Всё же, надо отметить, что Photoshop в целом не годится для создания спрайтов. Причина в том, что Photoshop особым образом изменяет и организует палитру, что не годится для создания игр, с заданной палитрой. Это потому, что подобного типа приложения созданы для обработки фотографий и иллюстраций. Манипуляции с палитрой в этих случаях не играют какой-либо важной роли, в отличии от случая со спрайтами. Если вы делаете игру, не использующую палитру (а это большинство PC игр, в отличии от консольных собратьев), и вам незачем заботиться о количестве используемых цветов, тогда Photoshop может вам подойти. Я же люблю его использовать для практики рисования спрайтов, т.к. не приходится заморачиваться по поводу подбора и выбора цветов, что имело бы место в редакторе, использующем палитру. Ну что, давайте сделаем спрайт. Для начала, я использую картинку нарисованную от руки, т.е. пойду путём компании Capcom:

Я нарисовал персонаж от руки (на четвертинке обычной бумаги А4), раскрасил её, затем отсканировал (настройки - 300dpi, черно-белый режим):перед тем как уменьшить размер, следует изменить режим изображения на RGB или Grayscale, чтобы работал анти-аллиасинг). У меня получилось довольно большая картинка, и здесь я показываю уменьшенную версию. Есть маленькие недочёты, вроде странно изогнутой передней ноги и т.д:их надо будет поправить при работе с пикселями, это будет не трудно. Заметьте, что я сделал удвоенный контур для обводов куртки и майки. Это вышло случайно, стоп: подождите, я собирался показать к каким проблемам это привёдёт. Окей, мы не можем работать с такой большой картинкой, поэтому давайте уменьшим размер до100 пикселей. Она нарисована на белом фоне, в целом размер будет чуть меньше ста пикселей, так как я оставил вокруг фигуры немного пустого места, на тот случай, если я захочу удлинить её волосы. Ах да, при уменьшении я использовал билинеарный фильтр. Помимо него в Photoshop-е есть еще два фильтра, каждый из них действует по-разному:

Фильтр "Ближайший сосед" ("Nearest Neighbor") полностью отключает anti-aliasing. Это особенно полезно, если нужно увеличить уже завершённый спрайт раза так в четыре, и показать его разбирающимся людям.

Фильтры "Билинейный" и "Бикубический" делают почти одно и тоже: бикубический похоже даёт больше анти-аллисинга. Наша картинка относительно мала, так что в этом случае большой разницы заметно не будет, но если уменьшать картинку высотой 800 пикселей, эффект будет значительный. Проблема бикубического фильтра - слишком много анти-аллиасинга. Сравните её правую голень на бикубической картинке и на билинейной. На первой она более размыта. То же самое произошло с рукой, и лицом. Это может мешать при рейтресинге, поэтому я обычно использую билинейный фильтр, чтобы получить меньше анти-аллисианга. Итак, мы получили наш спрайт (95 пикселей в высоту):

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

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

Вот быстрый способ настроить Photoshop, что осуществить простой рэйтрейсинг. Исходная картинка будет фоном (убедитесь что вы в режиме RGB), поэтому создайте новый слой. Заполните его определенным цветом (например, синим). Установите для этого слоя режим "screen", и вы увидите спрайт, только черные линии станут синими. Затем совместите слои. Это нужно затем, чтобы вновь нарисованные линии были поверх слоя исходной картинки. Теперь создайте еще один слой и залейте его белым. Для него установите режим "multiply". Собственно, спрайт будет рисовать как раз в этом слое. Можно было бы просто сделать слой прозрачным, но тогда пришлось бы постоянно переключаться на инстумент "резинка" чтобы что-нибудь стереть, что конечно же неудобно. В нашем случае, фон будет белым, хоть вы то и его не видите. Можно будет легко переключаться с белого на чёрный цвет (пр учётё, что изначальная установка не менялась), нажимая кнопку X Если вы захотите очистить картинку, сделанную из синих линий, поменяйте режим последнего слоя на "normal" и белый фон, закроет исходную картинку.

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

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

Итак, я добавил цвета: я предпочитаю работать не на белом фоне, лучше для него взять какой-нибудь мягкий цвет. Белый фон, делает цвета темнее (особенно её майку). Это фокус, который играют с нами наши глаза. Ладно, давайте добавим теней:

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

С тенями, она смотрится более трехмерной. Но это еще не финиш: Я хочу добавить некоторые детали: отделку на куртке и белые линии на рукавах.

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

Лично, я не люблю раскрашенные контуры. Зато компания Сapcom использует их, причём так, что выглядит всё классно. Я не разобрался в этом вопросе окончательно (все же я думаю, что фишка тут в использовании темных цветов для контуров), и потому предпочитаю черные контуры. Если их раскрасить, то в целом всё становится размазанным, нельзя определить где начинается или заканчивается какая-то часть одежды ну и т.д. К тому же могут наблюдаться проблемы, если цвет фона будет совпадать с цветом контура. С чёрным фоном будет то же самое, но этого легче избежать. Все же, это моё личное предпочтение, и я не знаю способа, как делать приятные цветные контуры.

Want to be a pixel artist? #8 - Наконец-то рисуем спрайт

defaultNick — Wed, 02 May 2012 15:40:43 GMT

Итак, теперь, когда вы прочитали предыдущие главы, провели собственные наблюдения и сделали выводы о том, как устроены спрайты и всё такое (если же вы не делали ничего из этого списка, тогда наверстайте упущенное, ибо это облегчит вашу жизнь, когда придёт время рисовать собственные спрайты)... В общем-то, это время пришло. Мы разберём несколько стилей и для начала возьмём классический и наиболее широко распространённый в ролевых играх стиль Final Fantasy 2. Даже если вам неинтересно делать маленькие спрайты 16х16 и вы хотите научиться создавать только большие, всё равно вам будет полезно прочесть этот текст до конца... Занимаясь маленькими проектами, можно научиться многим полезным вещам, которые пригодятся и при создании крупноразмерных шедевров. Учитесь в любой ситуации. От вступительных слов перейдём к спрайтам FF2:

Первое, что следует знать о FF2-спрайтах: в них используется особая разметка... Над текстом вы видите квадрат 16х16... Вдоль левой стороны идут цветные вспомогательные линии. В спрайте FF2 талии отведено три пиксела (нижняя оранжевая линия), торс - часть туловища от шеи и до талии - также занимает три пиксела (жёлтая линия), голова получает целых 10 пикселов (верхняя оранжевая линия). В разговорах о спрайтах знающие люди часто упоминают аббревиатуру "SD"... Термин SD расшифровывается как "Super Deformed" ("Сильно Деформированный") и используется в аниме для описания сцен, в которых персонаж, прежде нормально нарисованный, уменьшен и похож на куклу, и его голова такого же размера, как и остальное тело... Этот подход использовался в FF2 и во многих ранних RPG, потому что почти все они были созданы в Японии, а SD - это приём как раз из тамошних аниме, к тому же, подобный стиль хорош для выражения эмоций персонажа. На Западе мы склоняемся к "реалистичным" персонажам с маленькими головами и пропорциональными телами. Однако в прежние дни правдоподобностью приходилось жертвовать, ведь на отведенном пространстве 16х16 реалистичная голова занимала бы два пиксела в ширину и четыре в высоту... Может, это и пропорционально, зато смотрится плохо - получаются безликие персонажи, а лицо в данном случае очень важно, так как игрок идентифицирует себя скорее по лицу, чем по другим признакам. Большие головы были так широко распространены потому, что на них есть место для изображения чувств... Персонажи с крупными головами могут кивать, мотать головой из стороны в сторону, удивленно моргать, расширять глаза от ужаса, зажмуриваться, зевать, кричать и т.д. Они становятся "живыми", а значит, более интересными... На маленькькой "реалистичной" голове вы можете лишь изменять цвета и тени всего у шести пикселов, и от этого мало толку. Пропорциональными стоит рисовать персонажей на больших спрайтах (как, например, в игре Phantasy Star IV). В общем, вы поняли, почему SD-стиль продержался так долго, хех... Впрочем, это лишь мои домыслы, я могу и ошибаться.

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

Теперь добавим корпус... Я нарисовал один кулак впереди, а другой сзади. В старых играх спрайты постоянно переключались с кадра, где левая нога впереди, на кадр, где впереди правая, и наоборот... Это был способ избавиться от третьего "стоячего" кадра "ноги вместе, руки по швам". Я взял кадр, в котором персонаж находится в середине своего шага - хочется отметить некоторые тонкости текущей позы. Во-первых, я не разделил руку и корпус. Можно было бы (кстати, получилось бы подобие некой жилетки), но я не стал так делать... Пускай это будет обычный персонаж в штанах и футболке. Как вы помните, жёлтая линия определяет расстояние от низа челюсти до талии, поэтому у вас будет два пиксела для грудной клетки, ещё пиксел займет линия талии (кроме случаев с платьем или незаправленной футболкой и т.п.)... Я упомянул о линии, так как, посмотрите, плечи зашли за оранжевый разделитель. Это потому, что наш взгляд на мир не является ни прямым фронтальным видом, ни видом сверху. У нас вид "сверху вниз" ("top down"; этот термин часто используется при описании игр типа Final Fantasy). Вы смотрите сверху вниз под углом примерно 45 градусов, поэтому видны передние и верхние части строений (угол в 45 градусов обычно используется в изометрических играх, например в Diablo, где шаблоны расположены по диагонали, вместо обычного расположения сверху вниз. Многие люди не понимают, что значит "изометрия" (вам это понятие встречалось на уроках черчения, хех), поэтому при обсуждении стиля FF и т.п. говорят "сверху вниз" вместо "45 градусов"... Сконфужены? Хехех...). Так как у нас вид сверху вниз, мы можем видеть верхнюю часть плеч персонажа немного "позади" его головы... Представьте обычного человека, на которого вы смотрите сверху вниз. Чем больше высота, с который вы на него смотрите, тем большую зону плеч вы видите и тем дальше они заходят за голову. Очень многие делают ошибку, рисуя персонажей во фронтальном виде спереди для карт с видом сверху вниз... Если честно, насчёт видов можно особенно не заморачиваться... Сойдёт и так... Но в нынешние времена следует уделять больше внимания таким моментам. В былые дни славы NES разработчики так сильно извращались с перспективой, что сегодня это выглядит смешно. В то время это не имело значения из-за общей недоразвитости графики, людей больше интересовал геймплэй. Будет время, зацените карту подземелья в игре Zelda для NES-приставки... Комната сделана с учётом вида прямо сверху, герой Линк нарисован в виде сверху вниз, а статуи и прочий антураж исполнены во фронтальном виде, хех...

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

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

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

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

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

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

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

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

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

Итак, у нас есть базовый спрайт персонажа, и если наш герой не парализован и обладает разумом, то ему хочется двигаться и совершать при этом какие-то действия.... Он может просто шагать по городу куда глаза глядят, повторяя: "Добро пожаловать в (город такой-то)!", хех. Значит, нам нужен второй кадр для шагания... Осуществляется это легко. Слева наш прежний спрайт, а в среднем спрайте я взял кусок до конца желтой линии и перевернул в горизонтальной плоскости. Видите, как просто? Конечно, возникла проблема с перевёрнутым освещением, ибо получилось, что солнце перепрыгнуло с одного края неба на другой. Это, пожалуй, не очень хорошо, и поэтому мы подправим цвета теней, чтобы освещение было такое же, как и в первом кадре. У нас теперь есть два кадра для этого малого, и мы можем увидеть его анимированным:

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

Чтобы получить этот кадр, я просто переделал один из шагающих, сведя ноги вместе и прижав руки по швам. Руки будут выглядеть более расслабленными, если придать им "выпуклость"... Если бы остались три вертикальных пиксела, он был бы похож на солдата, стоящего по стойке "смирно" в строю. При создании стоячего кадра для этих маленьких спрайтов 16х16 возникает проблема двойного столбца... Придётся вам выбрать, где пикселы будут разделять ноги. Я сделал одинаковые тени на ногах (те два горизонтальных пиксела), чтобы ноги казались находящимися прямо под корпусом. Если бы на левой ноге не было ни одного светлого пиксела, казалось бы, что она чуть позади правой. А если бы их было много, нога опять выдвинулась бы, но уже вперёд. Теперь у нас есть "стоячий" кадр, можно его использовать, когда игрок ничего не делает. Есть также другая польза от этого кадра... Можно добавить его в анимацию ходьбы:

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

Want to be a pixel artist? #7 - Мир спрайтов

defaultNick — Wed, 02 May 2012 15:38:39 GMT

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

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

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

Итак, вы - Мистер Главный Художник этой игры... И вы работаете с программистом, который хочет, чтобы вы побыстрее заканчивали со спрайтами. Вы нарисовали первый... Размером 39х54 пикселей... всё круто, только он немного крупноват. Ничего страшного, это был первый заход, сродни наброску на бумаге, зато теперь вы более-менее представляете, что должно получиться. На этом большом спрайте можно увидеть, как устроены доспехи и всё остальное. Впрочем, если вы работаете не с SVGA, такой большой спрайт вряд ли будет использован в игре (он займёт слишком много места на экране). Вы решаете немного его уменьшить... Скажем, наполовину, до 24х28. Теперь это более реальный размер, и программист не прикончит вас на месте за намерение вставить в игру такие огромные спрайты (ибо это снизит скорость игрового движка). Главный недостаток среднего спрайта - это то, что числа 24х28 немного странноваты (в игре могут быть скорее шаблоны размера 24х24 и вряд ли какие другие)... Прямоугольные спрайты порождают сложности при использовании составных шаблонов, и обычно вы стремитесь сделать шаблоны сходными по размеру со спрайтом главного героя (по крайней мере, одинаковыми по ширине, высота не так принципиальна), иначе вам придётся делать, например, дверь шириной в четыре шаблона, что немного затрудняет сборку карт, а впоследствии вы ещё намучаетесь с выравниванием. ИТАК, вы решили "подрезать" спрайт ещё немного... И пришли к старому доброму размеру 16х16.

16х16 - это "типовой" размер спрайтов. Этот стандарт использовался в игре Final Fantasy и многих других RPG. Возможно, спрайты с размерами, которые являются степенями двойки, выводились быстрее на дисплей... Я не знаю точно. Но это оказались замечательные числа - в том плане, что шаблоны таких огромных размеров можно было сделать достаточно детальными, не снижая при этом скорость работы игрового движка. Со временем размер 16х16 стал традиционным (сейчас нет тех ограничений, вы можете использовать и тот здоровенный спрайт слева, нисколько не беспокоясь насчёт скорости). В общем, я перерисовал спрайт ещё раз, дабы привёсти его к размеру 16х16... Посмотрите на крайний справа спрайт, маленький и милый, но он всё равно воспринимается, как тот большой. Но что случилось с его доспехами? Где три пластины брони на его перчатках? Навороченный сапог? Его пряжка на поясе? Это всё пропало!

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

Возникает большой вопрос: "Если не обводить всё, как тогда выделить различные части спрайта?" Ответ - использовать стратегические возможности цвета. При рисовании героя в накидке, которая охватывает его спереди, можно не обводить всю накидку, чтобы отделить её от одежды под ней. Просто нужно выбрать правильный цвет для хорошего контраста. В общем, достаточно ПОДСКАЗАТЬ глазу детали. Вы же не будете рисовать все пять пальцев, чтобы изобразить руку спрайта, точно так же вам не нужно выделять каждую отдельную часть одежды. Стоит лишь создать нужное впечатление. Это используется повсеместно. Хотя такой приём в наши дни неограниченных размеров спрайтов и трехмерных фишек не так часто увидишь. В старые времена, когда приходилось работать с маленькими размерами и при этом тоже требовались детали, часто использовался именно подход "подсказывания". Например, давайте посмотрим на спрайты из Final Fantasy 2 и 3:

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

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

Сесил и Каин, взятые из боевых сцен FF2. Эти спрайты размером 16х24, отличные от спрайтов 16х16 для карты... Они более детализированны... И всё же... И здесь используется цветовое разделение... Мистер Художник получает ещё целых 8 пикселов в своё распоряжение. "Ооо!! Это значит, что я могу прикрутить сюда все чёрные обводящие линии!" Ну, можно сделать и так... И получится спрайт, смахивающий на версию 16х16, только с линиями, разделяющими всё на свете... Это будет выглядеть немногим лучше, чем исходные спрайты 16х16, так что вы можете избавить программиста от лишней работы, просто взяв предыдущие версии спрайтов. "Я не хочу так поступать! Я хочу причудливые и красивые спрайты". Окей, тогда слушайте и изучайте эти образцы...

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

Теперь Каин, он похож на Сесила цветами, так как тоже одет в броню. Если хорошо приглядеться, то видно, что ноги Каина - это копии Сесиловых, за исключением цветов, хех... Изучаем ноги... Взгляните на Сесила, затем на Каина. Заметили разницу? Нижний правый угол ноги у Сесила имеет оранжевое пятно и угловой пиксел. Эти два пиксела изменили вид ноги полностью. У Каина скругленные цельные ботинки, а у Сесила смотрит назад какая-то оранжевая часть (наверное, его пятка?), и у его брони более острые углы, как будто она зубчатая. У этого оранжевого пиксела нет черной обводки... Обычный оранжевый пиксел, но он меняет восприятие брони. Окей, теперь осмотрим шлем Каина... Часть, похожая на гребень дракона... Чёрный обводит заднюю часть, а внутри только голубой, перемежающийся с жёлтым. Они достаточно сильно различаются, и поэтому там нет разделительного чёрного, который мог перегрузить эту часть шлема и сделать спрайт безобразным. У Каина есть ещё разделения (заметны на предплечьях), а чёрные линии придают его броне целостность. Фиолетовая броня Сесила, особенно на запястьях, более "подвижна", в то время как у Каина, благодаря чёрным линиям, наблюдаются отдельные сегменты. Чёрный может подчёркивать детали так же, как и затруднять восприятие. Опять же, потребуется некоторая практика, чтобы научиться использовать чёрный цвет так, как делают это "мастера", хехе... Теперь можно перейти к Final Fantasy 3:

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

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

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

Want to be a pixel artist? #6 - Секреты и уловки

defaultNick — Wed, 02 May 2012 15:36:51 GMT

Бог мой! Что это?! Это... это... Final Fantasy 1:

"Раз это руководство о том, как делать хорошую графику, то что здесь делает скриншот из NES-игры (NES - приставка, у нас известная как Dendi)? Ведь там всего 16 цветов, разве нет?" В этом-то и суть, дружочки. Видите ли, в те стародавние времена не было огромной 256-цветной палитры, с которой можно рисовать "замечательные" градиентные заливки или хранить тридцать различных оттенков одного и того же цвета. Приходилось работать с имевшимися ресурсами и делать это так, чтобы шаблоны выглядели пристойно. Из тих древних игр можно выцепить пару полезных трюков. Так что вернёмся в старые добрые деньки и всмотримся в скриншот повнимательнее:

Начнём с шаблона "пола"... К сожалению, он не может служить хорошим примером избавления от "сетки", но ведь игра была одной из первых, а тогда перед разработчиками стояли другие, более приоритетные цели. Тем не менее, когда мы смотрим на него, мы понимаем, что это пол, даже каменистый такой пол. И этот шаблон нарисован всего ДВУМЯ цветами. "Но если в нашем распоряжении есть только один тёмный и один светлый оттенок, как же сделать, чтобы казалось, будто оттенков больше?" Тут придётся использовать чудеса смешивания (dithering; другой вариант: дизеринг - прим. пер.). Смешивание - это когда вы располагаете пикселы в определенной последовательности, создавая иллюзию наличия в картине дополнительных промежуточных оттенков. Именно этот метод был распространён во времена ограниченной палитры. Я покажу вам, почему смешивание срабытывает и как его следует применять. Для начала хочу обратить ваше внимание на остальные шаблоны. На втором, изображающем светлые камни, есть третий цвет, белый. Он использован в качестве блика. Следующий шаблон "внутренней стены" кажется темнее предыдущего. Это потому, что в его нижней части больше чёрного, нет бликов, а белый цвет заменен на светло-серый. Это те же самые оттенки цветов, просто они расположены по-иному. Также отметьте, что эти камни не похожи на "градиентные" кирпичи, которые я делал раньше. Здешние стены стары, исцарапаны и потрёпаны. Именно такое впечатление они производят, именно это мы видим. Даже тогда компания Square знала, что делала. Последний шаблон "травы" я привёл просто так, хех, как пример техники "пара зелёных точек на тёмно-зелёном фоне". Мы начинали таким же манером. Ну, теперь займёмся первым трюком - попробуем смешивание:

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

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

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

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

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

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

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

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

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

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

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

Want to be a pixel artist? #5.2: Разоблачение 'авторитетов'

defaultNick — Wed, 02 May 2012 15:35:03 GMT

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

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

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

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

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

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

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

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

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

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

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

Want to be a pixel artist? #5.1 - Разоблачение 'авторитетов'

defaultNick — Wed, 02 May 2012 15:32:48 GMT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Want to be a pixel artist? #4 - Разбавляя монотонность

defaultNick — Wed, 02 May 2012 15:30:18 GMT

Блиц-опрос! Какая стена интереснее выглядит?

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

Правда, многие люди говорят: "Но мой игровой движок для RPG поддерживает только X разных шаблонов! Я не могу себе позволить столько разных текстур!" Ну, здесь вы выбираете между хорошей графикой или небольшой работой по модификации вашего движка. Самый простой метод - это использовать наборы шаблонов. Каждый набор состоит, например, из 100 шаблонов определенного "антуража". У вас может быть набор для города, где будет 100 шаблонов всяких стенок, крыш, дорог, окон, знаков и т.п. Тогда для пещеры у вас будет набор с другими шаблонами: камней, воды, факелов и т.д. Уловили идею? Разные зоны - различные шаблоны. И когда в вашей ролевой игре загружается карта, скажем, городской зоны, вы понимаете: "А теперь мне понадобятся шаблоны для города". И игра подгружает городской набор в свой основной набор шаблонов. Если позднее игрок зайдёт в пещеру, игра загрузит пещерный набор вместо городского. При таком методе (только не спрашивайте меня, как это запрограммировать, ибо моё руководство по графике, а не кодированию) у вас может быть практически неограниченное количество шаблонов, ведь если вам понадобится новая зона, вы просто нарисуете для неё новый набор шаблонов. Так что теперь вы не можете сказать, будто не представляете, где найти место для большего числа шаблонов, хехех...

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

Want to be a pixel artist? #3 - Градиент - это зло

defaultNick — Wed, 02 May 2012 15:28:40 GMT

Да, именно так. Градиент - это зло. "Что?! Безумие! Как ещё нарисовать шаблон с полутонами? Заливка градиентом - самый великолепный приём, известный человечеству!" Хорошо, давайте займёмся этим вопросом... Заливка градиентом МОЖЕТ пойти "на благо"... К несчастью, многие люди не чувствуют разницы между "на благо" и "во зло" и, дорвавшись до градиента, заливают им всё подряд. В итоге они совершают самую типичную ошибку:

Давайте посмотрим на картинку. Действительно ли она выглядит как НАСТОЯЩАЯ гора, которая состоит из камней и грязи, случайно набросанных друг на друга в виде уступов, зазубрин и прочих неровностей? Больше похоже на плоскую бумажку, на которой кто-то пробовал свой коричневый маркер. Главный вред градиентной заливки - люди начинают использовать её для всего, что можно и что нельзя. Это заканчивается совершенно круглыми трубами, невыносимо блестящими горами, неправдоподобно гладкими кирпичами и так далее... Оглядите комнату, в которой сидите... Много ли в ней вещей, которые блестят, как будто их нещадно залили градиентом? На стенах наверняка есть трещины и царапины. Покраска стула наверняка кое-где облезла или ободралась... Вообще, применять заливку градиентом ДОПУСТИМО лишь к свежеизготовленной продукции. Если действие вашей игры происходит в будущем, где полно роботов и других металлических штук, вы можете использовать градиент чуть смелее тут и ещё вон там... Впрочем, даже если к некой абстрактной стене никто никогда не прикасался, почти всегда на ней будут кое-какие потёртости, выбоины и так далее. Сейчас я покажу вам пару примеров с градиентными и неградиентными шаблонами... Возьмём предметы, о которых говорилось выше: трубу, гору и кирпичи.

Итак, у нас есть труба, гора и кирпичная стена, залитые градиентом. Теперь это НАСТОЯЩАЯ труба, это НАСТОЯЩАЯ гора (ну, если поднапрячь воображение...) и это НАСТОЯЩАЯ кирпичная стена. Но все они выглядят так, будто сделаны целиком из блестящей пластмассы. Если вы именно этого и добивались, то градиент вам в руки, но если вы не рисуете зону, которую только что отштамповали на заводе, то в этой зоне не должно быть ничего новёхонького. Так что я взял и перерисовал шаблоны, на этот раз пиксел за пикселом, безо всякого градиента.

Теперь это труба "в годах". Она не блестящая и не новая, чувствуется некоторый возраст. Она гораздо интереснее для глаза, чем градиентная труба. Она по-прежнему выглядит округлой, но за счёт нескольких пикселов кажется менее монотонной. Гора теперь БОЛЬШЕ похожа на собственно гору. Все оттенки нужного градиента сохранились, но теперь они формируют очертания в массиве горы. Присутствуют маленькие зазубренные углы и тени, которые придают большее ощущение объёма. ЕСТЬ маленький градиент то тут, то там, но это лишь несколько пикселов, нет нужды использовать заливку. И, наконец, кирпичная стена. Если бы я действительно делал её для игры, я бы взял не такой ярко-белый цвет, чтобы глаза меньше напрягались, но я просто использовал цвета исходного градиента. Кирпичи в стене не выглядят идеальными выпуклыми прямоугольниками... Они, опять же, выщербленные и поцарапанные, не очень ровные, на них интереснее смотреть.

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

"Что?! Что значит 'выглядят некрасиво'? Смотрите! Здесь есть градиенты! Это профессионально!" Я не люблю перебивать, но сами по себе градиенты НЕ профессиональны. Они всего лишь "популярны". Это как эффект бликования (lens flare) во многих графических редакторах. Это было круто и отличалось от всего остального - в тот момент, когда появилось на сцене... Потом это всем ужасно надоело, и теперь, когда люди слышат: "Смотрите, я сделал блик на мече своего героя! Разве это не круто?!" - они начинают смеяться. В общем, заливка градиентом - это готовое средство, и не надо им злоупотреблять, хоть это и означает, что придется потрудиться. "Но посмотрите на эти классные деревья! Это не ОБЫЧНЫЙ градиент, это СКРУГЛЕННЫЙ градиент! Это удивительно! Верх совершенства!" Неужели вы когда-то выращивали конусы из блестящего зелёного картона на коричневых цилиндрах? Я взял тот же набор шаблонов, ту же карту и цвета и сделал раскраску своими руками.

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