машинное обучение для создания игрового пиксель-арта
Приведённые на заголовочной картинке спрайты взяты из игры Trajes Fatais: Suits of Fate. Создание одного такого спрайта занимает около часа, каждый персонаж в среднем требует пятисот спрайтов. Используя архитектуру Pix2Pix для автоматизации конвейера производства спрайтов, можно вдвое сократить время, затрачиваемое на один спрайт.
Эстетика пиксель-арта стремится воссоздать внешний вид старых игр. В 90-х такая графика являлась естественным следствием ограниченных возможностей техники. Сегодня пиксельная графика – намеренный выбор эстетики, требующий дополнительных ухищрений.
Чтобы достичь необходимой стилизации, художники должны принять ограничения. Оригинальный Game Boy имел только четыре оттенка зелёного цвета. Его преемник, Game Boy Color, отображал до 56 различных цветов. Более поздние устройства поколения 16-битных приставок допускали до 256 цветов на пиксель, что существенно изменило эстетику.
Визуальная сторона персонажа – это набор спрайтов с опредёленной цветовой палитрой из 256 цветов. При рисовании художник «затеняет» каждый пиксель спрайта так, что цвет соответствует индексу цветовой палитры. Впоследствии пиксели окрашиваются в соответствии с выбранной палитрой и получается окончательное изображение. Такой подход позволяет создавать различные «скины» персонажа – цветовые оболочки, которые, меняют палитру в зависимости от игровой ситуации или предпочтений пользователя.
Индексированный спрайт, цветовая палитра и визуализированный миксОграничивать художников 256 цветами не вполне естественно, выбор оттенков – сложная процедура. Задачу облегчают, разбивая её на создание двух промежуточных спрайтов: спрайт («затенение») и спрайт regions («области»):
shading– до 6 тонов для передачи взаимодействия падающего света с фигурой персонажаregions– до 42 тонов для «областей» спрайта: руки, волосы, ноги, одежда и т.
д.
В результате каждый пиксель описывается двумя незавимыми индексами, которые дают 252 конечных цвета (6 * 42).
shadingregions) и итоговый спрайтУказанная процедура преобразует проблему 256 цветов в две подзадачи по 6 и 42 цвета в каждой. Но прежде чем получить эти спрайты, персонаж разрабатывается художником, создающим концепт-арт для всех анимаций. Обычно они представлены в виде эскизного спрайта, а затем уточнены в виде штрихового рисунка. Первый используется для быстрого создания прототипов новой анимации, а второй – для обсуждения с другими художниками идеи финального спрайта. Таким образом, художник разрабатывает концпет персонажа и передаёт оставшуюся работу по отрисовке команде иллюстраторов.
Первые этапы работы над спрайтом: эскиз и штриховой рисунокregions и shading можно создать с использованием современных компьютерных алгоритмов – генеративных моделей. Алгоритм можно считать полезным, если генерируемые спрайты достаточно хороши, чтобы художник мог усовершенствовать их за меньшее время, чем создать с нуля.G(x), принимающий на вход штриховой рисунок и выдающий на выход спрайты shading и regions. Обозначим их y. Чтобы гарантировать, что G(x) является полезным отображением, нужно также создать и дискриминатор D(x, y), который смотрит на x и y и говорит, является ли y качественным спрайтом. Другими словами, G – это «виртуальный художник», D – виртуальный «контроль качества». Если мы заставим G осчастливить D, то получим полезное отображение.
Представим, у нас уже есть несколько штриховых рисунков (x) и подготовленные художниками спрайты shading и regions (y). Мы знаем, что они прошли контроль качества, то есть D(x, y) от них в полном восторге. Наша задача – обучить G так, чтобы он учёл x и произвёл такие ŷ (имитация настоящих y) так, чтобы D не заметил подмены. Иначе D должен направить конструктивный отзыв G. Описанная идея лежит в основе состязательного обучения. Используя для реализации G и D нейронные сети, мы получаем условно порождающую состязательную сеть (англ. conditional generative adversarial network).
Архитектура Pix2Pix основана на генераторе U-Net и патч-дискриминаторе. Объединённая архитектура показана на следующем рисунке. Дискриминатор обучен так, чтобы классифицировать каждый патч ŷ 32×32, как реальный или фальшивый, и обучается c бинарной кросс-энтропией в качестве функции потерь.
В свою очередь, генератор обучен минимизировать L1-потери между y и ŷ и максимизировать потери дискриминатора.
Модель U-Net – это полносвязная сверточная нейронная сеть, основанная на идее кодера-декодера. К каждому слоя кодера добавляется skip-соединение к эквивалентному слою декодера. Это позволяет сети использовать «исходную» информацию из слоёв кодера и информацию, «обработанную» слоями декодера (см. подробный обзор этой архитектуры и соответствующих публикаций).
Патч-дискриминатор представляет собой нейросеть, выводящую суждение для нескольких патчей изображения вместо одного суждения для всего изображения. То есть обеспечивается детализация обратной связи с генератором: дискриминатор указывает, какие области выглядят реальными, а какие – фальшивыми (см. подробный обзор внутренних деталей архитектуры).
В отличие от оригинальной сети, в решение задачи были внесены следующие уточнения:
- Использовалась Y-образная нейросеть: один кодер, два декодера и два дискриминатора.
В результате задачи shadingиregionsрешались за один проход. - С такой раздвоенной архитектурой у нас есть две функции потерь для каждой ветви. Норма L2 вместо L1 показала лучшие результаты.
- В оригинальной статье о Pix2Pix использовалась функция активации LeakyReLU, в описываемой работе применялась ELU.
- В кодере вместо одной операции свёртки для каждого шага понижающей дискретизации мы использовали две свёртки.
Чтобы оценить полезность архитектуры Pix2Pix для работы над игрой Trajes Fatais, были выбраны данные двух персонажей: Сара (Sarah) и Люси (Lucy). Для Сары было готово лишь 87 спрайтов, оставалось нарисовать ещё 207. Люси была закончена, имелось 530 полностью отрисованных спрайтов.
Таким образом, Люси была своего рода «задачей минимум»: все данные есть, персонажа и так исходно легко рисовать.
shading и regions для СарыНа первой подборке спрайтов выше можно видеть, что алгоритм даёт хорошие результаты для задачи шейдинга и проблемы с разметкой областей: цвета сдвинуты, вокруг фигуры девушки появились шумовые элементы. Для shading-спрайтов обнаруживаются лишь незначительные проблемы, такие как прорисовка плеча и ног во втором ряду.
shading и regions для СарыВо второй подборке можно найти больше проблем. В столбце Generated Shading можно видеть много артефактов в затененных областях: неразличимость фигуры девушки в первой строке, потеря рельефа в спине утконоса в строке 2 и клюв утконоса в третьей строке.
В цветовых спрайтах присутствует много шума, они непригодны для использования.
shadingregions для СарыДля третьей партии из 207 спрайтов имелись только штриховые наброски. Таким образом, они требуют субъективного анализа. Три строки соответствуют разным типам спрайтов:
- Похожим на те, что использовались во время обучения.
- С позами, которых не было в обучении, но были близкие.
- С радикально выделяющимися позами.
В то время как первый ряд в основном полезен, цветовые спрайты сильно ухудшились во втором и третьем рядах. Качество shading-спрайтов в основном соответствует задаче, но в некоторых случаях есть явные ошибки работы с формой и светом.
На данный момент мы можем с уверенностью предположить, что могут быть полезны shading-спрайты , но regions-спрайты – нет, так как они слишком шумные и имеют проблемы с вариацией цвета.
Давайте переключим внимание на Люси.
shading и regions для ЛюсиСпрайтов для обучения у Люси в пять раз больше, чем у Сары. Спрайты shading почти идеальны, есть лишь незначительные проблемы в затенённых областях и различия в шейдинге волос. Спрайты выделения областей далеки от оптимальных. По-прежнему актуальны проблемы изменения цвета и шум. То есть увеличение набора данных существенно не улучшило эти вопросы.
shading и regions для ЛюсиИтак, увеличение размера набора данных значительно улучшает shading, но не regions. Можно с уверенностью предположить, что нам нужна другая формулировка проблемы / архитектура для решения задачи regions-спрайтов.
Для количественной оценки качества сгенерированного контента мы вычислили для обоих наборов данных среднеквадратичную ошибку (RMSE), среднюю абсолютную ошибку (MAE) и индекс структурного сходства (SSIM) .![]()
Как видно из таблицы, серые спрайты по всем трем показателям имеют лучшее среднее значение (μ) и дисперсию (σ²), чем цветные спрайты. Кроме того, разница между квартилем 75% и максимальными видимыми значениями огромна, что указывает на сильное искажение распределения.
Результаты Люси неизменно лучше, чем у Сары, с гораздо меньшей дисперсией и значительно меньшим перекосом.
Показатель SSIM варьируется от 0 (полностью разные) до 1 (идентичные) и измеряет сходство двух изображений. В то время как MSE и MAE являются чисто математическими понятиями, оценка SSIM более близка к человеческому восприятию. В таблице серые спрайты имеют около одного балла.
В качестве третьей и заключительной оценки команда дизайнеров была опрошена относительно 207 сгенерированных спрайтов для персонажа Сары. Их отзывы были в основном положительными, хвалили качество shading-спрайтов.
Результаты опроса были обобщены в виде четырёх комментариев:
- Почти половина
shading-спрайтов полезна и может быть усовершенствована за 20–30 минут. Цветные спрайты непригодны. - Алгоритм не согласован в пределах одной анимации, что может сделать недействительной полезность спрайтов.
- Некоторые позы имеют ужасные результаты даже для
shadingспрайтов. - При квантовании цветов до 6 и 42 тонов возникает нежелательный шум.
В этой работе мы оценили использование современных генеративных моделей для решения проблемы генерации пиксельного арта. Модифицированная архитектура Pix2Pix позволила добиться ускорения работы: для совершенствования каждого из shading-спрайтов потребуется в среднем от 20 до 30 минут, что на 10–30 минут меньше, чем требуется для рисования с нуля.
Спрайты типа regions более предсказуемы в анимации и могут быть легко скопированы с одного спрайта на другой. Их создание не занимают значительного времени, поэтому отсутствие не является большой проблемой.
Другие работы нашли аналогичные выводы в области аниме, которая состоит в основном из плоских поверхностей и имеет меньше ограничений, чем пиксельная графика. Библиотека программиста также писала об этих исследованиях:
- Аниме и генеративно-состязательная сеть: в чём связь?
- Учим искусственный интеллект раскрашивать контурные изображения персонажей аниме
Описанная работа ещё раз демонстрирует, что современные модели могут эффективно использоваться в качестве помощников в творческих задачах.
Одеваем пиксельного персонажа к Хеллоуину
Вы нарисовали пиксель-арт персонажа, выглядит вполне неплохо, одет в обычную одежду. Но приближается Хеллоуин и мы не будем отклоняться от праздничной темы.
Возьмем нашего персонажа и еще одного персонажа-ребенка и оденем их в костюмы Бэтмена и Чаки, просто так. Так же нарисуем тыкву-фонарь для настроения.
1. Ребенок
В предыдущем уроке мы уже нарисовали нашего персонажа в почти самом маленьком разрешении, но у нас еще есть возможность сжать его еще больше и сделать его в виде ребенка.
Шаг 1
Не забывайте сохранять оригинальные файлы ваших персонажей, чтобы их можно было использовать в будущем.
Теперь, имея копию оригинальной картинки, мы можем перемещатьперекрывать какие-либо ее области, чтобы сжать ее, или можем удалить несколько пикселей, а затем снова все собрать вместе, что будет выглядеть примерно так:
Шаг 2
Не хватает пары штрихов в области шеи футболки, рук и одной ноги. Займитесь этим.
Мы сделали ребенка нашему персонажу, не затратив много сил.
2. Детская игра
Превратим нашего парня в жуткого Чаки.
Вам нужно будет поискать референсы.
Шаг 1
Я немного изменил оттенок штанов и превратила их в комбинезон. Ремешки и линии сверху комбинезона темно-синие. И я добавил красный пиксель на груди для лого «Хороших парней». Это крошечная деталь и она не должна слишком контрастировать со всем остальным.
Шаг 2
Рубашка должна быть другой. Поэтому мы пририсуем длинные рукава более насыщенного красного оттенка и темными перемежающимися полосками.
Полоски будут разноцветными, но будет эстетически лучше, если два разных цвета одинаковой яркости не будут рядом. Так что постараемся перекрещивать темные цвета со светлыми.
Шаг 3
Мы поменяем цвета полосок, но манжеты и воротник должны остаться красными, как в оригинале.
Шаг 4
Штанам также нужны полосатые манжеты, но так как нам особо негде развернуться, просто используем тот же красный цвет с рубашки, толщиной в один-два пикселя.![]()
Шаг 5
Тело готово, теперь изменим цвет волос на рыжий и сделаем линию волос парня рваной, чтобы он стал более похож на Чаки.
Шаг 6
Попробуем добиться более жуткого вида, как у Чаки в последних фильмах. Для этого добавим несколько пучков волос на затылок и поменяем блики на волосах.
Шаг 7
И, конечно, шрамы на лице, которые можно сделать того же цвета, что и шея, но так же можно взять и более красный оттенок.
Шаг 8
Финальным штрихом будет кухонный нож. У Чаки к ним есть некоторая симпатия. Можем представить, что он держит его в руке, которую не видно, и просто пририсовать клинок сбоку:
3. Темный рыцарь
Превратим нашего взрослого персонажа в крестоносца в плаще. Опять же, поищите референсы. Я решил сделать ему костюм Бэтмена из «Темного рыцаря», просто потому что этот фильм крут.
Это бронированный и несколько сложный костюм, у нас не получится нарисовать много деталей (к сожалению, нарисовать символ Бэтмена на груди при таком разрешении не представляется возможным), но несколько нюансов мы все же уместим.
Шаг 1
Начнем с того, что всю одежду нарисуем в черных цветах. Используем для этого четыре оттенка серого. Я использую 50%, 35%, 20% и 5%, который я взял для контуров.
Шаг 2
Для воротника мы оставим оригинальный воротник рубашки темного оттенка, но сверху добавим пару пикселей второго темного оттенка, поверх него – еще одну линию пикселей темного оттенка. Таким образом, мы сохраним четкими линию шеи и линию подбородка персонажа. Светлые пиксели между ними показывают, как воротник костюма перекрывает шею.
Шаг 3
Теперь отрисуем голову (кроме области вокруг рта, конечно) в цвете второго темного оттенка серого. Рот может иметь несколько форм. Я предпочёл эту, но вы можете выбрать какую хотите.
Шаг 4
Нос будет двумя вертикальными пикселями светлого серого цвета, а каждый глаз нарисуем двумя горизонтальными пикселями темного серого цвета. Эти черты сдвинулись на пиксель вверх, но так даже лучше, потому что темно-серый цвет, который отделяет нос от рта, увеличивает контраст.![]()
Шаг 5
Теперь возьмем второй светлый серый и сделаем блики, которые проходят с макушки до скул, но не соприкасаются с носом и ртом.
Шаг 6
Добавим больше бликов, теперь самым светлым серым, на лоб для большей глубины и детализации. Можно увидеть, как они помогают изобразить угрожающе нахмуренное выражение лица Бэтмена.
Шаг 7
Теперь возьмемся за уши. На картинке слева красным отмечены пиксели, которые будут занимать уши.
И справа – как они выглядят в законченном виде.
Капюшон нарисован. Возьмемся за броню. Можно обойтись без светлых оттенков серого и использовать только три самых темных для большей части оставшегося костюма.
Шаг 8
Закрасим всю броню серым (второй темный оттенок) и нарисуем внутренний контур руки длиной до воротника, чтобы разделить броню на составные части и показать, где они соединяются
Шаг 9
Оставьте блик на плече (это должен быть 35% серый), сотрите все остатки бликов под воротником и добавьте несколько на бицепсы (два пикселя хватит) и на кулак (один пиксель).
Шаг 10
Наконец, добавим теней на руки. Пару пикселей (темный серый) под плечом, чтобы показать пластины брони, и один пиксель чуть ниже блика на бицепсе, чтобы еще немного выдвинуть его на передний план. Также добавим еще один над бликом на кулаке, чтобы добавить объёма предплечью.
И, конечно, не забудьте фирменные Бэтменовские шипы на перчатках.
Шаг 11
Теперь добавим большой блик в области груди. Это место, где располагается символ Бэтмена, но если мы его туда вставим, то это спутает все наши тщательно наложенные тени, поэтому лучше оставить костюм без него. Наш Бэтмен все равно будет достаточно узнаваемым.
Шаг 12
Прямо над линией штанов добавим пояс Бэтмена, который будет бронзового цвета, не слишком вычурного. Закрасим область между поясом и бликом на груди темным оттенком и добавим небольшой акцент на кубики пресса, которые всегда есть на супергеройских костюмах.
Шаг 13
На ногах мы нарисуем блики только на бедрах, коленях (будет выглядеть как восклицательные знаки) и на пальцах ног.
Шаг 14
Добавим больше деталей темно-серым цветом: пиксель чуть выше обоих колен и вертикальная линия с задней стороны колена до подошв.
Шаг 15
Добавим также пару штрихов в паховой зоне. Не будем особо вдаваться в подробности, но Бэтмен носит там броню. Поэтому, чтобы добавить больше объема, я нарисовал несколько простеньких теней на верхней части бёдер и немного светлого чуть ниже середины ремня.
Теперь единственное, чего не хватает нашему Бэтмену — это плащ.
Шаг 16
Красным я отметил пиксели, которые нам нужно закрасить, а справа уже отрисованный плащ.
Я добавил еще один пиксель на каблук, потому что без него мне казалось, что каблук и плащ сливаются. Заметьте, что здесь есть немного светло-серого в направлении низа плаща, и что оно как бы врезается в плечи, как если бы выходило из области ключицы.
Итак, наш Бэтмен готов.
4.
Тыква-фонарьШаг 1
Чтобы нарисовать нашу тыкву-фонарь, начнем с того же, с чего начинали, когда рисовали нашего персонажа: с лица. Глаза и рот тыквы обычно треугольные и зигзагообразные, так что можно использовать маленькие перевернутые буквы V для глаз и зигзаги для рта.
Как только закончите тыкву, эти линии будут трудно читаться из-за того, что пиксели идут вразнобой, поэтому мы их дублируем их и сдвинем на пиксель вниз, чтобы получилось как-то так:
Можете сохранить оба варианта и посмотреть, какой больше понравится в конце.
Шаг 2
Тыква будет 15 пикселей в ширину и 13 пикселей в высоту, лицо нужно посадить пониже, потому что мы рисуем вид немного сверху.
Шаг 3
Скруглите края квадрата и закрасьте его оранжевым цветом.
Ненадолго скроем лицо, чтобы нарисовать текстуру нашей тыкве: вертикальные полоски, которые обычно есть на тыквах.
Черная линия наверху – это место, где будет черенок и где в идеале вертикальные линии должны сходиться. Хотя мы не сможем скруглить линии, как следует, на таком небольшом формате, мы можем попытаться:
Но для большей части фигуры они будут вертикальны.
Шаг 4
Верните лицо на форму и выделите область наверху, увеличив яркость, чтобы передать свет и объем тыквы чуть сильнее. Я взял другой цвет вместо того, чтобы просто увеличить яркость. Вы можете попробовать более желтые оттенки для светлых цветов и более красные – для темных.
Шаг 5
Для черенка возьмем не слишком яркий оттенок зеленого. Он будет в три пикселя, плюс черные контуры вокруг него.
Шаг 6
Ну, и дорисуем черенку блик на конце и закрасим черные горизонтальные линии, где он соединяется с тыквой, более светлым цветом. Темнее, чем сам черенок и тыква, но не уходя в черный.
Шаг 7
Таким же образом можно взять цвет для лица – темнее тыквы, но не черный, и это поможет нам добиться более ровного по тону результата.![]()
Шаг 8
Финальным штрихом добавим тени. До этого они нам были не нужны, но в случае тыквы-фонаря это имеет смысл, так как его форма ощутимо шире, чем его отпечаток.
Я люблю брать черный цвет с 20% прозрачности, когда дело доходит до теней.
В оригинальном уроке по персонажу я упоминал, что не стоит использовать черный цвет для контура по этой причине. Если вы делали контуры черными, то Волшебная палочка не сможет отличить тени от контуров. Это не слишком критично, но может доставить неудобства.
Вот как будет выглядеть наш законченный рисунок тыквы-фонаря, на картинке справа показано, как бы выглядел рисунок, если бы мы оставили первый вариант лица.
Мне нравятся оба варианта, но первый вариант труднее читается, если отдалить его, и сливается с текстурой тыквы. Так что я скорее буду использовать второй вариант.
А как нарядились вы?Итак, ваши переодетые персонажи и жуткий фонарь-тыква готовы.![]()
Надеюсь, урок был полезен.
Игровой персонаж Маг Пиксель арт, Скелет, игра, вымышленный персонаж, анимация png
Игровой персонаж Маг Пиксель арт, Скелет, игра, вымышленный персонаж, анимация pngтеги
- игра,
- вымышленный персонаж,
- анимация,
- игрушка,
- прокрутка,
- ролевые игры Игра,
- робот,
- статуэтка,
- фэнтези,
- персонаж,
- искусство,
- произведение искусства,
- игровой персонаж,
- маг,
- пиксель арт,
- скелет,
- png,
- наклейка png,
- бесплатное скачивание,
- клипарт
изменить размер PNG
ширина(px)
высота(px)
Лицензия
Некоммерческое использование, DMCA Report
- org/ImageObject»> Pathfinder Ролевая игра Dungeons & Dragons d20 System Wizard Маг, огонь зло, эльф, вымышленный персонаж, система d20 png
- Sprite Animation 2D компьютерная графика Game Character, спрайт, игра, чиби, видеоигра png
- Король Артур Маг Подземелья и драконы Фантазия Мифология, Мерлин, другие, вымышленный персонаж, волшебник png
- Игра Fortnite Battle Royale Battle Fort Royale Видеоигры, Фортнит, игра, вымышленный персонаж, обои для рабочего стола png
- Roblox Minecraft Видеоигра Онлайн игра Детский, Minecraft, игра, взрослый, человек png
- org/ImageObject»> человек, держащий топор иллюстрация, подземелья и драконы нежити ролевая игра ролевая игра монстр скелет, нежить, оружие, зомби, военачальник png
- скелет в красной рубашке иллюстрации, футболка Art Drawing Illustration, скелет, комиксы, видеоигра, иллюстратор png
- Dungeons & Dragons Pathfinder Ролевая игра Скелет Монстр Нежить, Скелет, легендарное существо, игра, дракон png
- Базз Лайтер, Базз Лайтер Toy Story Pixar Фильм, история игрушек, мультфильм, вымышленный персонаж, фильм png
- Страж волшебника, Подземелья и драконы Ролевая игра Игра в жанре d20 Системный волшебник Волшебник, мультфильм, система d20, волшебник png
- org/ImageObject»> Рисунок черепа Calavera Голова, череп, голова, вымышленный персонаж, Калавера png
- Череп Наклейка Силуэт Рисунок, череп, лицо, логотип, монохромный png
- Радуга, Рыба, Морепродукты, Форель, Радужная форель, Силуэт, Золотистый лещ, Рыба png
- череп с иллюстрацией ирокез, рисунок черепа, черепа, инфографика, люди, голова png
- Джек О ‘Фонарь монстр персонаж, Pathfinder Ролевая игра Dungeons & Dragons Ghoul Легендарное существо Призрак, следопыт, игра, вымышленный персонаж, система d20 png
- Минни Маус Микки Маус Гуфи, Минни Маус с котенком, персонаж Диснея Микки Мауса, клипарт, компьютерные обои, компания Уолта Диснея png
- org/ImageObject»> Голем из Clash of Clans, Clash of Clans Clash Royale Гоблин Гигантский Голем, Clash of Clans, игра, вымышленный персонаж, магия png
- Человеческий череп символика рисунок, череп, лицо, монохромный, голова png
- Женщина, держащая ведро, Ролевая игра «Трилогия Ночного ангела» Игра «Подземелья и драконы», средневековая, Разное, игра, другие png
- Подземелье и драконы Pathfinder Ролевая игра Раскопанный Arcana Skeleton Ролевая игра, Skeleton, дракон, вымышленный персонаж, боевик png
- Дисней Той Стори 3, Шериф Вуди Той Стори Арт Анимация, история игрушек, малыш, мультфильм, pixar png
- org/ImageObject»> Dungeons & Dragons Pathfinder Ролевая игра Система d20 Серый волк Оборотень, оборотень, дракон, волк, вымышленный персонаж png
- Dungeons & Dragons Pathfinder Ролевая игра Ролевая игра Воин Игрок персонаж, воин, игра, оружие, лес png
- Ариэль из иллюстрации Русалочка, Ариэль Принц YouTube Дисней Принцесса Уолт Дисней Компания, Русалка, ребенок, младенец, принц png
- Dungeons & Dragons Pathfinder Ролевая игра Халфлинг Чернокнижник Фэнтези, Гном, Вымышленный персонаж, мультфильм, волшебник png
- Ангел бетонная статуя, Ангел Херувим Статуя Люцифера Арт, римская, фотография, молитва, монохромный png
- org/ImageObject»> синий T-rex, тиранозавр Ankylosaurus, трицератопс, динозавр, синий маленький динозавр, синий, карикатура, вымышленный персонаж png
- La Calavera Catrina День мертвых Мексика, череп, Вымышленный персонаж, пурпурный, Калавера png
- Скелет Танец Черепа, Скелет, млекопитающее, рука, монохромный png
- Салли Скеллингтон иллюстрация, Джек Скеллингтон Уги Буги Хэллоуин Плакат Иллюстрация, Скелет, Вымышленный персонаж, мультфильм, птица png
- World of Warcraft The Dark Eye Shadowrun Темницы и драконы Ролевая игра, Богиня, Вымышленный персонаж, живот, религия png
- org/ImageObject»> Средневековье Dungeons & Dragons Pathfinder Ролевая игра Броня Рыцарь, броня, средневековье, система d20, броня png
- красный динозавр illustratio, тираннозавр рисунок динозавра, динозавр, карикатура, вымышленный персонаж, Velociraptor png
- Женщина-Воин Женщина, Женщина-Воин, игра, ребенок, cg Художественное произведение png
- Франкенштейнский пиксель, Minecraft: Pocket Edition Zombie, Minecraft Zombie, угол, видеоигра, вымышленный персонаж png
- Pathfinder Ролевая игра Dungeons & Dragons Dwarf Warrior Ролевая игра, фэнтезийный гном, вымышленный персонаж, ролевые игры, система d20 png
- org/ImageObject»> Bear Animation Party Милая, Маша и медведь, персонаж Диснеевской девушки сидит возле подарочной коробки, фиолетовый, телевидение, ребенок png
- День рождения мультфильм, pocoyo, мальчик держит воздушные шары, телевидение, праздники, фотография png
- иллюстрация чертежа скелетной системы, человеческий скелет Dance Skull, Skull, монохромный, балерина, спортивный инвентарь png
- Херувим Ангел Амур, ангел, винтажная одежда, вымышленный персонаж, ангел png
- ангел молится иллюстрация, младенец ангел, ангел, вымышленный персонаж, обои для рабочего стола, кукла png
- org/ImageObject»> Рыцарь-ангел, Dungeons & Dragons Pathfinder Ролевая игра Aasimar Ролевая игра Fantasy, Fantasy Angel, cg Иллюстрации, дракон, вымышленный персонаж png
- Художественная игра Dungeons & Dragons Pathfinder Ролевая игра, броня, игра, вымышленный персонаж, арт-игра png
- Monsters, Inc. Бу Джеймс П. Салливан Майк Вазовски Pixar, монстр, ребенок, малыш, вымышленный персонаж png
- Dungeons & Dragons Pathfinder Ролевая игра Thief Rogue Фэнтези, фэнтези-жулик, игра, вымышленный персонаж, оружие png
- Dungeons & Dragons Goblinoid Pathfinder Ролевая игра Руководство для монстров, дракон, легендарное существо, игра, шляпа png
- org/ImageObject»> Рапунцель Dog Paper Paper Scrapbooking, Paw Patrol, персонажи Paw Patrol, Разное, ребенок, другие png
- Paw Patrol мальчик характер иллюстрации, PAW Patrol Cockapoo Щенок Сибирский Хаски, г-н.боб, ребенок, животные, герои png
- 2D компьютерная графика Видеоигра Character Concept art, 2d спрайты игровых персонажей, игра, видеоигра, мультфильм png
- дети, мультипликационная детская рамка, милый детский фон, текст, люди, малыш png
пикселей
Посмотреть Улитка [пиксельная графика]
Улитка [пиксельная графика]
Просмотр 8-битных игровых персонажей «Hi Res»
8-битные игровые персонажи «Hi Res»
Посмотреть Герои моего проекта для детей!
Герои моего проекта для детей!
Посмотреть пиксель арт ужасов
Пиксель-арт ужасов
Посмотреть Храбрых Исследователей — Блоки + Персонажи
Отважные исследователи — блоки + персонажи
Посмотреть «Очень странные дела»
Очень странные дела
Просмотр Добро пожаловать в ваш Pixel 2
Добро пожаловать в ваш Pixel 2
Просмотр пиксельных символов
Пиксельные символы
Посмотреть персонажей Crossy Road
Персонажи Crossy Road
Посмотреть бесплатные активы: Зомби-игра — Персонажи
Бесплатные активы: Зомби-игра — персонажи
Посмотреть История начинается
История начинается
Посмотреть персонажей пиксельной графики
Пиксельные персонажи
Посмотреть обложку журнала.
фрагмент [пиксельная графика]Обложка журнала. фрагмент [пиксельная графика]
Посмотреть команду IBM Digital Design System
Группа IBM Digital Design System
Посмотреть удивительные персонажи
Удивительные персонажи
Посмотреть Цикл прыжков персонажей Rocketbank
Цикл прыжков персонажей Rocketbank
Просмотреть Sacred Games — Персонажи Pixel Art
Sacred Games — персонажи Pixel Art
Посмотреть пиксельные аватары единорогов 🦄
Пиксельные аватары единорогов 🦄
Просмотр персонажей
символов
Посмотреть персонажей Crossy Road
Персонажи Crossy Road
Просмотр случайных символов
Случайные символы
Посмотреть БОТ
Посмотреть персонажей пиксельной ролевой игры: рыцарь блокирует животных
Пиксельные ролевые персонажи: Рыцарь Блок животных
Посмотреть бесплатные пиксельные персонажи Хэллоуина
Бесплатные пиксельные персонажи Хэллоуина
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Загрузка еще…
Онлайн-курс — Pixel Art Character Animation for Video Games (Daniel Benítez)
Активируйте курс с кодом подарка
Испанский с английскими субтитрами
- 99% положительных отзывов (356)
- 10467 студентов
- 17 уроков (2ч 54м)
- 19 дополнительных ресурсов (12 файлов)
- Онлайн и в своем собственном темпе
- Доступно в приложении
- Аудио: испанский
- испанский, английский, португальский, немецкий, французский, итальянский, польский, нидерландский
- Уровень: Начинающий
- Неограниченный доступ навсегда
Пиксельная эстетика возвращается с новой силой благодаря таким художникам, как Даниэль Бенитес, разработчик видеоигр и соучредитель Fourattic, который поддерживает ее живыми в своих анимационных творениях.
В этом онлайн-курсе он обучает вас методам и процессам анимации персонажа видеоигры и его окружения в пиксельной графике с использованием инструмента Pyxel Edit.
Если вы уже прошли предыдущий курс Дэниела «Введение в дизайн персонажей в пиксельной графике», пройдите еще дальше в этом, анимируя свои творения кадр за кадром и разбираясь с такими понятиями, как синхронизация, ожидание и размытие в движении, а также а также такие процессы, как экспорт и оптимизация листов спрайтов.
Чему вы научитесь на этом онлайн-курсе?
Содержание курса
Подробнее
Начните со знакомства с Дэниелом, который расскажет вам о своей карьере в мире дизайна видеоигр и, в частности, в пиксельной графике. Затем он выделяет некоторых аниматоров пиксельной графики, которые больше всего повлияли на него за эти годы, а также аниматоров и анимационные студии в других областях, которые так же вдохновляли его.
Если вы еще этого не сделали, загрузите Pyxel Edit.
Затем Даниэль проведет вас по ее интерфейсу, уделив особое внимание наиболее важным инструментам, которые есть в программе для разработки анимации.
Создайте проект, используя наборы тайлов в Pyxel Edit. Узнайте, что такое тайлы и для чего они используются в анимации.
Первое действие вашего персонажа — анимация ожидания, начиная с основных форм и силуэтов. Даниэль использует несколько примеров, чтобы объяснить, что такое синхронизация в контексте анимации, а также что означают ключевые кадры и анимация движения.
Затем создайте анимированный цикл ходьбы. Изучите, что это такое и какую функцию оно выполняет в видеоигре, прежде чем анимировать своего персонажа и повторять концепции анимации из предыдущего урока.
Третья и последняя анимация персонажа — атака. Даниэль познакомит вас с такими понятиями и методами, как упреждение, размытие в движении и простое начало и конец, которые необходимы для обеспечения качества и плавности ваших анимаций.
Анимируйте окружение вашего персонажа, используя такие методы, как модульная анимация и попиксельная анимация.
Теперь, когда у вас есть все анимации, узнайте, как экспортировать их по отдельности или вместе в формате GIF с помощью Pyxel Edit. Узнайте, как экспортировать их, чтобы их можно было использовать в видеоиграх в виде листов спрайтов. Даниэль подводит итог, рассказывая еще о нескольких программах, полезных для процесса разработки спрайт-листов.
Что представляет собой проект этого курса?
Анимируйте персонажа видеоигры, уделив особое внимание трем его наиболее важным состояниям: ожидание, ходьба и атака. Создайте немного анимированного окружения, используя методы, отличные от тех, которые использовались для персонажа.
Проекты курсантов
Автор: jmarme
По бедама
Супиксель
+175
Для кого этот онлайн-курс?
Дизайнеры, иллюстраторы, аниматоры и все, кто хочет узнать больше об анимации для видеоигр с использованием техники пиксель-арт.![]()
Требования и материалы
Вам необходимы базовые знания о дизайне персонажей и понимание Pyxel Edit или программ, предлагающих аналогичные функции, таких как Adobe Photoshop или Flash.
Отзывы
Даниэль Бенитес — арт-директор и соучредитель независимой студии видеоигр Fourattic. Он работал над видеоиграми, такими как Crossing Souls и Starr Mazer. Он специализируется на пиксельной графике, технике, которую он разрабатывал с тех пор, как начал работать в мире видеоигр, как в профессиональных, так и в личных проектах.
Его последнее и самое амбициозное творение, Crossing Souls, появилось на свет из-за необходимости создать что-то свое, созданное исключительно для игроков. Crossing Souls — это видеоигра в жанре экшн с эстетикой старой школы, доступная на всех ведущих платформах.
Содержание
Чего ожидать от курса Domestika
Учитесь в своем собственном темпе
Наслаждайтесь обучением дома без установленного расписания и с помощью простого метода.
Вы сами задаете темп.Учитесь у лучших профессионалов
Изучите ценные методы и техники, объясненные ведущими экспертами в области творчества.
Познакомьтесь с опытными учителями
Каждый эксперт учит тому, что у него получается лучше всего, с четкими инструкциями, искренней страстью и профессиональным пониманием на каждом уроке.
Сертификаты
Плюс
Если вы являетесь участником Plus или PRO, получите специальный сертификат, подписанный вашим учителем для каждого курса. Поделитесь им в своем портфолио, социальных сетях или где угодно.
Получите места в первом ряду
Видео высочайшего качества, чтобы вы не упустили ни одной детали. С неограниченным доступом вы можете смотреть их столько раз, сколько вам нужно, чтобы усовершенствовать свою технику.
Делитесь знаниями и идеями
Задавайте вопросы, запрашивайте отзывы или предлагайте решения.
Поделитесь своим опытом обучения с другими учащимися в сообществе, которые так же увлечены творчеством, как и вы.Присоединяйтесь к глобальному творческому сообществу
Сообщество является домом для миллионов людей со всего мира, которые любопытны и увлечены исследованием и выражением своего творчества.
Смотрите профессионально подготовленные курсы
Domestika курирует свой список учителей и самостоятельно разрабатывает каждый курс, чтобы обеспечить высококачественное онлайн-обучение.
Часто задаваемые вопросы
Что такое онлайн-курсы «Доместики»?
Курсы «Доместики» — это онлайн-курсы, которые предоставляют вам инструменты и навыки, необходимые для выполнения определенного проекта. На каждом этапе проекта видеоуроки сочетаются с дополнительными учебными материалами, поэтому вы можете учиться на практике. Курсы Domestika также позволяют вам делиться своими проектами с учителем и другими учениками, создавая динамичное сообщество курса.
Когда курсы начинаются и когда заканчиваются?
Все курсы на 100 % онлайн, поэтому после их публикации курсы начинаются и заканчиваются в любое время. Вы задаете темп урока. Вы можете вернуться, чтобы просмотреть то, что вас больше всего интересует, и пропустить то, что вы уже знаете, задать вопросы, ответить на вопросы, поделиться своими проектами и т. д.
Что входит в курсы «Доместики»?
Курсы разделены на разные блоки. Каждое из них содержит уроки, информационный текст, задания и практические упражнения, которые помогут вам шаг за шагом выполнять проект, а также дополнительные дополнительные ресурсы и файлы для загрузки. У вас также будет доступ к эксклюзивному форуму, где вы сможете взаимодействовать с учителем и другими учениками, а также делиться своей работой и проектом курса, создавая вокруг курса сообщество.
Вам дали курс?
Вы можете активировать полученный курс, зайдя на страницу активации и введя свой подарочный код.
Когда я получу сертификат о прохождении курса? Plus
Если вы являетесь участником Plus или PRO, после прохождения курса вы сразу же получите персональный сертификат.
Вы можете увидеть все свои сертификаты в разделе «Сертификаты» вашего профиля. Вы можете загрузить свои сертификаты в формате PDF и поделиться ссылкой в Интернете.
Узнайте больше о сертификатах
Pixelblog — 22 — Спрайты персонажей сверху вниз — SLYNYRD
Intro
Добро пожаловать в очаровательный мир пиксельной графики сверху вниз. В двух предыдущих пиксельных блогах мы рассмотрели базовые плитки земли и различные объекты окружения. Теперь, в 3-й части серии «сверху вниз», мы оживим мир с помощью полностью анимированных спрайтов персонажей.
Спрайт персонажа Процесс
Чтобы анимировать персонажа сверху вниз, вам потребуется представить спрайт как минимум в 4 направлениях. Если вы не используете драматическое направленное освещение или ваш персонаж не имеет асимметричного дизайна, который вы хотите точно отобразить в зависимости от ориентации, боковая версия может просто отражаться для движения вправо и влево.
Поэтому наша первая цель — создать персонажа, смотрящего в 3 стороны экрана; вверх, вниз и в стороны.
Прежде чем приступить к дизайну персонажей, важно установить размер спрайтов, так как размер ваших персонажей может сильно повлиять на внешний вид вашей игры. Как правило, размер плитки является лучшим показателем для определения размера спрайта. Как показано в нижней части приведенного выше руководства, относительный размер спрайта обычно соответствует единице плитки или кратен единице плитки. Высота и ширина могут умножаться независимо друг от друга. Например, 1 тайл в ширину и 2 тайла в высоту — это один из наиболее распространенных размеров спрайтов, и именно его я выбрал для своего примера.
Размер персонажа, основанный на единицах плитки, позволяет спрайту естественным образом вписываться в сеточную структуру мира, основанного на плитке, с простыми границами столкновения, также определяемыми единицами плитки. В то время как современные инструменты позволяют разбивать сетку и создавать спрайты и среды произвольного размера, аккуратная логика подхода на основе сетки по-прежнему является общепринятым.![]()
Обратите внимание, размер рамки спрайта относителен и персонаж не обязан полностью заполнять ее от края до края. Однако вы не хотите, чтобы вокруг вашего персонажа было слишком много пустого пространства, чтобы избежать ярко выраженных разрывов с соседними спрайтами и частями окружения при столкновении. И наоборот, пиксели, выходящие за пределы кадра, могут привести к нежелательному перекрытию. При взгляде сверху вниз подразумевается глубина по оси Y, поскольку мы предполагаем, что объекты, расположенные ниже на экране, ближе. Таким образом, это выглядит совершенно естественно и улучшает ощущение глубины, позволяя верхней половине спрайта высотой в 2 тайла перекрывать спрайты, которые чуть выше на экране. Однако перекрытие по оси X является произвольным и сбивает с толку.
Анимация ходьбы и бега
После того, как вы создали положение бездействия спрайта, обращенного в 3 направлениях, вы можете начать создавать анимацию ходьбы/бега. На этом этапе лучше всего оставить спрайт очень простым и добавить детали после того, как вы будете удовлетворены движением.
Я часто создаю анимацию с помощью фиктивного спрайта, состоящего из четко определенных частей тела сплошного цвета, как на изображении выше. В этом случае, поскольку спрайт довольно мал, а некоторые детали освещения влияют на внешний вид движения, я пропустил фиктивный шаг и сразу анимировал детали при первом проходе. Тем не менее, я рекомендую всегда начинать с манекена, особенно если вы работаете с более крупными и детализированными спрайтами.
Хотя мой цикл ходьбы составляет 4 кадра, а цикл бега — 8, вам не нужно создавать столько уникальных поз. Цикл ходьбы заимствует все свои кадры из цикла бега, но просто пропускает кадры, где персонаж идет полным ходом, а скорость воспроизведения медленнее. Рамки с качающимися руками могут быть просто отражены для версий, обращенных вверх и вниз.
Как только вы будете удовлетворены анимацией, вы можете использовать эти кадры в качестве основы для всех персонажей в вашей игре с аналогичными пропорциями.
Я предлагаю начать с базового нюдового оттенка, который вы можете легко создать и дополнить аксессуарами.
Хотя у нас есть спрайт только в 4 направлениях, вы все равно можете реализовать движение в 8 направлениях, и это будет выглядеть приемлемо, когда любое из 4 направлений отклоняется под углом. Применение 4 направлений к 8 направлениям было обычной практикой во многих 16-битных играх и до сих пор выглядит хорошо для меня. «Секрет маны» и «Связь с прошлым» — вот пара примеров, которые приходят на ум. Но если вы хотите пофантазировать, вы можете попробовать добавить 4 угла. Я думаю, что отсутствие углов становится резким, только если спрайт большой и детализированный.
Ссылка на спрайт персонажа
После того, как вы создали базовую модель спрайта персонажа, можно приступить к созданию уникальных персонажей.
В качестве базового руководства по пропорциям я создал различные высоты, чтобы различать мужчин, женщин, молодых и пожилых людей.
Конечно, могут быть исключения, и я допускаю некоторое пространство для маневра для небольших различий в росте между одними и теми же типами. Однако при работе с такой ограниченной информацией я считаю, что лучше всего придерживаться системы и не слишком бросать вызов ожиданиям игрока. Помните, что часть спрайта в верхней половине кадра может перекрывать спрайты, поэтому не нужно беспокоиться о пустом месте в верхней части кадра.
Чем меньше спрайт, тем более сжатыми и абстрактными становятся пропорции. При работе с ограниченным размером голова обычно занимает от трети до половины всего спрайта. Это делается для того, чтобы подчеркнуть выразительные черты персонажа, что помогает игроку сформировать эмоциональную связь с персонажами. Стремление к реалистичным пропорциям при таком маленьком размере приведет к фигурке из палочек, которая может быть интересным стилем, но лишена индивидуальности. В то время как небольшой холст, кажется, оставляет мало места для стилистического выбора, всегда есть потенциал для творчества.
Я призываю вас создать свой собственный уникальный стиль персонажей.
Дом
Везде, где есть люди, обязательно найдется жилье. Я просто не мог удержаться, и мне пришлось сделать бонус-туториал по созданию дома!
Размер дома также основан на единицах плитки, поэтому он логично вписывается в игровой мир без странных пробелов или нежелательных перекрытий. Кроме того, его можно было разбить на плитки и расширить до различных структур, добавив различные плитки-заполнители и соединения. На данный момент это всего лишь один большой спрайт.
Масштаб зданий в играх с видом сверху часто уменьшается по сравнению с персонажами, они кажутся крошечными снаружи, а затем волшебным образом становятся просторными, когда вы входите внутрь. Частично это происходит из-за технических ограничений, но также делает навигацию по деревне намного более практичной, особенно если в игре нет функции бега. Хотя это по-прежнему приемлемое соглашение и имеет определенный шарм, мне нравится, чтобы мои здания, по крайней мере, имели правдоподобный масштаб по отношению к спрайтам персонажей.
Как только вы войдете внутрь, вполне приемлемо расширить планировку здания.
Размер экрана
Размер экрана/исходное разрешение вашей игры следует определить на ранних стадиях разработки, так как это может сильно повлиять на эстетику и геймплей. При работе с пиксельной графикой особенно важно выбрать размер экрана, который можно идеально масштабировать, чтобы он соответствовал обычным дисплеям и оставался пиксельным. 1920x1080p — одно из самых распространенных разрешений экрана, и многие дисплеи имеют соотношение сторон 16:9. Поэтому основное правило, которое я использую, — убедиться, что ваше исходное разрешение идеально умножается на 19.20×1080. Тем не менее, вы также должны учитывать другие распространенные дисплеи, такие как 1366×768.
Собственное разрешение 480x270px как раз подходит для этого макета.
Чтобы сохранить эстетику пиксельной графики, существует ограниченный диапазон допустимых разрешений.
Слишком высокое разрешение, и оно больше не отображается как пиксель-арт. Слишком низкое разрешение и это становится абстрактными блоками. Это оставляет нам несколько приемлемых вариантов, которые идеально масштабируются до 1920×1080 и близко подходит к другим обычным дисплеям.
320×180(6x) Довольно крупный при просмотре на большом экране, но все же приемлемый вид ретро Делаю, Тирианские защитники
Конечно, ваше разрешение не ограничивается этими вариантами. Существуют сложные решения для масштабирования, которые позволяют отображать изображения других размеров с точностью до пикселя, но мои технические познания в этом вопросе очень ограничены. Если вы выберете произвольное разрешение, ваша игра может не отображать пиксели в полноэкранном режиме, оставляя границы вокруг игровой области. Однако я нахожу это более приемлемым, чем искажение единиц пикселей для заполнения всего экрана.
При выборе размера важно учитывать относительный размер спрайтов, которые должны отображаться на экране, и то, как это может повлиять на игровой процесс.
Чем выше разрешение, тем меньше становятся единицы пикселей, иначе все будет выглядеть более уменьшенным. Следовательно, более высокие разрешения могут хорошо подойти для чего-то с быстрой прокруткой и быстро движущимися спрайтами. Если вы хотите чего-то менее раздражительного или просто хотите выглядеть в стиле ретро, возможно, вы захотите попробовать одно из более низких разрешений. В конечном счете, размер экрана — это то, что вы должны смоделировать и проверить на себе, прежде чем принять решение.
Заключительные мысли
Что ж, это третья и последняя часть моей серии из нескольких частей, посвященных предметам сверху вниз. С самого начала у меня был общий план с намерением создать сплоченный игровой мир с уроками, которые строятся друг на друге. Честно говоря, я не совсем был уверен, что у меня получится, когда все, что у меня будет, это трава и грязные плитки, но с каждым уроком мир становился все более живым. Теперь это начинает ощущаться как настоящая игра, и мне почти хочется, чтобы это было так.
Надеюсь, вы многому научились в этом путешествии со мной. Я знаю, что у меня есть. Хотя это немного грустно, я перейду к новой теме в следующем Pixelblog, но я не думаю, что вы видели последний из этого мира. Есть еще много возможностей расширить этот мир новыми уроками по нисходящим предметам.
РЕСУРСЫ
Была ли эта статья полезной? Если вы найдете ценность в моем контенте, рассмотрите возможность стать участником Patreon . Помимо многих других наград, участники Pixel Insider получают дополнительные ресурсы в дополнение к моим учебным пособиям. Но самое главное, вы позволяете мне продолжать создавать новый контент.
В этом месяце я делюсь спрайтами персонажей сверху вниз , которые включают в себя все спрайты персонажей, кадры анимации и дом, представленные в этом уроке. Получайте удовольствие, используя их в своих исследованиях пиксельной графики или личных проектах по разработке игр.
Мои лучшие клиенты также могут загрузить исходный файл Tutorial 55 , в котором подробно показано, как я настроил свой проект и синхронизировал анимацию в Photoshop.
