Создатель пиксель-арта — бесплатный онлайн-редактор и генератор пиксель-арта

Создатель пиксель-арта — это четыре вещи: сетка, карандаш, ластик и кнопка экспорта. Всё остальное — слои, анимация, управление палитрой — лишь удобства, надстроенные поверх этого цикла. Редактор здесь работает в браузере. Вы выбираете размер холста, рисуете карандашом в один пиксель и скачиваете PNG. Без установки, без аккаунта, без шага загрузки.

Решение, которое большинство инструментов прячут: размер сетки — самое трудное, что можно обратить вспять. От него зависит всё дальнейшее — сколько пикселей получит лицо, будет глаз одним пикселем или двумя, как спрайт переживёт увеличение в 4 раза в игровом движке. Эта страница охватывает сам редактор, математику сетки, рисование против генерации спрайта, палитры как бюджет и то, как взять только что нарисованного персонажа и поместить его в 3D-мир, по которому можно ходить.

Создатель пиксель-арта (живой холст)

Холст — это сама страница. На первом экране вы получаете растровую сетку фиксированного размера, карандаш, который записывает один пиксель за клик, ластик, который возвращает прозрачное значение, полосу палитры и кнопку экспорта, записывающую PNG. Левый клик рисует, правый клик или клавиша-модификатор стирает, а середина холста всегда показывает истинную границу пикселя, а не масштабированное приближение.

Разберитесь, чем отличается размер холста от размера отображения, до того как что-либо рисовать. Холст 32×32, показанный в размере 800×800, — это по-прежнему 32×32 пикселя данных. Масштаб меняет то, насколько крупно отрисовываются пиксели, но никогда — их количество. Экспорт при увеличенном масштабе по-прежнему записывает файл 32×32, и это правильное поведение, которое почти всех удивляет в первый раз.

Единственная настройка, которую новички делают неправильно, — размер сетки, выбранный после рисования, а не до него. Кто-то набрасывает персонажа на холсте 64×64, результат ему нравится, а затем он хочет втиснуть его в игру с тайлами 16×16. Уменьшение нарисованного вручную спрайта 64×64 до 16×16 через пересэмплирование его уничтожает: детали в два пикселя превращаются в серые размытия, контуры толщиной в один пиксель становятся двухпиксельными серыми линиями, а число цветов растёт, потому что каждый усреднённый край изобретает новое значение. Если вы уже нарисовали не в том размере, перерисуйте в целевом размере, используя старую версию как визуальный ориентир. Это быстрее и чище любого уменьшения и заставляет упростить так, как этого действительно требует меньшая сетка.

Увеличить позже — безопасно. Уменьшить позже — нет. Выбирайте наименьшую сетку, которая вмещает нужные вам детали, и относитесь к каждому потраченному пикселю как к потраченному.

Сетка и шаблоны для пиксель-арта

Люди, ищущие сетку для пиксель-арта, сетку под пиксель-арт или рисование пиксель-арта по сетке, имеют в виду один и тот же объект: ограниченное поле квадратов, где один квадрат — это один пиксель и один цвет. Сетка — не украшение поверх рисунка. Это договор о разрешении. Окружность радиусом 5 — не окружность, а конкретная лестница из одиночных пикселей, которую вы либо расставляете вручную, либо берёте из шаблона.

Шаблоны существуют потому, что первые четыре ряда окружности, изометрического куба или персонажа в виде 3/4 утомительно выводить по памяти и легко ошибиться совсем чуть-чуть. Шаблон — это стартовая позиция, а не готовый спрайт. Вставьте фигуру, затем уберите пиксели, которые не принадлежат вашему персонажу, и перерисуйте контур так, чтобы направление света совпадало с остальным нарисованным.

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

Неравносторонние сетки важны для тайлов. Холст 16×32 — это стоящий персонаж в игре с видом сверху; холст 32×32 — это тайл. Держите эти две категории в отдельных файлах, потому что спрайт персонажа и тайл тайлсета подчиняются разным правилам выравнивания, когда попадают в движок.

