Руководство по изометрическому пиксель-арту — тайлы, спрайты и персонажи

Изометрический пиксель-арт рисуют на ромбовидной сетке 2:1: каждый тайл ровно в два раза шире, чем выше, а высота рисуется вертикальной последовательностью пикселей, а не имитируется перспективной камерой. 32×16 — рабочий размер тайла, 64×32 — для крупных сцен, 16×8 — для мелких объектов и персонажей. Как только вы принимаете соотношение 2:1, все остальные решения — основания спрайтов, циклы ходьбы, швы, сортировка по глубине — следуют из него.

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

Краткий ответ: что делает пиксель-арт «изометрическим»?

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

Соотношение — 2 вправо к 1 вниз по обеим осям земли, что ставит каждый край земли примерно на 26,57° от горизонтали. Технически это диметрическая проекция; истинная изометрия имеет одинаковое сокращение по всем трём осям примерно на 35,264° выше горизонта и даёт тайл земли около 1,732:1. Название прижилось, потому что «изометрия» — то слово, которое используют люди, и почти каждый тайлсет, который вы найдёте, нарисован в 2:1.

Сетка 2:1

2:1 существует потому, что оно отображается на квадратные пиксели. Край с шагом 2 вправо и 1 вниз — это чистая лесенка: два пикселя вправо, один вниз, и так далее, — поэтому каждый пиксель края попадает на целый пиксель, когда вы штампуете тайл. Истинная проекция 30° — это отношение примерно 1,732 к 1: на каждые 2 пикселя вправо вы смещаетесь на 1,155 вниз. Это не ложится на пиксельную сетку, поэтому края чередуются между отрезками в один и два пикселя, и линия «дрожит». Вы можете расставить эти пиксели вручную для одного ключевого объекта; но не сможете сделать это для тайлсета, который нужно штамповать тысячами копий.

Ошибка, с которой люди действительно сталкиваются, — это повернуть квадратный холст на 45° и назвать результат изометрией. Квадрат, повёрнутый на 45°, остаётся квадратом: у ромба одинаковая ширина и высота, верхняя и боковые грани получают одинаковый силуэт, а соседние ряды глубины перестают чётко разделяться. Рисуйте ромб в 2:1 с первого пикселя; никогда не поворачивайте спрайт 16×16 или 32×32, чтобы получить тайл.

Держите шаг тайла в голове как смещение. При 32×16 смещение на один тайл на восток — это +32 по x и +16 по y в экранном пространстве; смещение на один тайл на север — это +32 по x и −16 по y. Именно эту пару смещений вы используете для размещения, движения спрайтов и сортировки по глубине.

Рисуем ваш первый изометрический тайл

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

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

Изометрические спрайты и спрайт-листы

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

Движение на экране — диагональное. Смещение на один тайл карты на восток — это +32 пикселя вправо и +16 вниз; на один тайл на север — +32 вправо и −16 вниз. Значит, цикл ходьбы лицом на восток — не горизонтальная петля: тело смещается вдоль наклона 2:1, пока ноги переставляются. Если смещения покадрово нарисованы по горизонтальной линии, персонаж «скользит» по тайлу. Проверьте это, разместив четыре копии вдоль диагонали и убедившись, что ноги следуют за центрами тайлов.

Разложите лист так, чтобы строки соответствовали направлению, а столбцы — кадру, в одинаковых ячейках. Основание 32×16 с персонажем высотой 32 пикселя помещается в ячейку 32 в ширину на 48 в высоту: 16 пикселей на ромб, 32 над ним на тело. Держите альфа-канал бинарным — 0 или 255. Полупрозрачные пиксели по краям подхватывают то, что находится позади них, когда лист упакован или отмасштабирован, и вы получаете светлый ореол вокруг каждого персонажа на тёмном тайле.

Изометрические персонажи (4/8 направлений)

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

