Pixel Editor

Спрайты и тайлмапы, пиксель за пикселем: кадры, onion skinning, палитры, коллизии по тайлам, карты нормалей, 9-slice и экспорт в GIF или Aseprite.

Коротко#

Редактор спрайтов и тайлмапов, одинаково удобный для работы что на 32×32, что на 1024×1024, с кадрами анимации и инструментами цвета, которые понимают палитры.

Интерфейс#


Строка меню	File · Edit · View · Plugins
Вкладки режимов	Sprite и Tilemap
Панель инструментов	New, undo/redo, размер холста, crop, layer flatten, flip horizontal и vertical, сетка, import, export, Save
Строка параметров	размер кисти, форма кисти, непрозрачность, split view и пресеты
Левая панель	pencil, shapes, fill, gradient, text, selection, eyedropper, colour pair, palette
Центр	холст, с небольшим индикатором текущего инструмента и цветов, и Preview в масштабе 1:1
Справа	Layers, затем Effects, Normal map, Reference и Modes
Снизу	временная шкала кадров, затем панель палитры
Строка состояния	размер холста, активный слой, масштаб

Что вы делаете здесь#

Рисование#

Space + перетаскивание панорамирует, колесо прокрутки масштабирует, 0 сбрасывает вид. У кисти есть размер и форма (по умолчанию квадратная) и непрозрачность. Панель Preview показывает спрайт в масштабе 1:1, пока вы работаете с увеличением, и это единственный честный вид пиксельного спрайта.

Слои#

Именованные, с изменяемым порядком, у каждого свой blend mode и непрозрачность, плюс цветовая метка и поле фильтра на случай, если их много. Effects применяется недеструктивно.

Анимация#

Timeline внизу: это лента кадров. Добавление, дублирование, удаление, изменение порядка; задание длительности в миллисекундах для каждого кадра; воспроизведение вперёд, назад или ping-pong. Индикатор показывает, что из этого получается: 1 frame • 100 ms • ~10 fps.

Onion показывает соседние кадры еле заметно под текущим, и именно так цикл ходьбы не расползается со временем.

Цвет#

Панель палитры: та часть, которую стоит изучить отдельно:


Palette	рабочий набор, со счётчиком и + Add
Recent	то, что вы выбирали в последнее время
Shades	ramp от светлого к тёмному, сгенерированный из текущего цвета
Harmony	предложения комплементарных, триадных и аналогичных цветов
Ramp	ramp, который вы строите и сохраняете

Текущий цвет редактируется как hex.

Тайлмапы#

Вкладка Tilemap переключает с рисования спрайта на его раскладку тайлами. Результат уходит в Engine, у которого есть свой собственный редактор тайлмапов для самого уровня.

Карты нормалей#

Раздел Normal map выводит карту нормалей из спрайта, поэтому 2D-спрайт можно осветить в Engine, вместо того чтобы он оставался плоским.

Reference#

Поместите изображение в раздел Reference, и оно расположится за холстом, пока вы рисуете поверх него.

Панели#

Их девять, и последние четыре превращают спрайт в игровой ассет:


Tool Palette	инструменты
Layers	стек
Timeline	кадры анимации
Reference	изображение за холстом
Effects	недеструктивные эффекты на слое
Tileset	построение тайлсета из холста, с выбранным размером тайла
Tilemap	раскладка этих тайлов в карту
Collisions	формы коллизий по тайлам
Normal Map	вывод и редактирование карты нормалей

Тайлсеты и тайлмапы#

Панель Tileset нарезает холст на тайлы (по умолчанию 16 px); панель Tilemap раскладывает их в карту со слоями и может изменять её размер.

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

Collisions#

У каждого тайла есть форма коллизии, нарисованная поверх тайлсета, а не объявленная в коде:


Full	коллизия по всему тайлу
None	проходимо
Top / Bottom / Left / Right half	частичная коллизия
Slope up / Slope down	наклонная коллизия

Show Collisions накладывает их поверх, а весь набор экспортируется как JSON. Сделав это здесь, вы даёте Engine тайлмап, который уже знает, где может ходить игрок.

Карты нормалей#

Generate Normal Map выводит карту из спрайта, с параметром strength; Normal Map Editor затем позволяет вручную нарисовать направление нормали (P), что является единственным способом исправить места, где автоматический проход ошибся.

9-slice и pivot#

9-Slice guides размечают растягиваемые области UI-спрайта, а Pivot / Origin задаёт точку, вокруг которой спрайт вращается и к которой привязывается. Оба параметра переносятся вместе со спрайтом в Engine.

Symmetry#

Mirror X и Mirror Y рисуют сразу обе стороны: horizontal, vertical, both или radial.

Цветовые ramp и палитры#

Модальное окно Color Ramp строит ramp по правилам, а не на глаз, а палитры импортируются из .gpl (формат палитры GIMP, в котором поставляется большинство пиксель-арт палитр).

Экспорт#

Формат	Для чего
PNG	один кадр
GIF	анимация, где угодно
APNG	анимация с настоящей альфой
Aseprite	обратно в Aseprite, слои сохранены
Atlas / sprite sheet	для игрового движка
`.tilemap`	карта, целиком или разделённая на JSON + изображения

Файлы, которые он читает и пишет#


Нативный формат	`.editor`
Импорт	`.png`, `.jpg`, `.aseprite`, `.tilemap`, `.gpl` (палитры)
Экспорт	`.png`, `.gif`, APNG, `.aseprite`, sprite atlas, `.tilemap` (целиком или раздельно), JSON коллизий

Передача работы в другие студии#

Создаёт pixel art. Принимает pixel art и изображения.

Pixel art принимают Inkwell, Composer, Animator, Matter и Engine: sprite sheet может попасть прямо в игру без промежуточного файла.

Совместная работа#

Pixel Editor синхронизируется операция за операцией: данные сцены, ассеты, анимации и скрипты.

Ограничения и типичные проблемы#

Масштаб: это не разрешение. Строка состояния показывает реальный размер холста; Preview показывает его в масштабе 1:1.
Мягкая кисть: не пиксельная кисть. Непрозрачность ниже 100% сгладит края (anti-alias), что обычно не нужно на спрайте.
Длительность кадра задаётся на кадр, а не на всю анимацию. Цикл из 12 кадров по 100 мс каждый идёт со скоростью ~10 fps, независимо от остальных.