Как нарисовать спрайт персонажа. Введение в пиксельную графику (Pixel Art) для игр

Часть 9: Создание спрайтов для игр-сражений

Итак, мы поработали над созданием маленьких 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" и белый фон, закроет исходную картинку.

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

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

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

Вступительное слово:

Здравствуйте уважаемые пользователи портала сайт! В этой статье я расскажу Вам, как нарисовать свой спрайт и сделать для него анимацию в XNA GameStudio , а так же познакомлю Вас с перемещениями спрайтов в двухмерном пространстве. Весь приведенный ниже код проверен, и отлично функционирует в версии 3.1 . Но, так же он должен работать и в других версиях (3.0 и 4.0 ; на счет 2.0 не уверен). Перед знакомством с этим уроком рекомендую прочитать , так как этот урок является ее продолжением, а это значит, что Вам понадобятся те знания, которые Вы получили из первой статьи.

Так же перед прочтением данного урока Вы должны обладать базовыми знаниями языка программирования C# , и иметь программу Microsoft Visual C# Express необходимой Вам версии (для XNA 3.1 - Microsoft Visual C# Express 2008 , а для XNA 4. 0 - Microsoft Visual C# Express 2010 ) с установленной библиотекой XNA GameStudio .

Итак, если Вы имеете все вышеприведенное, тогда приступим!

Часть 1. Рисование спрайта.

Немного теории:

Для начала давайте разберемся, что же такое спрайт. Спрайт – это некий объект (изображение) в 2D игре. Ваш персонаж, противник, обычное дерево или платформа – все это является спрайтами. Даже фон, который мы рисовали в предыдущей статье, будет являться своеобразным спрайтом.

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

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

Итак, приступим!

Создание класса для рисования спрайта:

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

Теперь нажмите правой кнопкой на название проекта (в обозревателе решений) и выберите команду: Добавить -> Создать элемент -> Класс :

Давайте назовем его Sprites :

После создания наш класс имеет такой вид:

200?"200px":""+(this.scrollHeight+5)+"px");">using System;
using System.Linq;
using System.Text;

Namespace DrawSprite
{
class Sprites
{
}
}

Как Вы понимаете, это самый стандартный класс для проекта на языке программирования C# , т.е. пространств имен XNA здесь нет. Так как я их наизусть не помню (да и, наверное, ни один программист их все не запоминает), мы будем добавлять их «по ходу дела». Например, создали мы переменную для текстуры (Texture2D , если кто не помнит), а компилятор сообщает, что не хватает одного пространства имен (так же он пишет его название). Вот тогда-то мы его и добавим.

Итак, теперь давайте вспомним, как же мы добавляли наш фон в игру.

Мы создали переменные для текстур, загрузили сами текстуры в методе LoadContent() и нарисовали их в методе Draw() . Т.е., чтобы создать отдельный класс и в нем нарисовать спрайт (точнее, в нем обработать спрайт, а нарисуем мы его в Game1 ), нам нужно создать в нем (в нашем новом классе) переменную, создать метод для загрузки текстур (по типу метода LoadContent() ) и создать метод для рисования текстур (по типу метода Draw() ).

Теперь можно приступать к редактированию нашего нового класса. Как Вы знаете, весь код класса пишется в блоке (между фигурных скобок) класса. Поэтому сразу после:

200?"200px":""+(this.scrollHeight+5)+"px");">class Sprites
{

Запишем:

200?"200px":""+(this.scrollHeight+5)+"px");">Texture2D

Как Вы видите, если поставить курсор на «Texture2D », то последний симфол подчеркивается:

В нашем случае это означает, что не хватает простанства имен. Нажмем сочетание клавишь «Alt+Shift+F10 » и выберем самое первое. Оно добавиться:

Если все сделали правильно, то вверху экрана появится надпись:

200?"200px":""+(this.scrollHeight+5)+"px");">

А «Texture2D » изменит свой цвет.

Итак, продолжим. Замените «Texture2D » на:

200?"200px":""+(this.scrollHeight+5)+"px");">

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

200?"200px":""+(this.scrollHeight+5)+"px");">public Sprites()
{

Переменная создана, конструктор готов. Теперь перейдем к загрузке изображения. Давайте создадим метод LoadContent() сразу после конструктора. В его параметрах нужно записать два объекта. Один объект будет класса ContentManager (кстати, здесь тоже не хватает пространства имен, добавим его), а второй класса String . Первый позволит нам вызвать метод Load , для загрузки изображения, а второй позволит прописать путь к этому изображению. И так, вот как выглядит метод LoadContent() :

200?"200px":""+(this.scrollHeight+5)+"px");">
{
spriteTexture = Content.Load(texture);
}

