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.

Developing iPhone 2D Game With Cocos2d !!

Hi all,

In my last post for iphone development, I have written about the options that you can choose while developing for the iPhone. In this post, I am going to write about free, open source game engine for iphone : "Cocos2d" for iphone.

Cocos2d

Cocos2d is an open source framework (Game Engine) for building 2d Games. Cocos2d can be found in  windows, linux, mac platforms for developing 2d games. It was first written in Python. Being an open source, it is developed and extended by many programmers. Such one extension is "Cocos2d for iphone".

Cocos2d For iPhone

"Ricardo Quesada" is a lead developer, who is working full time on cocos2d project, and his current income consists of solely of donations and the sale of Sapus Tongue & LevelSVG Source code. He has helped many fellow iphone game developers to create a 2d games for iphone. If you want to give back some respect to the Ricardo, you can donate or buy his, 2d level map editors or source codes from above link. 

Since cocos2d is Free, it is famous and extended by many developers as they require. You can also submit your code for extending cocos2d. It has huge community support also. And now there are couple of books also available in market to learn cocos2d. If you choose to use cocos2d for iphone game, welcome to cocos2d family :) .

Cocos2d is very easy to learn and creating simple 2d game in it will not take more than a couples of months. Before developing any game, you need to understand the basics of game very clearly (game loops, sprites, game engine etc). Then you can start game developing with cocos2d.  

It is easy to get interested in developing and creating your own games. But understanding and creating it is not as easy as it seems. You need to understand game development cycles  (concept) which I will write in my next post if required. But for now lets go for cocos2d for iphone.

Downloading And Installing Cocos2d for iphone

Note that Cocos2d is very good and recommended game engine for beginner iphone game developers. There is one game Trainyard which was developed by only one developer "Matt Rix" in his spare time, who got his app, the nice rating in appstore. Read his full success story, it is really encouraging.

1. You can download cocos2d latest version from here. Always go for stable version if you don't want any incompatibility issues. 
2. After you have downloaded the .zip file from above link. Unzip it.
3. After you unzip it, you need to execute the "install-templates.sh" shell script file. It will install the cocos2d templates in your Xcode.
4. Now you can create a new cocos2d project by selecting it from Xcode template. Your new cocos2d templates should look like the following image.

Note that in above templates there are "cocos2d Box2d Application" and "cocos2d Chipmunk Application". The Box2d  is an open source physics engine and Chipmunk is also the physics engine which are compatible with the cocos2d. You can use them if your game needs physics.

Hello World Cocos2d

After you create a new project in the cocos2d template, you can build and run the current project. By default,  Hello World Label will be shown in the screen after a cocos2d splash screen. By default you get the Hello World program. You can over write the Helloworld class or add new class to create your own application.

And Yes, there is offline documentation called doxgyen integration and online documentations from where you can learn cocos2d libraries and classes. And if you stuck in any point, there is always a community forum support to help you on this.

Now What?

Now if you want to create some basic games in cocos2d, you better go to How to make basic iphone game post by Ray Wenderlich. It is excellent start up for the iphone game beginner with cocos2d.

Finally, thanks for reading and hope it would help someone who is trying to get started with cocos2d and try to figuring out what it might be. Leave comments if you want something more, or feels not right :).

Happy sharing and learning! Thanks.

What are iPhone Development options? Games OR Commercial Applications?

Hi,

In this post, I am going to write about development options in the iphone platform, which are broadly categorized into two heads, Games or Commercial Applications.

iPhone is an most powerful devices in the world of mobile platform with higher processing capability, smooth touch interface and long term durability. So,  it has more options from developers point of view. As a matter of fact, initially iPhone was never especially designed as a gaming device. It was rather designed for social networking, internet browsing and checking mails as most mobile manufacturers targets.

But today there are big number of games in the appstore over commercial applications. Games are the clear winner in the appstore market now. The applications (app) in appstore are generally the iphone version of the websites such as facebook app for iphone, twitter app for iphone etc.

So, while developing for iphone you have two options to go on. You can develop commercial apps or make your careers on game developing for iphones and both also :) .

• Commercial App Development

For developing commercial applications, you need to have knowledge of the iphone SDK elements. You will be exploring the iPhone SDK which is provided by Apple to you. There are different E-Books found for getting started with the iPhone SDK. While going through these books, you will find how to use the controllers and views that are used while creating application for iPhone. You will have to go through following elements to become a successful iphone app developer.

1. Views
2. TableViews
3. Navigation Controllers
4. TabBars and Pickers
5. Touch Interactions

If you are interested to learn using video tutorials, you can visit to Stanford University Site. This university provides iPhone Development course based on curriculum designed by the University. You can also download and watch the Lecture Videos of the class that are taken by Stanford Professors and former Apple employees. 

I also learned from the above lecture videos, its really awesome and feels like you are in the class. These are very helpful for learning iPhone development. There are loads of stuffs such as assignments, exam etc. which you can see after you visit above link.

If you go through above lecture, you will see that you are only taught to make iPhone apps but not Games. There are some libraries such as CoreAnimation, which can be used for creating the animations but these are really difficult for a beginners for getting started with the Game Development and create your own Game Engine. So, other options raised with the rise in popularity of iPhone and iPhone games.

• Game Development

Games has always been the most interested and market taking software of all time. While playing games, we rather enjoy playing it than think of creating it. Creating a game is not as simple as it might seems. If you want to create a game, first you need to have better knowledge of game elements. Game is a complete system of visual graphics, audios, animations and events. 

If you want to create you game from scratch, you need to create a Game Engine which would keep track of game variables, game states that occur in your game, so that you can control your game. And to create a game engine is not an easy especially when you are a Beginner Game Developer.

So, there are couple of Game Engines created by third party, which will help you to create a game within less time span. These game engines keeps track of all the low level gaming options, variables, states so that you can work and create new games on top of these engines.

Some of The Game Engines List are:

1.Torque
2.Unity 
3.SIO2 interactive
4.Oolong engine
5.Chipmonk
6.Cocos2d
7.Irrlicht

Edit: If you want to learn more about cocos2d by me, Click here.

For more information of each game engine, click on the above links. Among all the other I prefer Cocos2d. It is because:

1. It is Open Source.
2. It has got a loads of community support.
3. It has online as well as offline documentation.
4. By now it has also got a lot of tutorials in the internet. (At my learning time, there used to be very few tutorials). The blog of Ray Wenderlich is the great source of help for getting started with cocos2d.
5. There are two published books so far on getting started with cocos2d. 

Beside cocos2d, other game engines can also be bought or tested for your company. The Chipmonk is a Physics Engine which is also an Open Source and can be easily integrated with Cocos2d.

Hope these information will help you a little for getting started in iPhone development. Don't forget to leave the comments below if you have any thoughts. Thanks for reading.

Happy Sharing and Programming.