Альтернатива Pixelorama — рисуйте спрайты в браузере и генерируйте их, когда рисовать не хочется

Если вы ищете альтернативу Pixelorama, причина обычно одна из трёх: компьютер — это Chromebook, установку блокирует политика, или спрайт нужен раньше, чем вы успеете его нарисовать. Pixelorama — бесплатный редактор пиксель-арта с открытым исходным кодом для настольных систем, с анимацией, слоями и инструментом тайловых карт, и со всеми тремя задачами он справляется хорошо. Эта страница — о браузерной рабочей области, которая закрывает рисование, добавляет путь «опиши и сгенерируй», а затем делает то, чего Pixelorama не умеет: помещает спрайт в 3D-сцену, по которой можно пройти.

Agent Sprite Forge — это редактор спрайтов. Вы вводите именную группу, выбираете направление взгляда и получаете лист; или берёте карандаш в один пиксель и рисуете кадры сами в 16×16, 32×32 или в любом размере, который использует проект. Экспорт — обычный PNG, один кадр или полоса. Дальше 3D-конструктор игр берёт этот PNG как материал для плоскости или билборда внутри Mini World, «Острова циклопа» или сцены, сгенерированной по абзацу текста. Без загрузки и без аккаунта для знакомства.

Что такое Pixelorama и чем она не является

Pixelorama — бесплатный редактор пиксель-арта с открытым исходным кодом, работающий на настольных системах. Он построен на движке Godot, открывается как обычное окно приложения и закрывает те части работы со спрайтами, которые действительно отнимают время: стек слоёв с прозрачностью и режимами наложения, таймлайн анимации с метками кадров и калькой, панель палитры, которая импортирует готовые файлы палитр, и инструмент тайловых карт для сборки тайлсетов, стыкующихся без швов. Для многих людей это честный ответ на фразу «Aseprite стоит денег, а платить за него я пока не готов».

Это также программа для рисования в строгом смысле. Каждый пиксель в файле проекта существует потому, что рука двигала курсор. Здесь нет пути от написанного предложения к спрайту, нет пакетной операции, которая выдаёт сорок вариантов стойки, и нет рендерера. Из программы выходит PNG, упакованный лист или GIF — прямоугольник пикселей без камеры, земли и света.

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

Где заканчивается Pixelorama

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

Остановка вторая: каждый пиксель исходит от вашей руки. Персонаж 32×32 с ходьбой из четырёх кадров — это примерно четыре тысячи решений по пикселям. Опытный пиксель-художник закончит это за 30–60 минут. Тот, кто не делал этого раньше, потратит часы, и большая часть этих часов уйдёт на силуэт — читаемость в малом размере, — а не на тени или цвет. Генерация черновика не отменяет навык. Она переносит его на отбор и исправление, а это гораздо более короткий цикл.

Остановка третья: на выходе — изображение, которому негде стоять. PNG с рыцарем — это не рыцарь в сцене. Чтобы перейти от одного к другому, нужны движок, шаг импорта, материал, решение о масштабе и камера. Это не упрёк Pixelorama; это правильные рамки для редактора. Но когда результат недели — «улица, по которой я могу пройти», 2D-редактор оказывается одним шагом из пяти.

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

Pixelorama и браузерный инструмент для спрайтов: рядом

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

Две строки, которые решают большинство проектов

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

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

Попробуйте браузерный редактор здесь

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

Самый быстрый путь к чему-то пригодному лежит через поле генерации, и формулировка имеет значение. Вводите именную группу, а не предложение: «рыцарь в доспехах с копьём» даёт более связный спрайт, чем «рыцарь, который стоит в лесу и выглядит храбрым». Направление взгляда выбирайте после. Направление — не косметика: игре с видом сверху или в три четверти нужны четыре, и каждое — отдельный лист со своим силуэтом.

Рисовать или описывать: два способа получить один спрайт

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

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

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

Рабочий процесс с альтернативой Pixelorama: сгенерируйте лист, исправьте вручную

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

Кадры, полосы и листы

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

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

У персонажа высотой 16 пикселей после отрисовки контура остаётся около четырнадцати рабочих пикселей. Этого хватает на направление взгляда, форму головы, один предмет в руках, шлем и положение ног. Этого не хватает на мимику, пальцы, складки одежды или оружие, которое должно опознаваться по типу, а не по направлению. Распределяйте бюджет до рисования — голова 5, торс 6, ноги 5 — и примите, что лицо — это два тёмных пикселя и ничего больше. При высоте 32 пикселя появляются рот, пояс и двуцветное оружие. На 64 вы уже рисуете, а не намекаете, и ходьба из четырёх кадров начинает выглядеть скованно, потому что добавленная детализация требует больше выборок движения.