Как Вы видите, спрайт загружается так же, как и фон. Только, теперь в классе Game1 Вам нужно будет вписать лишь слово Content и путь к текстуре. Остальное уже написано.

Так, теперь перейдем к следующему (и последнему) методу – Draw() . Единственный параметр, который ему нужно передать, это spriteBatch . Теперь остается только нарисовать спрайт известным нам способом (точно так же, как мы рисовали фон). Единственное, здесь не нужно вызывать методы spriteBatch.Begin() и spriteBatch.End() , потому, что чтобы не вызывать эти методы для каждого спрайта отдельно, мы их вызовем один раз (в классе Game1 ). И так, вот как выглядит наш метод Draw() :

200?"200px":""+(this.scrollHeight+5)+"px");">
{
spriteBatch.Draw(spriteTexture, Color.White);
}

Как Вы заметили, второй аргумент (после spriteTexture ) мы не записали. Это сделано потому что, координаты мы еще не задали.
И так, теперь переходим к той проблеме, которую я описывал вначале. Сейчас мы будем использовать простой способ, и зададим координаты левого верхнего угла спрайта. Для этого сразу после строки

200?"200px":""+(this.scrollHeight+5)+"px");">public Texture2D spriteTexture;

(в самом начале класса)

Запишем «Vector2 » и добавим необходимое пространство имен. Так же напишем название позиции:

200?"200px":""+(this.scrollHeight+5)+"px");">

И теперь в методе Draw() запишем второй аргумент.

Вот так теперь выглядит метод Draw() :

200?"200px":""+(this.scrollHeight+5)+"px");">public void Draw(SpriteBatch spriteBatch)
{
}

А вот так выглядит весь наш класс:

200?"200px":""+(this.scrollHeight+5)+"px");">using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework;

Namespace DrawSprite
{
class Sprites
{
public Texture2D spriteTexture;
public Vector2 spritePosition;

Public Sprites()
{

Public void LoadContent(ContentManager Content, String texture)
{
spriteTexture = Content.Load(texture);
}

Public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Draw(spriteTexture, spritePosition, Color.White);
}
}
}

Редактирование класса Game1:

Итак, теперь давайте отредактируем класс Game1 в соответствии с классом Sprites .

Для начала давайте создадим объект класса Sprites . Назовем его hero .

200?"200px":""+(this.scrollHeight+5)+"px");">Sprites hero;

Теперь в конструкторе Game1 инициализируем объект:

200?"200px":""+(this.scrollHeight+5)+"px");">hero = new Sprites();

После этого в методе LoadContent() загрузим изображение. Предварительно в папке Content создайте папку Textures и добавьте в нее изображение Вашего героя (все это описывается в моей первой статье) (я назвал его idle ). И так, в методе LoadContent() напишем:

200?"200px":""+(this.scrollHeight+5)+"px");">hero.LoadContent(Content, "Textures//idle");

Тем самым мы вызвали метод «LoadContent » из класса Sprites и приписывам в него аргументы.

Ну что, мы на «финишной прямой». Осталось перейти в метод Draw() и вызвать там spriteBatch.Begin() , hero.Draw и spriteBatch.End() . Как Вы поняли, hero.Draw мы будем вызывать из класса Sprites , т.е. в него нужно прописать только один аргумент – spriteBatch (остальное прописано в классе Sprites ). Вот так выглядит метод Draw() класса Game1 :

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

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

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

Это значит, что координаты (0, 0 ) (по X и Y ) будут находиться в левом верхнем углу.

Теперь давайте изменим наш код, и запишем свои координаты. Каждое деление координатной шкалы равно одному пикселю. Т.е., если у Вас размер экрана 600x600 пикселей, то точка 300x300 будет серединой Вашего экрана.

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

200?"200px":""+(this.scrollHeight+5)+"px");">graphics.PreferredBackBufferHeight = 600; //Ширина экрана
graphics.PreferredBackBufferWidth = 600; //Высота экрана

Все, теперь мы можем задавать координаты. В методе Initialize() введите:

200?"200px":""+(this.scrollHeight+5)+"px");">hero.spritePosition = new Vector2(300, 300);

Тем самым мы инициализировали объект spritePosition и присвоили его координатам значения 300 по осям X и Y .

Теперь давайте запустим игру. У меня получилось так:

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

Пиксельная графика (далее - просто пиксель-арт) в наши дни все чаще и чаще напоминает о себе, особенно через инди-игры. Оно и понятно, ведь так художники могут наполнить игру великим множеством персонажей и не потратить сотни часов за моделированием трехмерных объектов и ручной отрисовкой сложных объектов. Если вы хотите научиться пиксель-арту, то первым делом вам придется научиться рисовать так называемые “спрайты”. Затем, когда спрайты уже не будут вас пугать, можете переходить к анимации и даже продаже своих работ!

