Jump to content

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


Link to comment
Share on other sites


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:


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

Link to comment
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!!

Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

  • 2 weeks later...


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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...