【教程分享】Cocos2dx 3.0 -- 有freeType做靠山的Label

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

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

所以因为Label,我决定离开LabelTTF和LabelBMFont(这个开头你猜到了么?)

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

//创建普通的文本标签,效果和CCLabelTTF::create(...);一样。TTFConfig是什么?下面会介绍
static Label * create(const std::string& text, const std::string& fontName, float fontSize,
        const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
        TextVAlignment vAlignment = TextVAlignment::TOP);
 
//通过读取TTFConfig配置的方式创建标签,
static Label* createWithTTF(const TTFConfig& ttfConfig, const std::string& text, TextHAlignment alignment = TextHAlignment::LEFT, int lineWidth = 0);

//使用.fnt的方式创建标签,类似CCLabelBMFont:create();    
static Label* createWithBMFont(const std::string& bmfontFilePath, const std::string& text,
        const TextHAlignment& alignment = TextHAlignment::LEFT, int lineWidth = 0, 
        const Point& imageOffset = Point::ZERO);
 
//使用.png的方式创建标签,类似CCLabelAtlas::create();
static Label * createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);
 
virtual void enableShadow(const Color3B& shadowColor = Color3B::BLACK,const Size &offset = Size(2,-2), float opacity = 0.75f, int blurRadius = 0);
virtual void enableOutline(const Color4B& outlineColor,int outlineSize = -1);//只支持TTF
virtual void enableGlow(const Color3B& glowColor);//只支持 TTF 

virtual void disableEffect();//取消所有特效

//特效的种类有一下四种:
enum class LabelEffect {

    NORMAL, //普通标签(纯粹的、脱离了低级趣味的label)
    OUTLINE, //文艺标签(有描边)
    SHADOW, //2B标签  (有阴影)
    GLOW //土豪标签(有荧光)

};
```
稍微提一下一个新东西:TTFConfig
//TTFConfig 是一个结构体,里面包含了你要创建一个ttf的label常用配置,如下所示
typedef struct _ttfConfig
{
    std::string fontFilePath;   //文件路径
    int fontSize;     //字体大小,默认12
    GlyphCollection glyphs;     //使用的字符集,默认DYNAMIC
    const char *customGlyphs;   //呵呵
    bool distanceFieldEnabled;  //我对这个的理解是:是否让文字显得紧凑?默认为false
 int outlineSize;   //字体描边的大小,默认为0
 
 //构造函数
    ...
 //注意:当outlineSize初始化的值大于0时,distanceFieldEnabled则为false
}TTFConfig;

//GlyphCollection有四种类型:
enum class GlyphCollection {
    DYNAMIC,
    NEHE,
    ASCII,
    CUSTOM
};
```
下面简单介绍Label的用法


1、使用.ttf
1)创建


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


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

```
auto label4 = Label::create("create","Marker Felt",30);//
```
效果如图所示:

![](http://img.blog.csdn.net/20140327201402218?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnQ1MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)


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

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


![](http://img.blog.csdn.net/20140327201443484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnQ1MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

3)设置glow(荧光)效果,(我也不知道该怎么描述glow这词...)
 

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

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

![](http://img.blog.csdn.net/20140327201456671?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnQ1MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

4)设置描边

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

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

![](http://img.blog.csdn.net/20140327201525390?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnQ1MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

5)设置阴影

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

```


![](http://img.blog.csdn.net/20140327201550296?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcnQ1MzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

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

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

```
 
  
2)设置阴影(描边和荧光只能用在.ttf 上)

```
label3->enableShadow(Color3B::RED);
```

效果如图,可以与上图对比一下。
  
3、使用.png
加入我们有这么一张图,使用方法如下:
  
1)创建

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

```
label4->enableShadow(Color3B::RED);
```

  
4、取消所有特效

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

恩,就介绍到这里。具体的用法可以参考testCpp。
这篇博文内容虽比较简单,但却是极耗精力的....

顶Star Glow就是外发光的意思

我突然发现,顶star 有顶死他的意思,版主要慎用啊~~~~~:12:

顶,好贴:2::14::14::14:

寓教于乐,另外虽然只扫了一眼,却对那个 呵呵的变量的作用起了好奇心。。

阁下不只文采了得,眼神也是相当的犀利。:12:

看完全部,只对呵呵记忆犹新,请问呵呵是什么意思。。

求版主解释呵呵是什么意思 :2:

神奇的呵呵描述…

:2: :2: :2: :2: :2: :2:

神奇呵呵描述

我看了下代码,3.0的LabelTTF和LabelBMFont貌似都是用freetype,所以楼主不用离开他们了么

好文,等3。0再稳定一些,就换3.0

我也是被【呵呵】惊艳了一下
之前在beta2版本的时候试用了一下描边,在Android机子上那些字基本就看不到了(内描边了),后来就没折腾了~
不知道现在怎么样~

对freetype2不太了解,搜了些资料,ft字体渲染功能很强大,但毕竟它是与平台无关的文本库,导致某些平台特性的功能可能无法使用。比如之前的labelttf在ios上是用uikit来渲染的,可以支持emoji表情,但用了ft后,基本告别表情了,某些特殊需求如做聊天功能,够呛

label2->enableGlow(Color3B::GREEN);//荧光颜色为绿色 这里的Color3B应该改成4B吧?

请问字体本身的白色怎么修改呢 - - 新手飘过 谢谢大神

请问楼主 行间距咋设置呢…

使用方正粗圆字体,字体设置过大,描边字符会崩溃的。

新手学习中