Шаги

Часть 1

Собираем все необходимое

Загрузите хорошие графические редакторы. Можете, конечно, и в Paint’е шедевры создавать, но это сложно и не очень удобно. Куда лучше будет работать в чем-то вроде:

Photoshop
Paint.net
Pixen

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

Включите “сетку” в вашем графическом редакторе. Собственно, если ваш графический редактор не поддерживает отображение сетки, то стоит задуматься о поиске другой программы. Сетка позволит вам четко видеть где и как будет находиться каждый отдельно взятый пиксель. Как правило, четка включается через меню “Вид”.
- Возможно, придется немного настроить параметры отображения, чтобы каждый сегмент сетки действительно отображал пиксель. В каждой программе это делается по-своему, так что поищите соответствующие советы.
Рисуйте карандашом с размером кисти в 1 пиксель. В любом графическом редакторе должен быть инструмент “Карандаш”. Выберите его, размер кисти задайте равным 1 пикселю. Теперь вы можете рисовать… пиксельно.

Часть 2
Отрабатываем основы
Создайте новое изображение. Так как вы учитесь рисованию в стиле пиксель-арт, то замахиваться на эпические полотна не стоит. Если помните, то в игре Super Mario Bros. весь экран был 256 x 224 пикселей, а сам Марио уместился на пространстве в 12 x 16 пикселей!
1. Увеличьте масштаб. Да, иначе вы просто не разглядите отдельные пиксели. Да, придется увеличивать его очень сильно. Скажем, 800% - это вполне нормально.
  
  Научитесь рисовать прямые линии. Вроде бы и просто, но если вы вдруг где-то в середине нарисуете дрогнувшей рукой линию в 2 пикселя толщиной, то разница будет бить по глазам. Рисуйте прямые линии до тех пор, пока вам не придется активировать инструмент для рисования прямых линий. Вы должны научиться рисовать прямые линии вручную!
  
  Научитесь рисовать кривые линии. В кривой линии должны быть, скажем так, равномерные “переносы строк” (что отчетливо заметно на рисунке чуть выше). Допустим, начиная рисовать кривую линию, нарисуйте прямую из 6 пикселей, под ней - прямую из трех, под ней - прямую из двух, а под ней - из одного пикселя. С другой стороны нарисуйте то же самое (зеркально отраженное, разумеется). Именно такая прогрессия считается оптимальной. Кривые, нарисованные по схеме “3-1-3-1-3-1-3”, не отвечают стандартам пиксель-арта.
  
  Не забывайте стирать ошибки. Инструмент “Стерка” надо настроить аналогично карандашу, сделав размер кисти равным 1 пикселю. Чем крупнее стерка, тем сложнее не стереть лишнее, так что все логично.
  
  Часть 3
  Создаем первый спрайт
  1. Подумайте о том, каким целям будет служить спрайт. Он будет статичным? Анимированным? Статичный спрайт можно насытить деталями до отказа, а вот анимированный лучше сделать попроще, чтобы потом не тратить часы, перерисовывая все детали на всех кадрах анимации. К слову, если ваш спрайте предполагается использовать с другими, то все они должны быть нарисованы в одном стиле.
    
    Узнайте, нет ли каких-то особых требований к спрайту. Если вы рсиуете для, скажем, проекта, то вполне резонно будет ожидать требований к цветам или размеру файлов. Впрочем, это будет важнее чуть позже, когда вы начнете работать над крупными проектами с множеством разных спрайтов.
    - Объективно говоря, в наши дни требования к размеру или палитре спрайтов уже выдвигаются редко. Впрочем, если вы рисуете графику для игры, в которую будут играть на старых игровых системах, то придется учитывать все ограничения.
  2. Сделайте набросок. Набросок на бумаге - вот основа любого спрайта, благо что так вы сумеете понять, как все будет выглядеть и, если надо, сможете что-то заранее подправить. Кроме того, по бумажному наброску потом еще можно и обводить (если у вас все же есть планшет).
    - Не жалейте деталей для наброска! Нарисуйте все, что хотите видеть на финальном рисунке.
  3. Перенесите набросок в графический редактор. Можете обвести бумажный набросок на планшете, можете перерисовать все вручную, пиксель за пикселем - не важно, выбор за вами..
    - Обводя набросок, используйте 100%-ый черный цвет в качестве контурного. Если что, вы его потом вручную измените, а пока что вам будет проще работать именно с черным.
  4. Доработайте контур наброска. В данном контексте можно, конечно, сказать иначе - сотрите все лишнее. В чем суть - контур должен быть в 1 пиксель толщиной. Соответственно, увеличивайте масштаб и стирайте, стирайте лишнее… или дорисовывайте отсутствующее карандашом.
    - Работая над наброском, не отвлекайтесь на детали - их черед еще придет.
  Часть 4
  Раскрашиваем спрайт
  1. Освежите в памяти теорию цвета. Посмотрите на палитру, чтобы понять, какие цвета надо использовать. Там все просто: чем дальше цвета друг от друга, тем больше они друг на друга не похожи; чем ближе цвета друг к другу - тем больше они похожи и лучше рядом друг с другом смотрятся.
    - Выберите цвета, которые сделают ваш спрайт и красивым, и не режущим глаза. И да, пастельных цветов следует избегать (если только весь ваш проект не выполнен в таком стиле).
  2. Выберите несколько цветов. Чем больше цветов вы будете использовать, тем более, так сказать, “отвлекающим” будет ваш спрайт. Посмотрите на классику пиксель-арта и попробуйте подсчитать, сколько цветов использовано там.
    - Марио - всего три цвета (если мы говорим о классической версии), да и те расположены на палитре чуть ли не вплотную друг к другу.
    - Соник - пусть даже Соник нарисован с большим количеством деталей, чем Марио, в основе все равно лежат всего 4 цвета (и тени).
    - Рю - чуть ли не классика спрайтов, как они понимаются в играх-файтингах, Рю - это большие участки, закрашенные в простые цвета, плюс немного тени для разграничивания. Рю, впрочем, чуть сложнее Соника - там уже пять цветов и тени.
  3. Разукрасьте спрайт. Инструментом “Заливка” разукрасьте ваш спрайте и не переживайте о том, что все выглядит плоско и безжизненно - на этом этапе иного и не предполагается. Принцип работы инструмента “Заливка” прост - он будет заливать выбранным вами цветом все пиксели того цвета, по которому вы кликнули, пока не дойдет до границ.
  Часть 5
  Добавляем тени
  1. Начните наносить тени, используя для этого цвета, которые чуть темнее базовых. Если свет падает сверху, то где будет тень? Правильно, там, куда прямой свет не падает. Соответственно, чтобы добавить тень, просто добавьте к спрайту еще несколько слоев с пикселями соответствующего цвета выше или ниже контура.
    - Если уменьшить настройку “Контраст” базового цвета, слегка увеличив настройку “Яркость”, то можно получить хороший цвет для отрисовки тени.
    - Не используйте градиенты. Градиенты - зло. Градиенты выглядят дешево, халтурно и непрофессионально. Эффект, схожий с эффектом градиентов, достигается с помощью приема “прореживание” (см. ниже).
  2. Не забудьте про полутени. Выберите цвет, находящийся между базовым цветом и цветом тени. Используйте его для создания еще одного слоя - но уже между слоями этих двух цветов. Получится эффект перехода от темной области к светлой.
    
    Нарисуйте блики. Блик - это то место спрайта, куда падает больше всего света. Нарисовать блик можно, если взять цвет, который будет чуть светлее базового. Главное - не увлекаться бликами, это отвлекает.

