cocos2dx基础篇(6)——字体标签CCLabel

From: http://shahdza.blog.51cto.com/2410787/1541002

【唠叨】

    CCLabelTTF、CCLabelAtlas、CCLabelBMFont。

    cocos2dx提供了三种文字字体的显示：CCLabelTTF（一般字体）、CCLabelAtlas（自定义字体）、CCLabelBMFont（自定义字体）。接下来给大家讲讲这三种字体的使用方法。

【Demo下载】

    http://down.51cto.com/data/1863986

【3.x】

    请移步：http://shahdza.blog.51cto.com/2410787/1560612

---

【CCLabelTTF】

    CCLabelTTF是最简单且使用最方便的字体类，可以使用.ttf格式的字体。其父类为CCSprite，所以也继承了CCSprite所有的操作，故也可以将其当做CCSprite来用。

    CCLabelTTF每次调用 setString（即改变文字）的时候，一个新的OpenGL纹理将会被创建。这意味着setString和创建一个新的标签一样慢。所以，当你需要频繁的更新显示的文字内容的时候，尽可能不去使用该对象，而是使用CCLabelAtlas或者是CCLabelBMFont。

1、常用操作

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

// class  CC_DLL CCLabelTTF :  public  CCSprite,  public  CCLabelProtocol { /**   *     创建CCLabelTTF的三种方法   */      //create(要显示的字符串,字体名称.ttf,字体大小);      //create(要显示的字符串,字体名称.ttf,字体大小,尺寸大小CCSize,水平对其方式)      //create(要显示的字符串,字体名称.ttf,字体大小,尺寸大小CCSize,水平对其方式,垂直对齐方式)      static  CCLabelTTF* create( const  char  *string,  const  char  *fontName,  float  fontSize);      static  CCLabelTTF* create( const  char  *string,  const  char  *fontName,  float  fontSize,  const  CCSize& dimensions, CCTextAlignment hAlignment);      static  CCLabelTTF* create( const  char  *string,  const  char  *fontName,  float  fontSize,  const  CCSize& dimensions, CCTextAlignment hAlignment, CCVerticalTextAlignment vAlignment);     /**   *     属性设置   *     setString ,    *     setHorizontalAlignment , setVerticalAlignment ,    *     setDimensions , setFontSize , setFontName   */      //显示的字符串内容      void  setString( const  char  *label);      const  char * getString( void );        //水平对齐方式CCTextAlignment::          //kCCTextAlignmentLeft             左对齐          //kCCTextAlignmentCenter           居中，默认方式          //kCCTextAlignmentRight            右对齐      void  setHorizontalAlignment(CCTextAlignment alignment);      CCTextAlignment getHorizontalAlignment();        //垂直对齐方式CCVerticalTextAlignment::          //kCCVerticalTextAlignmentBottom   底部          //kCCVerticalTextAlignmentCenter   中心          //kCCVerticalTextAlignmentTop      顶部，默认方式      void  setVerticalAlignment(CCVerticalTextAlignment verticalAlignment);      CCVerticalTextAlignment getVerticalAlignment();        //尺寸大小      void  setDimensions( const  CCSize &dim);      CCSize getDimensions();        //字体大小      void  setFontSize( float  fontSize);      float  getFontSize();        //字体类型名 如Arial,宋体等      void  setFontName( const  char  *fontName);      const  char * getFontName();     /**   *     继承自CCSprite常用函数   *     更多操作见：http://shahdza.blog.51cto.com/2410787/1539567   */      setColor(ccColor3B);   //设置颜色      setPosition(CCPoint);  //设置位置      setRotation( float );    //旋转角度,角度制0~360      setOpacity( float );     //设置透明度      setScale( float );       //放缩      setFlipX( float );       //左右翻转 } //

    

2、代码举例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

