ТЕМА: Создание спрайтов

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

Итак, основные два урока, найденные на иностранном сайте-партнере Светлой зоны:

хостинг картинок без регистрации

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

1) Ширина между глазами 2 пикселя.
2) Глаза состоят из 8 пикселей каждый : 3 зрачок с радужкой, 3 белок (1, верхний, затемняется) , 2 ресница.
3) Уши по 2 пикселя.
4) Волосы и лицо примерно совпадают по высоте.
5) Шея чаще всего не рисуется.
6) Ладони состоят в среднем из 3 пикселей каждая.
8) Голова составляет от 1/2 до 1/4 тела. 1/2 преимущественно для чиби/гномов/героев Final Fantasy VI, 1/3 для большинства остальных, 1/4 - вытянутые персонажи.

Немного об инструментах:

1) Если вы пользуетесь фотошопом, используйте карандаш, а не кисть, диаметр 1 пиксель (2 если надо заполнить большие пространства). Кисть даже при 100% твердости будет оставлять мягкие линии на несколько пикселей. Это испортит спрайт!
2) Если вы используете Paint/ImageFilter/не знаю еще что, то таких проблем, по-моему возникнуть не должно.
3) Если вы используете фотошоп-онлайн (обрадую вас, он бесплатен и вот здесь photoshop.domfailov.ru/), то берете кисточку и нажимаете на верхней горизонтальной панельке Hard tip. Вкратце: эффект карандаша в обычном фотошопе.
4) Не занимайтесь черчением! В смысле, не увлекайтесь только обводкой черным. Если волосы голубые - обводите их синим, границу головы и шеи покажите коричневым, складки на красной рубашке - темно-бордовым. На спрайте слишком мало места, чтобы все обводить!
5) И не забывайте о своем концепт-арте! Зачем тогда вы его рисовали? (примечание: на самом деле можно делать все в обратном порядке. У меня так с Ханко вышло: на генераторе не вышло создать модельку нужного размера, пришлось концепт первый переделывать. В итоге я сделала баттлер, а уже потом нарисовала скетч по чарсету и баттлеру. Но вам все равно нужно иметь в голове общий вид изображаемого персонажа!)
6) Полезные инструменты - регулировка яркости/контрастности/насыщенности/цветового тона и т.д. Может серьезно повлиять на спрайт! Так же полезная функция - замена цвета (для реколоринга-ака-перекрашивания). И не забываем копипаст! Горячие клавиши - Ctrl+C (копировать) и Ctrl+V (вставить). (примечание: в обоих фотошопах вставляется на новый слой. Не забываете их объединять (правая кнопка на слои, Объединить видимые). Иначе запутаетесь.

Второй урок: как сделать профиль и вид сзади.

[/url]
фотохостинг бесплатный[/IMG]

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

Теперь о том, что мне не нравится в генераторах и стандартных чарсетах мейкеров XP и VX. Так вот, о наболевшем: меня убивают их рожи. Если лицам 2003 и 2000 я более-менее симпатизирую, то мордашки из более современных версий мейкера меня раздражают. Я долго лазила по забугорным сайтам и в основном натыкалась на реколоринг спрайтов японских игрушек, а так же наштампованных на генераторах чарсетов персонажей. Так вот, единственный стиль спрайтов, который меня зацепил и который мне понравился - спрайты из To the Moon (шедевральная игра, полностью переведена на русский). Еще на каком-то скриншоте находила такой стиль, но не знаю, что за игра.
Преимущества стиля To the Moon:
1) Более-менее пропорциональное, симпатичное изображение лица.
2) Близость к классическим спрайтам.

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


а)Рисуем цветом радужки два прямоугольника 3*2 на расстоянии трех пикселей друг от друга. б) Рисуем два прямоугольника 1*2 и 2*1.

а)Добавляем по полосочке 3*1 с внешних сторон прямоугольников. Последовательность цветов сверху вниз: серый-белый-серый или серый-белый-белый. б) Лесенкой идут две полоски 3*1

а)Рисуем центр лица самым светлым тоном кожи (полоска 4*3 + пиксель по центру ниже) б) Конец рукава, 1*3

а)Обводим лицо согласно образцу коричневатым. б) Рисуем руку самым светлым цветом кожи, 2*3

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

а)Делаем ресницы/брови 1*2 коричневатым или цветом темнее него, 1*2. Пространство между веками заполняем самым темным цветом кожи (можно книзу сделать переход аналогично щекам) б) Рисуем темную часть рукава.

а)Намечаем волосы основным цветом. б) Рисуем светлую часть рукава.

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

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

Полный урок от первого этапа до последнего.

фотохостинг png

