The task of creating bitmap fonts is that each character needs to be rendered with the FX that you want, export them, then stitch them up together using Zwoptex or Texture Packer. After you have the font spritesheet, you find that the font size being slightly larger by 5 points would be nice. Can you imagine all the frustration that would follow.
Now logically, the way this works is that Photoshop draws each character onto a canvas, applies the effects like fill, outline, shadow, etc and then exports them out. WHAT IF... there was an app that did something like this? WHAT IF...creating the font spritesheet was as easy as selecting the font, the fontsize, the colors, etc and say generate, and out comes the Font spritesheet. Ready to use... no need for the processes like export each character, stitch them all together to form a usable font spritesheet.
The prayers have an answer in the form of Glyph Designer from 71 squared, This site has been a gold mine for a lot of developers with tutorials and screencasts on developing with Cocos2D for the mobile platforms. The Tutorials have been progressive, almost to the fact that it seems that they were all following towards making of a game. It was in one of these tutorials, (around 2009) in Tutorial 4, when the BitmapFont class was introduced. The tutorial spoke about how to use bitmap fonts in the Cocos2D projects. Through the various tutorials, Mike developed the Glyph Designer that allowed for creating your own Font spritesheets.
The process
* Select a font from the left hand side list of fonts installed on the system* select the font size you need (the images auto update)
* Select the spacing between the characters, and if they are Auto-aliased and auto-sized
* Select if they are to be filled or just require outlines, if they need to be filled, how, Gradient or Solid
* Do you need an outline for the fonts, if so what is the width, style, line fill, solid or gradient
* Select if there is a shadow, outer or inner and select the light source and the blur radius and shadow colour
* Select the characters that you want to include in the set.
Now though this sounds cumbersome with so many choices, the actual amount of work you need to do is, click on the font you need, the images are auto updated and created, the other options are what you can use to *tweak* the resulting Fontset and then click on the Export button on the top right hand side, this shall export to three formats at this time, .fnt for Cocos2D (txt format), .fnt for Sparrow (XML format) and .txt for EZ GUI. It creates the png FontSheet, the kerning info and if you select the FontSheet with outlines boxing each character.
Using it in an app
If you are a developer using Cocos2D or Sparrow, then there are classes that will allow you to load and work with these bitmap fonts. However if you were wanting to use this with CoronaSDK, it is not as straight forward. Who knows, maybe if there is enough interest from the community, Michael Daley (best known as Mike) might include the facility to export it into the Zwoptex format used for spritesheets in Corona and thereby in TextCandy.For those that are adventurous, this is not much of a task, here is what the .lua definition of the font set looks like.
local sheet = {
frames = {
{
name = "0.png",
spriteColorRect = { x = 0, y = 0, width = 15, height = 19 },
textureRect = { x = 56, y = 69, width = 15, height = 19 },
spriteSourceSize = { width = 15, height = 19 },
spriteTrimmed = true,
textureRotated = false
},
{
name = "1.png",
spriteColorRect = { x = 0, y = 0, width = 7, height = 19 },
textureRect = { x = 247, y = 2, width = 7, height = 19 },
spriteSourceSize = { width = 7, height = 19 },
spriteTrimmed = true,
textureRotated = false
},
snipped
and this is what the .fnt file for Cocos2D looks like (this is the widely used AngelCode format)
info face="BellGothicStd-Black" size=64 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=2,2 common lineHeight=76 base=48 scaleW=1024 scaleH=512 pages=1 packed=0 page id=0 file="test2D.png" chars count=190 char id=124 x=2 y=2 width=10 height=66 xoffset=3 yoffset=-1 xadvance=15 page=0 chnl=0 letter="|" char id=36 x=316 y=2 width=33 height=64 xoffset=2 yoffset=-7 xadvance=36 page=0 chnl=0 letter="$" char id=202 x=685 y=2 width=36 height=63 xoffset=6 yoffset=-14 xadvance=43 page=0 chnl=0 letter="Ê" char id=214 x=723 y=2 width=35 height=63 xoffset=5 yoffset=-13 xadvance=43 page=0 chnl=0 letter="Ö" char id=206 x=760 y=2 width=25 height=63 xoffset=1 yoffset=-14 xadvance=25 page=0 chnl=0 letter="Î" char id=205 x=787 y=2 width=24 height=63 xoffset=2 yoffset=-14 xadvance=25 page=0 chnl=0 letter="Í" char id=204 x=813 y=2 width=23 height=63 xoffset=1 yoffset=-14 xadvance=25 page=0 chnl=0 letter="Ì" char id=196 x=838 y=2 width=42 height=62 xoffset=2 yoffset=-13 xadvance=43 page=0 chnl=0 letter="Ä" char id=195 x=882 y=2 width=41 height=62 xoffset=2 yoffset=-13 xadvance=43 page=0 chnl=0 letter="Ã" snipped
Here's the definition for the $ character in the cocos2D Format, split and formatted for easy reading
char
id = 36
x = 316
y = 2
width = 33
height = 64
xoffset = 2
yoffset = -7
xadvance = 36
page = 0
chnl = 0
letter = "$"
the data required for one line in the lua file is
{
name = "2.png",
spriteColorRect = { x = 0, y = 0, width = 15, height = 19 },
textureRect = { x = 2, y = 77, width = 15, height = 19 },
spriteSourceSize = { width = 15, height = 19 },
spriteTrimmed = true,
textureRotated = false
},
It can evidently be seen that the common data, like where on the sheet is the character defined, is set by the x,y co-ordinate, the width and the height determine the width and the height of the character, the letter becomes the name with a .png extension
summary
As a developer, you might have the rights to use a font in the apps, but not distribute them in that scenario, it is important that the font is pre-redered as a bitmap texture and then used. However the time and the effort it takes to create those rendered fonts is quite painful, so Glyph Designer helps cut that into a very insignificant amount of time and lets you focus on the things that are important, development.As a Cocos2d, Sparrow developer the font sets are straightforward to use. As a CoronaSDK developer, the font definition needs some massaging to create the lua file to use the font. However the easiest way to do so that I found was to generate the PNG from Glyph Designer, then run SpriteHelper and import the image and select pack Sprites, this will detect the sprites, now just rename the characters to the name of the character suffixed with a .png and then export that, Voila!! Converted font sheet that can be used in a matter of minutes.
UPDATE : If you are using Gideros for development, then they are already Angelcode compatible and you can use the bitmap fonts right from the word go without any changes.
It is but logical that a developer can be more efficient if they posses the tools that can help them. Glyph Designer is definitely one of the tools that will make things easier if you do create/work with bitmap fonts.
SUMMARY
Software : Glyph Designer
Version : 1.4.2
Publisher : 71 Squared
Website : http://www.71squared.com
Twitter : @71squared
Platform : Mac OS X (10.6.x or higher)
Demo : Unlimited, (export disabled)
Price : $29.99
And we have a copy of Glyph Designer for one lucky winner, all you need to do
1. Follow @whatsin4me
2. Retweet the message "Read reviewme.oz-apps.com, follow @whatsin4me and RT this msg. You might win a copy of #GlyphDesigner from @71squared"
you can also follow us on Facebook by liking our page at
http://www.facebook.com/pages/ReviewMe/137640632964588
Comments
Post a Comment