Движку нужен детерминированный способ поиска. Либо строка равна индексу направления, а столбец — кадру, либо используется плоский индекс directionIndex * framesPerDirection + frame. Запишите порядок в текстовом файле рядом с листом. Классический баг — лист, нарисованный начиная с востока, но импортированный начиная с юга, из-за чего одно направление смотрит назад, а в отчёте об ошибке появляется «анимация ходьбы выглядит неправильно».

Количество кадров и тайминг

Цикл ходьбы читается при 8–12 кадрах в секунду. Четыре кадра при 8 кадр/с — это 125 мс на кадр; шесть кадров позволяют нарисовать контактную и проходящую позы и двигаются плавнее по диагонали 2:1 без особых дополнительных усилий. Держите число кадров одинаковым в каждой строке направлений, если только метаданные не хранят количество для каждого направления: строка из шести кадров рядом со строками из четырёх играет с неправильной скоростью, как только код предполагает равномерную сетку. Покой — это один или два кадра в медленной петле. Атаки и взаимодействия идут на отдельном листе с тем же размером ячейки, чтобы точка привязки никогда не менялась.

Отражение дешевле — и обычно неправильно

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

Объекты, декорации и высота

Графическая рамка объекта выше его основания. Дерево с основанием 1×1 (32×16) и кроной высотой 40 пикселей над ним требует ячейки шириной 32 и высотой около 56: 16 на ромб, 40 на то, что поднимается выше. Решите этот размер ячейки один раз и держите каждый объект внутри одного модуля, иначе импортёру понадобится смещение для каждого спрайта отдельно.

Объекты размером в несколько тайлов рисуются на большем ромбе. Здание 2×2 покрывает четыре тайла, поэтому его основание на земле — ромб 64×32, даже если графика поднимается на 48 или 64 пикселя выше. Держите начало координат в центре основания — для объекта 2×2 это точка, где сходятся четыре тайла, — а не в центре ограничивающего прямоугольника спрайта. Центрирование по ограничивающему прямоугольнику смещает основание на полтайла, и здание выглядит так, будто парит над одним из углов своего участка.

Сортировка по глубине в 2D-изометрическом рендерере — это алгоритм художника: сортировка по tileX + tileY, затем разрешение равенства через приоритет каждого объекта. Высокие объекты её ломают. Башня высотой шесть тайлов, поставленная в ряд 2, рисуется поверх стены в ряду 5, которая должна её перекрывать. Два решения: разделите высокие объекты на основание и верхнюю часть и сортируйте каждую по рядам, которые она фактически покрывает, либо задайте каждому спрайту маску занятости по тайлам, чтобы рендерер знал, какие ряды она перекрывает.

Тайлсеты, которые не повторяются

В изометрическом наборе есть два шва, и они требуют разных решений. Шов значения — там, где боковая грань встречается с верхней гранью тайла под ней: если основание стены светлее верха земли, вы получаете яркую линию вдоль каждой стены на карте. Шов узора — там, где повторяется ряд одинаковых тайлов земли: шаг 2:1 достаточно регулярен, чтобы глаз зацепился за ритм примерно через три тайла.

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

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

• Набор блобов из 47 тайловПокрывает все комбинации из четырёх и восьми соседей, включая случаи «только по диагонали», которые не входят в набор из девяти тайлов. То же число тайлов, что и в ортогональном наборе блобов; меняется только графика.
• Набор из девяти тайловЦентр, четыре тайла с одним краем, четыре угловых тайла. Дешёв в рисовании, покрывает большинство переходов земли и даёт сбой только на случаях «только по диагонали», если ваши правила размещения запрещают их генерацию.
• Зеркальные вариантыОтражение тайла земли по горизонтали — бесплатная вариация, когда у тайла нет световых подсказок. Никогда не отражайте стену или освещённый объект: направление света переворачивается вместе с ним, и тайл перестаёт совпадать с соседями.

От 2D-изометрии к играбельному 3D-изометрическому миру

