Как пользоваться инструментом «Наложение сетки»
- Перетащите спрайт, спрайт-лист или тайлсет. Размер ячейки определяется по сетке кадров.
- Задайте ширину и высоту ячейки (16×16 и 32×32 — в один клик) и смещение, если тайлы начинаются не с 0,0.
- Выберите цвет, непрозрачность и толщину линий и при необходимости добавьте основные линии каждые 2, 4 или 8 ячеек, чтобы разбить на секции.
- Выберите масштаб экспорта: линии сетки ложатся между увеличенными пикселями.
- Скачайте PNG.
Что вы получаете
- Увеличенный PNG с сеткой ячеек
- Необязательная тонкая сетка в 1px и основные линии
- Необязательная внешняя рамка
Советы из практики геймдева
- Для туториалов используйте масштаб 8× и больше. В 1× линии сетки приходится рисовать поверх пикселей, и они закрывают рисунок.
- Выберите цвет линий, которого нет в палитре (обычно подходит голубой или пурпурный), чтобы линии не путали с рисунком.
- Основные линии каждые 4 ячейки помогают, когда вы документируете комнату 64×64 из тайлов 16×16.
- Поля смещения позволяют проверить, есть ли у тайлсета поле в 1px, до импорта в Tiled или в движок.
Сценарии использования
- Документировать тайлсет для команды или страницы в магазине
- Делать туториалы по пиксель-арту и пошаговые картинки
- Проверять выравнивание спрайтов по сетке 16 или 32 px
- Готовить референсы для левел-дизайнера
Вопросы и ответы
Закрывает ли сетка мои пиксели?
В масштабе 2× и выше линии рисуются по границам между увеличенными пикселями. В 1× места между пикселями нет, поэтому линии заменяют ряд пикселей.
Можно ли сделать неквадратную сетку?
Да. Ширина и высота ячейки задаются отдельно, так что сетки 16×24 или 32×16 тоже работают.
Что за опция пиксельной сетки?
Бледная сетка в 1 пиксель под сеткой ячеек, которая показывается при масштабе 4× и больше. С ней легко пересчитать отдельные пиксели.
Какого размера будет PNG?
Исходный размер, умноженный на масштаб экспорта. Итоговый размер показан под кнопкой скачивания.
Загружается ли моё изображение на сервер?
Нет, всё рисуется в вашем браузере.