Конструктор RPG-спрайтов — создавайте персонажей, спрайты и тайлсеты бесплатно
Создайте собственный конструктор RPG-спрайтов
Создавайте спрайты персонажей, спрайт-листы и тайлсеты для RPG из одной фразы. Бесплатно, онлайн, без навыков рисования — а затем поместите их в играбельный мир.
Конструктор RPG-спрайтов превращает текстовое описание в готовую игровую графику. Вы вводите что-то вроде «старый рыбак, синее пальто, соломенная шляпа, вид сверху, 32 на 32, ходьба из четырёх кадров», и генератор возвращает спрайт персонажа, спрайт-лист или тайлсет в виде PNG с прозрачным фоном. В основе лежит Agent Sprite Forge, и работает он в браузере внутри Neta Studio. Ничего не нужно устанавливать, не нужен графический планшет и не нужно держать открытым редактор пиксель-арта во втором окне.
В графике для RPG сложна не столько её красота, сколько количество. Небольшой игре нужны игрок, восемь NPC, четыре торговца и двадцать вариантов врагов, причём большинство — минимум в двух направлениях. Это примерно сорок персонажей ещё до того, как вы нарисовали хотя бы одно дерево. Большинство людей, делающих RPG, не умеют рисовать почти никого из них. Генератор, который за секунды выдаёт согласованный, пусть и немного простоватый спрайт 32x32, для завершённого проекта ценнее одной красивой иллюстрации, на которую ушли выходные.
Создайте состав персонажей, который сами нарисовать не сможете
Начинайте с состава персонажей, а не с героя. Герой — единственный персонаж, которого вам действительно понравится рисовать и дорабатывать. Проекты умирают именно на составе персонажей: кузнец, подмастерье кузнеца, три стражника в чуть разных доспехах, торговец, ребёнок, собака, шесть слаймов и волк. Каждый из них — небольшая художественная задача, а сорок небольших художественных задач — это стена. Agent Sprite Forge существует, чтобы помочь вам её перейти, чтобы мир был населён, пока вы не выдохлись.
На вход подаётся описание, и это описание и есть весь интерфейс. Хорошее описание называет четыре вещи: кто такой персонаж, во что он одет, палитра и точка обзора. «Стражник, тёмно-синяя накидка поверх кольчуги, копьё, вид сверху, 32x32, два направления» — это рабочее описание. «Крутой воин» — нет, и ошибка предсказуема: генератор берёт общие детали, у вас получается рыцарь в сером, и вы пять раз перегенерируете, пытаясь исправить проблему описания кнопкой повтора.
Вторая ошибка — переизбыток описания. При ширине 32 пикселя персонаж — это примерно голова, туловище и две ноги. Плащ, рюкзак, шарф, наплечник и светящийся амулет борются за одни и те же двенадцать пикселей силуэта. На малых размерах реквизит не добавляет детализации — он добавляет шум. Если первая генерация вышла нечитаемым комком, уберите предметы из фразы, прежде чем менять что-либо ещё. Конструктор 3D-игр и миры вроде Mini World и The Cyclops' Island используют тот же принцип: сначала читаемые формы, потом украшения.
Примеры сгенерированного
Три формы результата покрывают почти всё, что нужно RPG. Каждая экспортируется как PNG с альфа-каналом, и каждая попадает в своё место. Эти различия важнее стиля графики: лист с неправильной сеткой непригоден, как бы хорошо ни выглядел спрайт.
Одна поза
Один персонаж, один кадр, один файл. PNG 32x32 с прозрачностью — это наименьшая полезная единица. Именно её вы генерируете для стоящего NPC, торговца за прилавком, указателя, сундука или врага, который никогда не двигается. Экспортируется как PNG из одной ячейки.
Он ставится как текстура на плоскую плоскость или на билборд, обращённый к камере. В конструкторе 3D-игр спрайта в одной позе на билборде достаточно для целой деревни статичных NPC, а поскольку состояния анимации нет, ломаться нечему. Если список персонажей большой, а времени мало, это формат по умолчанию.
Лист цикла ходьбы
Четыре кадра, разложенные слева направо и экспортированные полосой или сеткой. Четыре кадра 32x32 в одном ряду — это PNG 128x32. Четыре направления дают сетку 4x4 размером 128x128, а два направления — сетку 4x2 размером 128x64. Цикл ходьбы зацикливается переключением индекса кадра во времени; при восьми кадрах в секунду ходьба из четырёх кадров занимает полсекунды на шаговый цикл и читается корректно при обычной скорости движения.
Экспортируется как один PNG плюс необязательный сопроводительный JSON-файл с описанием размера кадра, числа кадров, столбцов и направлений. Этот файл — обычные метаданные, а не закрытый формат. Если вы предпочитаете его не использовать, числа видны в размерах PNG: 128 разделить на 32 — это четыре кадра.
Атлас тайлсета
Сетка тайлов рельефа в одном изображении: трава, края травы, грунтовые тропы, вода и её берега, верхушки стен, переходы пола. При ячейках 16x16 атлас 8x8 — это PNG 128x128 с 64 тайлами. При 32x32 те же 64 тайла требуют 256x256.
Экспортируется как единый PNG-атлас. Он встаёт в слой карты Tiled, в TileSet Godot или в тайловый меш Three.js. Важно, чтобы размер ячейки точно совпадал с сеткой карты. Если вы сгенерируете тайлы 32x32 и поставите их на сетку с шагом 16 единиц, каждый второй тайл встанет со смещением в полтайла, и швы будут заметны даже с орбиты.
Спрайты персонажей, спрайт-листы и тайлсеты: в чём разница
В разговоре эти три понятия используют как взаимозаменяемые, но в проекте они таковыми не являются. Спрайт персонажа — это один кадр, и он не несёт информации о тайминге. Спрайт-лист — это сетка кадров одного персонажа, и он несёт порядок кадров. Тайлсет — это сетка разных элементов рельефа, и он несёт информацию о смежности. Выберите не то, и вы будете резать тайлсет на кадры анимации или выкладывать кадры цикла ходьбы вместо пола.
Формат определяет потребитель, а не генератор. Спросите, что будет читать файл: слот листа персонажа хочет фиксированную сетку, начинающуюся с ячейки в левом верхнем углу, без отступов и полей; тайловый слой хочет одинаковые ячейки с известным началом отсчёта; узел изображения в интерфейсе хочет один кадр. Отступы — самая частая ошибка при экспорте. Поле в один пиксель, добавленное «на всякий случай», сдвигает каждый индекс кадра на единицу и смещает всю анимацию.
Число кадров и направления на практике
Два направления (влево и вправо, со спрайтом, зеркально отражённым для другой стороны) вдвое уменьшают лист и являются стандартным приёмом для игр с видом сбоку. Четыре направления (вниз, влево, вправо, вверх) — это стандарт для вида сверху, и им нужна квадратная сетка, поэтому ходьба из четырёх кадров в четырёх направлениях — это 16 кадров. На восьми направлениях большинству небольших команд стоит остановиться и подумать; лист вырастает до 32 кадров на персонажа, а хуже всего при 32 пикселях читаются именно диагональные позы.
Рабочие значения числа кадров: 2 — для жёсткого покачивания в стойке, 4 — для ходьбы, 6 — для более плавной ходьбы, 8 — для бега. Меньше 4 — и ходьба выглядит как хромота. Больше 8 — и вы платите за кадры, которых игрок сознательно не увидит.
| Формат | Для чего нужен | Сетка и раскладка | Часть движка, которая его использует |
|---|---|---|---|
| Спрайт персонажа | Статичные NPC, реквизит, указатели, враги в одной позе, графика диалогов при увеличении | Один кадр, без сетки. Частые ячейки: 32x32 или 48x48 | Текстура на плоскости или билборде в конструкторе 3D-игр; любой слот текстуры в 2D-движке |
| Спрайт-лист | Циклы ходьбы, покой, атака, урон и смерть; один лист на персонажа | Фиксированная сетка, например 4 столбца на 1 строку из 32x32 = 128x32; 4x4 для четырёх направлений = 128x128 | Анимированное смещение UV в Three.js; режим спрайта Multiple в Unity с нарезкой по размеру ячейки; AnimatedSprite2D в Godot |
| Тайлсет / атлас автотайлов | Земля, тропы, вода и берега воды, стены, переходы пола | Однородный атлас, например 8x8 ячеек по 16x16 = 128x128; изометрические ромбы 32x16 | Слой карты Tiled; инстансные тайловые меши Three.js; TileSet в Godot с совпадающим размером ячейки |
| Портрет / бюст | Диалоговые окна, меню группы, экраны магазина | Один кадр, ячейки побольше — от 64x64 до 144x144 | Узел изображения интерфейса внутри конструктора 3D-игр или любой слой HUD |
Как это работает
Пять шагов в таком порядке. Пропуск проверки силуэта на четвёртом шаге — вот почему люди генерируют двадцать раз и всё равно получают что-то непригодное.
01
Опишите персонажа одной фразой. Назовите роль, одежду, палитру и точку обзора — именно в этом порядке. Проверьте до генерации: прочитайте фразу кому-нибудь ещё. Если он представит себе другого персонажа, описание слишком расплывчато, и результат будет таким же.
02
Выберите число кадров и размер кадра. Один кадр — для реквизита и статичных NPC, четыре — для ходьбы. Проверьте арифметику до того, как зафиксируете выбор: размер кадра, умноженный на число столбцов, должен точно равняться ширине листа. 32 x 4 = 128 — хорошо. 256 делится на 48 как 5,33, а это значит, что кадр будет подтекать.
03
Сгенерируйте. Лист возвращается как PNG с альфа-каналом плюс сопроводительный JSON-файл с размером кадра и числом столбцов. Сверьте размеры файла с числами, которые вы задали; если ширина не равна размеру кадра, умноженному на число столбцов, остановитесь здесь и перегенерируйте, а не исправляйте это на следующих этапах.
04
Проверьте силуэт при масштабе 100 процентов. Уменьшите изображение до примерно того размера, который персонаж будет занимать на экране, и посмотрите на контур. Мысленно залейте его сплошным чёрным. Если вы не можете отличить руки от туловища или шляпу от головы, спрайт непригоден в этом размере. Исправьте это, убрав реквизит или перейдя к большему размеру кадра, а не повторными перегенерациями.
05
Экспортируйте и проверьте альфу на фоне-шахматке. Нужно убедиться в двух вещах: на краях нет белого или серого ореола и в последнем столбце текущего кадра не видно ни одного пикселя следующего кадра. Если ореол есть, значит файл где-то в конвейере был склеен со светлым фоном.
Поместите это в мир
PNG в папке загрузок — это ещё не продукт. На этом шаге останавливается большинство генераторов спрайтов, и именно он решает, действительно ли вы что-то завершили. Лист становится игрой только тогда, когда его размещают на сетке, задают ему объём столкновений и управляют им таймером анимации.
В конструкторе 3D-игр разместить лист можно в той же сессии браузера, которая его сгенерировала. Размер ячейки тайлсета задаёт сетку мира, поэтому тайл 32x32 означает, что все боксы столкновений привязываются к шагу в 32 единицы. Это единственное решение устраняет целую категорию ошибок: никаких зазоров в полтайла по углам, никакого игрока, застрявшего между двумя тайлами пола. Спрайт-лист становится анимированным билбордом на четырёхугольнике, а камера выставляется под изометрическим углом 2:1 (около 26,57 градуса), чтобы ромбовидный тайл 32x16 читался как квадратный пол.
Миры, построенные так, работают в браузере без установки среды выполнения движка и без этапа сборки. Mini World и The Cyclops' Island — оба примера того, как письменное описание превращается в играбельную сцену Three.js, и это тот же путь, который проходит ваш сгенерированный состав персонажей. Рабочий порядок: сначала сгенерируйте тайлсет, потом состав персонажей, затем разместите игрока и только после этого добавляйте NPC. Если вы начнёте с состава персонажей, вы не будете знать размер земли.
- Столкновения по тайламБоксы столкновений строятся по тайловой сетке, поэтому они остаются выровненными по сгенерированному вами тайлсету.
- Анимированные билборды спрайтовКадры листа переключаются по таймеру через смещение UV, поэтому ходьба из четырёх кадров проигрывается из того же PNG, который вы экспортировали.
- Пресет изометрической камерыУгол камеры 2:1 сочетается с ромбовидными тайлами, поэтому тайл 32x16 занимает на экране квадратный след.
- Без установки движкаМир работает на Three.js прямо во вкладке браузера. Не нужно скачивать редактор и нет этапа экспортной сборки, прежде чем вы сможете пройтись по нему.
Бесплатно, онлайн, без установки: конструктор RPG-спрайтов работает в браузере
Конструктор спрайтов бесплатен и работает онлайн. Нет установщика, настольного приложения, плагина и графической программы, которую нужно покупать. Вы открываете страницу, вводите описание и получаете PNG. Он использует canvas браузера и WebGL2, поэтому уже имеющейся у вас машины достаточно.
То, что вы получаете на выходе, намеренно простое. Экспорт — это стандартные файлы PNG с альфа-каналом, с выбранным вами размером кадра и размерами листа, плюс необязательный JSON-файл с описанием размера кадра, числа кадров, столбцов и направлений. Никакого закрытого контейнера. Ничто не привязывает графику к Neta Studio. Если завтра вы отнесёте PNG в другой инструмент, он откроется.
Что не входит в комплект, чтобы вы могли это учесть: нет скелетной привязки, костной анимации и автоматической интерполяции между кадрами. Каждый кадр — это плоское изображение. Ходьба из четырёх кадров — это четыре изображения. Это ограничение, и именно поэтому файлы остаются переносимыми: плоские кадры работают в любом существующем 2D-конвейере.
Размеры спрайтов для RPG — как выбрать сетку в конструкторе RPG-спрайтов
Три размера покрывают большинство задач для RPG: 16, 32 и 48 пикселей на кадр. 16x16 даёт плотные карты и ретро-вид, а вьюпорт 640x360 показывает сразу большую часть мира, но лица становятся нечитаемыми. 32x32 — безопасный вариант по умолчанию: он оставляет достаточно места для читаемых головы, туловища и ног и нацело делится на все распространённые размеры листа. 48x48 — для персонажей, которым нужны различимые черты лица, для мобильных и сенсорных целей, которые должны быть достаточно крупными, чтобы по ним попадать пальцем, и для игр с меньшим числом видимых тайлов.
Правило, которое важнее выбранного размера: размер кадра должен нацело делить ширину листа. Лист шириной 256 пикселей вмещает ровно восемь кадров по 32 пикселя. Он не вмещает кадры по 48 пикселей; 256 разделить на 48 — это 5,33, поэтому шестой столбец обрезается вдвое, и сэмплер читает соседний кадр. На практике вы видите на левом краю текущей позы столбец в один пиксель от следующей позы, и это выглядит как ошибка рендеринга, хотя на самом деле это ошибка в арифметике. Кроме того, задайте фильтрацию текстуры по методу ближайшего соседа (NearestFilter в Three.js, фильтр выключен в Godot, Point в Unity). Линейная фильтрация смешивает соседние пиксели на границах кадров и превращает чёткий спрайт в размазню.
Руководство по размерам спрайтов на этом сайте перечисляет полный набор с арифметикой листа для каждого размера, включая изометрические ромбовидные размеры, где ячейка 32x16 или 64x32, а не квадрат.
| Размер кадра | Куда подходит | Арифметика листа | Ошибка, за которой следить |
|---|---|---|---|
| 16x16 | Плотные карты, ретро-вид, большая видимая область, много тайлов на экране | Лист 256x256 = 16 столбцов на 16 строк | Лица и мелкий реквизит сливаются в одно пятно; шляпа и борода становятся одной формой |
| 32x32 | Стандарт для 2D RPG и самый безопасный первый выбор для нового проекта | Лист 256x256 = 8 столбцов на 8 строк; полоса 128x32 = 4 кадра | Реквизит читается как шум; плащ или рюкзак делают силуэт нечитаемым |
| 48x48 | Более детальные NPC, более крупные персонажи на экране, удобные для касания цели | Лист 288x288 = 6 столбцов на 6 строк. 256 не делится на 48 | Ширина листа, не делящаяся нацело, приводит к подтеканию следующего кадра в текущий на краю столбца |
Войдите в мир, которому он принадлежит
Спрайт сам по себе — это персонаж, которому негде стоять. Важен шаг, которого не даст редактор: возьмите только что созданный лист и поместите его в мир, по которому можно пройти. Изометрические миры на этом сайте все были построены и опубликованы именно так.
FAQ
Конструктор RPG-спрайтов бесплатный? +
Да. Генерация спрайтов, листов и тайлсетов в браузере бесплатна, и установщик не нужен. Экспорт — стандартный PNG, поэтому файлы остаются у вас независимо от того, что вы будете делать дальше.
Может ли он сделать полный тайлсет, а не один тайл? +
Да. Он генерирует однородный атлас, например 64 тайла в сетке 8x8 из ячеек 32x32. После экспорта проверьте две вещи: совпадает ли размер ячейки с сеткой карты, на которую вы будете их ставить, и стыкуются ли края воды и троп на границах тайлов в местах их соединения.
Какие размеры спрайтов поддерживаются? +
16x16, 32x32 и 48x48 покрывают практически все задачи для RPG, плюс изометрические ромбы 32x16 и 64x32. Сначала выберите размер, а затем ширину листа, которая является его точным кратным, потому что 48 не делит 256 нацело.
Можно ли использовать сгенерированные спрайты в Unity или Godot? +
Да, это обычные PNG с альфа-каналом. В Unity задайте режим спрайта Multiple, нарежьте по размеру ячейки, установите число пикселей на единицу равным размеру кадра и отключите сжатие. В Godot импортируйте как текстуру с выключенным фильтром, затем задайте размер ячейки TileSet или AnimatedSprite2D точно равным размеру кадра.
Нужно ли уметь рисовать? +
Нет. Нужно уметь описать персонажа одной фразой и оценить, читается ли контур в малом размере. Второй навык тренируется за один вечер: уменьшите спрайт до его экранного размера и проверьте, различаете ли вы ещё руки и туловище.
Корректно ли экспортируется прозрачность? +
Да, экспорт включает 8-битный альфа-канал и не содержит фона. Проверьте это, открыв PNG поверх шахматного фона, а не белого; белый ореол по краям означает, что файл где-то в вашем конвейере был склеен с фоном, а не то, что экспорт был неверным.
Можно ли с его помощью анимировать цикл ходьбы? +
Да. Четыре кадра — практический минимум для ходьбы, а восемь кадров в секунду читаются корректно при обычной скорости движения. Экспортируйте полосой (128x32 для четырёх кадров по 32 пикселя) или сеткой, а затем переключайте индекс кадра по таймеру через смещение UV, если управляете им в конструкторе 3D-игр.
Какой бесплатный конструктор RPG-спрайтов лучший? +
Мы делаем один из них, так что считайте это предупреждением о предвзятости. Полезный критерий — не набор функций, а то, совпадает ли сетка экспорта с движком, который будет его использовать, и останавливается ли инструмент на PNG или идёт дальше, к чему-то играбельному. Если вам нужна ручная попиксельная правка результата, соедините любой генератор с редактором пиксель-арта; если вам нужно, чтобы спрайт ходил по миру в той же вкладке браузера, — именно это делает наш.
Вернуться в конструктор 3D-игр
Все 31 готовых 3D-мира, игры и сцены на одной странице — и во все можно играть.