Slicing atlas with font from BMFont in Adobe Photoshop – automatically!

Share Button

bmfontslicerWorking on a different projects that uses Adobe AIR and Starling - I often require stylized fonts, that I want to embed inside my applications. I use freeware BMFont by AngelCode for texture atlases generation with my fonts.

 

bmfontslicer_001If you are required to apply some effects for each chars as on left image, then you need to slice each char to separate layer. This can be done manually but it will take a lot of time or you can use my script that will do the same but faster and better – automatically.

bmfontslicer_002

If you don’t understand the difference – take a closer look at the right image. It’s one layer and gradient filter is applied. This is most popular issue when you need to stylize bitmap font in photoshop. Let’s solve this easy!

 

My script was developed under Windows and Adobe Photoshop CC 2014 and I don’t know if it can be applied to older Photoshop versions or another platforms. As I heard from some script user – he can use this script in Photoshop CS5 :)

Script doing analysis of opened files and checking automatically page from source *.fnt (xml) descriptor.

1) Launch BMFont generator

2) Check preferred chars

3) Go to  Options > Font Settings and setup there everything according to your requirements.

bmfontslicer_0034) Go to Options > Export Settings. First that you must to know – it’s Padding. Very useful feature in font stylizing. If you want to add some shadows, outlines and other effects – they can exceed char bounds in the atlas and you will get the same result as on image above.

bmfontslicer_004For fixing this issue you must add padding for all sides. My script automatically draw chars bounds in debug layer and you can see the real size that used by char. Go back to the BMFont and in Export Settings setup padding by 5px for each side.

 

Open atlas in Photoshop, execute script and you will receive perfect image:

bmfontslicer_005

After you added some effects – you must remove debug layer, merge all layers and you can save your atlas!

How to use:

1) Export PNG + FNT (XML) file from BMFont. Be sure that you selected XML and not TEXT or BINARY

2015-04-28_180512

2) Open generated PNG in Photoshop

3) Execute BMFont Slicer.jsxbin script by File > Scripts > Browse (select jsxbin in file filter). If you want to use this script on regular basis – I can suggest you to put it in the *scripts folder:

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

*After this your script will be available in File > Scripts > BMFont Slicer

4) After script executed – Explorer will be opened and you must select generated *.fnt file from BMFont

5) When slicing is done – you will see layers for your chars

Download BMFont Slicer here.

 

Share Button

This Post Has Been Viewed 645 Times

Leave a Reply

Your email address will not be published.

Blue Captcha Image Refresh

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>