Cocos2dx 3.0 过渡篇 （二十一）自从Label有了freeType做靠山以后...enableShadow

Cocos2dx 3.0 过渡篇 （二十一）自从Label有了freeType做靠山以后...

分类： cocos2d-x学习笔记 2014-03-27 20:25  3818人阅读  评论(14)  收藏  举报

cocos2d-x 3.0 Label

cocos2dx 3.0版本之前，我们一直都是用CCLabelTTF，CCLabelBMFont,CCLabelAtlas来创建文本标签， 但是！3.0版本放出来后...看到这里你心里是不是又颤抖了一下？别害怕嘛，我要说的是： 3.0版本出来后这些标签也都是还可以用的啦，只是说我们有了更好的选择。

cocos2dx3.0添加了一种新的文本标签，这种标签不同的地方有：使用freetype来使它在不同的平台上有相同的视觉效果；由于使用更快的缓存代理，它的渲染也将更加快速；同时它还提供了绘边、阴影等特性。

所以因为Label，我决定离开abelTTF和LabelBMFont（这个开头你猜到了么？）
---------------------------------------------------

常用的接口一览（因为很多接口都与LabelTTFT等一样，所以就列一些我所了解的“异类”）

[cpp]  view plain copy

1. //创建普通的文本标签，效果和CCLabelTTF::create(...);一样。TTFConfig是什么？下面会介绍  
2. static Label * create(const std::string& text, const std::string& fontName, float fontSize,  
3.         const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,  
4.         TextVAlignment vAlignment = TextVAlignment::TOP);  
5.           
6. //通过读取TTFConfig配置的方式创建标签，  
7. static Label* createWithTTF(const TTFConfig& ttfConfig, const std::string& text, TextHAlignment alignment = TextHAlignment::LEFT, int lineWidth = 0);  
8.   
9. //使用.fnt的方式创建标签，类似CCLabelBMFont:create();      
10. static Label* createWithBMFont(const std::string& bmfontFilePath, const std::string& text,  
11.         const TextHAlignment& alignment = TextHAlignment::LEFT, int lineWidth = 0,   
12.         const Point& imageOffset = Point::ZERO);  
13.           
14. //使用.png的方式创建标签，类似CCLabelAtlas::create();  
15. static Label * createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);  
16.           
17. virtual void enableShadow(const Color3B& shadowColor = Color3B::BLACK,const Size &offset = Size(2,-2), float opacity = 0.75f, int blurRadius = 0);  
18. virtual void enableOutline(const Color4B& outlineColor,int outlineSize = -1);//只支持TTF  
19. virtual void enableGlow(const Color3B& glowColor);//只支持 TTF   
20.   
21. virtual void disableEffect();//取消所有特效  
22.   
23. //特效的种类有一下四种：  
24. enum class LabelEffect {  
25.   
26.     NORMAL,     //普通标签（纯粹的、脱离了低级趣味的label）  
27.     OUTLINE,    //文艺标签（有描边）  
28.     SHADOW,     //2B标签  （有阴影）  
29.     GLOW        //土豪标签（有荧光）  
30. };  

稍微提一下一个新东西：TTFConfig

[cpp]  view plain copy

1. //TTFConfig 是一个结构体，里面包含了你要创建一个ttf的label常用配置，如下所示  
2. typedef struct _ttfConfig  
3. {  
4.     std::string fontFilePath;   //文件路径  
5.     int fontSize;               //字体大小，默认12  
6.     GlyphCollection glyphs;     //使用的字符集，默认DYNAMIC  
7.     const char *customGlyphs;   //呵呵  
8.     bool distanceFieldEnabled;  //我对这个的理解是：是否让文字显得紧凑？默认为false  
9.     int outlineSize;            //字体描边的大小，默认为0  
10.       
11.     //构造函数  
12.     ...  
13.     //注意：当outlineSize初始化的值大于0时，distanceFieldEnabled则为false  
14. }TTFConfig;  
15.   
16. //GlyphCollection有四种类型：  
17. enum class GlyphCollection {  
18.       
19.     DYNAMIC,  
20.     NEHE,  
21.     ASCII,  
22.     CUSTOM  
23. };  

