Tutorials – Custom image with bmGlyph

bmGLyph 2.0.0 now allows you to import your custom image (actually replace an existing letter by an image).

For exemple, for displaying the number of coins you have left, you needed 1 label, and 1 sprite, position the 2 elements at the right place.

Replacing an existing letter, for exemple the ‘#’ by an image would allow you to create only 1 label with the follow text: “#: 25″

So, let’s start with bmGlyph: find your letter ‘#’ on the texture sheet

 diese

drag & drop you coin on it. A green box will appear around the letter to be sure you replace the right letter:

diese coin

go to the preview mode, and see how it looks like:

preview

the coin is not correctly aligned, right click on it, it will activate the glyph editor:

glyph editor

check that the char is the correct one, and adjust the offsets and advance as desired.  Now publish your project and see the result on your device !

adjust xadvance

result with Sprite Kit:

BMGlyphFont *font = [BMGlyphFont fontWithName:@"bmGlyph"];
BMGlyphLabel *label = [BMGlyphLabel labelWithText:@"#: 25" font:font];
[label setVerticalAlignment:BMGlyphVerticalAlignmentMiddle];
[label setHorizontalAlignment:BMGlyphHorizontalAlignmentCentered];

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

coin sprite kit