频道导航

总结Cocos2d-x 3.0 中新字体标签Label

2019-05-18 Cocos2d-x 前端之家

前端之家收集整理的这篇文章主要介绍了总结Cocos2d-x 3.0 中新字体标签Label，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

在3.x中，废弃了2.x里的LabelTTF、LabelAtlas、LabelBMFont三个字体类，取而代之的是全新的字体标签Label。

实际上Label是将三个字体类进行了融合，进行统一的管理与渲染，这使得创建字体标签Label的方式更加统一，更加方便。

本节来学习一下3.x中新的标签类Label，如果对2.x中的三个字体类不了解的话，建议先去看看那三个类的用法，再来学习本节内容，能够更好的理解。

（2.x中的旧标签类，请查看这里）

【本节内容】

在3.x中，Label支持四种方式的标签创建。并新增了阴影Shadow、轮廓Outline、发光Glow效果的支持。还支持文字内容的行间距、文字间距、自动换行的设置。

创建系统原生字体API:createWithSystemFont
创建TTF:createWithTTF（原LabelTTF）
创建CharMap:createWithCharMap（原LabelAtlas）
创建BMFont:createWithBMFont（原LabelBMFont）
Label的属性与方法
文字效果渲染:Shadow、Outline、Glow
对齐方式:TextHAlignment、TextVAlignment
Label的尺寸大小
自动换行
行间距、文字间距
单独设置某个字符

PS：关于图片资源，请在Cocos2dx给出的官方样例cpp-tests中寻找。

【createWithSystemFont】

创建系统原生字体的API。

创建方式如下：

[cpp]view plaincopy 
   
 //
 staticLabel*createWithSystemFont(
 conststd::string&text,//字符串内容
conststd::string&font,0); background-color:inherit">//字体（字体名称、或字体文件）
 floatfontSize,0); background-color:inherit">//字号
constSize&dimensions=Size::ZERO,0); background-color:inherit">//label的尺寸大小，默认不设置尺寸
 TextHAlignmenthAlignment=TextHAlignment::LEFT,//水平对齐方式，默认左对齐::LEFT
 TextVAlignmentvAlignment=TextVAlignment::TOP//垂直对齐方式，默认顶部::TOP
 );
 //

使用举例：

copy 
    
   

Label*lb1=Label::createWithSystemFont("123abc","Arial",24);
//

【createWithTTF】

创建TTF的方式有以下两种：

方式一：与2.x中LabelTTF的创建类似，不过使用的fontFile必须为字体文件。
方式二：通过TTF的配置信息数据结构TTFConfig来创建。

1、方式一：与SystemFont创建类似

注：区别在于fontFile必须为字体文件（如"*.ttf"），即不支持使用系统字体名称来创建。

2、方式二：通过TTFConfig配置来创建

2.1、TTFConfig配置

copy 
    
   

struct

_ttfConfig

{
std::stringfontFilePath;//字体文件路径，如"fonts/Arial.ttf"
intfontSize;//字体大小，默认"12"
GlyphCollectionglyphs;//使用的字符集，默认"DYNAMIC"
constchar*customGlyphs;
booldistanceFieldEnabled;//是否让字体紧凑，默认false
intoutlineSize;//字体轮廓大小，默认"0"
//构造函数
_ttfConfig(
char*filePath="",
intsize=12,
constGlyphCollection&glyphCollection=GlyphCollection::DYNAMIC,87); background-color:inherit; font-weight:bold">char*customGlyphCollection=nullptr,87); background-color:inherit; font-weight:bold">booluseDistanceField=false,87); background-color:inherit; font-weight:bold">intoutline=0
}TTFConfig;
2.2、使用TTFConfig创建TTF

copy

Label*createWithTTF(

constTTFConfig&ttfConfig,0); background-color:inherit">//TTFConfig配置
//字符串内容
TextHAlignmentalignment=TextHAlignment::LEFT,
intmaxLineWidth=0//最大文本行宽，0表示不设置。可用于自动换行只用
copy

TTFConfigttfConfig;

ttfConfig.fontFilePath="fonts/MarkerFelt.ttf";//必须配置
ttfConfig.fontSize=12;
ttfConfig.distanceFieldEnabled=false;
ttfConfig.outlineSize=0;
ttfConfig.glyphs=GlyphCollection::DYNAMIC;
ttfConfig.customGlyphs=nullptr;
//使用TTFConfig配置，来创建TTF
Label*lb3=Label::createWithTTF(ttfConfig,"123abc");
//

