How to make fancy labels using Cocos2D?

UPDATE:

It’s been 2 years, and I am using Cocos2d again, and I discovered that the old Hiero binary seems to be buggy in OSX Lion, anyway, found  a newer build : http://www.cocos2d-iphone.org/forum/topic/220/page/2#post-145909.

—-

A very short tutorial.

I’m reading Cocos2D for iPhone Beginner’s Guide, and I’m reading Chapter 4 right now, called Pasting Labels, because I’m working on my game’s HUD. According to the book, there are three ways for displaying text in Cocos2D, first is CCLabel (which according to the author, is not very efficient, also it only supports the iOS fonts, which are Arial, Helvetica… which are not very much), and then there’s CCLabelAtlas (which is getting the characters from an image, you can do a lot of fancy effects using this, but the fonts has to be fixed width), and then there’s option number 3, which is CCBitmapFontAtlas.

The book introduced the Hiero Bitmap Font Tool for making CCBitmapFontAtlas (download link: http://slick.cokeandcode.com/demos/hiero.jnlp). So basically, I just followed the instructions in the book: download the software, run the software…

image

The book gave examples on how to use the Effects in Hiero, but I don’t find it sufficient, so I’m going to leave it plain, but I will add a bit of padding on the side (3, 3, 3, 3).

Go to File-> Save BMP font files…

It will save a .fnt and a .png. For some odd reason my .pngs are always inverted, so I open it in Photoshop…

image

I added the background, so you can see my text clearer. See, it’s inverted, so I just go to Image-> Image Rotation-> Flip Canvas Vertical.

The next step is double click on the Layer of the text or go to Layer-> Layer Style-> …

And add some fancy layer effects to your text. I only added Drop Shadow, but you can all sorts of fancy stuff, like Outer Glow, Bevel…

image

And then your text will look like this:

image

Save your file.

Drag the edited .png file and the .fnt file to your XCode project.

Some code for the CCBitmapFontAtlas:

CCBitmapFontAtlas * lblHighScoreTitle = [CCBitmapFontAtlas bitmapFontAtlasWithString:@”HIGH SCORE: ” fntFile:@”helveticaCY.fnt”];

And voila! You’re good to go!

Review: Cocos2d for iPhone 0.99 Beginner’s Guide

This book is written by Pablo Ruiz, a very active member of the Cocos2D iPhone community forums, he even helped me through my Cocos2d iPhone development.This book is written for people beginning iPhone development using Cocos2D, but it assumes that the readers already have a background in programming. So if you never programmed before in your life, this book may be a bit of an information overload.

This book starts from the beginning, from downloading to installing Cocos2D and getting example projects to work. It also explains the basic structure of a Cocos2D game.

This book will actually teach you to do three different types of games, a puzzle game (think Bejewelled), a shooter game (think Espagaluda, but using the accelerometer as controls), and a physics game, he calls Totem Balance (which reminds me of a Unity3D game called  TumbleDrop).

But, if you are looking for a book with codes that you can just copy and paste to make your first game, this may not be it. This book was written before the new version of Cocos2D was released (0.99.5), so if you are downloaded the latest version of Cocos2D, and copy pasted the codes from the book, there are some that may not work out as planned. After each code bit, there is this What just Happened section wherein the author explains what happens with the code. So if you read through the explanations, you get the theory of how things work. Besides, if you really get stuck, you can simply drop by the forums, and the author, along with all the other helpful forum people is more than willing to help you.

 Aside from the example games, the book also covers a lot of topics. He even covers a lot of little details that I did not think a beginner needs to know about, but helpful nonetheless. Like, pixel formats, when I first started Cocos2D, I did not really care much about the pixel formats that each of my sprites are using, but of course, when I started looking for ways to optimize my project, that’s when I find that information very useful. So I guess, if I had known about that early on, I would have had those problems with optimization. So kudos to the author for including those details.

Overall, I think this book is a very comprehensive guide to anyone, who has a bit of background in programming, and wants to start making games using Cocos2D.

Link: http://link.packtpub.com/c65cvt