Using Glyph Designer 1.8 with Sprite Kit

[Mike]

To allow the output from Glyph Designer 1.8 to be used with Sprite Kit we have created a universal static library that can be used in your projects. This provides two classes that can be used to render bitmap fonts using Sprite Kit.

SSBitmapFont
SSBitmapFontLabelNode

An instance of SSBitmapFont is created for each font that you want to use within your project. It is created using the output from Glyph Designer as shown below

NSString *path = [[NSBundle mainBundle] pathForResource:@"myFont"
                                        ofType:@"skf"];
NSURL *url = [NSURL fileURLWithPath:path];
NSError *error;
SSBitmapFont *bitmapFont = [[SSBitmapFont alloc] initWithFile:url
                                                 error:&error];

if (error)
{
    NSLog(@"%@ : %@", error.domain, error.localizedDescription);
    return nil;
}

The filename to be used when creating the path is the name of the control file that is generated by Glyph Designer. You should always use the plain file name e.g. without @2x etc being added. SSBitmapFont will automatically add those modifiers to try and find the right control file and glyph images to use for the device type e.g. Retina iPad.

Within Glyph Designer there are four Sprite Kit output options available. These are shown at the bottom of the list in the screen show below:

When you generate output for Sprite Kit two resources are generated. One is a folder containing the individual glyph images for the font you are exporting and other is the control file.

The Save As name in the export panel is used as the folder name and it also has the .atlas extension added. When using Sprite Kit a folder that has the .atlas extension and is added to the project is used to generate texture atlases. These atlases are then used by SSBitmapFont to load the glyph images needed. If the texture atlas folder contains images with different modifiers (@2x, @2x-iphone, @2x-ipad) then a texture atlas is created for each modifier.

This enables SSBitmapFont to load the right texture atlas and font size automatically based on the device your app is running on. If a texture atlas for the specific device is not found e.g. Retina iPad, then the next largest texture atlas is used. This means you do not have to create texture for all four output types, you could simply create a non-retina output type which would be used on all device types if that meets your needs.

NOTE: When exporting fonts at different sizes it is important to make sure the Save As name is the same for all of them. This will cause all the images to be placed in the same atlas folder with the appropriate modifiers automatically added to their file names.

The second resource that gets created is the control file. A single control file is generated for each of the different export types that is used. While there will only be a single texture atlas folder, there will be a control file for each export type.

Once the files have been exported they need to be added to your Xcode project so that SSBitmapFont can find them.

Using GDCL within the build process allows you to automatically generate both the retina and non-retina versions of the font during project build. More information on using GDCL can be found here.

The instance of SSBitmapFont can be used to generate as many labels as necessary that use that font. To use multiple fonts you need to create multiple instances of SSBitmapFont, each using the appropriate control file and images.

Generating a label

Once an instance of SSBitmapFont has been created you can then start creating labels e.g.

SSBitmapFontLabelNode *myLabel = [bitmapFont nodeFromString:@"Hello World!!"];
[self addChild:myLabel];

The node that is created can be used just like an SKLabelNode and supports properties such as horizontal and vertical alignment e.g.

myLabel.horizontalAlignment = SSBMFLabelHorizontalAlignmentModeCenter;
myLabel.verticalAlignment = SSBMFLabelVerticalAlignmentModeLeft;

By default both the horizontal and vertical alignment modes are set to centre.

That's all there is too it. Create the font of your dreams in Glyph Designer, export the files and then use it in Sprite Kit as described.

The following links can be used to get the iOS and OSX libraries as well as an example file.

libSSBitmapFont.zip (347KB)
libSSBitmapFontOSX.zip (53KB)
BitmapFontsDemo.zip (1.3 MB)