Итак, в качестве новогоднего подарка выкладываю тут долгожданный туториал по анимации персонажей в мейкере. Автоматического выпрямления рук у вас разом не произойдет, но немного практики - и все получится.
Вам очень понадобится фотошлеп, ибо я не знаю другой программы, имеющей нужные функции (нам понадобится, чтобы прога могла проигрывать анимацию).
Начинаем.
Для начала нам нужен персонаж, которого мы будем портить. Я делаю это так: открываю картинки с частями персонажа из генератора Charazou
rpgmaker.su/downloads.php?do=file&id=66
(эта зараза с багами, так что скоро дойдут руки поправить), переношу все на одну картинку (Ctrl+c, Ctrl+v), поправляю до стадии "симпатичный гуманоид".
Надпись Индексированные цвета помешает. Залазим в "Изображение" (панель наверху, 3-я слева), режим меняем на RGB - дает нам возможность регулировать что душе угодно и работать со слоями.
Итак, мы перенесли все части персонажа в один документ. Но: о, ужас! Нам виден только верхний слой. Выбираем в панельке инструментов волшебный ластик (удерживаем обычный, кликаем на тот, что со звездочкой) и стираем фон со всех слоев выше базового. Допуск 0 - это пикселарт.

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

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

Получилось что-то такое:

А если немного постараться, то можно сбацать и такое (32 кадра).

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

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

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

Вращение головой

Выглядит так:

Делается путем отрезания (звучит кровожадно) у чарсета головы и прилепливания ее телу в фас.

Можно добавить вид 3/4
После долгой борьбы с фотошопом у меня вышло такое:

Плюсы:
сглаживает анимацию поворота головы
Можно использовать как отдельную (!) эмоцию
Минусы
Делать примерно так:
переставить глаза чуть ближе друг к другу, сместить в сторону поворота (оставшееся место закрасить кожным цветом с тенями),
поковыряться с волосами (обязательно повернуть основные прядки и линию пробора),
сместить подбородок
- звучит сложно, но минут за 15-20 делается, ибо процес "1 пиксель закрасил фиолетовым, другой симметричный ему розовым" много времени не занимает. + ПРАКТИКА!!!

Эмоции ранга эпик

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

Итак, помните, вы сохранили версию со слоями чарсета? Открываем ее.
Создаем файл анимации, копируем туда один чар анфас. Копирование будет идти последовательно со всеми слоями (единственное, слои с одеждой и телом можно смело объединить). Теперь в файле анимации у нас 2 слоя (волосы и все остальное). Выделяем все остальное, создаем новый слой, сначала закрашиваем глаза, потом получившееся закрашиваем мягкой темной кистью (у кисти ставим твердость и прозначность меньше максимума). Те же операции будут для подобной эмоции в профиль.
Далее работаем на дубликате слоя со всем кроме волос. Делаем 4 кадра, в каждом последующем уменьшаем глаз на 1-3 пикселя, пока он не закроется совсем. Эмоция полезна всем, кто хочет убить какого-либо персонажа.
Если вам лень - можно ограничиться всего 2-мя (глаз совсем открыт/ совсем закрыт)
Теперь волосы. Самое легкое и самое сложное. Сначала копируем вид сзади (1волосы и тело) затем в следующем кадре копируем другие волосы с чарсета (если он качественный - волосы не будут одинаковыми). Мне попался некачественный. Но я вижу прядки и сдвигаю их на новом кадре. Делаем это как в случае с поворотом головы.

Итоги

Эмоции ранга юмор

Тут простор для творчества...

Итак, когда мы наигрались всласть, нужно просто скопировать каждый кадр в чарсет. Дальше режим - индексированные цвета, формат PNG и импортирование в мейкер.

Делаем нужную нам каляку

Создаем небольшой документ

Копипастим туда нашу каляку (Ctrl+a, Ctrl+c, Ctrl+v) и свободным трансформированием подгоняем по размеру (зажать Shift чтобы при уменьшении картинку не сплющило - фиксирует пропорции).

Самое интересное, что и даст эффект пиксель арта. Залезаем в режим и выбираем индексированные цвета. Далее - эксперименты в свое удовольствие. Особенно рекомендую настройку количества цветов вручную.

Итог:

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



Мы берем и нажимаем инструмент "Волшебная палочка", настраиваем на добавление к выделенной области (самая левая иконка с двумя квадратиками).



И закликиваем насмерть таким образом, чтобы выделилось платье девочки. Каждый клик, в зависимости от чувствительности волшебной палочки, выделяет один/несколько цветов. Галочка "Смежные пиксели" дает возможность выделять пиксели в одном месте, если ее нет - цвет будет выделен на всей картинке.



Затем убеждаемся, что у нашей картинки нужный режим (т.е. RGB, а не Индексированные цвета). Если не так - исправляем на RGB.



После этого вылазим в менюшку Изображение > Коррекция > Цветовой тон/Насыщенность. У вас есть возможность как угодно менять цвет выделенной области. В случае чего можно воспользоваться Контрастностью или Кривыми(более продвинутая Контрастность).





Ну, а дальше похожим образом переделываем волосы, передник и глаза.



Поздравляю, вы успешно перекрасили спрайт.


Продвинутый метод

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



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



После успешного закрашивания открываете менюшку слоя и настраиваете как вам больше нравится.