Руководство по созданию пиксельной графики для игр
Итак, мы поработали над созданием маленьких 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 использует их, причём так, что выглядит всё классно. Я не разобрался в этом вопросе окончательно (все же я думаю, что фишка тут в использовании темных цветов для контуров), и потому предпочитаю черные контуры. Если их раскрасить, то в целом всё становится размазанным, нельзя определить где начинается или заканчивается какая-то часть одежды ну и т.д. К тому же могут наблюдаться проблемы, если цвет фона будет совпадать с цветом контура. С чёрным фоном будет то же самое, но этого легче избежать. Все же, это моё личное предпочтение, и я не знаю способа, как делать приятные цветные контуры.
(c) 1997-2023 Алексей Гаркушин
Руководство по созданию пиксельной графики для игр
Итак, теперь, когда вы прочитали предыдущие главы, провели собственные наблюдения и сделали выводы о том, как устроены спрайты и всё такое (если же вы не делали ничего из этого списка, тогда наверстайте упущенное, ибо это облегчит вашу жизнь, когда придёт время рисовать собственные спрайты). В общем-то, это время пришло. Мы разберём несколько стилей и для начала возьмём классический и наиболее широко распространённый в ролевых играх стиль 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 его помощью можно сгладить анимацию. Кадр стояния — это переходная точка между двумя предыдущими кадрами шагания. Если вы его добавите перед и после прежних кадров (в сумме выйдет четыре кадра. лево, центр, право, центр), то получите обновленную и более естественную анимацию. Четыре кадра — это как раз стандартный набор для цикла ходьбы. Если захотите, можете добавить ещё по одному кадру между каждыми из имеющихся и получите ещё более плавное движение. Такое сглаживание может понадобиться при работе с большими спрайтами, маленьким это не так уж и нужно. Если подберетё правильную скорость смены этих четырёх кадров, то всё будет прекрасно смотреться и так. Впрочем, это дело вкуса.
(c) 1997-2023 Алексей Гаркушин
Урок #5 – Создание 2D игр. Спрайты, материалы и текстуры
Unity позволяет создавать как 3Д, так и 2Д проекты. За урок мы разработаем простой проект 2Д игры. Научимся работать со спрайтами, анимацией, физикой для 2Д объектов, а также рассмотрим процесс создания физических материалов.
Видеоурок
Полезные ссылки:
- Сайт с иконками IconFinder ;
- Красивые материалы для объектов;
Материалы к уроку
В ходе урока были использованы текстуры для создания платформы и игрока. Ниже вы можете посмотреть и скачать все картинки, что были использованы в ходе урока:
Создание платформера
Полноценный урок по разработке 2Д платформера на основе движка Unity вы можете посмотреть ниже:
Как так красиво рисуют спрайты для 2D игр и в какой программе они это делают?
Я могу выдвинуть предположения, что основа нарисована на цифровом рисовальном планшете. Потом все перегнали в векторы и послойную раскраску. Или сразу все делали через планшет. (перьевые планшеты типа wacom intuos,xp-pen artist)
Роман Тузов @Hutson Автор вопроса
Kuusandr, Возможно, спасибо
Всего-то нужно быть художником/иллюстратором.
Решения вопроса 0
Ответы на вопрос 3
Делай добро и бросай его в воду.
Иллюстратор рисует в той программе, в которой ему удобно. Каждый сам для себя решает, что ему удобнее. Он может рисовать вообще на бумаге без компьютера. Но в моде сейчас рисовать на специальном планшете для рисования.
Используемые программа или устройство при этом никак не увеличивают навыки рисования, которые можно получить, например, в художественной школе. Так что если к рисованию у вас душа не лежит, то проще нанять специалиста, а не делать всё самому.
Ответ написан более трёх лет назад
Нравится 5 4 комментария
Роман Тузов @Hutson Автор вопроса
Не знаете какие-нибудь статьи, где обучают так красиво рисовать?
Hutson, статей полно, но чтобы выйти на приемлемый уровень нужно хотя бы несколько месяцев усиленного обучения, а не прочитать пару-тройку статей. При этом желательно, чтобы у вас уже были какие-то задатки. Как минимум, любовь к рисованию (с детства) или реальное желание (не сиюминутное) стать художником.
Если по-простому, дешево и сердито, то можно просто освоить что-то типа фотошопа, и далее заниматься обработкой существующих изображений. Например, взять фото и обвести контуры, уменьшив количество цветов — получится мультяшный персонаж. Но повторюсь, это отнимает время, и если у вас к этому душа на самом деле не лежит, то это не ваше, лучше найти друга-художника или нанять фрилансера.
Роман Тузов @Hutson Автор вопроса
Hutson, т-с-с. в гугле ищите «vk.com учебники по рисованию» открываете и качаете. Сходу нашлась пара «стен» с кучей материалов.
Front-end разработчик
Ответ по поводу софта: видел, что кто-то рисует в Krita Этот софт (как и любой другой) не сделает из вас крутого художника, но некоторые вещи позволит делать проще.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
stalker320 @stalker320
Ответ по поводу программы: для того чтобы рисовать качественные изображения на компьютере, достаточно иметь дефолтный paint. Ну и тонну знаний по поводу строения тела и другого хотя бы на простом уровне.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- Android
- +4 ещё
Как убрать плеер из панели уведомлений на андроид в Unity Webgl игре?
- 1 подписчик
- 26 окт.
- 36 просмотров