Редактор пиксельной графики

Редактор для осознанного рисования по пиксельной сетке

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

Маленькая сетка помогает добиться выразительного силуэта, а большая оставляет место для теней и деталей. Это удобные отправные точки, а не строгие правила:

Сохраняйте резкость при увеличении

При экспорте PNG применяется целочисленный масштаб и отключается сглаживание. Поэтому один пиксель исходника 16×16 становится точным квадратом 4×4, 8×8 или больше, а не размытой кромкой. Шахматный фон и необязательные линии сетки служат только ориентирами интерфейса и в файл не попадают. Прозрачные ячейки остаются прозрачными.

SVG состоит из прямоугольников с чёткими краями и не содержит прозрачных ячеек. JSON проекта сохраняет редактируемую логическую сетку и рабочую палитру. Это формат проекта Hyperion, а не замена многослойным форматам настольных редакторов пиксельной графики.

Инструменты и отражение

• Карандаш закрашивает ячейки и соединяет быстрые точки указателя, чтобы в штрихе не было пробелов.
• Ластик возвращает ячейкам прозрачность.
• Заливка меняет область, связанную по четырём сторонам; области, соприкасающиеся только углами, остаются раздельными.
• Пипетка выбирает цвет существующей ячейки. Выбор прозрачности переключает инструмент на ластик.
• Зеркальное рисование отражает действие слева направо, сверху вниз или в обоих направлениях. Центральные строки и столбцы изменяются только один раз.

Мышь, перо, сенсорный ввод и клавиатура работают с одной логической сеткой. Сфокусируйте холст, перемещайте активную ячейку стрелками и нажимайте Пробел или Enter для применения инструмента. P, E, F и I выбирают инструменты; Delete стирает; Ctrl/Cmd+Z отменяет.

Работа в браузере и технические источники

Редактор использует браузерные Canvas API, Pointer Events и управление сглаживанием. PNG создаётся через API экспорта холста в blob. Взаимодействие с клавиатурой и указателем учитывает рекомендации WCAG 2.2 по управляемости.

Рисунок, название и палитра остаются в локальном состоянии проекта в браузере и не добавляются в URL или серверные данные. При переходе между этапами воронки обычные запросы страниц всё равно выполняются. Если хранилище вкладки недоступно, полноценный одностраничный редактор продолжит работать в памяти, но воронка не перейдёт дальше, чтобы проект не потерялся незаметно.