Здравствуйте, друзья! Эта статья изначально была написана как руководство по созданию спрайтов для ZX Spectrum на IBM PC в программе «Pro Motion». Чуть позже, по рекомендации редактора «Абзаца», я переписал ее, учитывая особенности самого удобного, на мой взгляд, графического редактора для ZX Spectrum - Burial Gfx Editor, на котором я создавал игровые спрайты в течение ряда лет, и до сих пор рисую в нем полноцветные картинки.

Процесс создания спрайта можно условно разделить на три этапа:

1. Рисование outline первого кадра.

2. Создание outline анимации всех движений персонажа методом «frame by frame» («кадр за кадром»).

3. «Раскраска» (dithering) готовой outline анимации, проработка теней и деталей.

Редактор BGE имеет два режима работы: полноэкранный и с увеличением. Основная работа будет проходить во втором режиме.

Этап 1. Outline

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

В данной статье будем рисовать и анимировать некоего рыцаря. Он будет стоять на месте, и должен выполнять следующие движения:

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

Б. Наносить удар.

В. Использовать магию. (Если кому-то не нравится колдующий рыцарь, назовите его Палладин).

Г. Ставить блок.

Д. Попадать под влияние магии.

Е. Получать удар.

Ж. Как это ни грустно - умирать...

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

Итак, расставим кадры: А - 2 (цикл), Б - 3, В - 3 (1 - подготовка, 2-3 - цикл), Г - 1, Д - 2 (цикл), Е - 2, Ж - 2.