【createWithCharMap】

CharMap的用法与2.x中的LabelAtlas是一样的，一般用来显示数字。不过它也可以用来显示其他字符，如英文字符。

字体文件资源一般来自一张.png图片，或.plist文件。

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

创建CharMap有三种方式：

使用.png图片创建
使用纹理Texture2D创建
使用.plist创建

从图片中从左到右，一块一块截取。从字符startCharMap开始一一对应。

第一块小图片对应字符startCharMap；第二块小图片对应字符startCharMap+1；第三块对应startCharMap+2……以此类推。

注：startCharMap为ASCII码，即：数字'0'为48。

copy 
    
   

//itemWidth:每个字符的宽
//itemHeight:每个字符的高
//startCharMap:图片第一个是什么字符
staticLabel*createWithCharMap(conststd::string&charMapFile,intitemWidth,87); background-color:inherit; font-weight:bold">intitemHeight,87); background-color:inherit; font-weight:bold">intstartCharMap);
staticLabel*createWithCharMap(Texture2D*texture,87); background-color:inherit; font-weight:bold">intstartCharMap);
conststd::string&plistFile);
0、字符图片资源

digit.png：200*20（每个数字20*20）。

@H_301_590@1、使用.png创建

copy
1. Label*lb4=Label::createWithCharMap("fonts/digit.png",20,'0');
2. lb4->setString("123456");//设置字符串内容
3. //
2、使用Texture2D创建

使用方法实际上与.png是类似的。

