cocos2d / cocos2d-html5

Cocos2d for Web Browsers. Built using JavaScript.
https://www.cocos.com
3.07k stars 902 forks source link

Newline character not properly applied in labels [bug] #2022

Closed hsdk123 closed 10 years ago

hsdk123 commented 10 years ago

[First Case]

If for example I use the code: LabelTTF.setString( "\nThis is a sentence" )

I'm expecting This is a sentence to appear on the second line. (with the first line blank)

If LabelTTF.setString( "\n\nThis is a sentence" )

I'm expecting This is a sentence to appear on the third line. (with the first and second lines blank)

Yet the current implementation just places This is a sentence on the first line for both cases.


[Second Case]

LabelTTF.setString( "Hello \nMy Friend" );

The above code properly places My Friend on the second line.

Yet LabelTTF.setString( "Hello \n\nMy Friend" );

This code still places My Friend on the second line, this time with My Friend shifted slightly to the right.

I'm currently developing a game that heavily uses text and text styling - I feel these are 2 rather big bugs that needs fixing.

dingpinglv commented 10 years ago

Hi @hsdk123,

We'll fix this problem soon, if I have any question, I'll send message to you on github.

Thanks for your feedback. David

hsdk123 commented 10 years ago

@dingpinglv Thanks for the quick reply, let me know if there's anything I can do to help.

VisualSJ commented 10 years ago

Hi @hsdk123 , ~~

Which version for you are using engine?

I tried to restore the problem, I found...

If I use the code:

var LabelTTF = cc.LabelTTF.create();
LabelTTF.setString( "\nThis is a sentence" );
LabelTTF.setPosition(300, 200);
this.addChild(LabelTTF);

I can see it:

image

If LabelTTF.setString( "\n\nThis is a sentence" );

I can see it:

image

They seem to be right.

I don't know how to restore your problem...

I use 3.0 beta.

I suddenly found a problem... ContentSize will become larger when the text contains \n. And the coordinate always point to the middle of the text. So it looks a bit offset coordinates....

I want to restore your problem. Can you tell me how to do it...?

Thanks for your~~

VisualSJ

hsdk123 commented 10 years ago

@VisualSJ Thanks for the quick reply, I'm currently using Cocos2d-html5 v3.0 RC1 (the downloaded version from the homepage)

My code is as follows:

var LabelTTF = cc.LabelTTF.create();
LabelTTF.setString( "\n\n\n\n\nHello \n\nMy Friend" );
LabelTTF.setPosition(300, 220);
LabelTTF.setAnchorPoint(0,1);
LabelTTF.boundingWidth = 824;
LabelTTF.boundingHeight = 0;
LabelTTF.enableStroke("rgba(0, 0, 0, 1)", 3.0);

After some investigation, this seems to work:

var LabelTTF = cc.LabelTTF.create();
LabelTTF.setString( "\n\n\n\n\nHello \n\nMy Friend" );
LabelTTF.setPosition(300, 220);
LabelTTF.setAnchorPoint(0,1);
//LabelTTF.boundingWidth = 824;
//LabelTTF.boundingHeight = 0;
LabelTTF.enableStroke("rgba(0, 0, 0, 1)", 3.0);

So it seems this might have something to do with boundingWidth and boundingHeight.

Glad you found that offset problem with the \n.

Let me know if there's anything else I can do to help.

VisualSJ commented 10 years ago

@hsdk123 ~~

Thank you for your feedback.~~~ ありがとう ^.^

hsdk123 commented 10 years ago

@VisualSJ Thanks for the fast commit - it works great : )