Cocos2d-js Curved Labels

cocos2d-x
#1

Hey there,

I’m wondering if anyone ever tried, knows how or had any success making a curved label with Cocos2d-x in javascript. Here’s a picture to basically explain what I’m looking for: http://imgur.com/a/Twii6

Any and all ideas are welcome.

#2

So labels seem to be a collection of sprites, each representing a letter in the string. (There are a few different types of labels, so some labels might different.) I don’t know about JS, but in C++ you can get the sprite for a letter using the getLetter() function. In JavaScript, it would probably be something like var letter = myLabel.getLetter(idx); With this, you can manipulate the letters individually, just like you would any other sprite. To achieve a curved label would mean simply using some math on each letter. Something like:

for (var i = 0; i < myLabel.getStringLength(); i++) {
  var letter = myLabel.getLetter(i);
  letter.setPositionY(Math.sin(Math.PI * i / myLabel.getStringLength()) * 50);
}

That would cause the letters to raise up towards the middle and be at the bottom at both ends. Note: I can’t test this right now, so that code might be incorrect, but it should at least give you some idea of what I mean. Rotating the sprites a little will also give the illusion of being curved.

Another option, especially if you want each letter to have some curve to it, is to manipulate the polygons of the label. For this, you would either need to figure out the math to adjust the PolygonInfo of each letter, or you could render the label to a RenderTexture and manipulate the polygons of the label as a whole.

1 Like
#3

doesn’t look like that in JS. It looks like the whole label is one sprite. I guess I could make a label per character as a workaround? Would that be acceptable or too many labels will kill performance?

#4

Depends how many you have. I’m not familiar with the performance impact of labels, but it’s probably not too bad if you are only doing a few words at most. I’d just recommend to test it out and see.