Как сделать спрайт персонажа в 8 направлениях для игры
Автор: Егор.
Восемь ракурсов одного героя нужны почти каждой игре с видом сверху. Разбираю, как их сделать вручную, как поручить нейросети и на что смотреть в готовом листе.
Зачем нужны восемь направлений
Если герой ходит по карте с видом сверху, как в классических RPG и приключенческих играх, игроку нужно видеть, куда он идёт. Четыре направления (вниз, вверх, влево, вправо) работают, пока движение идёт по клеткам. Когда персонаж может идти по диагонали, четыре ракурса начинают выглядеть топорно: герой едет боком, как по рельсам. Восемь ракурсов добавляют четыре диагонали, и движение выглядит живее.
Платформерам хватает двух сторон, вправо и влево, вторую получают зеркалом первой. Боссам часто хватает четырёх направлений: такой персонаж большой, детали на нём заметны, и каждый лишний ракурс стоит много времени. Поэтому в Пиксельне есть два размера: герой 64 пикселя с восемью направлениями и босс 128 с четырьмя.

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

Способ первый: нарисовать вручную
Это путь с полным контролем. Берёте Aseprite (он платный) или бесплатные Pixelorama и LibreSprite, задаёте холст 64 на 64 и рисуете героя спереди. Потом по очереди сзади, сбоку и три четверти. Приём, который знают многие пиксельщики: рисуют пять ракурсов, а три оставшихся получают зеркалом. Вправо делают из влево, диагональ вправо-вниз из влево-вниз и так далее.
Зеркало работает, пока персонаж симметричен. Если у героя щит на одной руке или шрам на одной щеке, зеркальный ракурс выдаст себя. Для таких героев приходится рисовать все восемь.
Этот способ хорош, когда вы умеете рисовать и вам важен каждый пиксель. Если рисунок идёт медленно, а персонажей нужно много, помогает генератор.
Способ второй: описать нейросети в Пиксельне
Я сам упирался именно в эту работу, поэтому она в Пиксельне сделана так, чтобы вся инструкция умещалась в пять шагов.
- Откройте «Генерировать», отдел «Персонажи», вкладка «Лист 8 направлений».
- Опишите героя обычными русскими словами. Хорошо работает такой набор: кто это, во что одет, что в руках, один-два характерных цвета. Например: «эльфийка-лучница в зелёном плаще с капюшоном, светлые волосы, лук за спиной». Сцену и фон описывать не нужно, нужен один персонаж.
- Если у вас уже есть картинка, загрузите её на вкладке «Своя картинка» (PNG или JPG до 5 МБ). Лучше, чтобы там был один персонаж на чистом фоне, в полный рост и смотрящий на нас.
- Выберите размер: «Герой 64» даёт восемь направлений, «Босс 128» даёт четыре.
- Нажмите «Сделать». Через пару минут лист будет готов.
Нейросеть рисует персонажа, потом мы приводим его к чистой пиксельной сетке и общей палитре. На выходе восемь отдельных PNG и общий спрайт-лист.
Как проверить результат
Откройте лист и пройдитесь по чек-листу из начала статьи. Я обычно смотрю в таком порядке:
- Положите рядом вид спереди и вид сзади. Цвет волос, головной убор и плащ должны совпадать.
- Проверьте, в какой руке оружие в каждом ракурсе.
- Уменьшите лист до реального размера в игре. Силуэт на 64 пикселях должен читаться, если он тонет в деталях, герою не хватает контраста.
Нейросеть рисует с долей случайности, поэтому неровный ракурс бывает. Служба сама проверяет каждое направление и один раз перерисовывает сетку бесплатно. Если результат всё равно не нравится, сетку можно переделать за 15 кристаллов.
Мелкие недочёты можно поправить руками. Для этого пригодятся бесплатные инструменты в браузере: вырезание фона, сокращение палитры и нарезка листа на кадры. Картинка при этом никуда не отправляется.
Частые ошибки
- Слишком много деталей. На 64 пикселях мелкие украшения превращаются в шум. Держите две-три крупные цветовые зоны и один акцент, тогда силуэт читается на любом ракурсе.
- Фигура прыгает при повороте. Если в одном ракурсе герой выше или ниже, чем в соседнем, в игре он будет дёргаться. Проверяйте, что макушка и ступни стоят на одних линиях.
- Мало контраста с фоном игры. Тёмный контур и один яркий цвет помогают найти героя на пёстрой земле.
- Описание сразу с сюжетом. Опишите внешний вид. Фраза «маг в синей мантии с белой бородой и посохом» даёт больше, чем «старый маг»: в ней есть то, что можно нарисовать.
Что делать с листом дальше
Для статичного персонажа хватит PNG нужного направления: в игре вы выбираете картинку по направлению движения. Чтобы герой ходил, нужна анимация. Как её сделать и подключить в Godot, я описал в отдельной статье. Там же есть архивы для Unity, Aseprite и GameMaker.
Если вы выбираете между сервисами, сравнение с PixelLab собрано здесь.
Сколько это стоит
Лист персонажа стоит 9 кристаллов, или 13 ₽ при разовой покупке без подписки. Герой и босс стоят одинаково. Подписок на 1 000, 2 500 и 5 000 ₽ можно не покупать: любую операцию продают отдельно. Подписка на 30 дней не продлевается сама, деньги списываются только после вашего нажатия «Купить». Таблица цен лежит на странице «Цены».
Попробовать
Опишите героя одной фразой и получите лист в восьми направлениях. Новичку два листа дарим, для них нужна регистрация с подтверждённой почтой.
Читайте дальше
- Анимация ходьбы спрайта: как сделать и подключить в GodotХодьба из четырёх кадров на каждое направление: как её собрать, как подключить в Godot 4 и какой код нужен, чтобы персонаж поворачивался куда идёт.
- Аналог PixelLab на русском: что умеет Пиксельня и чем отличаетсяЕсли вы ищете нейросеть для спрайтов и уже видели PixelLab, здесь сравнение с Пиксельней: общее, различия, сильные и слабые стороны каждого сервиса.