cocos2dx3.2 Label 自动换行，各种label创建方式，描边，阴影，发光等；

{

std::stringfontFilePath; //字体文件路径，如"fonts/Arial.ttf"

int fontSize; //字体大小，默认"12"

GlyphCollectionglyphs; //使用的字符集，默认"DYNAMIC"

const char *customGlyphs;

bool distanceFieldEnabled; //是否让字体紧凑，默认false

outlinesize; //字体轮廓大小，默认"0"

//构造函数

_ttfConfig(

*filePath= ""

ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,

size=12,

GlyphCollection&glyphCollection=GlyphCollection::DYNAMIC,

*customGlyphCollection=nullptr,

usedistanceField= false

ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,

outline=0

);

}TTFConfig;

 2.2、使用TTFConfig创建TTF

 
 
        8 
        
     TTFConfig&ttfConfig,0)!important; background:none!important">//TTFConfig配置

//字符串内容

TextHAlignmentalignment=TextHAlignment::LEFT,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">maxlinewidth=0

//最大文本行宽，0表示不设置。可用于自动换行只用

);

 
 
        12 
        
     TTFConfigttfConfig;

ttfConfig.fontFilePath= "fonts/MarkerFelt.ttf" ; //必须配置

ttfConfig.fontSize=12;

ttfConfig.distanceFieldEnabled= ;

ttfConfig.outlinesize=0;

ttfConfig.glyphs=GlyphCollection::DYNAMIC;

ttfConfig.customGlyphs=nullptr;

//使用TTFConfig配置，来创建TTF

