LabelBmFont

cocos2d-x JavaScript
#1

Worked on hours on LabelBMFont to much frustration :frowning:
A couple of questions I have:

  1. It works fine if we purposed it as… well… a label. The problem arises when I’ve tried to use labelBMFont in a menu. The text refuses to be aligned centrally. I tried the following despite being an otiose attempt:

  • initializing labelBMFont with the default calls and even the following:
    var label = cc.LabelBMFont.create("label text",s_pixel_fnt, winSize.width, cc.TEXT_ALIGNMENT_CENTER); <— regardless, my labels are aligned LEFT.

  • Also, with labelTTF, the menu is nicely positioned in the center. When I use labelBMFont and wrap it around menuItemLabel, the menu is no longer the center of the screen but shifted to the right, making half of the menu not visible. I’ve attached an image to let the pics do the talking. the issue is revolved when I setPosition (0, winSize.height/2) but this seems a bit more of rushed fix. Regardless, text is still not centrally aligned.

  • When I call contentSize on the label, it returns 0. Does labelBmFont not have any physical sizing?

  • not sure if this is the result of the previous issue raised: i am unable to click on any of the labels to trigger the callback. I was able to click - and even have a nice zoomed in animation - with LabelTTF in menu.

  • I’ve also experimented with MenuItemFontAtlas. I thought this would be the perfect approach with .fnt files - generated using BMFont app.
    var continueGame = cc.MenuItemAtlasFont.create("Continue", s_pixel_fnt, 32, 32, ' ',this.onContinueLastGame, this);

However, the console states "cocos2d:Failed loading resource: res/pixel.fnt
This got me confused. If the resource failed to load, how was I able to generate the title with s_pixel_fnt?

Sorry for the long post. It is a testimony of the number of hours I’ve spent on fonts and menu alone :frowning:
Please help

Decki


issue.PNG (15.4 KB)

#2

Another problem that was registered on the console. It mentions this:

WebGL: INVALID_OPERATION: texImage2D: no texture index.html
WebGL: INVALID_OPERATION: texParameter: no texture

Not sure what this refers to when the fonts are rendered properly. Still, it is something I want to resolve

#3

no reply?

#5

Hi Decki,

Thank you for your feedback. We will fix it soon, please note that our reply.

Sorry for reply late.
David

#6

oh ok. just wanted those juicy fonts on my game menu haha, will wait. thanks!

#7

Hi Decki,

Let’s talk about LabelBMFont TextAlignment’s behavior, TextAlignment is only valid when a labelBMFont has multi lines.
for example, here is the test codes in Hello World app:

        var LongSentencesExample = "Test Label BM Font Test";
        var labelShouldRetain = cc.LabelBMFont.create(LongSentencesExample, "res/markerFelt.fnt", 200, cc.TEXT_ALIGNMENT_RIGHT, cc.p(0, 0));

        this.addChild(labelShouldRetain, 10);
        labelShouldRetain.setPosition(size.width / 5, size.height / 2);

Here are the screenshots at TextAlignment sets to different values.
cc.TEXT_ALIGNMENT_LEFT

cc.TEXT_ALIGNMENT_CENTER

cc.TEXT_ALIGNMENT_RIGHT

if we change the width to 400, and the labelShouldRetain only has one line, then we change the TextAlignment, it’s invalid for labelShouldRetain.
Codes:

        var LongSentencesExample = "Test Label BM Font Test";
        var labelShouldRetain = cc.LabelBMFont.create(LongSentencesExample, "res/markerFelt.fnt", 400, cc.TEXT_ALIGNMENT_RIGHT, cc.p(0, 0));

        this.addChild(labelShouldRetain, 10);
        labelShouldRetain.setPosition(size.width / 5, size.height / 2);

Screenshot:

And you said that " - When I call contentSize on the label, it returns 0“, but in my application, it returns a right value.
Please update the latest version of”develop" branch from github.

#8

:slight_smile:
It works well to set a menuItemLabel to center of Screen. the codes like these:

   var LongSentencesExample = "Test Label BM Font Test";
   var labelShouldRetain = cc.LabelBMFont.create(LongSentencesExample, "res/markerFelt.fnt", 400, cc.TEXT_ALIGNMENT_LEFT, cc.p(0, 0));

   var item2 = cc.MenuItemLabel.create(labelShouldRetain, function(){
            console.log("LabelBMFont menu item clicked");
        }, this);
   item2.setPosition(size.width / 2, size.height / 2);

there is the screenshot:

If you want to change menu item’s alignment, please set Menu item’s contentSize and AnchorPoint.

Hopes that helps.
David

#9

Hi,

thanks for the explanation. Now, I better understand the part pertaining to alignment; that it’s designed for multi-lines.

Switching to 2.2.2 fixed some stuffs. However, I am still having the same problems. Here are my codes:

var startSurvivingLabel = cc.LabelBMFont.create("Start Surviving",s_pixel_fnt,winSize.width, cc.TEXT_ALIGNMENT_CENTER, cc.p(0, 0));

console.log ("the label anchor points are " + startSurvivingLabel.getAnchorPoint().x + "," + startSurvivingLabel.getAnchorPoint().y);//this returns 0.5,0.5

console.log ("the label XY coordinates are " + startSurvivingLabel.getPositionX() + "," + startSurvivingLabel.getPositionY());//this returns 0,0

startSurvivingLabel.setScale(MENU_ITEM_SCALE,MENU_ITEM_SCALE);
var startSurvivingMenuItem = cc.MenuItemLabel.create(startSurvivingLabel, this.onNewGame, this);
console.log ("menu item's anchor point: " + startSurvivingMenuItem.getAnchorPoint().x + "," + startSurvivingMenuItem.getAnchorPoint().y ); //this returns 0.5,0.5
startSurvivingMenuItem.setPosition (winSize.width/2, winSize.height/2);


var continueSurvivingLabel = cc.LabelBMFont.create("Continue Adventure",s_pixel_fnt,winSize.width, cc.TEXT_ALIGNMENT_CENTER, cc.p(0, 0));

continueSurvivingLabel.setScale(MENU_ITEM_SCALE, MENU_ITEM_SCALE);

var continueSurvivingMenuItem = cc.MenuItemLabel.create(continueSurvivingLabel, this.onContinueLastGame, this);
continueSurvivingMenuItem.setPosition(winSize.width/2, winSize.height/2);

this._itemMenu = cc.Menu.create(startSurvivingMenuItem,continueSurvivingMenuItem);


this._itemMenu.alignItemsVerticallyWithPadding(ITEM_VERT_PADDING);
this.addChild(this._itemMenu,1,2);

So I did the following, followed some of your tips, and I am still not getting what I want. I want the menu item labels to be centrally aligned and positioned at the center of the screen like the following:

-----------------MENU-----------------
            START SURVIVING
          CONTINUE ADVENTURE

But it is still way off as per initial screenshot attachment :frowning: help pls?