cc.Label performance

Hello, I ran into a problem in CC 2.0.8 and 2.1.0.

Suppose I have a list of elements with components cc.Label. When I try to show them smoothly on the screen, by changing opacity, the fps drops.

This is especially evident on the phones in the web. For the demonstration I made a small example. Iphone 10 (safari) shows 8 fps when all labels are run with cc.FadeIn action.

If i use bmfont, there is no such problem, but replacing all the text in the game with bmfront is not very suitable for me.

Example project (2.0.8, 2.1.0):
CCPlayground.zip (202.2 KB)

@slackmoehrle I see in the new version this has been fixed (2.1.0 git), but in version 2.0.9 partially fixed.
file: engine\cocos2d\core\components\CCLabel.js
method: _updateColor
make drop fps when change opacity, but now (2.0.9) it is not needed to change opacity, if remove it will be a good fps and work with opacity
but then the color change does not work

in version 2.1.0 on git this is done better and hopefully in 2.0. * it will also be fixed fot good performance

I suppose it’s not a bug but side effect of implementation. Instead passing color in vertex label just generates texture from scratch after changing color/opacity (if we talk about label with vector fonts).

But yeah, even 2.1 has some serious problem with labels performance. This component cause huge GC peaks according to many allocations if label use bitmap fonts and text is autoscaled.

I have the same Performance Problems with cc.Label !
It seems like storing data into a string / into the Label-Component via “update(dt)” is a bad idea. Because it updates every frame. Instead of this, you should better use “schedule” with max. 0.2sec interval. At least this was my approach / workaround for this prob.

You can´t see this issue on “new-power”-devices. I recognized it only on my old low-end phone. It was in combination with BG & Foreground scrolling elements. It runs super smooth “without” updating labels. But when i turn it on, the scroll-hickups /stuttering were great recognizeable. Its a big difference like day / night, with or without cc.Label !

Does anybody know, if there is a bug-fix or a proper solution / method for updating your string-data with the “update(dt)” per Frame method ? Would be really nescecary to fix this. You allways need realtime data displayed on your UI.

2.0.10 has a caching mode for label, you can choose from none/character/full string. haven’t yet tested myself, but it’s supposed to help.

it’s not the rendering text itself that’s causing slowdowns (i believe ttf rendering engines, well, most of them, use internal caching for glyphs anyways), it’s mixing it up with rendering other texture atlases, which will increase the draw-call. if upgrading to 2.0.10 is not an option, try extracting all label data on a separate “layer”, so that they won’t disrupt the rendering flow.

1 Like

Thx for your respond and Tips.
I was also assuming that rendering couldn´t be responsible for these slow-downs (just 2x “labels”, c´mon). So it must be something under the hood. In my case i use the new 3D nodes. So no 2D elements at all in my scene. Except the 2x UI label text elements. You are assuming its the “mixing with other tex Atlas” stuff. I think i didn´t put any textures into an atlas (don´t know if CC does it automatically for me). But it would be a idea to put it into an atlas. And a “caching mode” could solve the issue (in v2.0.10). I don´t know if i get it with your tip : “layer” sperating it to an other one. You mean a layer inside the code ? Or a seperate *.js file ? And now i also recognized CC doesn´t have Layers inside the editor. Or am i wrong ?

I am new to CC. So don´t blame me, if i may ask something about the versions. I see 2x different version numbers on the download site: v2.1.1 and 2.0.10 which you suggest to download / to try out. My logic tells me that v2.1.1 is the newest one i can download. But i am wrong, or …? Would be great if you can clarify here or give some link-infos about the version numbering in CC.

try using the cache for the labels, see if there’s any improvement.

by “layer” i meant putting the labels in a single node (unless you have good reason not to do so).

is it possible to post a screenshot of how your scene is rendered/setup, please?

1 Like

Hey, i got it now. It was your tip with “caching”-mode. To be more precise: You have 3x Modes:

  • none
  • bitmap
  • char

And for frequently updating stuff into cc.Label, you should use Char-caching-mode ! This mode is also available in CC v2.11 ! You just need to set it right inside the Label-Properties-Tab. Now everything runs super smooth. Problem solved :grinning: Happy.

1 Like