Перейти к содержимому
Moriqa
ПоддержатьВойти

Редактор

Спрайты и тайлы

Пиксель-арт и цвет

Редактирование изображений

Конвертация изображений

ИИ

Moriqa

Генератор обводки спрайтов

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

Создаётся на вашем устройстве. Ваши изображения никуда не загружаются.

  • Никуда не загружаются
  • Точность до пикселя
  • Много изображений сразу

Как это работает

Как добавить обводку спрайту

  1. Шаг 1: Добавьте спрайт

    Выберите, перетащите или вставьте спрайт с прозрачным фоном. Подойдёт и целая папка.

  2. Шаг 2: Выберите обводку

    Задайте толщину и цвет, скруглённые или прямые углы, снаружи рисунка или внутри.

  3. Шаг 3: Скачайте PNG

    Сохраните один спрайт или все спрайты пачки с одинаковой обводкой в ZIP.

Обводка спрайта

Обводка, какую вы нарисовали бы вручную

  • Только целые пиксели

    Обводка состоит из сплошных пикселей одного цвета, без размытия и мягких краёв.

  • Скруглённая или прямая

    Классическая обводка, оставляющая диагональные углы открытыми, или более тяжёлая, которая их закрывает.

  • Место для неё найдётся

    Холст увеличивается на толщину обводки, так что спрайт, касающийся края, не обрезается.

  • Любой цвет

    Чёрный, белый, тёмный оттенок из вашей палитры или любой цвет на выбор.

Подробнее

Обводки в пиксель-арте

Как строится обводка

Каждый пустой пиксель, который касается рисунка, получает цвет обводки. При скруглённых углах считаются только пиксели прямо сверху, снизу и сбоку от рисунка, поэтому диагональные углы остаются открытыми: такую обводку пиксельные художники рисуют вручную. Прямые углы учитывают и диагонали.

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

Выбор обводки

  • Толщина: 1 пиксель для спрайтов примерно до 64 пикселей; 2 и больше для более крупной графики или эффекта наклейки.
  • Цвет: чёрный читается на любом фоне. Тёмный оттенок из палитры самого спрайта выглядит мягче и продуманнее.
  • «Внутри»: перекрашивает внешние пиксели самого рисунка, и спрайт сохраняет размер. Используйте, когда размер менять нельзя, например в тайлсете или фиксированном спрайт-листе.
  • «Освободить место для обводки»: увеличивает изображение на толщину обводки с каждой стороны. Отключите, чтобы сохранить размер, и примите то, что спрайт, касающийся края, будет там обрезан.

Где обводка помогает

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

Это ещё и привычный способ показать, что объект выбран или с ним можно взаимодействовать: спрайт рисуется с яркой обводкой, пока на нём указатель. Сделайте здесь копию с обводкой и переключайтесь между двумя вариантами в игре.

Обводка спрайта

Частые вопросы

Мои изображения куда-нибудь загружаются?

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

Как добавить обводку спрайту?

Добавьте спрайт, задайте толщину и цвет и скачайте PNG. Фон должен быть прозрачным, чтобы инструмент видел форму спрайта.

Почему изображение стало больше?

Обводке нужно место. Когда включено «Освободить место для обводки», изображение увеличивается на толщину обводки с каждой стороны, чтобы ничего не обрезалось.

Можно ли обвести целый спрайт-лист?

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

У моего изображения нет прозрачного фона. Получится?

В таком виде нет: обводка пойдёт вокруг всей картинки. Сначала уберите фон с помощью «Удаление фона», затем добавьте обводку.

Можно ли обвести много спрайтов сразу?

Да. Добавьте сколько угодно; все получат одинаковую обводку, и их можно скачать вместе в ZIP.

Хотите нарисовать обводку сами?

Откройте редактор пиксель-арта Moriqa, чтобы рисовать и подчищать спрайты пиксель за пикселем, бесплатно в браузере.