Некоторые строят сетку в электронной таблице — одна ячейка на пиксель, — закрашивают ячейки и отдаляются, чтобы проверить, читается ли фигура с первого взгляда. Это работает и даёт одно реальное преимущество: блок глаза 6×6 можно скопировать и вставить в каждую ячейку листа спрайтов, не перерисовывая.

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

Рисовать или генерировать

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

Рисование вручную побеждает, когда вы уже видите силуэт. Если вы знаете форму шлема, точное расстояние между глазами или то, как этот персонаж должен встать рядом с четырьмя существующими спрайтами, расставлять пиксели быстрее, чем описывать их и исправлять результат. Генерация побеждает, когда вы исследуете. Если вы знаете идею — бронированная лягушка в профиль со щитом — но не силуэт, генерация даёт стартовую позицию за один проход вместо сорока решений. Agent Sprite Forge генерирует спрайты из описания прямо в сетку, которую можно продолжать редактировать, и это важно, потому что результат — отправная точка, а не готовый продукт.

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

Исправление механическое и занимает несколько минут на спрайт. Делайте это в одном и том же порядке каждый раз, чтобы не вернуть проблемы, которые вы уже исправили.

Онлайн, бесплатно, без скачивания

Бесплатно охватывает весь цикл рисования: выбор сетки, карандаш, ластик, заливку, редактирование палитры и экспорт PNG. Это не истекает и не прячет экспорт за аккаунтом. Генерация — та часть, у которой есть практические ограничения, потому что создание спрайта стоит вычислений, а установка пикселя — нет. Рисование и экспорт не ограничены по частоте.

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

Экспорт содержит ровно пиксели. PNG в исходных размерах холста, 8-битный RGBA, альфа сохранена. Если вы рисовали на прозрачном фоне, фон остаётся прозрачным — прозрачность это значение, а не цвет, и она переживает экспорт. Если вы рисовали на залитом фоне, эта заливка впечатана в каждый пиксель позади персонажа. Если вам нужен цвет фона, нарисуйте его намеренно. Если вы хотите позже наложить спрайт на что-то, оставьте фон пустым и экспортируйте как есть.

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

Ничто в пути экспорта не добавляет водяной знак, не пересэмплирует изображение и не переименовывает файл под размеры холста. Что нарисовали — то и получите.

Палитры и стили

Цвет — это бюджет, а не предпочтение. Палитра из 16 цветов — ограничение, которое заставляет повторно использовать цвета, а повторное использование и заставляет спрайт читаться как единый объект, а не как куча пикселей. Когда один и тот же средне-коричневый появляется на кожаном ремне, деревянной рукояти и сапоге, глаз объединяет их, и персонаж обретает чёткость. Палитра из 256 цветов — это верёвка, на которой можно повесить спрайт: она позволяет добавлять новый цвет каждый раз, когда вы упираетесь в проблему, и в результате нет внутренней логики. Два спрайта одного художника с двумя несвязанными палитрами по 60 цветов выглядят так, будто пришли из двух разных проектов.

Стройте палитру как градиентные ряды, а не как отдельные цвета. Рабочий набор из 16 цветов — это пять рядов по три тона плюс один отдельный цвет контура. Каждый ряд — это основа, тень и блик. Основа — ваш средний тон. Тень — основа, сдвинутая в тёмную сторону и смещённая к синему или фиолетовому, а не просто затемнённая: тень, полученная одним лишь снижением яркости, читается как грязь. Блик — основа, осветлённая и смещённая к жёлтому. На спрайте 16×16 блики должны покрывать примерно десятую часть пикселей; больше — и источник света перестаёт быть направленным.

Стиль рождается из правил, которые вы применяете последовательно, а не из самих цветов. Общая палитра для всего состава означает, что красный на тунике игрока — то же самое значение RGB, что красный на знамени врага и красный на подбираемом зелье здоровья. В этом весь трюк. Это ничего не стоит соблюдать, и это разница между игрой, которая выглядит продуманной, и игрой, которая выглядит собранной.

