Cocos2d-x game engine development notes (26) Chinese and custom Fonts

Original article, reproduced please indicate the source: http://blog.csdn.net/zhy_cheng/article/details/9736973

Cocos2d-x implements Chinese, there are two ways to transcode and read XML files, For the first, in my blog

[Cocos2d-x game engine development notes (2)] rendering text on the screen has an introduction, next to see how to read Chinese from XML files.

 

The content with source code XML in testcpp is organized as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Plist version = "1.0"> <dict> <key> Chinese </key> <string> level </string> <key> step </key> <string> step </string> <key> beststep </key> <string> Best score: </string> <key> locked </key> <string> not unlocked, continue to work </string> <key> method </key> <string> You can enable all the related cards to experience this level </string> </dict> </plist>

In this way, each Chinese field has a key, which can be used to obtain Chinese characters.
A self-written XML file is as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Plist version = "1.0"> <dict> <key> name </key> <string> linjiangxian </string> </dict> </plist>

 

The following code can be used to read Chinese characters:

CCDictionary *strings = CCDictionary::createWithContentsOfFile("font/chinese.xml");const char *charchinese = ((CCString*)strings->objectForKey("name"))->m_sString.c_str();CCLabelTTF* chinese=CCLabelTTF::create(charchinese,"Arial",24);ccColor3B c;c.r=255;c.g=0;c.b=0;chinese->setColor(c);chinese->setPosition(ccp(400,100));addChild(chinese,1);

The effect is as follows:

In this way, "linjiangxian" appears on the screen ". It is highly recommended to use this method to read Chinese characters. In this way, not only Chinese characters can be read, but Japanese and Korean characters can be read. It is very convenient to internationalize the game, as long as you copy one copy, replace the string part with the corresponding text.

 

You can use bmfont to customize the font. Place the user-defined child on the image and use bmfont to generate a PNG file and an fnt file. Bmfont: http://www.angelcode.com/products/bmfont /.

Below I will demonstrate how to use bmfont to customize numbers and use them in a cocos2d-x.

The following figure shows the resource image, ranging from 0 to 9.

The pictures above are all obtained from cutting the rope.

Select the 10 numbers from 0 to 9 on the page.

In bmfont, click Edit-> open image Manager-> image-> Import image

 

Select an image in file, and enter the ASCII code of the image corresponding to the number in ID. the ASCII code of 0 is 48. Add 10 images in sequence.

Next, choose Options> export options.

Padding refers to the distance between words, and spacing refers to the distance between fonts. in texture, write the size of the PNG image generated, select 32 for bit depth, and select PNG for the following textures. Click OK.

Then options-> Save bitmap font as to generate a PNG file and a fnt file.

Use the following code in the cocos2d-x:

count=0;labelnumber=CCLabelBMFont::create("0123456789","gggg.fnt");labelnumber->setPosition(ccp(240,160));addChild(labelnumber,1);this->schedule(schedule_selector(HelloWorld::timer),0.01f,-1,0);CCLabelTTF* fontlabel=CCLabelTTF::create("zhycheng","font/Schwarzwald Regular.ttf",24);fontlabel->setPosition(ccp(100,100));addChild(fontlabel);

Here I use a timer to constantly update the displayed numbers. The timer function is as follows:

++count;char temp[50];memset(temp,0,50);sprintf(temp,"%d",count);labelnumber->setString(temp);

The result is as follows:

336 in the image is the Custom font.

 

 

For Processing Chinese characters, you only need to know the uincode of Chinese characters. The following pictures are made by myself using PS:

Http://www.guabu.com/zhuanma/ I learned the Unicode of the three Chinese characters "translated into". Similarly, add these three images to bmfont. The ID is the Unicode decimal of these three characters.

The key below is how to select these three Chinese characters. The procedure is as follows:

1. Create a New TXT file with the class capacity of "" and save it as UTF-8

2. In bmfont edit-> select chars from file..., select the TXT file

3. Options-> Save bitmap font

In this way, the PNG and fnt files are obtained.

 

The following code uses a custom Chinese font:

// Obtain Chinese characters. Use the XML file ccdictionary * strings1 = ccdictionary: createwithcontentsoffile ("Font/Chinese. XML "); const char * charchinese1 = (ccstring *) strings-> objectforkey (" zhycheng ")-> m_sstring.c_str (); cclabelbmfont * selfname = cclabelbmfont :: create (charchinese1, "Font/demo. fnt "); selfname-> setposition (CCP (50,200); addchild (selfname, 1 );

The result is as follows:

 

Well, it is enough to use the image to represent the font. Thanks to bmfont for its excellence.

 

Finally, I uploaded the project source code: Click to download