Bitmap font support for Cocoonjs.

[Ezelia]

Hi all.

 

I followed some discussion here about bitmap font support for cocoonjs, and saw that in the current Pixi.js code there is the following code.

            var responseXML = this.ajaxRequest.responseXML;            if(!responseXML || /MSIE 9/i.test(navigator.userAgent) || navigator.isCocoonJS) {                if(typeof(window.DOMParser) === 'function') {                    var domparser = new DOMParser();                    responseXML = domparser.parseFromString(this.ajaxRequest.responseText, 'text/xml');                } else {                    var div = document.createElement('div');                    div.innerHTML = this.ajaxRequest.responseText;                    responseXML = div;                }            }

but even with this, it don't work on cocoonjs for me, cocoonjs complains about "getNamedItem".
 

Don't know if it's only me or it's not working for everyone.

so I tried another approach to fix this, instead of parsing the bitmap file in XML I parsed it with regex, and I got a working parser for all platforms since it only rely on regexp.

 

 

here is how the modified parser looks like (I removed PIXI stuff so you can see how the parser works)

//parse general information ===var textureUrl = str.match(/<page[^>]+file\=\"([^\"]+)\"[^>]+>/i)[1];var data = {};data.font = str.match(/<info[^>]+face\=\"([^\"]+)\"[^>]+>/i)[1];data.size = parseInt(str.match(/<info[^>]+size\=\"([^\"]+)\"[^>]+>/i)[1], 10);data.lineHeight = parseInt(str.match(/<common[^>]+lineHeight\=\"([^\"]+)\"[^>]+>/i)[1], 10);//parse chars ===data.chars = {};//we only want those fields,//also used to translate fields names if needed (ex. xoffset ==> xOffset)var fields = {    'id': 'id',    'xoffset': 'xOffset',    'yoffset': 'yOffset',    'xadvance': 'xAdvance',    'x': 'x',    'y': 'y',    'width': 'width',    'height': 'height',    'first': 'first',    'second': 'second',    'amount': 'amount'};//we don't replace anything here, we only use the replace callback to parse the string.str.replace(/<char ([^>]+)>/gi, function () {    var attr = arguments[1];    var obj = {};    attr.replace(/(([a-z]+)\=\"([0-9\-]+))\"/gi, function () {        var left = arguments[2].toLowerCase();        if (!fields[left]) return;                                            obj[fields[left] = parseInt(arguments[3]);    });    obj.kerning = {};    if (obj.id)        data.chars[obj.id] = obj;    delete obj.id;    return attr;});//parse kernings ===str.replace(/<kerning ([^>]+)>/gi, function () {    var attr = arguments[1];    var obj = {};    attr.replace(/(([a-z]+)\=\"([0-9\-]+))\"/gi, function () {        var left = arguments[2].toLowerCase();        if (!fields[left]) return;                                            obj[fields[left] = parseInt(arguments[3]);    });    if (obj.second)        data.chars[obj.second] = obj;    return attr;});

if you think this can help, I'll make a pull request on Pixi repo

[enpu]

What version of CocoonJS are you using?

[Ezelia]

I did a build today so I think it's 1.4.7

[enpu]

Can you try it with CocoonJS Launcher?

[Ezelia]

can't test right now I'll test with launcher tonight.

is there a difference between CoconnsJS build and the Launcher ?

[enpu]

Well bitmap fonts are working here on Pixi 1.5 with newest CocoonJS Launcher on iOS.

 

What software did you use to make fnt file?

 

Does your fnt file look like this?

https://raw.github.com/ekelokorpi/flyingdog/master/media/font.fnt

[Ezelia]

I'm on android, maybe there is some difference ? cause the error message does not complain about other dom methods, but only "getNamedItem"

[enpu]

Just tested today with three different Android devices and got no errors, what Android version are you using?

There must be some difference on Android versions or between CocoonJS build and launcher.

 

Did you check that your fnt format is correct?

[Ezelia]

yes fnt format is correct, I used the one with phaser examples to make sure.

I'm using Android 4.2.

 

cannot test with the launcher, I think I have something wrong in my example that prevent the launcher to run.

but I noticed that the launcher still have the old ludei logo, when my cocoonjs build has the new logo, so I think it don't use the sale version ...

[enpu]

Ok good to know, i will test CocoonJS build version asap and see if that works for me.

[enpu]

I just tried compiled version with Android 4.1.2 and 4.4.2 and got no errors at all.

 

Can you try different fnt file?

[Ezelia]

my bad, the latest version of pixi works just fine, as it don't use the method "getNamedItem"' 

 

I was on an older version an only modified the responseXML stuff but kept an outdated parser code.

 

thank you for your help