Итак, начнем рисовать. Включаем режим увеличения и опцию «показывать границы знакомест» (можно включить отображение знакомест яркостью - кому как больше нравится).

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

Рисовать лучше в режиме OR.

Вот такой рыцарь (рис. 1). Коряво, но зато примерно видно, где что расположено.

Теперь начинаем улучшать рисунок, добиваясь правильных пропорций и расположения частей тела. Теперь работаем в режиме XOR (чтобы можно было ставить/удалять точки одной кнопкой мыши).

Здесь я исправил руку, перерисовал ноги, чтобы казались полусогнутыми и заменил меч на топор (потому что так будет легче рисовать, т.к. топор пол туловища закрывает, зрелищнее анимировать, да и вообще - люблю я топоры. Это у меня от «Golden Axe» пошло). Еще я пририсовал ему рога - чтобы заполнить пустое пространство вверху спрайта, и чтобы повнушительней парень смотрелся (рис. 2).

Ну и, наконец, готовая фигура (рис. 3). Проработаны руки, топор, рога, шлем и наплечники, и так, по мелочам…

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

Этап 2. Frame by frame

Есть два способа создания анимации - на основе ключевых кадров, и кадр за кадром. Ключевые кадры хороши, когда мы делаем крупного персонажа - тогда мы создаем его изображения в нужных нам позах, а промежуточные дорисовываем на «анимационном столе». Это такой столик, на который проецируется предыдущий и последующий кадры на котором, опираясь на них, удобно рисовать промежуточные кадры. Но для нашего случая такой метод непригоден, во-первых - из-за малого количества кадров, во-вторых - из-за размера: при «просвечивании» будет видна мешанина из пикселей, а в-третьих - BGE просто не поддерживает такую возможность. В общем - рисуем frame by frame.

А. Просто «стояние». Для начала нужно определиться, что же он в этих кадрах будет делать. Ну, например, пусть он поигрывает топориком и сгибает колени.

Создаем себе удобное рабочее место. Для этого переносим спрайт в левый верхний угол картинки (чтобы он отступал от верхней и левой границ экрана на знакоместо) копируем его рядом с самим собой, и копируем на второй экран (Paste+) в то же место. Т.е. новый кадр будет располагаться справа от исходного, и иметь на втором экране «под собой» копию исходного. Зачем это надо? Чтобы иметь возможность при рисовании в режиме увеличения контролировать качество, все время поглядывая на предыдущий кадр путем смены экранов (клавиша «L»).

Эту последовательность действий необходимо выполнять каждый раз при создании нового кадра.

Выделяем («B») топор и переносим вниз на пиксель. Можно, в принципе, перерисовывать попиксельно (не так уж там и много пикселей), но если можно сэкономить время - почему бы и нет?

На рис. 4 я перенес участок топора влево-вниз, чтобы показать выделение.

Контролируя анимацию («L»), перерисовываем (смещаем) древко топора на 1 пиксель, обрабатываем руку (заменяя кое-где пиксели, чтобы казалось, что она шевельнулась) и меняем положение пальцев.

Затем выделяем все туловище по коленки и переносим его вниз на пиксель. Смотрим нестыковки при помощи наших «волшебных» клавиш, и убираем их (нестыковки конечно). Рисуем коленки, стертые на предыдущем шаге, немного выступающими вперед. Контролируем качество.

Ура! У нас есть первые два кадра (рис. 3 и 5)! Чувачок забавно пританцовывает на месте, готовясь дать кому-то в репу. Хотя, с другой стороны - может он просто хочет в туалет?

Б. Удар! Нам нужно три кадра - замах (2) и удар (1). Добавляем еще один кадр в анимацию (как было описано выше).

Нам нужно поднять и повернуть топор. Ничего не поделаешь, BGE не поддерживает поворот на произвольный угол, поэтому перерисовываем вручную. Можно попробовать его перенести выделением, а потом уже на месте - повернуть.

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

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

И, наконец, мой любимый, - последний кадр. Все вспоминаем «Golden Axe»:) Удаляем (либо просто методом AND, либо познакоместово) большую часть картинки (рис. 8).

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

Дальше делаем стандартную прорисовку. Мне пришлось даже скопировать «вниз» (на второй экран) опорный кадр и передвинуть там верхнюю часть, чтобы было видно (при нажатии «L», естественно), как прорисовывать части тела, скрытые рукой и топором на прошлых кадрах (рис.10).

С ударом разобрались. Теперь рыцарь может постоять за себя.

