Как пользоваться инструментом «Редактор пиксель-арта»
- Выберите размер холста (16×16 и 32×32 — хорошее начало) или откройте файл PNG, GIF или .piskel.
- Выберите палитру, например PICO-8 или Endesga 32, и рисуйте карандашом (B). Правая кнопка мыши рисует дополнительным цветом, который по умолчанию прозрачный.
- Добавьте слои для контура, цвета и теней. Добавьте кадры для анимации и включите кальку (K), чтобы видеть предыдущий и следующий кадр.
- Нажмите Enter, чтобы проиграть анимацию, настройте FPS и проверьте маленькое превью в 1×, 2× или плиткой.
- Откройте «Экспорт» и скачайте PNG, спрайт-лист с JSON, анимированный GIF, SVG, ZIP с кадрами или файл .piskel.
Что вы получаете
- PNG текущего кадра в масштабе от 1× до 16×
- Спрайт-лист PNG со списком кадров в JSON (любое число столбцов)
- Анимированный GIF с FPS документа и сохранённой прозрачностью
- ZIP с пронумерованными PNG-кадрами
- SVG с отдельным контуром для каждого цвета
- Файл .piskel, который можно снова открыть здесь или в Piskel
Советы из практики геймдева
- Держите pixel-perfect включённым (P), когда рисуете контуры в 1 px. Он убирает двойные угловые пиксели, которые остаются от штрихов от руки.
- Shift-клик карандашом рисует прямую линию от последней точки. Удерживайте Shift при рисовании линии, чтобы привязать её к шагу 45°, а прямоугольник или эллипс — к квадрату или кругу.
- Инструмент затенения (U) меняет цвет пикселя на соседний, более светлый или тёмный, из вашей палитры, так что вы затеняете, не выходя за её пределы. Правая кнопка затемняет.
- Выделите область (S или W для одного цвета) перед рисованием, чтобы штрихи не выходили за её пределы, или перед перемещением, чтобы сдвинуть только эти пиксели.
- Включайте зеркало по X для персонажей и спрайтов анфас, а в конце нарушьте симметрию вручную, чтобы спрайт не выглядел штампованным.
- Используйте скрытый слой-набросок с низкой непрозрачностью под контуром и удалите его перед экспортом.
- Работа автоматически сохраняется в этом браузере. Она никуда не синхронизируется, поэтому для резервной копии экспортируйте файл .piskel.
- Вставьте изображение через Ctrl+V, и оно добавится новым слоем — удобно для обводки референсов.
Сценарии использования
- Рисовать персонажей, предметы и тайлы на геймджеме, ничего не устанавливая
- Попиксельно дорабатывать сгенерированные ИИ спрайты перед импортом в движок
- Анимировать циклы idle, ходьбы и атаки и экспортировать спрайт-лист для Godot, Unity или GameMaker
- Делать небольшие анимированные GIF и эмоуты
- Редактировать проекты Piskel на компьютере, где Piskel не установлен
Вопросы и ответы
Этот редактор пиксель-арта бесплатный?
Да. Все функции рисования, анимации, импорта и экспорта бесплатны, водяного знака нет. Редактор полностью работает в вашем браузере.
Где сохраняется мой рисунок?
В локальном хранилище браузера, только на этом устройстве. Он переживёт перезагрузку страницы, но не очистку данных сайта или смену браузера. Чтобы сохранить копию, экспортируйте .piskel или PNG.
Можно ли открыть файлы Piskel?
Да. Откройте файл .piskel, и его слои, кадры и FPS загрузятся. Экспортировать обратно в .piskel тоже можно.
Какой максимальный размер холста?
512×512 пикселей. Пиксель-арт обычно имеет от 16 до 128 пикселей по стороне, а такой лимит сохраняет плавность рисования на телефонах и старых ноутбуках.
Как сделать спрайт-лист для игрового движка?
Нарисуйте каждый кадр анимации на таймлайне и выберите «Экспорт → Спрайт-лист». Задайте число столбцов и масштаб. Вы получите PNG и JSON-файл с позицией и длительностью каждого кадра.
Работает ли он на телефоне или планшете?
Да. Рисуйте одним пальцем, а для масштабирования и прокрутки используйте щипок или два пальца. Для детальной работы мышь и клавиатура всё же быстрее благодаря горячим клавишам.
Можно ли импортировать GIF или спрайт-лист?
Да. GIF открывается по одному кадру на каждый кадр GIF. Если открыть PNG, похожий на спрайт-лист, редактор предложит разрезать его на кадры по найденной сетке.