//      bool  HelloWorld::init()      {          if  ( !CCLayer::init() ) return  false ;                //获取可视区域尺寸大小          CCSize mysize = CCDirector::sharedDirector()->getVisibleSize();      //获取可视区域的原点位置          CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();      //屏幕正中心位置          CCPoint midPos = ccp(mysize.width/2, mysize.height/2);        //创建CCLabelTTF的三种方法          CCLabelTTF* lb1 = CCLabelTTF::create( "aaaaaaaa" ,  "arial" , 20);          CCLabelTTF* lb2 = CCLabelTTF::create( "bbbbbbbb" ,  "宋体" , 40, CCSizeMake(50,100), CCTextAlignment::kCCTextAlignmentCenter);          CCLabelTTF* lb3 = CCLabelTTF::create( "cccccc" ,  "黑体" , 40, CCSizeMake(480,320), CCTextAlignment::kCCTextAlignmentRight, CCVerticalTextAlignment::kCCVerticalTextAlignmentBottom);        //设置位置,屏幕中心          lb1->setPosition( midPos );          lb2->setPosition( midPos );          lb3->setPosition( midPos );        //添加到HelloWorld层中          this ->addChild(lb1);          this ->addChild(lb2);          this ->addChild(lb3);        //其他操作          lb1->setColor( ccc3(255, 0, 0) );  //设置颜色ccc3          lb1->setRotation(60.0f);           //旋转          lb2->setColor( cocos2d::ccBLUE );  //设置颜色ccBLUE          lb3->setString( "hello world!" );    //设置文字内容      } //

    

3、运行结果

4、分析与总结

    （1）lb2由于设置了其尺寸大小为CCSizeMake(50,100)，所以只显示了一部分的内容。

    （2）lb3的对齐方式为右下角显示。

    （3）CCLabelTTF的锚点为（0.5,0.5）。

---

【CCLabelAtlas】

    CCLabelAtlas一般常用来显示数字信息，如分数、排名等。因为只是数字所以也犯不上使用CCLabelBMFont加载那么大的文字图像，所以使用这个比较合适。而资源一般来自一张.png图片，或.plist文件。不过它也可以用来显示其他字符，如英文字符。

    当然CCLabelAtlas继承于CCNode类，故可以使用父类的一些函数，如：放缩、旋转等操作。

    并且图片中每个字符的大小必须是固定的，若要改变字体大小，只能通过放缩来实现。

    例如如下图数字图片资源：

1、常用操作

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// class  CC_DLL CCLabelAtlas :  public  CCAtlasNode,  public  CCLabelProtocol { /**   *     创建CCLabelAtlas字体方法   */      //create(要显示的数字串,数字资源图片png,每个数字的宽,每个数字的高,图片第一个是什么数字)      //从图片中从左到右，一块一块截取。从数字startCharMap开始一一对应。      //第一块小图片对应数字startCharMap；第二块小图片对应数字startCharMap+1；第三块对应startCharMap+2 …… 以此类推。      //注意：startCharMap为ASCII码，即数字'0'为48。      static  CCLabelAtlas * create( const  char  *string,  const  char  *charMapFile, unsigned  int  itemWidth, unsigned  int  itemHeight, unsigned  int  startCharMap);     /**   *     设置字符串内容   *     注意：内容的文字必须是资源图片中存在的才可以！！！   */      void  setString( const  char  *label);      const  char * getString( void ); }; //

    

2、代码举例

1 2 3 4 5 6 7 8 9 10

//      //创建CCLabelTTF的方法      CCLabelAtlas* lb4 = CCLabelAtlas::create( "20140815" ,  "fonts/digit.png" , 20, 20,  '0' );            //设置位置      lb4->setPosition(midPos);            //添加到HelloWorld层中      this ->addChild(lb4); //

    

3、运行结果

    

4、分析与总结

    （1）CCLabelAtlas使用的图片资源的每块字符的大小必须是固定的，不然会出错。

    （2）CCLabelAtlas常常用来显示数字信息，如分数、排名等。但也可以用来显示英文字母。

    （3）要改变字体大小，只能通过setScale进行放缩。

    （4）锚点为（0,0）。

