Нарезаем атлас со шрифтами из BMFont в Adobe Photoshop — автоматически!

Share Button

bmfontslicerРаботая над различными проектами с использованием Adobe AIR и Starling — часто нуждаюсь в стилизации шрифтов, которые встраиваются в приложение. Для генерирования текстурного атласа со шрифтом я использую бесплатное приложение BMFont от AngelCode.

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

bmfontslicer_002

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

Скрипт тестировался только в Adobe Photoshop CC 2014 под Windows и его работа не гарантируется как под другими версиями Photoshop, так и под платформой Mac OS.

Скрипт умеет анализировать правильность открытой страницы и уведомит Вас, если открытый файл не найден в соотвутствующем *.fnt (xml) дескрипторе.

1) Запустите BMFont генератор

2) Отметьте требуемые символы

3) Перейдите в Options > Font Settings и настройте параметры рендеринга и шрифта по своему требованию

bmfontslicer_0034) Зайдите в Options > Export Settings. Первое, на что хочу обратить внимание — это отступы (padding). Весьма полезная опция для возможности стилизации символов. Если в фотошопе захотите добавить тень, обводку и другие эффекты — они могут выйти за границы размера символа в атласе со шрифтом и Вы получите то, что изображено выше.

bmfontslicer_004Для решения проблемы необходимо, задать отступы со всех сторон. Мой скрипт автоматически рисует границы символа в отладочном слое и мы наглядно можем видеть всю охватываемую символом зону. Возвращаемся в BMFont и в Export Settings задаем отступы по 5 пикселей.

Загрузим наш атлас в фотошоп, запустим скрипт и получим требуемую картинку:

bmfontslicer_005

После добавления всех эффектов необходимо удалить отладочный слой, склеить все слои и наш атлас готов!

Как пользоваться:

1) Экcпортируем PNG + FNT (XML) файлы из BMFont. Убедитесь, что Вы выбрали экспорт в XML, а не в TEXT или BINARY

2015-04-28_180512

2) Открываем сгенерированный PNG файл в Photoshop

3) Запускаем BMFont Slicer.jsxbin файл File > Scripts > Browse (выберите jsxbin в фильтре). Если планируете регулярно использовать данный скрипт — рекомендую разместить его сразу в папку со *скриптами:

Windows 7 x64:
C:\Program Files\Adobe\Adobe Photoshop CC 2014\Presets\Scripts\BMFont Slicer.jsxbin

*После этого скрипт будет доступен из панели File > Scripts > BMFont Slicer

4) После запуска скрипта сразу же будет открыт проводник для выбора *.fnt файла, сгенерированного BMFont приложением

5) После завершения операции Вы получите разрезанные на слои символы

Скачать скрипт BMFont Slicer можно тут.

Share Button

This Post Has Been Viewed 716 Times

Нарезаем атлас со шрифтами из BMFont в Adobe Photoshop — автоматически!: 4 комментария

  1. Артем

    автор, залейте пожалуйста скрипт куда-нибудь, откуда его можно будет скачать, ссылки на ваш дропбокс заблокировали за слишком большой траффик

Добавить комментарий

Ваш e-mail не будет опубликован.

Blue Captcha Image Новый проверочный код

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>