От спрайта к улице, по которой можно пройти

Это шаг, который 2D-редактор не делает. В 3D-конструкторе игр PNG — это текстура. Вы ставите плоскость, назначаете спрайт, задаёте материал без освещения или с лёгким освещением, и персонаж занимает то же координатное пространство, что улица, стены и камера. «Остров циклопа» — демо, на которое стоит посмотреть: пиксельные персонажи, низкополигональный остров, камера, которой вы управляете. Mini World делает то же самое в меньшем масштабе, а пиксель-арт-сцена Opus показывает обратную компоновку, где сама среда ограничена пикселями, а спрайты — единственные резкие края в кадре.

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

Масштаб — место, где большинство первых попыток выглядит неправильно. Привяжите один пиксель спрайта к известной доле мировой единицы и никогда её не меняйте. Если персонаж высотой 32 пикселя и должен быть 1,8 единицы, плоскость имеет высоту 1,8 единицы и ширину 1,8 для квадратного кадра. Держите множитель целым. Плоскость в 1,35× от родной пиксельной сетки даёт неравномерную ширину пикселей — часть столбцов попадает на два экранных пикселя, часть на один, — и весь персонаж мерцает при движении камеры. Затем закрепите его: ступни стоят на нижнем крае плоскости, и этот край касается земли, а не центр плоскости.

Почему жёсткие пиксельные края рядом с мягкой средой — это выбор

У 3D-стороны есть градиентное небо, фильтрованные тени и сглаженная геометрия. У спрайта всего этого нет. Несовпадение работает как подсказка глубины: персонаж вырывается из фона, потому что он единственный квантованный элемент в кадре. Кроме того, его дешевле создать, чем 3D-персонажа с ригом, скелетом и анимациями. Если вы смягчите спрайт размытием или мипмапами, чтобы «подогнать» под среду, вы потеряете отрыв и сохраните затраты.

• Фильтрация текстурыБлижайший сосед. Точечная выборка, никогда линейная.
• МипмапыВыключены. Мипмапы усредняют соседние пиксели и превращают жёсткий контур в серую кашу на расстоянии.
• Анизотропная фильтрацияВыключена или 1×. Она возвращает мягкость, которую вы только что убрали.
• Масштаб плоскостиЦелое кратное родного размера пикселя, с точкой привязки у ступней.

Бесплатно, без установки, без аккаунта

Бесплатная часть покрывает весь описанный цикл: редактор спрайтов, поле генерации, инструменты рисования, слои, кадры, экспорт PNG одним кадром или горизонтальной полосой и помещение этого PNG в 3D-сцену, по которой можно ходить. Аккаунт для знакомства не нужен, и на экспорте нет водяного знака.

Об ограничениях стоит сказать до того, как вы потратите день:

В чём альтернатива Pixelorama хуже

Нет программного интерфейса для скриптов. Если вам нужно пакетно переименовывать кадры, запекать атлас или управлять редактором из скрипта сборки, подключиться не к чему.

Нет экосистемы плагинов. Путь расширения в Pixelorama означает, что другие люди могут добавлять экспортёры и инструменты; здесь вы получаете то, что вышло.

Нет глубокого редактора тайловых карт. Здесь нет сетки автотайлинга, нет назначения столкновений для отдельных тайлов, нет упаковки тайлсетов. Если проект — 2D-игра на тайловой карте, собирайте карту в движке.

Ограничения холста. Рабочая область рассчитана на холсты размером со спрайт. Комфортный диапазон — от 16×16 до 128×128 на кадр, и 256×256 работает, но это не инструмент для иллюстрации на 4000 пикселей с сорока слоями; и набор инструментов, и поведение масштабирования перестают быть приятными задолго до этого.

Генерация не детерминирована и не обходится без исправлений. Тот же запрос, другой сид — другой результат. Вы отбросите больше, чем оставите, и отбрасывание и есть работа.

Инструмент становится альтернативой, только если вы можете назвать, в чём он хуже. Вот наши слабые места. Используйте этот инструмент для цикла «спрайт — сцена», а Pixelorama держите установленной для работы, которой нужен настоящий путь расширения, офлайн-редактирование и индексированная палитра, которую можно зафиксировать.

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

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

FAQ