---

【CCLabelBMFont】

    CCLabelBMFont文字是最快速最自由的字体类。

    CCLabelBMFont的父类是CCSpriteBatchNode，特色就是以占用更多内存为代价加快标签的更新，这与其他任何CCSprite类相似。CCLabelBMFont相当于每次改变只改变了图片坐标，而CCLabelTTF要重新渲染。

    这个类使用之前，需要添加好字体文件，包括一个图片文件（*.png）和一个字体坐标文件（*.fnt），这两个文件名称必须一样。可以下载一个fnt编辑工具来自定义字体。

    值得注意的是：它的每个字母或符号都是单独的一个CCSprite精灵，可以使用getChildByTag(i)来获取第i个位置上的字符，来对每个字符单独设置属性、动作等。

    这个类没办法指定字体的字号，但可以用Scale属性进行缩放来调整大小。

1、常用操作

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

// class  CC_DLL CCLabelBMFont :  public  CCSpriteBatchNode,  public  CCLabelProtocol,  public  CCRGBAProtocol { /**   *     创建CCLabelBMFont方法   */      //create(要显示的字符串,字体资源名称.fnt)      static  CCLabelBMFont * create( const  char  *str,  const  char  *fntFile);     /**   *     属性设置   *     setFntFile , setString ,   *     setAnchorPoint , setAlignment , setWidth ,   *     setScale , setColor , setOpacity   */      //设置字体资源名称.fnt      void  setFntFile( const  char * fntFile);      const  char * getFntFile();        //设置内容      virtual  void  setString( const  char  *newString);      virtual  const  char * getString( void );        //设置锚点      virtual  void  setAnchorPoint( const  CCPoint& var);        //水平对齐方式CCTextAlignment::          //kCCTextAlignmentLeft      左对齐          //kCCTextAlignmentCenter    居中          //kCCTextAlignmentRight     右对齐      virtual  void  setAlignment(CCTextAlignment alignment);        //设置宽度? 可是我用了好像都不知道是什么效果...      virtual  void  setWidth( float  width);        //放缩      virtual  void  setScale( float  scale);      virtual  void  setScaleX( float  scaleX);      virtual  void  setScaleY( float  scaleY);        //设置颜色      virtual  void  setColor( const  ccColor3B& color);      virtual  const  ccColor3B& getColor( void );        //透明度0~255，其中255为不透明      virtual  void  setOpacity(GLubyte opacity); }; //

    

2、代码举例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

//      //创建两个CCLabelBMFont字体          CCLabelBMFont* lb5 = CCLabelBMFont::create( "hello" ,  "fonts/bitmapFontTest.fnt" );          CCLabelBMFont* lb6 = CCLabelBMFont::create( "world" ,  "fonts/bitmapFontTest.fnt" );        //设置位置          lb5->setPosition( midPos );          lb6->setPosition( midPos - ccp(0,100) );        //添加到Layer层中          this ->addChild(lb5);          this ->addChild(lb6);        //属性设置          lb5->setColor(ccRED);   //设置字体颜色为红色          lb6->setString( "abc" );  //设置内容        //获取某个位置的字母,像精灵一样使用          CCSprite* lb5_c1 = (CCSprite*)lb5->getChildByTag(0);  //获取第0个字母h          CCSprite* lb5_c2 = (CCSprite*)lb5->getChildByTag(3);  //获取第3个字母l          lb5_c1->setColor(ccc3(0,255,0));                      //设置为绿色          lb5_c2->setScale(2.0f);                               //放大 //

   

3、运行结果

    

4、分析与总结

    （1）CCLabelBMFont的每个字符都是一个单独的CCSprite精灵，可以对每个字符单独进行设置。

    （2）CCLabelBMFont的使用功能是CCLabel中最丰富最灵活的一个。

    （3）锚点为（0.5,0.5）。