Changed Sprite Font and added Sprite Font capabilities to TextActor

[robboerman]

Hi Ibon,

Using a SpriteImage as a sprited font is a great idea, thanks for that. I noticed a couple of shortcoming though:

• the font specification was too verbose, using x/y offsets, width, heigh, xadvance etc is IMHO not necessary for a font specification and makes it overly complex for developers using it (EG. when I create an alphabet sprite and decide to change the width of the 'a' in my sprite I have to update all the x and y positions of the other characters in the font spec). When creating a font sprite, it's easier putting that in the sprite and then just specifying the witdth of each character.
• when using a monospaced font the interface could be even simpler
• letting a SpriteImage draw itself to a context is ok, but (again IMHO) it should be an Actor that takes care of that. Furthermore, the TextActor has been created to draw text on screen so should also do that when using a sprited font (transparent to the user)

Because of this I changed the interface of the font to any of the following:

var font =  new CAAT.SpriteImage().initializeAsFontMap(
    director.getImage('numbers'),
    [
        {   c: "0", width: 35   },
        {   c: "1", width: 35   },
        {   c: "2", width: 35   },
        {   c: "3", width: 35   },
        {   c: "4", width: 35   },
        {   c: "5", width: 35   },
        {   c: "6", width: 35   },
        {   c: "7", width: 35   },
        {   c: "8", width: 35   },
        {   c: "9", width: 35   }
    ]
);

OR for monospaced fonts

var font = new CAAT.SpriteImage().initializeAsMonoTypeFontMap(
    director.getImage('numbers'),
    "0123456789"
);

The font can then be used in a TextActor simply by calling

var actor = new CAAT.TextActor().
    setBounds(0, 0, 100, 100).
    setFont(font).
    setText("1337");

This even works with a sprited TextActor traversing a path :D

Let me know what you think, Rob

[hyperandroid]

Hey Rob,

awesome work in CAAT's font field. Just one note i'd like to have accounted: the supplied method initializeAsFontMap honors the following objects for every map supplied element:

• xoffset
• yoffset
• xadvance

This method is originally develop to parse the output of this tool http://glyphdesigner.71squared.com/ which gives a very fine glypth control. Since we're using it, will merge your changes and keep the method with another name. But to make your methods and this one compatible with a call to drawString/stringWidth, will honor the code in every font initialization method:

helper.xoffset= typeof value.xoffset==='undefined' ? 0 : value.xoffset;
helper.yoffset= typeof value.yoffset==='undefined' ? 0 : value.yoffset;
helper.xadvance= typeof value.xadvance==='undefined' ? value.width : value.xadvance;

Should be easy to do so.

Thanks for the code. -ibon