Ромб 2:1 — это то, что вы получаете от ортографической камеры при рыскании 45° и наклоне 30°. При 30° вертикальное сжатие равно ровно sin(30°) = 0,5, поэтому квадратный тайл земли проецируется в ромб вдвое шире, чем выше, — то же соотношение, что и у нарисованных пикселей. Истинный изометрический наклон 35,264° даёт 1,732:1 и не совпадёт с тайлсетом 2:1. Так что тайл 32×16 чисто отображается на мировую единицу 1×1, и весь 2D-набор можно использовать как текстуры на плоских квадах или вытянуть в блоки, ничего не перерисовывая.

Две вещи ломаются, когда камера движется. Первое — свободное вращение: при рыскании 37° края тайлов попадают между пикселями, и вся карта мерцает. Зафиксируйте наклон на 30°, привяжите рыскание к шагам 90°, а если анимируете поворот, верните к шагу, прежде чем он остановится. Второе — освещение: графика несёт запечённый свет сверху слева. Если основной свет остаётся неподвижным в мировом пространстве, а камера поворачивается на 90°, затенение в графике начинает противоречить сцене. Привяжите основной свет к камере либо запеките затенение в текстуру и держите свет относительно экрана.

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

Конструктор 3D-игр от Neta Studio принимает текстовое описание и строит настоящий мир на Three.js в браузере с ортографической камерой при фиксированном наклоне — проходимый, без локального набора инструментов. Mini World — это его уменьшенная версия, и это самый быстрый способ проверить, правильно ли читаются тайлсет и набор персонажей, прежде чем браться за большую карту. The Cyclops' Island — готовый пример мира, по которому можно пройтись и увидеть проекцию в действии. Для персонажей Agent Sprite Forge создаёт спрайт-листы заданного размера ячейки, и именно это сохраняет точку привязки согласованной по всем направлениям.

Программное обеспечение для изометрического пиксель-арта

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

Выбирайте по тому, что вам нужно создать, а не по спискам функций. Тайлам нужны сетка, предпросмотр тайлов и стабильная палитра. Персонажам нужны калька, одинаковые ячейки и экспорт листа, который несёт точку привязки. Картам нужен инструмент, который хранит координаты тайлов, потому что PNG — это не карта.

• AsepriteРастровый редактор с режимом карты тайлов, сеткой тайлов, калькой и экспортом листа с JSON, который несёт теги кадров и точку привязки. Именно предпросмотр тайлов — причина, по которой его используют для тайлсетов: вы видите шов, пока его рисуете.
• LibreSpriteРедактор с открытым исходным кодом на той же кодовой базе. Работа с тайлами в основном та же; ожидайте меньше поздних функций.
• Krita и PhotoshopОбычные растровые редакторы. Направляющие сетки и симметрия дают вам ромб, но ни у одного нет режима карты тайлов, поэтому вы штампуете вручную. Фильтр смещения — сдвиньте холст на половину размера тайла и посмотрите в середину — по-прежнему самый быстрый способ найти шов значения.
• TiledРедактор карт, а не графический инструмент. Хранит координаты тайлов, поддерживает изометрическую ориентацию с размером тайла 2:1 и экспортирует данные слоёв. Рисуйте в одном инструменте, размещайте в другом.
• Конструктор 3D-игр от Neta StudioРаботает в браузере. Текстовое описание становится играбельным изометрическим миром на Three.js, так что вы полностью пропускаете локальный набор инструментов и шаг импорта и проверяете, читается ли графика при правильном наклоне камеры.
• Agent Sprite ForgeСоздаёт спрайт-листы для персонажей — обычно это самая долгая часть изометрического набора. Зафиксируйте размер ячейки и число направлений до генерации; лист, построенный с другим размером ячейки, не подойдёт к вашим тайлам.

Прогуляйтесь по миру, которому он принадлежит

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

FAQ