Tutorials – Sprite Kit bitmap font

bmGlyph is now able to export bitmap fonts for the iOS 7 Sprite Kit.

You only need to add a custom class and your font files. no static libraries.

Under bmGlyph, prepare your font and configure the publish settings. You have to know that with the iOS7 Sprite Kit, we need to use an atlas texture (which is a directory with all the sprites inside). bmGlyph will also procude an xml file with which is needed.

The filename ‘bmGlyph’ will create the following files: a bmGlyph.altas directory, and a bmGlyph.xml. If you have several suffixes, @2x  ~ipad etc… , use the same filename for the different scales: all the images will go under the .atlas directory, and you will also have different xml files for each scale.

So, under publish settings, choose the format ‘SpriteKit’, the suffix @2x (let’s say we want only assets for iphone retina). See the screenshot bellow:

sprite kit bitmap font

 

Now under your Sprite Kit project, import the .atlas directory and the xml files:

import atlas

Sprite Kit does not support (yet ?) bitmap fonts, so we created a custom class for you (i made a simple class and Sebastian Boettcher improved it, thanks again :) ). The class is available on this github: https://github.com/tapouillo/BMGlyphLabel

Import the 4 files in your project (BMGlyphFont & BMGlyphLabel):

bmfont

Now in your scene, here is how to use it:

the font and texture itself are loaded thanks to the BMGlyphFont:

BMGlyphFont *font = [BMGlyphFont fontWithName:@"bmGlyph"];  //bmGlyph is the ‘filename’ used at the bmglyph export

now you can create your label(s):

BMGlyphLabel *label = [BMGlyphLabel labelWithText:@"bmGlyph\nPreview\nText" font:font];

you can set the horizontal and vertical aligments:
[label setVerticalAlignment:BMGlyphVerticalAlignmentMiddle];
[label setHorizontalAlignment:BMGlyphHorizontalAlignmentCentered];

position your label and add it to the scene:

label.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
[self addChild:label];

here is the result:

sprite kit ios7 bmglyph

 

the whole project and classes are available here:  https://github.com/tapouillo/BMGlyphLabel