В. Колдуем. Сначала надо придумать, что же, собственно, он будет делать? Насколько я помню по играм и паре-тройке книжек - колдуны делают умное лицо и что-то там бубнят. У нашего героя лицо скрыто за шлемом, да и сомневаюсь, что лицо рыцаря можно сделать умным, поэтому пусть он просто разведет руки. А «бубнение» попробуем показать движением головы.

Копируем «опорный кадр» справа от готовых (если не влазит на экран - начинаем вторую линейку спрайтов).

Итак, топор. Начинаем с его перемещения. Так как правая рука идет к нам, топор должен «сжиматься» по законам перспективы. Это сделаем просто - выделим правую часть лезвия и придвинем ее к левой, затем выделим новое топорище и переместим его влево, ближе к кисти руки (рис. 11). Проверяем… Надо все-таки увеличить по вертикали, и сделать правый край выше. Но это уже будем делать ручками. Заодно проработаем кисть руки, древко топора и саму руку, чтобы казалось, что она разворачивается («L»!). Получилось великолепно! То есть так, как и задумывалось (рис. 12).

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

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

Перерисовываем голову, чтобы она смотрела вверх. Надо проконтролировать (какой клавишей?) реалистичность поворота - помните, что точка вращения находится не посередине черепа, а внизу, и смещена к затылку! Кстати, дальний рог необходимо переместить ниже и правее, ведь голова у нас находится в ракурсе, следовательно - подчиняется жестоким законам перспективы. Подкорректировав форму головы, получаем первый кадр «заклинания» (рис. 13).

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

Правда, во время теста создается впечатления, что он читает рэп, поэтому добавим разных точечек/звездочек - мол магическая сила витает в воздухе.

Г. Блок. Снова добавляем в конце один кадр, копируем туда самый первый, и дублируем последний кадр.

Если при чтении заклинания рыцарь «раскрывался» на встречу магическим силам, то тут он должен «сжаться в комок», и закрыться от удара всеми доступными ему предметами. Реквизита мы ему выдали 2 штуки - щит и топор, ими он и попытается закрыться. Итак, начинаем!

Сначала выделим все туловище от рогов до коленок, и сдвинем его на пиксель влево и пиксель вниз (как будто приседает). Затем выделяем голову и смещаем на пиксель вниз - втягивает в плечи (рис. 15). Контролируем результат…

Выделяем лезвие топора, поворачиваем на 90 градусов против часовой стрелки, и ставим перед лицом. Вот что получилось (рис. 16).

Жмем «L». Несколько нереалистично… Ну да и понятно - топор получился наклоненным в сторону героя… Надо повернуть его вручную. Смотрите: я слегка развернул лезвие, уменьшил дальнюю часть, увеличил ближнюю (перспектива!), приблизил нижнюю часть к герою, чтобы древко оказалось наклоненным вперед. Удалил предплечье и нарисовал заново, изменив положение локтя и плеча (наплечник остался на месте!). Нарисовал древко и переместил коленки вперед (в который уже раз!) (рис. 17).

Далее - скопировал «вниз» кадр с персонажем, у которого открыт щит (второй кадр удара), и нарисовал щит здесь, ориентируясь на его положение в том кадре (не срисовал! Здесь щит приближен к телу, и слегка приподнят). Готово! Рыцарь «в домике» (рис. 18).

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

Копируем и дублируем новый опорный кадр. Тело персонажа должно «расслабиться» и «осесть» под влиянием чар, поэтому - опустим голову и руки. Можно голову повернуть, чтобы было реалистичней, но мне лень, поэтому просто сдвинем ее на пиксель вниз. Топор же выделим и повернем чуток по часовой стрелке, чтобы потом древко располагалось параллельно земле. Также сместим его немного вниз и влево (рис. 19).

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

Дублируем готовый кадр. Теперь надо сделать наклон вперед… К сожалению, в BGE мы не можем искажать выделение, но можно поступить хитро: мысленно разделим фигуру по вертикали на несколько частей и последовательно сдвинем их. Выделяем всего персонажа сверху по коленки, сдвигаем на пиксель вправо, затем полученную картинку выделяем по кисть руки и сдвигаем вправо, затем - по грудь и т.д. (рис. 21).

Видно, что топор тоже искажен. Копируем в предыдущем кадре лезвие и вставляем в этот, сдвинув вправо на пиксель. Исправляем мелкие неточности, контролируем полученные кадры и добавляем точечки/звездочки, символизирующие magic power (рис. 22).

Е. Быдыщщ! Наш герой получил в репу! Что же с ним при этом происходит? В реальной жизни полученный удар распространяется волной по телу, т.е., например, если пинок пришелся в грудь, то сначала смещается грудь, затем талия, голова, плечи, затем, бедра, предплечья, руки и т.д. Об этом необходимо помнить, когда мы делаем крупную многокадровую анимацию увечий. У нас же - всего два кадра и маленький спрайтик, но, тем не менее, выкидывать из головы это правило мы не будем. Во всяком случае - постараемся.

