Font in Cocos2d-X, Cocos2d-X font

Source: Internet
Author: User

Font in Cocos2d-X, Cocos2d-X font

There are three ways to display text in a Cocos2d-X:

CCLabelTTF: The system font is used. Each character string generates a texture, which is less efficient and suitable for non-changing text.

CCLabelAtlas: Uses NodeAtlas to optimize rendering. It is suitable for numbers that change frequently, such as scores and money.

CCLabelBMFont: it is flexible to use CCSpriteBatchNode. Each character is an genie. You can operate on each character and use the image directly to draw the text.


Set the text font to CCLabelTTF.

// Set the attribute bool Label: init () {// initialize the parent class CCLayer: init (); // set the window size CCSize winSize = CCDirector :: sharedDirector ()-> getWinSize (); // create a font with the following words: CCLabelTTF * label = CCLabelTTF: create ("This is Text", "Arial ", 25); addChild (label); // set the text position setPosition (ccp (winSize. width/2, winSize. height/2); return true ;}


Code parsing:

CCLabelTTF * label = CCLabelTTF: create ("This is Text", "Arial", 25 );

First parameter: displayed text

Second parameter: text font

Third parameter: Text Size


Execution result:


Traverse all the CCLabelTTF Fonts

Add the following code to Label. h:

#ifndef __Label_H__#define __Label_H__#include "cocos2d.h"USING_NS_CC ;class Label : public CCLayer{public:    bool init();      static CCScene* scene();    bool ccTouchBegan(CCTouch*,CCEvent);    void ccTouchMoved(CCTouch*, CCEvent*);        CREATE_FUNC(Label);};#endif

Add the following code to Label. cpp:

<Span style = "color: #000000;"> # include "Label. h "USING_NS_CC; // contains all the CCLabelTITF fonts static const char * _ font [] = {" AppleGothic "," HiraKakuProN-W6 "," HiraKakuProN-W3 "," MarkerFelt-Thin ", "STHeitiK-Medium", "STHeitiK-Light", "TimesNewRomanPSMT", "Helvetica-Oblique", "Helvetica-BoldOblique", "Helvetica", "Helvetica-Bold ", "TimesNewRomanPS-BoldMT", "TimesNewRomanPS-BoldItalicMT", "TimesNewRomanPS-ItalicMT", "Verdana-Bold", "Verdana-BoldItalic", "Verdana", "Verdana-Italic ", "Georgia-Bold", "Georgia", "Georgia-BoldItalic", "Georgia-Italic", "ArialRoundedMTBold", "TrebuchetMS-Italic", "TrebuchetMS ", "Trebuchet-BoldItalic", "TrebuchetMS-Bold", "STHeitiTC-Light", "STHeitiTC-Medium", "GeezaPro-Bold", "GeezaPro", "Courier ", "Courier-BoldOblique", "Courier-Oblique", "Courier-Bold", "ArialMT", "Arial-BoldMT", "Arial-BoldItalicMT", "Arial-ItalicMT ", "STHeitiJ-Medium", "STHeitiJ-Light", "ArialHebrew", "ArialHebrew-Bold", "CourierNewPS-BoldMT", "CourierNewPS-BoldItalicMT", "success ", "Thonburi-Bold", "AmericanTypewriter", "AmericanTypewriter-Bold", "STHeitiSC-Medium", "STHeitiSC-Light", "HelveticaNeue", "HelveticaNeue ", "HelveticaNeue-Bold", "Zapfino"}; CCScene * Label: scene () {// create a CCScene * s = CCScene: create (); // create a CCLayer * layer = Label: create (); // Add the scenario to the callback s-> addChild (layer); // return the scenario return s ;} // set the attribute bool Label: init () {// initialize the parent class CCLayer: init (); // set the window size CCSize winSize = CCDirector :: shareddire()-> getWinSize (); int height = 0; // traverse all fonts in the CCLabelTIF for (int I = 0; I <sizeof (_ font) /sizeof (* _ font); I ++) {// create a font, and use this as the font. The text CCLabelTTF * label = CCLabelTTF: create (_ font [I], _ font [I], 25); // obtain the font width and height. CCSize size = label-> boundingBox (). size; addChild (label); // set the text position label-> setPosition (ccp (winSize. width/2, height + size. height/2); height + = size. height;} setTouchEnabled (true); setTouchMode (kCCTouchesOneByOne); return true;} bool Label: ccTouchBegan (CCTouch * touch, CCEvent) {return true;} void Label :: ccTouchMoved (CCTouch * touch, CCEvent *) {// get the CCPoint ptDelta = touch-> getDelta (); // setPositionY (getPositionY () + ptDelta. y) ;}</span>