Label*lb3=Label::createWithTTF(ttfConfig,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">);

【createWithCharMap】 
CharMap的用法与2.x中的LabelAtlas是一样的，一般用来显示数字。不过它也可以用来显示其他字符，如英文字符。 
 字体文件资源一般来自一张.png图片，或.plist文件。 
  注：图片中每个字符的大小必须是固定的，若要改变字体大小，只能通过setScale放缩来实现。 
创建CharMap有三种方式：
  
 > 使用.png图片创建
  
 > 使用纹理Texture2D创建
  
 > 使用.plist创建 
   从图片中从左到右，一块一块截取。从字符startCharMap开始一一对应。 
   第一块小图片对应字符startCharMap；第二块小图片对应字符startCharMap+1；第三块对应startCharMap+2 …… 以此类推。 
  注：startCharMap为ASCII码，即：数字 '0' 为48。

 
 
        9 
        
     //charMapFile:字符资源图片png

//itemWidth:每个字符的宽

//itemHeight:每个字符的高

//startCharMap:图片第一个是什么字符

Label*createWithCharMap( std::string&charMapFile,

itemWidth,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">itemHeight,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">startCharMap);

Label*createWithCharMap(Texture2D*texture,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">startCharMap);

std::string&plistFile);

0、字符图片资源 
digit.png：200*20（每个数字20*20）。 
  
1、使用.png创建

 
 
        5 
        
     //create字符图片.png，每个字符宽，高，起始字符

Label*lb4=Label::createWithCharMap( "fonts/digit.png" '0' );

lb4->setString( "123456" ); //设置字符串内容

2、使用Texture2D创建 
 使用方法实际上与.png是类似的。

 
 
        7 
        
     //创建图片纹理Texture2D

Texture2D*texture=TextureCache::getInstance()->addImage(

Label*lb5=Label::createWithCharMap(texture,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">);

lb5->setString( //设置字符串内容

3、使用.plist创建 
 在digit.plist里需要配置：用到的字符图片资源.png，每个字符的宽、高，起始字符。 
如下所示：
  
 
 
        18 
        
      
       
        
        // 
        
        
         
        <? 
        xml 
        version 
        = 
        "1.0" 
        encoding 
        "UTF-8" 
        ?> 
        
        
        <!DOCTYPEplistPUBLIC"-//Apple//DTdplIST1.0//EN""http://www.apple.com/DTDs/PropertyList-1.0.dtd"> 
        
        
        < 
        plist 
        "1.0" 
        > 
        
        
        dict 
        > 
        
        
        key 
        >version</ 
        > 
        <!--plist版本--> 
        
        
        integer 
        >1</ 
        > 
        
        
        >textureFilename</ 
        <!--字符图片资源:digit.png--> 
        
        
        string 
        >digit.png</ 
        > 
        
        
        >itemWidth</ 
        <!--每个字符的宽:20--> 
        
        
        >20</ 
        > 
        
        
        >itemHeight</ 
        <!--每个字符的高:20--> 
        
        
        > 
        
        
        >firstChar</ 
        <!--起始字符:'0'--> 
        
        
        >48</ 
        > 
        
        
        </ 
        > 
        
        
        plist 
        > 
        
        
        //

 
使用plist创建CharMap的方法：

//plist的配置信息，如上所示

Label*lb6=Label::createWithCharMap( "fonts/digit.plist" lb6->setString( );

【createWithBMFont】
  
BMFont的用法与2.x中的LabelBMFont是一样的。 
 这个类使用之前，需要添加好字体文件，包括一个图片文件（*.png）和一个字体坐标文件（*.fnt），这两个文件名称必须一样。可以下载一个fnt编辑工具来自定义字体。 
值得注意的是： 
 >在2.x中，可以使用getChildByTag(i)来获取第i个字符，对其单独设置属性、动作等。 
 >在3.x中，则是使用getLetter(i)，而不再是 getChildByTag(i) 。 
这个类也没办法指定字体的字号大小，需要用setScale来缩放调整大小。

 
 
        9 
        
     Label*createWithBMFont(

std::string&bmfontFilePath,0)!important; background:none!important">//字体文件.font

//内容

TextHAlignment&alignment=TextHAlignment::LEFT,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">maxlinewidth=0,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Vec2&imageOffset=Vec2::ZERO

//字符图片的起始左上角坐标。一般不要设置这个参数，因为坐标的配置均已在.font里完成

);

 
 
        3 
        
     Label*lb7=Label::createWithBMFont(

"bitmapFontTest.fnt"

ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,TextHAlignment::LEFT);

【Label的属性与方法】 
Label继承于： 
SpriteBatchNode: 用于加快字体的渲染速度。 
LabelProtocol : 用于设置Label的字符串内容。 
主要函数如下： 
 
//
class CC_DLL Label : public SpriteBatchNode,public LabelProtocol
{
/**
 * 字体设置
 *     - setSystemFontName : 字体（字体名字、字体文件）
 *     - setSystemFontSize : 字体大小
 *     - setString         : 字符串内容
 *     - setTextColor      : 文字内容颜色
 **/
    //设置System Font类型的字体（字体名字、字体文件）
    //设置System Font类型的字体大小
    //请不要用于其他Label类型！（TTF、CharMap、BMFont）
    virtual void setSystemFontName(const std::string& systemFont);
    virtual void setSystemFontSize(float fontSize);
    virtual const std::string& getSystemFontName() const { return _systemFont;}
    virtual float getSystemFontSize() const { return _systemFontSize;}
 
 
    //改变字符串内容并重新渲染
    //注：如果你没有为Label设置TTF/BMFont/CharMap，会产生很大的开销
    virtual void setString(const std::string& text) override;
    virtual const std::string& getString() const override {  return _originalUTF8String; }
 
 
    //设置文字颜色，仅支持TTF和System Font
    //注：区别 Node节点的颜色
    //      Node ::setColor     : Color3B
    //      Label::setTextColor : Color4B
    virtual void setTextColor(const Color4B &color);
    const Color4B& getTextColor() const { return _textColor; }
 
 
/**
 * 获取Label的某个字符
 *     - getLetter
 *     - 不支持System Font
 **/
    //不支持System Font
    virtual Sprite* getLetter(int lettetIndex);
 
 
/**
 * 文字渲染效果
 *     - Shadow  : 阴影
 *     - Outline : 轮廓，仅支持TTF
 *     - Glow    : 发光，仅支持TTF
 **/
    //阴影Shadow（阴影颜色，相对Label的偏移，模糊度）
    //注: 其中blurRadius在3.2中并未实现
    virtual void enableShadow(const Color4B& shadowColor = Color4B::BLACK,const Size &offset = Size(2,-2),int blurRadius = 0);
 
    //轮廓Outline，仅支持TTF（轮廓颜色，轮廓粗细）
    virtual void enableOutline(const Color4B& outlineColor,int outlinesize = -1);
 
    //发光Glow，仅支持TTF
    virtual void enableGlow(const Color4B& glowColor);
 
    //取消阴影/轮廓/发光渲染效果
    virtual void disableEffect();
 
 
/**
 * 对齐方式
 *    > TextHAlignment : 水平对齐方式
 *        - TextHAlignment:LEFT    : 左对齐
 *        - TextHAlignment:CENTER  : 居中对齐，默认
 *        - TextHAlignment:RIGHT   : 右对齐
 *    > TextVAlignment : 垂直对齐方式
 *        - TextVAlignment::TOP    : 顶部，默认
 *        - TextVAlignment::CENTER : 中心
 *        - TextVAlignment::BottOM : 底部
 **/
    //设置对齐方式
    void setAlignment(TextHAlignment hAlignment) { setAlignment(hAlignment,_vAlignment);}
    void setAlignment(TextHAlignment hAlignment,TextVAlignment vAlignment);
    TextHAlignment getTextAlignment() const { return _hAlignment;}
 
    //设置水平对齐方式
    void setHorizontalAlignment(TextHAlignment hAlignment) { setAlignment(hAlignment,_vAlignment); }
    TextHAlignment getHorizontalAlignment() const { return _hAlignment; }
 
    //设置垂直对齐方式
    void setVerticalAlignment(TextVAlignment vAlignment) { setAlignment(_hAlignment,vAlignment); }
    TextVAlignment getVerticalAlignment() const { return _vAlignment; }
 
 
/**
 * Label尺寸大小
 *     - setLineBreakWithoutSpace : 开启自动换行功能
 *     - setMaxlinewidth          : 文字内容的最大行宽
 *     - setWidth                 : Label尺寸大小，宽
 *     - setHeight                : Label尺寸大小，高
 *     - setDimensions            : Label尺寸大小
 **/
    //是否开启自动换行功能
    void setLineBreakWithoutSpace(bool breakWithoutSpace);
 
 
    //最大行宽，内容超过Maxlinewidth，就会自动换行
    //前提条件: 仅在width==0时，起作用。
    //  > width == 0;
    //  > setMaxlinewidth(linewidth);
    //  > setLineBreakWithoutSpace(true);
    //它的效果与下面是类似的.
    //  > setWidth(linewidth);
    //  > setLineBreakWithoutSpace(true);
    //只是width==0时，就无法设置文本的对齐方式了.
    void setMaxlinewidth(unsigned int maxlinewidth);
    unsigned int getMaxlinewidth() { return _maxlinewidth;}
 
 
    //设置Label的尺寸大小
    //可以理解为Label的文本框大小
    //当setLineBreakWithoutSpace(true)时，内容超过width，会自动换行
    //并且内容支持文本的对齐方式
    //注：设置尺寸大小，使用的是setDimensions，而不是setContentSize ！
    void setWidth(unsigned int width) { setDimensions(width,_labelHeight); }
    void setHeight(unsigned int height){ setDimensions(_labelWidth,height); }
    void setDimensions(unsigned int width,unsigned int height);
    unsigned int getWidth() const { return _labelWidth; }
    unsigned int getHeight() const { return _labelHeight; }  
    const Size& getDimensions() const{ return _labelDimensions; }
 
 
/**
 * v3.2 新增
 *     - setLineHeight        : 设置行间距
 *     - setAdditionalKerning : 设置文字间距
 *     - getStringLength      : 字符串内容长度
 */
    //设置行间距，不支持system font
    void setLineHeight(float height);
    float getLineHeight() const;
 
    //设置文字间距，不支持system font
    void setAdditionalKerning(float space);
    float getAdditionalKerning() const;
 
    //获取Label的字符串内容长度
    int getStringLength() const;
 
 
/**
 * 重写Node父类的方法
 *     - setBlendFunc   : 混合模式
 *     - setScale       : 放缩字体大小
 *     - addChild       : 添加子节点
 *     - getDescription : 显示Label的描述
 **/
    //设置颜色混合模式
    virtual void setBlendFunc(const BlendFunc &blendFunc) override;
 
    //放缩字体大小（一般用于CharMap、BMFont）
    virtual void setScale(float scale) override;
    virtual void setScaleX(float scaleX) override;
    virtual void setScaleY(float scaleY) override;
    virtual float getScaleX() const override;
    virtual float getScaleY() const override;
 
    //添加子节点
    virtual void addChild(Node * child,int zOrder=0,int tag=0) override;
    virtual void sortAllChildren() override;
 
    //Label描述
    virtual std::string getDescription() const override;
};
// 

 

 
 
 
  
  
 
【文字渲染效果】 
支持三种渲染效果： 
Shadow : 阴影 
Outline: 轮廓，仅支持TTF 
Glow  : 发光，仅支持TTF 
注：其中Outline与Glow两个效果，只会作用一个。即无法一起使用。

Label*lb=Label::createWithTTF( 
        ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,50); 
       

lb->setPosition(visibleSize/2);

this ->addChild(lb);

lb->enableShadow(Color4B::GREEN,Size(10,10)); //阴影

lb->enableOutline(Color4B::RED,3); //轮廓

//lb->enableGlow(Color4B::GREEN);//发光

//取消阴影、轮廓、发光效果

//lb->disableEffect();

如图所示： 
【对齐方式】 
TextHAlignment: 水平对齐方式 
 - TextHAlignment:LEFT  : 左对齐 
CENTER : 居中对齐，默认 
RIGHT : 右对齐 
TextVAlignment: 垂直对齐方式 
 - TextVAlignment::TOP  : 顶部，默认 
CENTER: 中心 
BottOM: 底部 
 仅在设置了Label的尺寸大小setDimensions(width,height)，大于显示的字符串内容的尺寸大小，才会起作用。
  
对齐方式举例，如下几张图片所示：
  
对齐方式为：
  
 >TextHAlignment:LEFT 
TextVAlignment::TOP 
【自动换行】 
 在3.x中，自动换行有两种方式。（当然你也可以使用C++里的转移字符'\n'进行手动换行）
  
 > 利用lb->setLineBreakWithoutSpace(true)，来支持自动换行功能。 
 > 1. 利用setMaxlinewidth(maxlinewidth)，来控制自动换行。 
 > 2. 利用setDimensions(width,height)，来控制自动换行。 
1、利用setMaxlinewidth 
 设置每行显示文字的最大宽度。 
注：这种方法仅在Label width == 0的情况下，才会有效。
  
使用方法：

lb->setLineBreakWithoutSpace( 
        true 
        ); 
       

lb->setMaxlinewidth(120); //最大宽度120

如图：
  
2、利用setDimensions

lb->setWidth(80); 
        //设置Label尺寸宽80 
       

//设置了Labelwidth，这个就无效了

【文字间距】
 间距的调整，是在 v3.2 之后才出现的。可以设置文本内容的行间距与文字间距。
 
注：不支持System Font。
 
setLineHeight    : 设置行间距
setAdditionalKerning: 设置额外文字间距
 
lb->setLineHeight(80); 
       
        lb->setAdditionalKerning(10); 
       
        图解：
【单独设置某个字符】
 学过2.x中的LabelBMFont的同学，应该知道这个是怎么回事吧？
   在3.x中，使用TTF、CharMap、BMFont创建的文字标签，其字符串内容的每个字符都是一个Sprite精灵图片，可以对其进行单独的设置。如精灵放缩、执行动作等。
 
 > lb->getStringLength(): 获取字符串内容的总长度
getLetter(i)   : 获取第i个位置上的字符
 
        18 
      
     //获取字符串总长度，length=6 
       
        cclOG( 
        "%d" 
        ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,lb->getStringLength()); 
       
        //获取第1个字符 
       
        Sprite*letter1=lb->getLetter(1); 
       
        letter1->setColor(Color3B::GREEN); 
        //设置颜色 
       
        letter1->setScale(2.0f); 
        //放缩 
       
        //获取第4个字符 
       
        Sprite*letter4=lb->getLetter(4); 
       
        letter4->setColor(Color3B::RED); 
        //设置颜色 
       
        letter4->runAction(RepeatForever::create(RotateBy::create(1.0f,90))); 
        //执行旋转动作


            
            

            
              
                相关文章

                
              
                如何使用CCRenderTexture创建动态纹理 Cocos2d-x 2 1 4
              
                  本文实践自 RayWenderlich、Ali Hafizji 的文章《...
            

              
                Cocos-code-ide使用入门学习
              
              Cocos-code-ide使用入门学习地点：杭州滨江邮箱：appdevzw@1...
            

              
                Cocos2D-x-3.0 编译(Win7)
              
              第一次開始用手游引擎挺激动！！！进入正题。下载资源1：从C...
            

                
              
                Cocos2d-x 2 0 在Windows平台下的使用
              
                  Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
            

                
              
                quick-cocos2d-x实例之挑战记忆极限设计文档
              
              1.  来源 QuickV3sample项目中的2048样例游戏，以及最近《...
            

                
              
                Cocos2d-x 3 X CMake MinGW版本编译运行
              
                 Cocos2d-x3.x已经支持使用CMake来进行构建了，这里尝试...


    
    
        
            Copyright © 2018 编程之家. 当前版本 V7.0.16

            编程之家 版权所有 
            闽ICP备13020303号-8