Solution to CCLabelBMFont (Bitmap Fonts) freezes while drawing more lines of texts such as Help, Credits Text in Game!!

Hi, 

In this post, I am sharing the problem that I have faced with CCLabelBMFont after upgrading cocos2d from 0.99.4 to 0.99.5. To know more please go through this article by me.

The CCLabelBMFont is the nice replacement for outdated ALLabelAtlas. However non of Bitmap Font would be efficient if you have to create multiline labels more than 60 or even 100 lines. The rendering of text will definitely take long time (more than 2 sec) delay while creating it. More than 2 secs are far more delay for developers :). So, what should we do in this case.

Why Use Bitmap Fonts?

Bitmap Fonts are used when we need to use a new style font (with gradient, shadow) in our mobile applications (games). Mostly they are efficient when we use them in small words. I mean each bitmap font labels are created by rendering given ".png" file and ".fnt" files. It will however takes some portion of CPU time while rendering it. So, it is only suitable for create those small labels. And are quicker also in such cases.

Problem with CCLabelBMFont!

But when u use it to create a long multi - lined text labels, it needs a lot of time to render heavy texts (more than 60 lines). I have mentioned here some line numbers or say word numbers 60 * 8 (numbers of words), because before this number of words, you may not feel slowness. After this you will find creating such labels some how freezes your app which is undesirable.

What is its Solution?

I tried many ways to fix this problem when I was stucked with it. Finally I got on some forums and found hint on using Image version of labels. The following steps will clearly explain the solution to above problem. But before proceeding you need to have little knowledge of using graphical tools like Photoshop.

1. Create a long png transparent image file using Photoshop/Gimp edition after you set style in your text. Setting styles and all necessary spacing is easier with graphical editor tools for graphics designers than coding for developers.
2. After you create a texture save it. 
3. Now here is a little tricky section. If you png image file is greater than of size 1024 x 1024, the image will not be rendered as an sprite. It's because the maximum texture allowed to use in iPhone is 1024 x 1024 for one png file to maintain texture memory in iPhone. 
4. So, now you can divide your big ".png" texture to any small pieces. For example you have image "texture.png" of size 800 x 2040. Now you can split it using graphical tools into two "texture1.png" of size 800 x 1020 and "texture2.png" of size 800 x 1020. 
5. Then using the position property you can align them in your game layer attached to each other so that it seems one.
6. Now your issue is solved and guess what it loads faster than you ever seen.

So,  if you have even larger files, you can split into as many as you want and attached them treating them as each sprite. Manipulating this way is easier and efficient too.

Conclusion

Hence, in this way I can conclude that this above issues can be solved. They need a little extra work on photoshop to align, modify the png image of text. But when you do with it, its faster and your work worth your output.

Leave comments if you guys have any questions, suggestions. Happy Sharing and Learning.