下面简单介绍Label的用法

1、使用.ttf
1）创建

[cpp]  view plain copy

1. TTFConfig config2("fonts/Marker Felt.ttf",30);//初始化TTFConfig，第一个参数为字库的路径，第二个参数为字体大小  
2. auto label2 = Label::createWithTTF(config2,"createWithTTF",TextHAlignment::LEFT);//创建label，并向左对其  
3. label2->setPosition(Point(visibleSize.width/2,300));  
4. label2->setAnchorPoint(Point::ANCHOR_MIDDLE);//设置锚点居中  
5. this->addChild(label2,2);  

当然了，也可以用Label创建普通的标签，效果和用CCLabelTTF::create()的一样

[cpp]  view plain copy

1. auto label4 = Label::create("create","Marker Felt",30);//  

效果如图所示：

2）另字体看起来紧凑点，也就是设置distanceFieldEnabled = true
直接修改config里的distanceFieldEnabled，方式如下：

[cpp]  view plain copy

1. TTFConfig config2("fonts/Marker Felt.ttf",30,GlyphCollection::DYNAMIC,nullptr,true);//修改config的第五个参数为true  

3）设置glow（荧光）效果，（我也不知道该怎么描述glow这词...）

[cpp]  view plain copy

1. label2->enableGlow(Color3B::GREEN);//荧光颜色为绿色  

效果如图所示。这里有个地方要注意下，想要显示荧光效果，必须令distanceFieldEnabled = true，否则看不到效果。

4）设置描边

[cpp]  view plain copy

1. label2->enableOutline(Color4B(255,125,0,255),8);//第一个参数为描边的颜色，第二个参数为描边的大小  

效果如图所示。注意，使用描边效果后，distanceFieldEnabled 将变成 false，这也意味着在有描边的情况下是显示不了荧光效果的（我想太多了...)

5）设置阴影

[cpp]  view plain copy

1. label2->enableShadow(Color3B::RED,Size(2,-2),0.2,0.5);//第一个参数为阴影颜色，第二个参数为阴影相对于标签的坐标，第三个参数设置透明度，第四个参数与模糊有关  

2、使用.fnt 的label
1）创建

[cpp]  view plain copy

1. auto label3 = Label::createWithBMFont("fonts/bitmapFontTest.fnt", "createWithBMFont");  
2. label3->setPosition(Point(visibleSize.width/2,250));  
3. label3->setAnchorPoint(Point::ANCHOR_MIDDLE);  
4. this->addChild(label3,2);  
5. label3->enableShadow();  

2）设置阴影（描边和荧光只能用在.ttf 上）

[cpp]  view plain copy

1. label3->enableShadow(Color3B::RED);  

效果如图，可以与上图对比一下。

3、使用.png
加入我们有这么一张图，使用方法如下：

1）创建

[cpp]  view plain copy

1. auto label4= Label::createWithCharMap("fonts/costFont.png",30,44,'/');//参数分别为：路径;每个字符的宽和高，起始字符  
2. label4->setPosition(Point(visibleSize.width/2,200));  
3. label4->setAnchorPoint(Point::ANCHOR_MIDDLE);  
4. label4->setString("10");//设置显示的内容为”10“  
5. this->addChild(label4,2);  

2）设置阴影

[cpp]  view plain copy

1. label4->enableShadow(Color3B::RED);  

4、取消所有特效

[cpp]  view plain copy

1. label->disableEffect();//取消所有特效  

恩，就介绍到这里。具体的用法可以参考testCpp。

这篇博文内容虽比较简单，但却是极耗精力的....

尊重原创，转载请注明来源：http://blog.youkuaiyun.com/start530/article/details/22313087