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

Холст спрайта — не картинка, которую потом уменьшат: выбранный размер и есть то разрешение, которое увидит игрок. В 16×16 персонаж — силуэт с двумя пикселями вместо глаз, поэтому этот размер подходит для предметов, иконок и маленьких героев. В 32×32 есть место для лица, узнаваемой руки и градиента теней. 64×64 уже ближе к иллюстрации, и каждый кадр анимации стоит вчетверо больше пикселей, чем кадр 32×32.

Выбирайте размер по другим спрайтам вашей игры, а не по желаемой детализации. Тайлсет на сетке 16 пикселей требует персонажей высотой 16 или 32 пикселя. Если спрайт нужно увеличить, панель размера оставит рисунок привязанным к выбранному краю или углу, и каждый кадр изменится одинаково — анимация не собьётся.

Большинство хороших спрайтов обходятся четырьмя–шестнадцатью цветами. Маленькая палитра заставляет каждый цвет выполнять свою работу: контур, основа, одна-две тени, блик. Выберите основной цвет и кнопками «темнее» и «светлее» рядом постройте цветовую рампу; если в тенях слегка сдвинуть оттенок к синему, а в бликах — к жёлтому, это читается как свет, а не как серый.

Контур отделяет спрайт от любого фона, на который он попадёт. Для маленьких спрайтов надёжнее всего сплошной тёмный контур; на крупных мягче выглядит контур, который берёт цвет обводимой формы (выборочный контур). Не затеняйте каждую форму от краёв внутрь (так называемый pillow shading) — объём от этого становится плоским. Свет падает с одной стороны, а тень ложится на другую.

Большую часть игровой анимации несут короткие циклы. Дыхание или покачивание в ожидании работают на двух–четырёх кадрах при четырёх–шести кадрах в секунду. Цикл ходьбы обычно занимает четыре–восемь кадров при восьми–двенадцати: две контактные позы, в которых стопа касается земли, и промежуточные позы между ними. Удар или атака лучше читаются с медленным кадром замаха, одним-двумя очень быстрыми кадрами действия и удержанной позой после.

Сначала нарисуйте ключевые позы, затем заполните промежутки. Для этого и нужно «Дублировать»: скопируйте текущий кадр и меняйте только те пиксели, которые двигаются, — тогда тело не будет дрожать от кадра к кадру. С включённой калькой предыдущий кадр бледно виден под пустыми пикселями, и руку проще сдвинуть на пиксель-два, чем перерисовывать. Чтобы задержать позу, продублируйте её: в GIF каждый кадр длится одинаково.

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

Спрайт-лист — это все кадры анимации на одном изображении. В листе, который экспортирует этот инструмент, нет ни отступов, ни промежутков между кадрами, поэтому любой движок нарежет его только по размеру кадра: спрайт 32×32 из восьми кадров экспортируется полосой 256×32 или сеткой 3×3 с пустой последней клеткой.

Для движка экспортируйте в 1× и увеличивайте уже в движке. В Godot поставьте фильтр текстуры Nearest, чтобы пиксели оставались чёткими. В Unity выставьте Filter Mode в Point (no filter), отключите сжатие и сделайте Pixels Per Unit равным размеру спрайта. В GameMaker импортируйте полосу и укажите число кадров. Прозрачные пиксели остаются прозрачными, так что спрайт встанет на любой фон.

GIF 32×32 в натуральную величину меньше миниатюры, а большинство сайтов размывают маленькие картинки при увеличении. Экспортируйте в 4× или 8×: каждый пиксель станет блоком 4×4 или 8×8 одинаковых пикселей, а файл останется лёгким, потому что GIF очень хорошо сжимает такие одинаковые участки.

Прозрачность в GIF — это один отключённый цвет, поэтому некоторые мессенджеры и соцсети показывают её чёрной или белой. Если анимацию будут публиковать там, где фон вам не подвластен, экспортируйте её на белом.