Cocos2d-x 3.0对Label的改进

[size=3]在游戏创作的过程中,你可以通过画面传递场景信息,通过声音来渲染气氛,而Label是最直接明了让世界懂我们的方式吧!所以我们必须学会如何应用Label,Cocos2d-x-3.0创建文本的方式较之前的版本发生了改变,原版本中的类CCLabelTTF,CCLabelBMFont,CCLabelAtlas现在合并为一个类Label,通过调用Label不同的创建方法来实现原版本的上述三个类的功能,当然之前的类也是可以使用的,只不过被声明为deprecated。[/size]
[size=3]
相比于之前版本调用系统API来创建字符纹理的低效率,新的label使用了freetype(http://www.freetype.org/)第三方库来包装各个平台,做到了字符显示效果的一致,并且缓存了字符纹理提高了效率,之前使用系统API创建文本的方式在3.x下的接口是Label::createWithSystemFont()。

在使用lable,BMFont,charMap之前,首先必须明确一下他们各自的适用场景,lable这个东西就不用说了把,所有的文本信息理论上都可以用他来做,BMFont可以通过图片编辑软件二次编辑效果,做出你想要的文本样式,就是一些比较炫的艺术字,在2.x的时候CCLabelAtlas的存在是为了提高效率,它经常用来显示数字,3.x的时候这家伙已经更名为CharMap,CharMap的存在一个是为了兼容之前的版本,另外也可以使用图片编辑软件二次编辑效果,做一些很炫的数字。[/size]
[size=5]Label的基本使用方法[/size]
[size=3]createWithSystemFont()是通过调用系统API创建Label的方法,这种方式创建的label效率不高,不推荐使用。[/size]
<pre class="brush:cpp; toolbar: true; auto-links: false;">
//第一个参数是要显示的文本内容,第二个参数不存在的话将会使用系统API来创建文本,存在的话内部调用的是createWithTTF创建,第四个参数是文本域的大小,第五个和第六个是对齐方式,后三个参数可以省略
    auto label = Label::createWithSystemFont("create label through label class","fonts/Marker Felt.ttf",32,Size(240,160),TextHAlignment::LEFT,TextVAlignment::TOP);
    label->setPosition(Point(size.width/2,size.height/2));
    this->addChild(label);
</pre>[size=5]
[/size][size=4]1、创建LabelTTF[/size]
[size=3]LabelTTF对应于原来版本的CCLabelTTF,3.0的createWithTTF一开始要加载字符纹理,较2.x版本效率有明显提高。使用如下的俩种方式来创建LabelTTF,第一种方式传入参数的时候省略了后三个参数,第二个是使用结构体TTFConfig配置了Label的属性,为TTFConfig赋值的时候有些参数是必须的,而有些系统会提供默认参数。[/size]
<pre class="brush:cpp; toolbar: true; auto-links: false;">
    //创建label的第一种方式,参数分别是显示的文本,所用的字体文件,文本大小
    auto label = Label::createWithTTF("label test","fonts/Marker Felt.ttf",32);
    label->setPosition(Point(size.width/2,size.height0.6));
    this->addChild(label);
    
    //创建label的第二种方式,通过设置配置信息TTFConfig来创建文本,TTFConfig是一个结构体
    TTFConfig label_config;
    //fontFilePath设置所使用的字体文件,必须设置,其他的几项系统都有默认值
    label_config.fontFilePath = "fonts/Marker Felt.ttf";
    //fontSize设置字体大小
    label_config.fontSize = 32;
    //使用的字符集,字符集用于一开始缓存创建哪些字符纹理,当前字符集支持 Dynamic,nehe,Ascii,custom 4种
    label_config.glyphs = GlyphCollection::DYNAMIC;
    //用户字符集
    label_config.customGlyphs = nullptr;
    label_config.distanceFieldEnabled = false;
    //字体锚边的大小
    label_config.outlineSize = 0;
    
    //传入配置信息和需要显示的文本
    auto label_two = Label::createWithTTF(label_config, "label test");
    label_two->setPosition(Point(size.width/2,size.height
0.5));
    this->addChild(label_two);
</pre>
[attachment=74600]
[size=3]这里有必要对distanceField的用法做一个解释,首先我们创建一个文本,然后将文本放到四倍,看下效果。[/size]
[size=3] [attachment=74624] [/size]
[size=3]可以看到,文本被放大以后有明显的锯齿,显示效果也不好看了,这段代码在这里。
<pre class="brush:cpp; toolbar: true; auto-links: false;">
TTFConfig config;
    config.fontSize = 32;
    config.fontFilePath = "fonts/Marker Felt.ttf";
    //config.distanceFieldEnabled = true;
    
    auto label = Label::createWithTTF(config,"Label Test");
    label->setPosition(Point(size.width/2,size.height/2));
    this->addChild(label);
    
    label->setScale(4.0f);
</pre>[/size]
[size=3]现在打开我注释掉得[/size][size=3]config.distanceFieldEnabled = true;效果如下:[/size]
[size=3] [attachment=74625] [/size]
[size=3]可以看到锯齿没有了,字体效果也比较好了,所以你也看到distanceFieldEnabled的作用了把,这个参数默认是false,原因就是使用distanceField有两个地方性能有差别  一个是加载纹理的时候需要计算,另一个是渲染的时候每一帧在shader中也有更多的计算,所以事物就是这样啊,有利有弊,怎么选择看你自己了。[/size]
[size=3]1.1、以下来说明几个函数的用法[/size]
[size=3]这些函数是设置文本的一些特殊效果,包括描边,阴影,荧光,行高和字符间距。[/size]
<pre class="brush:cpp; toolbar: true; auto-links: false;">
    //设置描边的颜色,第二个参数可以传入描边的大小,大小不能为0,否则的话就看不到描边的效果了,描边和荧光只适用使用createWithTTF创建的文本
    label_two->enableOutline(Color4B(255,0,0,255),5);
    //荧光的效果,distanceFieldEnabled需要设置为true,outlineSize为0
    label_three->enableGlow(Color4B(255,0,0,255));
    //阴影效果,第一个参数是影子的颜色,默认是黑色,第二个参数是偏移量, 第三个参数是模糊半径
    label_four->enableShadow(Color4B(0,0,255,255),Size(3,10),0);
</pre>
[size=4]2、创建BMFont[/size]
[size=3]为了使用BMFont,首先你需要准备一个.fnt文件和.png图片,在这些文件中包含了你想要的字符信息,这俩个资源是使用一些字体工具来获得的。传入参数的时候只需要传入.fnt就可以了。[/size]
<pre class="brush:cpp; toolbar: true; auto-links: false;">
//创建BMFont,第一个参数是.fnt文件,第二个参数是要显示的文本,文本信息的内容必须包含在fnt的文件中,否则显示不出来
    auto bmfont = Label::createWithBMFont("fonts/gameover_score_num.fnt", "123456789");
    bmfont->setPosition(Point(size.width/2,size.height/2));
    //阴影效果,没有描边和荧光,因为是从PNG中读取的图片
    bmfont->enableShadow(Color4B(0,255,0,255),Size(5,10));
    this->addChild(bmfont);
    //取消所有特效
    //bmfont->disableEffect();
</pre>
[size=4]3、创建CharMap[/size]
[size=3]资源文件同样是需要一些字体工具来做的,而且你还需要知道字符的宽和高,相比前俩种方式,显的比较费事。[/size]
<pre class="brush:cpp; toolbar: true; auto-links: false;">
   //创建charMap 参数分别为:png图片的路径,每个字符的宽和高,起始字符
    auto charMap = Label::createWithCharMap("fonts/tuffy_bold_italic-charmap.png", 48, 64, ' ');
    charMap->setPosition(Point(size.width/2,size.height0.4));
    //需要设置一下显示的文本信息
    charMap->setString("123456789");
    this->addChild(charMap);
    
    //也可以使用.plist文件来创建charMap
    auto charMap2 = Label::createWithCharMap("fonts/tuffy_bold_italic-charmap.plist");
    charMap2->setPosition(Point(Point(size.width/2,size.height
0.3)));
    //需要设置一下显示的文本信息
    charMap2->setString("123456789");
    this->addChild(charMap2);  
</pre>
[attachment=74601]
[size=5]二、较2.X版本的变化[/size]
[list=1][li][size=3]去掉了类、结构体和宏的CC前缀和一些其他类似匈牙利命名方式的前缀,例如m、p等等;[/size][/li][li][size=3]改变了成员函数中某些参数和返回值的数据类型,比如char换成了string、unsigned int换成了long等等;[/size][/li][li][size=3][size=3]改变了某些枚举类型的名字和属性值;[/size][size=3]将引擎中不会被修改数据成员的函数都声明成了const 类型,提高了程序的健壮性。[/size][/size][/li][/list]

谢谢,学习了:2:

这是要火的节奏:2::2:

:2::2::2::2:我要前拍

你好 想问一下 缓存字符纹理的函数我怎么没有看到啊 在哪里啊 还有现在是描边 阴影和荧光 这些哪几个用到了freetype了 网上说freetype也是有bug不知道修复了没有 还有freetype 很大 打包的话比较耗内存吧

缓冲字符纹理是在引擎内部做得,3.0以后引擎的label用的就是这个第三方库freetype,只要你创建lebal的时候不调用createWithSystemFont()就是用的freetype,也不是很大吧,反正个人觉得最好用这个,这样的话各个平台下得效果一样。

能问一个关于2.3的描边字的问题么?

请问下,auto charMap2 = Label::createWithCharMap(“fonts/tuffy_bold_italic-charmap.plist”);
里用的字体文件,是用什么软件做出来的?

在小米的2s手机上,使用中文ttf,会出现随机的部分字纹理丢失(直接打开游戏,不做home等操作),
表现为,一句完整的话 ,中间丢失的若干字不显示,但是占了位置 1?3?5 ?为通明区域

— Begin quote from ____

引用第9楼sikaru于2014-12-31 10:57发表的 :
在小米的2s手机上,使用中文ttf,会出现随机的部分字纹理丢失(直接打开游戏,不做home等操作),
表现为,一句完整的话 ,中间丢失的若干字不显示,但是占了位置 1?3?5 ?为通明区域 http://www.cocoachina.com/bbs/job.php?action=topost&tid=217183&pid=1210743

— End quote

求助-。-我已经升级到3.3final版本了,还是这样

对了,还有一个问题,就是中文ttf(我现在使用黑体,还没有测试其他字体),使用enableOutline,间距会变的特别大,已经是无法接受的间距了,好像也没办法调整Margin?

谢谢了,学习了

顶上去,同样的问题
cocos2dx 3.1.1 ccui.text

跪求解答

发现LabelTTF在设置contentSize后,进行自动换行的时候,会智能的将英文单词进行了完整性保留,而不会从单词中间进行断行,这是操作系统的特性还是cocos自己实现的?