Font, loading & letterSpacing Sample

[tricksty77]

I had build a font with BMFont which was loaded properly in panda but when I converted the xml in json I had problem in the Font Contructor

I had the needs to change the text.js in the engine in order to make this works (the json file was not loaded properly)

 

I would like to share with you a sample I have done (I think other people will find useful if is moved into the panda examples)

 

game.module(
    'game.main'
)
.body(function() {


game.addAsset('test1_0.png');
game.addAsset('example.json');

game.createScene('Main', {
        init: function() {
            this.text = new game.Text('Hello Panda!');
            this.text.addTo(this.stage);
            this.json = game.getJSON('example.json');
            
            this.font = new game.Font(this.json);
            this.font.letterSpacing = 1;
            this.text.fontClass = this.font;
            this.text.updateText();
        },
        
        mousedown: function() {
            this.font.letterSpacing = 10;
            this.text.updateText();
            
        },
    
        mouseup: function() {
            this.font.letterSpacing = 1;
            this.text.updateText();
        }
    });
});

 

P S: I also want to signal that this very same segment of text.js code will not works if the font is splitted in multiple bitmap so pay attention to that when you export fonts from BMFont. (try to squeeze all chars into a single png)

 

 

media.zip

[enpu]

Currently Panda supports bitmap fonts in XML and BMFont formats (with fnt file extension). Is there any reason why you want to load your font in json?

I'm not sure what you are trying to do in your example, but i think you are making things a bit too complicated. If you just want to dynamically change the letter spacing of a text, it would be just simple as this:

game.addAsset('font.fnt');

game.createScene('Main', {
    init: function() {
        this.text = new game.Text('Hello Panda!');
        this.text.addTo(this.stage);
    },
    
    mousedown: function() {
        this.text.fontClass.letterSpacing = 10;
        this.text.updateText();
    },
    
    mouseup: function() {
        this.text.fontClass.letterSpacing = 1;
        this.text.updateText();
    }
});

 

[tricksty77]

Neat!

Works like a charm thanks.

In the documentation there was written I could use JSON to build a font but this is simpler and smaller thanks!

 

 

[enpu]

Yeah when the loader loads BMFont fnt file, it converts the data in the file into JSON format, that is then used in the Font class.