copy
1. Texture2D*texture=TextureCache::getInstance()->addImage("fonts/digit.png");
2. Label*lb5=Label::createWithCharMap(texture,'0');
3. lb5->setString("123456");
  3、使用.plist创建
  
  在digit.plist里需要配置：用到的字符图片资源.png，每个字符的宽、高，起始字符。
  
  如下所示：
  
  [html] copy
  1. <?xmlversion="1.0"encoding="UTF-8"?>
  2. <!DOCTYPEplistPUBLIC"-//Apple//DTDPLIST1.0//EN""http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  3. <plistversion="1.0">
  4. dictkey>version</>
  5. integer>1>textureFilename
  6. string>digit.png>itemWidth
  7. >20>itemHeight
  8. >firstChar
  9. >48plist //
  使用plist创建CharMap的方法：
  
  copy
  1. Label*lb6=Label::createWithCharMap("fonts/digit.plist");
  2. lb6->setString("123456");
  3. 【createWithBMFont】
    
    BMFont的用法与2.x中的LabelBMFont是一样的。
    
    这个类使用之前，需要添加好字体文件，包括一个图片文件（*.png）和一个字体坐标文件（*.fnt），这两个文件名称必须一样。可以下载一个fnt编辑工具来自定义字体。
    
    值得注意的是：
    
    在2.x中，可以使用getChildByTag(i)来获取第i个字符，对其单独设置属性、动作等。
    
    在3.x中，则是使用getLetter(i)，而不再是getChildByTag(i)。
    
    这个类也没办法指定字体的字号大小，需要用setScale来缩放调整大小。
    
    copy
    
    staticLabel*createWithBMFont(
    conststd::string&bmfontFilePath,0); background-color:inherit">//字体文件.font
    
    //内容
    
    constTextHAlignment&alignment=TextHAlignment::LEFT,87); background-color:inherit; font-weight:bold">intmaxLineWidth=0,153); background-color:inherit; font-weight:bold">constVec2&imageOffset=Vec2::ZERO//字符图片的起始左上角坐标。一般不要设置这个参数，因为坐标的配置均已在.font里完成
    
    );
    
    copy
    
    Label*lb7=Label::createWithBMFont("bitmapFontTest.fnt","123abc",TextHAlignment::LEFT);
    【Label的属性与方法】
    
    Label继承于：
    
    SpriteBatchNode:用于加快字体的渲染速度。
    
    LabelProtocol:用于设置Label的字符串内容。
    
    主要函数如下：
    
    copy
    
    classCC_DLLLabel:publicSpriteBatchNode,publicLabelProtocol
    /**
    
    *字体设置
    
    *-setSystemFontName:字体（字体名字、字体文件）
    
    *-setSystemFontSize:字体大小
    
    *-setString:字符串内容
    
    *-setTextColor:文字内容颜色
    
    **/
    
    //设置SystemFont类型的字体（字体名字、字体文件）
    
    //设置SystemFont类型的字体大小
    
    //请不要用于其他Label类型！（TTF、CharMap、BMFont）
    
    virtualvoidsetSystemFontName(conststd::string&systemFont);
    
    voidsetSystemFontSize(floatfontSize);
    
    conststd::string&getSystemFontName()const{return_systemFont;}
    
    virtualfloatgetSystemFontSize()return_systemFontSize;}
    
    //改变字符串内容并重新渲染
    
    //注：如果你没有为Label设置TTF/BMFont/CharMap，会产生很大的开销
    
    voidsetString(conststd::string&text)override;
    
    conststd::string&getString()constoverride{return_originalUTF8String;}
    
    //设置文字颜色，仅支持TTF和SystemFont
    
    //注：区别Node节点的颜色
    
    //Node::setColor:Color3B
    
    //Label::setTextColor:Color4B
    
    voidsetTextColor(constColor4B&color);
    
    constColor4B&getTextColor()return_textColor;}
    
    *获取Label的某个字符
    
    *-getLetter
    
    *-不支持SystemFont
    
    //不支持SystemFont
    
    virtualSprite*getLetter(intlettetIndex);
    
    /**
    
    *文字渲染效果
    
    *-Shadow:阴影
    
    *-Outline:轮廓，仅支持TTF
    
    *-Glow:发光，仅支持TTF
    
    //阴影Shadow（阴影颜色，相对Label的偏移，模糊度）
    
    //注:其中blurRadius在3.2中并未实现
    
    voidenableShadow(constColor4B&shadowColor=Color4B::BLACK,153); background-color:inherit; font-weight:bold">constSize&offset=Size(2,-2),87); background-color:inherit; font-weight:bold">intblurRadius=0);
    
    //轮廓Outline，仅支持TTF（轮廓颜色，轮廓粗细）
    
    voidenableOutline(constColor4B&outlineColor,87); background-color:inherit; font-weight:bold">intoutlineSize=-1);
    
    //发光Glow，仅支持TTF
    
    voidenableGlow(constColor4B&glowColor);
    
    //取消阴影/轮廓/发光渲染效果
    
    voiddisableEffect();
    
    *对齐方式
    
    *>TextHAlignment:水平对齐方式
    
    *-TextHAlignment:LEFT:左对齐
    
    *-TextHAlignment:CENTER:居中对齐，默认
    
    *-TextHAlignment:RIGHT:右对齐
    
    *>TextVAlignment:垂直对齐方式
    
    *-TextVAlignment::TOP:顶部，默认
    
    *-TextVAlignment::CENTER:中心
    
    *-TextVAlignment::BOTTOM:底部
    
    **/
    
    //设置对齐方式
    
    voidsetAlignment(TextHAlignmenthAlignment){setAlignment(hAlignment,_vAlignment);}
    
    voidsetAlignment(TextHAlignmenthAlignment,TextVAlignmentvAlignment);
    
    TextHAlignmentgetTextAlignment()return_hAlignment;}
    
    //设置水平对齐方式
    
    voidsetHorizontalAlignment(TextHAlignmenthAlignment){setAlignment(hAlignment,_vAlignment);}
    
    TextHAlignmentgetHorizontalAlignment()//设置垂直对齐方式
    
    voidsetVerticalAlignment(TextVAlignmentvAlignment){setAlignment(_hAlignment,vAlignment);}
    
    TextVAlignmentgetVerticalAlignment()return_vAlignment;}
    
    *Label尺寸大小
    
    *-setLineBreakWithoutSpace:开启自动换行功能
    
    *-setMaxLineWidth:文字内容的最大行宽
    
    *-setWidth:Label尺寸大小，宽
    
    *-setHeight:Label尺寸大小，高
    
    *-setDimensions:Label尺寸大小
    
    //是否开启自动换行功能
    
    voidsetLineBreakWithoutSpace(boolbreakWithoutSpace);
    
    //最大行宽，内容超过MaxLineWidth，就会自动换行
    
    //前提条件:仅在width==0时，起作用。
    
    //>width==0;
    
    //>setMaxLineWidth(lineWidth);
    
    //>setLineBreakWithoutSpace(true);
    
    //它的效果与下面是类似的.
    
    //>setWidth(lineWidth);
    
    //>setLineBreakWithoutSpace(true);
    
    //只是width==0时，就无法设置文本的对齐方式了.
    
    voidsetMaxLineWidth(unsignedintmaxLineWidth);
    
    unsignedintgetMaxLineWidth(){return_maxLineWidth;}
    
    //设置Label的尺寸大小
    
    //可以理解为Label的文本框大小
    
    //当setLineBreakWithoutSpace(true)时，内容超过width，会自动换行
    
    //并且内容支持文本的对齐方式
    
    //注：设置尺寸大小，使用的是setDimensions，而不是setContentSize！
    
    voidsetWidth(unsignedintwidth){setDimensions(width,_labelHeight);}
    
    voidsetHeight(unsignedintheight){setDimensions(_labelWidth,height);}
    
    voidsetDimensions(unsignedintwidth,unsignedintheight);
    
    unsignedintgetWidth()return_labelWidth;}
    
    intgetHeight()return_labelHeight;}
    
    constSize&getDimensions()return_labelDimensions;}
    
    *v3.2新增
    
    *-setLineHeight:设置行间距
    
    *-setAdditionalKerning:设置文字间距
    
    *-getStringLength:字符串内容长度
    
    */
    
    //设置行间距，不支持systemfont
    
    voidsetLineHeight(floatheight);
    
    floatgetLineHeight()const;
    
    //设置文字间距，不支持systemfont
    
    voidsetAdditionalKerning(floatspace);
    
    floatgetAdditionalKerning()//获取Label的字符串内容长度
    
    intgetStringLength()const;
    
    *重写Node父类的方法
    
    *-setBlendFunc:混合模式
    
    *-setScale:放缩字体大小
    
    *-addChild:添加子节点
    
    *-getDescription:显示Label的描述
    
    //设置颜色混合模式
    
    voidsetBlendFunc(constBlendFunc&blendFunc)override;
    
    //放缩字体大小（一般用于CharMap、BMFont）
    
    voidsetScale(floatscale)override;
    
    voidsetScaleX(floatscaleX)override;
    
    voidsetScaleY(floatscaleY)override;
    
    floatgetScaleX()constoverride;
    
    floatgetScaleY()constoverride;
    
    //添加子节点
    
    voidaddChild(Node*child,87); background-color:inherit; font-weight:bold">intzOrder=0,87); background-color:inherit; font-weight:bold">inttag=0)override;
    
    voidsortAllChildren()override;
    
    //Label描述
    
    virtualstd::stringgetDescription() };
    
    【文字渲染效果】
    
    支持三种渲染效果：
    
    Shadow:阴影
    
    Outline:轮廓，仅支持TTF
    
    Glow:发光，仅支持TTF
    
    注：其中Outline与Glow两个效果，只会作用一个。即无法一起使用。
    
    使用举例：
    
    copy
    
    Label*lb=Label::createWithTTF("123abc","fonts/MarkerFelt.ttf",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:左对齐
    
    * TextHAlignment:CENTER:居中对齐，默认
    
    * TextHAlignment:RIGHT:右对齐
    
    TextVAlignment:垂直对齐方式
    
    * TextVAlignment::TOP:顶部，默认
    
    * TextVAlignment::CENTER:中心
    
    * TextVAlignment::BOTTOM:底部
    
    仅在设置了Label的尺寸大小setDimensions(width,height)，大于显示的字符串内容的尺寸大小，才会起作用。
    
    对齐方式举例，如下几张图片所示：
    
    对齐方式为：
    
    TextHAlignment:LEFT
    
    TextVAlignment::TOP
    
    【自动换行】
    
    在3.x中，自动换行有两种方式。（当然你也可以使用C++里的转移字符'\n'进行手动换行）
    
    利用lb->setLineBreakWithoutSpace(true)，来支持自动换行功能。
    
    利用setMaxLineWidth(maxLineWidth)，来控制自动换行。
    
    利用setDimensions(width,height)，来控制自动换行。
    
    1、利用setMaxLineWidth
    
    设置每行显示文字的最大宽度。
    
    注：这种方法仅在Labelwidth==0的情况下，才会有效。
    
    使用方法：
    
    copy
    
    lb->setLineBreakWithoutSpace(true);
    lb->setMaxLineWidth(120);//最大宽度120
    
    如图：
    
    2、利用setDimensions
    
    copy
    
    lb->setWidth(80);//设置Label尺寸宽80
    lb->setMaxLineWidth(120);//设置了Labelwidth，这个就无效了
    
    【文字间距】
    
    间距的调整，是在v3.2之后才出现的。可以设置文本内容的行间距与文字间距。
    
    注：不支持SystemFont。
    
    setLineHeight:设置行间距
    
    setAdditionalKerning:设置额外文字间距
    
    copy
    
    lb->setLineHeight(80);
    lb->setAdditionalKerning(10);
    
    图解：
    
    【单独设置某个字符】
    
    学过2.x中的LabelBMFont的同学，应该知道这个是怎么回事吧？
    
    在3.x中，使用TTF、CharMap、BMFont创建的文字标签，其字符串内容的每个字符都是一个Sprite精灵图片，可以对其进行单独的设置。如精灵放缩、执行动作等。
    
    lb->getStringLength():获取字符串内容的总长度
    
    lb->getLetter(i):获取第i个位置上的字符
    
    使用举例：
    
    copy
    
    //获取字符串总长度，length=6
    CCLOG("%d",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)));//执行旋转动作
    
    如图：
    原文链接：https://www.f2er.com/cocos2dx/340538.html
    
    上一篇：cocos2dx 导演，场景，层，精灵模型下一篇：SpriteBuilder中返回的对象类型不正
    
    猜你在找的Cocos2d-x相关文章
    
    创建自定义的Cocos2d-x场景
    
    操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
    作者：前端之家时间：2021-01-27
    
    给vs2010安装上cocos2d-x的模版
    
    开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
    作者：前端之家时间：2021-01-27
    
    Python创建Cocos2d-x 2.2方法
    
    把创建项目做成一个批处理，当创建项目时可以省时省力很多。操作步骤 1、在 E:cocos2d-x-...
    作者：前端之家时间：2021-01-27
    
    cocos2dx 物理碰撞
    
    https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
    作者：前端之家时间：2020-08-06
    
    cocos2d-js 自定义事件监听派发
    
    转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
    作者：前端之家时间：2020-08-06
    
    cocos常用实用公共函数 lua代码
    
    公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
    作者：前端之家时间：2020-08-06
    
    cocos creator box2d
    
    title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
    作者：前端之家时间：2020-08-06
    
    （转）让quick-cocos2d-x支持加密的plist文件
    
    前篇：quick-cocos2d-x图片资源加密在前篇里面，我们实现了图片资源的加密，但还没有实现...
    作者：前端之家时间：2020-08-06
    
    （转）quick-cocos2d-x图片资源加密(续)
    
    摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充前篇： quick-cocos2d-x图片资源加...
    作者：前端之家时间：2020-08-06
    
    Cocos Creator 动态改变sprite图片
    
    首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
    作者：前端之家时间：2020-08-06
    
    编程分类
    iOS Android Swift Hybrid Cocos2d-x Flutter Xcode Silverlight cocoa Cordova
    
    最新文章
    • 创建自定义的Cocos2d-x场景
    
    • 给vs2010安装上cocos2d-x的
    
    • Python创建Cocos2d-x 2.2方
    
    • cocos2dx 物理碰撞
    
    • cocos2d-js 自定义事件监听
    
    • cocos2dx 分帧加载
    
    • cocos常用实用公共函数
    
    • cocos creator box2d
    
    • （转）让quick-cocos2d-x支
    
    • （转）quick-cocos2d-x图片
    
    热门标签更多 ►
    调试桥筛选栏假异步不会丢失 AndPermissio 权限申请抽屉式 systemUI 信号栏多行排列跨多行显示 viewmode 数据共享录制语音视频通话多行显示 Studio3.5 拉伸控件望远镜发动态走势图点赞控件显示牌冷启动 v3签名 v2签名 v1签名本地html 外接键盘流式标签
    
    最近更新
    · jQuery选择伪元素：after10-20
    
    · JavaScript随机颜色生成器10-20
    
    · JavaScript指数10-20
    
    · addResourceHandlers无法解析静态资源10-20
    
    · 如何将字节数组转换为MultipartFile10-20
    
    · 在java中如何创建一个文件并写入内容？10-20
    
    · 星号*在Python中是什么意思？10-20
    
    · Flask框架：MVC模式10-20
    
    · 在JavaScript对象数组中按ID查找对象10-20
    
    · 使用Javascript / jQuery下载文件10-20
    
    好站推荐
    菜鸟教程
    编程之家
    前端之家
    
    商务合作
    
    联系我们
    
    Copyright © 2019 前端之家. 当前版本 V7.0.16
    前端之家版权所有闽ICP备13020303号-10