Превратите своего пиксельного персонажа в 3D-мир

Передача — это одно предложение: экспортируйте спрайт в масштабе 100 процентов, импортируйте его как текстуру и разместите в мире с целым кратным пиксельной сетки, чтобы пиксели оставались квадратными.

Конструктор 3D-игр берёт эту текстуру и помещает её на плоскость, которая всегда обращена к камере, поэтому персонаж 16×16 читается как персонаж 16×16 из любого ракурса, а не превращается в тонкую полоску, когда вы идёте вбок. Столкновения, гравитация и следящая камера не зависят от спрайта — значит, вы можете позже заменить графику, не трогая контроллер персонажа. Mini World — самое маленькое место, чтобы проверить результат: небольшая проходимая зона, один персонаж, несколько объектов, чтобы натыкаться на них. «Остров Циклопа» — более крупный тест, где высота рельефа и линии обзора сразу показывают, верен ли масштаб спрайта относительно окружения.

Именно на масштабе большинство первых попыток терпит неудачу. Определите коэффициент пересчёта, прежде чем что-либо размещать — один пиксель, равный одной мировой единице, слишком мал для спрайта 16×16 и слишком велик для 128×128. Выберите множитель так, чтобы персонаж получался примерно высотой с дверной проём, и держите этот множитель для каждого персонажа в проекте. Состав, построенный с двумя разными отношениями пикселя к миру, никогда не смотрится правильно, когда стоит рядом.

Масштабирование и увеличение без размытия

У пиксель-арта жёсткие края по самой его природе. Любой сглаживающий фильтр — билинейный, бикубический, фильтр Ланцоша — работает, усредняя соседние пиксели, а усреднение двух цветов палитры даёт третий цвет, которого в вашей палитре нет. Этот третий цвет и есть размытие. Это не настройка отрисовки, которую можно отменить позже; как только изображение пересэмплировано, исходные жёсткие края исчезли.

Увеличивайте только в целых кратных: 2×, 3×, 4×, 8×. Спрайт 16×16 при 4× — это 64×64, и каждый исходный пиксель становится аккуратным блоком 4×4. При 2,5× одни исходные пиксели становятся двумя пикселями в ширину, а другие — тремя, поэтому у спрайта появляется заметная неравномерность по сетке: контуры, толстые в одном месте и тонкие в другом. Исправить это задним числом нельзя, кроме как заново экспортировать в целом кратном.

Настройка, которая тихо губит чёткий спрайт, — это фильтр пересэмплирования, который разные инструменты называют «Интерполяция», «Пересэмплирование», «Пересэмплировать изображение» или флажком «Сглаживание» рядом с масштабом. В большинстве редакторов и программ просмотра изображений он по умолчанию стоит в режиме сглаживания и перефильтровывает изображение при каждом использовании. Поставьте «Ближайший сосед», прежде чем трогать размеры. То же правило действует за пределами графического редактора: текстуре, импортированной в 3D-движок, нужно задать фильтры уменьшения и увеличения как «ближайший сосед», а для пиксельных текстур отключить мипмапы, иначе движок будет сглаживать её при движении камеры. На веб-странице аналог — это свойство image-rendering со значением pixelated, иначе браузер, масштабируя PNG 32×32 до 96 пикселей в ширину, применит собственное сглаживание и на последнем шаге сведёт вашу работу на нет.

Ещё одно: никогда не позволяйте интерфейсу масштабировать спрайт в процентах. Контейнер, который задаёт изображению 100 процентов гибкой ширины, выдаст 2,3× или 3,7× в зависимости от окна, и спрайт будет выглядеть по-разному на каждом экране. Отрисовывайте в исходном размере пикселя и масштабируйте целым множителем либо задавайте размер отображения явно.

Войдите в мир, которому он принадлежит

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

FAQ