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.

Using CCLabelBMFont instead of ALLabelAtlas after Upgrading Cocos2d to 0.99.5 or higher!

Hi pals,

I am thinking of posting some more articles in these days so that I can help lot of people with my shared knowledge. There is always a busy time in office and rest time in weekends. However in some weekends I will be writing some useful posts. Hope it would be helpful to some guys out there.

In this post, I am going to write about the ALLabelAtlas and CCLabelBMFont.

ALLabelAtlas:

This is open source project created by indeedo during the cocos2d version 0.99.4. It has a Label Creator tool which will create a “myfont.png” image file of selected font and corresponding “myfont.plist” property list file. The plist file consists of all the co – ordinate information of the alphabet images. You can add shadows and effect in the Bitmap Font created using above Label Creator Tool. The ALLabelAtlas has .h and .m source files while will now create a label using above bitmap font created. This works well with the cocos2d version 0.99.4 and below. But problem arises when you upgrade your cocos2d game engine.

It is because the source files of base class are modified. And our creator of ALLabelAtlas doesn’t seem to have time to upgrade his code. So, we will be now using CCLabelBMFont instead of ALLabelAtlas.

CCLabelBMFont:

It is a Bitmap Font Label which is built in cocos2d version 0.99.5 or higher. It uses the bitmap font file (*.fnt) file to create a label. Similar to above tool, there are varieties of tool available which will create “myfont.fnt” file and corresponding “myfont.png” image. There are different versions of such tool. They are:

1. Heiro Tool. (Download)
2. BMFont tool for windows. (Download)

Among above all, Heiro tool is preferred one. Because of following properties:

1. It is java version tool which can be run in both Mac OS and Windows OS.
2. It supports shadows effects, gradient effects and others.
3. It is however little buggy which cause it to show some weird behaviors.
4. To know more about how to use Heiro Tool efficiently and troubleshoot it, please visit this article by Mr Steffen. He is writer of book “Learn iPhone and iPad cocos2d game development”.

After you successfully created the “myfont.fnt” and “myfont.png” files, just import them to resources and create new Label by following way:

CCLabelBMFont *newGameLabel = [[CCLabelBMFont alloc] initWithString:@”NEW GAME” fntFile:@”myfont.fnt”];

newGameLabel.position = ccp(winSize.width/2, winSize.height / 2);

[self addChild: newGameLabel];

[newGameLabel release];

Which one is Better and Why?

Among the above two the CCLabelBMFont are more better than ALLabelAtlas due to following reasons.

1. The ALLabelAtlas is outdated when new version of cocos2d is used (0.99.5 or above)
2. One key problem with ALLabelAtlas is that, the label created using it doesn't positioned well. In order words sprites created by these doesn't have fixed and defined anchor points so that you can align it in your own way. To position these labels you need to do hard coding, which is bad practice.
3. The position of CCLabelBMFont are well positioned and easy to manipulate in the screen.

Draw Back of CCLabelBMFont over ALLabelAtlas:

1. When drawing a large line of text using CCLabelBMFont, these labels are slower than ALLabelAtlas, which can create nightmare for a developer to overcome it. To print line more than 60, the app freezes for more than two seconds which is very annoying. 
2. Goto Solution for this problem here.

I hope above information helps some guys there who are stuck with using Bitmap fonts and might be searching to use which one of bitmap fonts. If anyone has any suggestions, feel not write please leave comment below.

Happy sharing and thanks for reading.

Flurry Integration in Mobile Games And Apps ! (iPhone, Android, Blackberry and Windows Phone 7)

Hi all,

After a really long gap. I am here again with a post in which I will be describing the Flurry API and integrating it with different Mobile games and commercial Apps. Before going on this topic directly first you guys must be familiar with Flurry API and must know what is Flurry API.

So, here I would be going with what is the Flurry API first. 

Flurry Analytics:

What is Flurry Analytics?

According to flurry website, Flurry Analytics can be defined as  "Flurry Analytics provides accurate, real time data to developers about how consumers use their mobile applications and games, as well as how applications are performing across different handsets. Application developers receive anonymous, aggregated usage and performance data, as well as robust reporting and analysis tools. With this collected data, developers can identify issues and opportunities, create a more informed product roadmap, increase retention and grow their user base."

What is its best part is that IT IS FREE to use. So, anyone can use it. Till today's date we have Flurry Analytics Tool available for Blackberry, Iphone, Android and Windows Phone 7. To learn more you can visit flurry website.

Why do we need Flurry?

As I have already mention, you would like know every detail statistics of your app after it goes on market. All these details are recorded after you integrate in it your app using Flurry SDK. What you need to do is just register and add application. After that you can download the corresponding SDK (latest one). Then you can see each day how our costumer grows and how much time they have used your application. It is very useful tool for developers to know the market value of your application.

Steps to Download Flurry SDK for your Mobile Apps :

1. Visit Flurry Website.
2. Click on Sign Up Button if you haven't created a account. If you already have account login.
3. While Sign Up you must fill all the information needed.
4. Add your application. While adding it "Select the type of Platform you built your app".
5. There are currently Six Platforms. They are:
1. Java ME: It includes most featured phones including MIDP 1.0, 2.0, 2.1 and CLDC 1.0 and 1.1.
2. Application built for Blackberry. These are application designed to be deployed as COD packages, including MIDlets and Blackberry specific applications.
3. Android built using the Android SDK.
4. Applications built using the iPhone SDK.
5. Applications build for Windows Phone 7.
6. Applications built using the iPad SDK. 
6. Give your Application Name and pick Category.
7. After that a new 20 charactered Unique application  key is Generated and a link to down Flurry SDK for corresponding platform is given. Below you can read instruction on adding flurry in your corresponding platform.
8. After that download the SDK and go through ReadMe.txt. 
9. The readme.txt will have all necessary information to integrate flurry in your app.

Earn From Flurry?

The flurry is free tool. So, it has many users. Now after that to earn some money, they have introduced a new Program called "App Circle" which will help you to earn revenue from your apps.

AppCircle Program

Flurry AppCircle is an intelligent, cross-selling network of iPhone, iPod Touch and iPad applications. Using Flurry Analytics in combination with an advanced recommendation engine, AppCircle creates a market for developers looking to acquire users (Promoters) and application developers who want to earn incremental revenue from their applications (Publishers). AppCircle introduces a relevant app to the right user at the right time, across a network of participating applications. The service was designed to solve discovery, drive new user acquisition and increase revenue for application developers.

Here is one note worthing point from a QuePublishing dot com:

"The power of this technology is that it is very targeted to the type of user who would most likely download your app. For example, if you have developed an action game using tanks, when using AppCircle your app would be recommended to other users (within the AppCircle network) who are playing similar action games. You are charged by Flurry only when a user downloads your app, not when they see an impression or click on it."

If you want to know more about how to drive revenue using Flurry AppCircle. Please read this article from QuePublishing website.

Thanks and Happy Sharing !!!