А пока - копируем и дублируем исходный кадр.

Решим, куда наш герой будет «получать»… Голова - самое безопасное место для рыцаря, поэтому - туда и вдарим! Сделаем просто - скопируем голову и развернем ее зеркально вокруг вертикальной оси. Затем - прилепим ее обратно, сдвинув назад.

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

Со вторым кадром будет проще - смещаем тело по коленки вниз. Неплохо также сделать, чтобы он раскидывал руки - ко второму кадру удар уже должен до них дойти. Вспоминаем, что у нас уже есть хорошие «раскинутые руки» - в кадре «применения магии». Возвращаемся туда, копируем руки с топором и щитом и вставляем в наш кадр! Остается только убрать огрехи, проконтролировать «L»… В общем, убедится, что все красиво и органично… Я еще нарисовал слегка приподнятый носок левой ступни… Захотелось (рис. 24).

И последний штрих - на первом кадре рисуем мультяшный «БЫДЫЩЩ!» (рис. 25).

Ж. Ё-моё… Пришло время нашему герою умирать… Умирание - сложнее всего рисовать. Когда дело доходит до этого - уже привязываешься к герою, и как-то жалко его убивать (если это, конечно, не вампир, фашист или прочая мразь, которую «мочить» даже приятно).

Можно не копировать опорный кадр в конец, а просто продублировать последний кадр «получения удара», ведь в основном герой будет погибать после этого.

Тут есть одна сложность - у нас слишком мало места, чтобы нарисовать нормальное падение тела, поэтому будем делать это несколько утрированно/мультяшно. Приступим.

Сперва выделим топор и сместим его на пиксель вниз (воткнем в землю). Затем развернем обратно голову. Она получится несколько выступающей вперед, но исправлять не надо - так более трагично. Затем выделяем голову и наплечники и смещаем их вправо-вниз (как будто тело сильно наклонилось вперед) (рис. 26).

Затем дорисовываем руку в новом положении, передвигаем видимую ногу, исправляем наплечники и грудь, дорисовываем руку со щитом, и левое колено, высовывающееся из-за топора. Все время смотрим предыдущий кадр, чтобы все выглядело правильно и двигалось реально (рис. 27).

Дублируем кадр. Удаляем из него все, кроме топора, головы и предплечья. Берем голову, поворачиваем ее чуток по часовой стрелке и кладем на землю прямо перед топором. Здесь можно не рисовать «перспективные» рога, ведь мертвая голова может лечь как угодно (рис. 28).

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

Все, outline анимация готова. Можно нажать на «Plaу» и насладится проделанной работой.

Этап 3. Раскраска

Это лучше всего делать в режиме XOR, попутно исправляя недостатки, которые мы просмотрели на предыдущих этапах. Чтобы точнее их выявить, имеет смысл перенести все спрайты в Sprite Master (или другую программу) и просмотреть анимацию целиком.

Для начала определимся, где будут тени. Откуда падает свет? Допустим, он падает справа-спереди. Значит, тени рисуем вот где:

задняя часть наплечника;

задняя часть плеча;

передний край локтя;

задняя часть предплечья;

затылок шлема;

под шлемом;

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

на боку (справа от локтя);

на правой руке (если влезет);

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

Определились? Теперь рисуем эти тени на каждом спрайте (рис. 30). Это очень быстро! Главное - следить, чтобы не убрались детали (такое происходит, когда шахматка подходит к какой-нибудь линии с обеих сторон). Как бы то ни было - все недочеты мы уберем потом. «Оттененные» спрайты на рис. 31, я удалил опорные кадры, чтобы не загромождать картинку.

Остался последний штрих - нанесение черных теней, «висячих пикселей», «эмуляция антиалиасинга (т.е. сглаживания)» и исправление мелких недочетов.

Черные тени надо делать с самой темной стороны тени. Тавтология, конечно… В общем, рисуем их так, чтобы объем фигуры стал еще более выраженным.

«Висячие пиксели» ставим так, чтобы тень плавно переходила в белый цвет. Т.е., имеет смысл их поставить на наплечнике, в некоторых кадрах на груди, животе и т.д.

«Эмуляция антиалиасинга». Так как у нас однобитная графика, мы не можем себе позволить честный антиалиасинг, но можем нехитрым приемом создать его видимость.