Execution result:


Use CCLabelAtlas to display color Fonts

First, you need a png Image and put it in the Resource Directory.


Then add the following code

// Set the attribute bool LabelAtlas: init () {// initialize the parent CCLayer: init (); // set the window size CCSize winSize = CCDirector :: sharedDirector ()-> getWinSize (); // create an Atlas font // The first parameter: displayed content // The second parameter: image name // The third parameter: the width of the image // The fourth parameter: The Image Height // The Fifth parameter: The ASCALL code value of the first word in the image, CCLabelAtlas * label = CCLabelAtlas: create ("18937302 ", "labelatlasimg.png", 24, 32, '0'); addChild (label); // you can specify the position label> setPosition (winSize) for text display. width/2, winSize. height/2); return true ;}

Execution result:


Add the following code to the code above to modify the text.

// Change the displayed number label-> setString ("87899 ");

Execution result:


Use CCLabelBMFont to display color words

First, you need a png Image and put it in the Resource Directory.


Then add the following code

// Set the attribute bool BMFont: init () {// initialize the parent class CCLayer: init (); // set the window size CCSize winSize = CCDirector :: sharedDirector ()-> getWinSize (); // you can specify CCPoint ptCenter = ccp (winSize. width/2, winSize. height/2); // create an Atlas font // The first parameter: displayed content // The second parameter: name of the description file of the image file: CCLabelBMFont * label = CCLabelBMFont :: create ("abc", "bitmapFontTest. fnt "); addChild (label); // set the text display position label-> setPosition (ptCenter); return true ;}

Execution result:


Use CCLabelBMFont for rotating characters

// Set the attribute bool BMFont: init () {// initialize the parent class CCLayer: init (); // set the window size CCSize winSize = CCDirector :: sharedDirector ()-> getWinSize (); // you can specify CCPoint ptCenter = ccp (winSize. width/2, winSize. height/2); // create an Atlas font // The first parameter: displayed content // The second parameter: name of the description file of the image file: CCLabelBMFont * label = CCLabelBMFont :: create ("abc", "bitmapFontTest. fnt "); addChild (label); // set the text display position label-> setPosition (ptCenter ); // enter the characters in the label field into the CCArray * arr = label-> getChildren (); // select the characters in the array, objectAtIndex (0) indicates selecting the 0th characters in the array CCSprite * sprite = (CCSprite *) arr-> objectAtIndex (0); // The character rotates for 90 degrees sprite-> setRotation (90 ); return true ;}

Execution result:


Use CCLabelBMFont to enlarge characters

// Set the attribute bool BMFont: init () {// initialize the parent class CCLayer: init (); // set the window size CCSize winSize = CCDirector :: sharedDirector ()-> getWinSize (); // you can specify CCPoint ptCenter = ccp (winSize. width/2, winSize. height/2); // create an Atlas font // The first parameter: displayed content // The second parameter: name of the description file of the image file: CCLabelBMFont * label = CCLabelBMFont :: create ("abc", "bitmapFontTest. fnt "); addChild (label); // set the text display position label-> setPosition (ptCenter ); // enter the characters in the label field into the CCArray * arr = label-> getChildren (); // select the characters in the array, objectAtIndex (0) indicates to select the 0th characters in the array CCSprite * sprite = (CCSprite *) arr-> objectAtIndex (0); // enlarge the sprite-> setScale (2 ); return true ;}

Execution result:

Zookeeper
Cocos2dx development: how can we change the font when using CCLabelTTF? How can I find that the font cannot be changed? I mainly use it to output numbers.

Windows does not support very well. The old integrated graphics card does not support opengl1.5 or later versions. The font on the mobile phone is effective. You can try it on a black apple Virtual Machine by yourself.

Cocos2d-x get text width

GetContentSize (). width
GetContentSize (). height

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.