Sign in to follow this  
Ninjadoodle

Font Questions

Recommended Posts

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!!

 

Share this post


Link to post
Share on other sites

@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).

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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!!

Share this post


Link to post
Share on other sites

@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();

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.