Вот простейший пример. Есть три картинки с логотипом одного чувака (рис. 32). В первом варианте можно видеть пиксели во всей их красе. Смотрится плохо, и четко видны лесенки, особенно на прямых линиях. Во втором варианте я просто удалил крайние пиксели в местах излома - смотрится сглажено, гораздо лучше, чем в первом варианте. Линии здесь выглядят более тонкими… В третьем варианте я, наоборот, добавил пиксели в местах излома, с обеих сторон. Результат аналогичный предыдущему, но линии выглядят более толстыми. Оба этих эффекта мы должны (и обязаны!) использовать в наших спрайтах, например - на рогах, на топоре и т.д.

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

Заключение

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

Пожалуйста, любые, комментарии, вопросы и пожелания отправляйте на мой e-mail: [email protected] или на форум zx.pk.ru

Мне будет приятно узнать ваше мнение. До встречи в новых играх!

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

Итак, для начала, вам нужно ознакомиться с руководствами опытных художников, чтобы понять основы рисования пиксель-арта. Ниже приведены ссылки на руководства:

Все три руководства обязательны к прочтению. Чтобы рисовать качественные спрайты, вам понадобится знать, что такое "dithering", как (и зачем) рисовать аккуратные линии и кривые вручную, почему не стоит бездумно пользоваться градиентом и как избежать pillow-shading"а.

Далее, вам следует выбрать редактор. Надеюсь, мне не нужно объяснять, почему не надо использовать MS Paint, однако DreamMaker - тоже не лучший выбор, и как ни странно, Photoshop - тоже (ибо использовать фотошоп для спрайтинга - все равно, что забивать гвозди микроскопом). Для спрайтинга есть немало специализированных редакторов, однако существует простой и удобный редактор Paint.NET , который к тому же содержит немало полезных для пиксель-арта функций.

Требования к спрайтам

Спрайты, в первую очередь, должны быть размером 32х32 и сохранены в формате PNG. Однако есть еще несколько требований, которые будут разъяснены на примерах.

Перед нами пример плохого спрайта. В чем его проблемы? Во-первых, очень плохо сделана форма. Во-вторых, расцветка. По всей видимости, автор спрайта просто сделал заливку при помощи инструмента, из-за чего получил две проблемы - слишком резкий переход между отдельными оттенками и слишком плоская форма. Задача шейдинга - добавить спрайту объем, тут же спрайтер добился прямо противоположного результата. Наконец, градиент на ручке, который вообще ни к селу ни к городу. Перейдем к следующему, куда более сложному примеру.

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

Размер . Почему-то многие начинающие спрайтеры считают своим долгом заполнить изображением все отведенное им пространство в 32х32 пиксела. Так вот, так делать не стоит. Конечно, масштаба в игре нет, но такой огромный спрайт будет странно смотреться (если, конечно, он не изображает что-то действительно большое, вроде стационарной машины).
Стиль. Старый спрайт изображал синее пластиковое ведро. Вдруг оно по непонятной причине превращается в помятое металлическое ведро серого цвета. Это изменение ничем не оправдано. Если вы собираетесь заменить спрайт на имеющийся, будьте последовательны и старайтесь, чтобы он был похож на старый. Далее, спрайт не подходит к стилистике игры. Несмотря на всю техническую отсталость, царящую в сеттинге, у нас все же космическая станция, а не дачный поселок, а это ведро выглядит так, что в нем только навоз носить. Наконец, оно просто слишком реалистично, что напрямую подводит нас к следующей проблеме.
Теперь самая главная проблема, на которой следует заострить внимание - это палитра. Увы, эту ошибку совершают многие люди, которые умеют рисовать, но не имеющие опыта рисования именно спрайтов. Чтобы подробнее разъяснить эту проблему, приведу цитату одного из спрайтеров /tg/ под ником veyver .

То, что нужно понять о спрайтах - они не столько рисуются, сколько собираются, пиксель к пикселю. Навороченное затенение не нужно, просто выберите основной цвет, возьмите два более светлых и два более темных оттенка и затеняйте ими. Затенение для чего-то такого небольшого, как спрайт в SS13 не должно быть таким ДОХРЕНИЩА РЕАЛИСТИЧНЫМ, оно должно просто делать поверхности менее плоскими.

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

Итак, мы вернулись к первому спрайту... Чтобы его исправить!

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

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

Первые заказы

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

Адрес конференции: [email protected]

Начинающим Профессии Руководства
Ролевая игра Руководство по отыгрышу роли Руководство по отыгрышу роли для продвинутых Психология убийства Психологические заболевания Знания персонажа
Режимы игры Агент Синдиката Оперативник Синдиката Снаряжение Синдиката Революция Культ Культ Ратвара Волшебник Генокрад Мемо Мозговой червь Блоб Вампир Похититель Потусторонний
Инженерное дело