Forum Libraries, Components, and Plugins

Could somebody explain CCLabelBMFont positioning?

I'm having a difficult time understanding how to place CCLabelBMFont nodes. When I try to logically think it through in my mind, they never quite end up where I expect and I have to tweek the position by magic number offsets until it looks right. There's something I'm not getting and Google isn't helping me to understand.

For example, if you go into the CCLabelBMFont test in the CocosSharp test suite (Atlas4.cs in tests/LabelTest), that centered "Bitmap Font Atlas" label makes perfect sense to me, as is. However, when I try to make it a little different, like wrap, center-justified, I don't get why it ends up where it does.

For example, if you change the label's constructor to:

label = new CCLabelBMFont("Bitmap Font Atlas", "fonts/bitmapFontTest.fnt", 300.0f, CCTextAlignment.Center);

To make it wrap, center-justified, max width 300, it wraps and it's center-justified, but the placement isn't where I would expect. It's placed too far right-of-center, but not in any logical way I can see. See first attached screenshot.

If you change it to wrap, right-justified:

label = new CCLabelBMFont("Bitmap Font Atlas", "fonts/bitmapFontTest.fnt", 300.0f, CCTextAlignment.Right);

It wraps the way I would expect (right-justified), but now it's placed even further right of center, although it looks more logical - like it's just using the middle-left for an anchor, but I'm not sure why that would be. See second attached screenshot.

In each case, to me, it seems like the center of the rectangle that bounds the label should be on that crosshair. Basically, the justifying makes sense - it does what I expect. Where the label ends up is a mystery to me.

Posts

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    Sherman

    Have been taking a looking at this. There are two problems, one has been reported here: https://github.com/mono/CocosSharp/issues/36 which is actually a problem with the override and another with using the width as you have specified. I have created an issue for this https://github.com/mono/CocosSharp/issues/41

    Thank you for bringing this to our attention.

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    @ShermanUitzetter‌

    This should be fixed by the following commit

    It will be available either by source or the next NuGet update.

    Thank you for catching this and letting us know.

  • @kjpou1‌

    There's still something wrong with CCLabelBMFont positioning/alignment in 1.2.

    Rather than try to explain the issues I'm seeing (which would require that I understand it better than I do), I'll just show the changes I made to the CocosSharp test suite, in LabelTest/Atlas4.cs that cause problem(s)...

    I cloned the latest CocosSharp version from github. I changed the Atlas4 constructor to put a line break in the "upper" label and center that label's text horizontally and vertically, like so:

            // Upper Label
            label = new CCLabelBMFont("Bitmap Font\nAtlas", "fonts/bitmapFontTest.fnt") {
                HorizontalAlignment = CCTextAlignment.Center,
                VerticalAlignment = CCVerticalTextAlignment.Center
            };
            AddChild(label);
    

    Note: I did not specify width in the label's constructor. See first attached screenshot for what this looks like. I would have expected the label to be centered on the crosshair.

    While you're looking at the running test, if you resize or rotate the screen, the label jumps to the correct spot (it appears to be centered on the crosshair), but the horizontal alignment breaks (it becomes left-justified). See second attached screenshot.

  • RamiTabbaraRamiTabbara AUMember, Xamarin Team Xamurai

    Hi Sherman,

    There's a new patch in the repo that should address the alignment issue you're having. Please give it a go and let me know if it sorts out your problem.

  • ShermanUitzetterShermanUitzetter USMember ✭✭
    edited November 2014

    @rtab‌

    It works! Thank you!

Sign In or Register to comment.