Font Questions

[Ninjadoodle]

Hi @enpu

I'm trying to learn how to use fonts and I have a couple of questions ...

1. What does the 'props' property do? - 

new game.Text(text, [props])

2. If I'm not using a class what is the correct way to align a font? I've tried the code below, but it doesn't see to work ...

this.text.align = 'left';

3. What does the fontClass property do?

Thanks heaps!!

 

[enpu]

@Ninjadoodle

I think you are now mixing Text and Font classes.

Text class is just a Container which contains sprites based on a text string. Those sprites will use textures from a Font class that are based on a font data that it gets from the font XML/JSON file (generated by the bitmap font generator).

1. Like in many other classes, props parameter is an optional object where you can define property values in the constructor.

// Example:
var text = new game.Text('Hello Panda', {
    visible: false
});

// Same as
var text = new game.Text('Hello Panda');
text.visible = false;

2. align property is only used when using multiline text:

https://www.panda2.io/playground#text-align

Note that if you change the align property after the text string has been set, you need to manually call updateText method (or define align prop in the constructor like in the example). Or if you are changing text, change align prop first and then use setText method.

3. fontClass property is just a reference to the Font class that the Text is using. In normal situations you don't really need to care about that (only if you need to look for some specific info from the font).

[Ninjadoodle]

@enpu - Thanks for the explanation, that makes sense and I feel like I understand it a bit better now

[enpu]

@Ninjadoodle

Great! Just let me know if the is anything that's not clear, and i will add more examples to the playground.

 

[enpu]

https://www.panda2.io/playground

I have now added a lot more examples in the playground and renamed them to make more sense.

For example if you want to know how setFont method in Text class works. Just look for section "18. Text" and example "18.7. setFont":

https://www.panda2.io/playground#text-setFont

[Ninjadoodle]

@enpu - Nice! Thanks heaps for that .... I'm slowly getting there!

I almost know everything I need to make games properly lol! I've even sorted out the overly large atlas issues I've had

PS. I love all the new examples - I refer to Panda Playground a LOT. I absolutely love that Panda has Swipe gestures!!

[greencoder]

Playground? Swipe? Page no longer available?  

[enpu]

@greencoder

It's now examples

https://www.panda2.io/examples

[greencoder]

Thanks @enpu ! Now coming back to the same topic as this thread, I am a noob on this part too, how do you convert from .tiff to .fnt? I am literally stuck there... 

[Ninjadoodle]

 Hi @greencoder - For fonts (bitmap text) you’ll need Bitmap Editor like BmGlyph. There are also a few online ones you can use

[greencoder]

Hey @Ninjadoodle, I am on a windows pc and trying to use this application, BMFont (LINK). So far no wins yet.

[PsichiX]

do you have exported correctly your assets from bmfonts? i'm talking about xml font descriptor and png font glyphs sheet.

[greencoder]

@PsichiX yes exported it correctly, with XMP and PNG but IDE gives and error on pop-up :  " Uncaught Font CT_General.fnt not found " 

 

EDIT : I kind of found the issue, this pop up only happens when I force the text with setFont();

[Ninjadoodle]

HI @greencoder - Sorry BmGlyph is Mac only  I'm pretty sure BmFont should be ok, but I haven't used it myself.

I haven't tried using setFont(), so there might be a bug?

[greencoder]

Managed to get the font in, now its the black bg only for the characters I am trying to remove, anyone knows what to do?

 

[PsichiX]

go to bmfont export settings and for image chanels select 'one' for rgb and 'glyph' for alpha, then export again. in panda editor make sure that text is rendered with alpha blending (this should be by default).

[greencoder]

Thanks a lot @PsichiX , that worked! 

[greencoder]

@PsichiX, so we can't change the color of this text right? 

[PsichiX]

you can change it only by tinting it with engine. the reason why i said to set rgb channels to "one" is that when you apply tint color to engine text element, it will multiply tint rgba by glyph rgba color, so when you tint white text with red color, it has rgba value calculated like that: [1, 1, 1, 1] * [1, 0, 0, 1] = [1, 0, 0, 1].
if you will set rgb channels in bmfont to "zero", then tinting with engine will always result in black text because: [0, 0, 0, 1] * [1, 0, 0, 1] = [0, 0, 0, 1].
if you will set rgb channels in bmfont to "glyph", then your text would be getting something known as "texture color bleeding" - pixels around borders of glyph would get dark/gray, because linear interpolation would sample glyph pixel with its black neighbor, and it will looks very bad, that's why you should stick to "one" for rgb, and "glyph" for alpha and color your text only with engine.

[greencoder]

I see, @PsichiX, how does tint work on text? like this? : 

this.mVersionText = new game.Text('0.0.1');
this.mVersionText.tint = '#ffffff';

Help @enpu !

[enpu]

@greencoder

There is no tint property in Text class (Text extends from Container class), tint is only in Sprite class (https://www.panda2.io/docs/api/Sprite).

What Text class actually does, is that it generates Sprites for every character of the text and adds them as child to the container. That means you could loop through every character Sprite and apply tint to them.

for (var i = 0; i < this.mVersionText.children.length; i++) {
    var char = this.mVersionText.children[i];
    char.tint = '#00ff00';
    char.tintAlpha = 0.5;
}

That is a bit heavy process since it goes through every character. If you are going to tint all characters with same color and alpha, a good trick would be to cache the container into one sprite and then tint that.

this.mVersionText.cache = true;
this.mVersionText._cachedSprite.tint = '#00ff00';
this.mVersionText._cachedSprite.tintAlpha = 0.5;

Settings cache property to true will render the whole content of a container into one sprite and store that into private property called _cachedSprite.

[greencoder]

Oh the cache property works like a charm! I am definitely going for that, especially if there are small signs and feedback kind of stuff which pops and dies out in like 1-2 secs! Thanks a lot!