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

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

概述cocos2dx 3.0版本之前,我们一直都是用CCLabelTTF,CCLabelBMFont,CCLabelAtlas来创建文本标签, 但是!3.0版本放出来后... 看到这里你心里是不是又颤抖了一下?别害怕嘛,我要说的是: 3.0版本出来后这些标签也都是还可以用的啦,只是说我们有了更好的选择。 cocos2dx3.0添加了一种新的文本标签,这种标签不同的地方有: 使用freetype来使它在 cocos2dx 3.0版本之前,我们一直都是用cclabelTTF,cclabelBMFont,cclabelAtlas来创建文本标签,@H_419_1@ 但是!3.0版本放出来后...@H_419_1@ 看到这里你心里是不是又颤抖了一下?别害怕嘛,我要说的是:@H_419_1@ 3.0版本出来后这些标签也都是还可以用的啦,只是说我们有了更好的选择。@H_419_1@

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

所以因为Label,我决定离开LabelTTF和LabelBMFont(这个开头你猜到了么?)@H_419_1@
---------------------------------------------------@H_419_1@
常用的接口一览(因为很多接口都与LabelTTFT等一样,所以就列一些我所了解的“异类”)@H_419_1@
<pre >//创建普通的文本标签,效果和cclabelTTF::create(...);一样。TTFConfig是什么?下面会介绍@H_419_1@
static Label * create(const std::string& text,const std::string& Fontname,float FontSize,@H_419_1@
const Size& dimensions = Size::ZERO,TextHAlignment hAlignment = TextHAlignment::left,@H_419_1@
TextVAlignment vAlignment = TextVAlignment::top);@H_419_1@

//通过读取TTFConfig配置的方式创建标签,@H_419_1@
static Label* createWithTTF(const TTFConfig& ttfConfig,const std::string& text,TextHAlignment alignment = TextHAlignment::left,int linewidth = 0);@H_419_1@

//使用.fnt的方式创建标签,类似cclabelBMFont:create(); @H_419_1@
static Label* createWithBMFont(const std::string& bmFontfilePath,@H_419_1@
const TextHAlignment& alignment = TextHAlignment::left,int linewidth = 0,@H_419_1@
const Point& imageOffset = Point::ZERO);@H_419_1@

//使用.png的方式创建标签,类似cclabelAtlas::create();@H_419_1@
static Label * createWithCharMap(const std::string& charMapfile,int itemWIDth,int itemHeight,int startCharMap);@H_419_1@

virtual voID enableShadow(const color3B& shadowcolor = color3B::BLACK,const Size &offset = Size(2,-2),float opacity = 0.75f,int blurRadius = 0);@H_419_1@
virtual voID enableOutline(const color4B& outlinecolor,int outlinesize = -1);//只支持TTF@H_419_1@
virtual voID enableGlow(const color3B& glowcolor);//只支持 TTF@H_419_1@

virtual voID disableEffect();//取消所有特效@H_419_1@

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

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

};</pre>@H_419_1@ 稍微提一下一个新东西:TTFConfig@H_419_1@
<pre >//TTFConfig 是一个结构体,里面包含了你要创建一个ttf的label常用配置,如下所示@H_419_1@
typedef struct _ttfConfig@H_419_1@
{@H_419_1@
std::string FontfilePath; //文件路径@H_419_1@
int FontSize; //字体大小,默认12@H_419_1@
GlyphCollection glyphs; //使用的字符集,默认DYNAMIC@H_419_1@
const char *customGlyphs; //呵呵@H_419_1@
bool distanceFIEldEnabled; //我对这个的理解是:是否让文字显得紧凑?默认为false@H_419_1@
int outlinesize; //字体描边的大小,默认为0@H_419_1@

//构造函数@H_419_1@
...@H_419_1@
//注意:当outlinesize初始化的值大于0时,distanceFIEldEnabled则为false@H_419_1@
}TTFConfig;@H_419_1@

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

1、使用.ttf
1)创建@H_419_1@

复制代码@H_419_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()的一样@H_419_1@
复制代码@H_419_1@ auto label4 = Label::create("create","Marker Felt",30);//
效果如图所示:@H_419_1@

2)另字体看起来紧凑点,也就是设置distanceFIEldEnabled = true@H_419_1@
直接修改config里的distanceFIEldEnabled,方式如下:@H_419_1@
复制代码@H_419_1@ TTFConfig config2("Fonts/Marker Felt.ttf",30,GlyphCollection::DYNAMIC,nullptr,true);//修改config的第五个参数为true


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

复制代码@H_419_1@ label2->enableGlow(color3B::GREEN);//荧光颜色为绿色
效果如图所示。这里有个地方要注意下,@H_419_1@ 想要显示荧光效果,必须令distanceFIEldEnabled = true@H_419_1@ ,否则看不到效果。@H_419_1@

4)设置描边@H_419_1@
复制代码@H_419_1@ label2->enableOutline(color4B(255,125,255),8);//第一个参数为描边的颜色,第二个参数为描边的大小

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

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


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

复制代码@H_419_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();

[attachment=67602]@H_419_1@
2)设置阴影(描边和荧光只能用在.ttf 上)@H_419_1@@H_419_1@@H_419_1@
复制代码@H_419_1@ label3->enableShadow(color3B::RED);

效果如图,可以与上图对比一下。@H_419_1@@H_419_1@@H_419_1@
[attachment=67603]
@H_419_1@@H_419_1@ 3、使用.png@H_419_1@
加入我们有这么一张图,使用方法如下:@H_419_1@@H_419_1@@H_419_1@
[attachment=67604]
@H_419_1@@H_419_1@ 1)创建@H_419_1@
复制代码@H_419_1@ auto label4= Label::createWithCharMap("Fonts/costFont.png",44,'/');//参数分别为:路径;每个字符的宽和高,起始字符
label4->setposition(Point(visibleSize.wIDth/2,200));
label4->setAnchorPoint(Point::ANCHOR_MIDDLE);
label4->setString("10");//设置显示的内容为”10“this->addChild(label4,2);

[attachment=67605]@H_419_1@
2)设置阴影@H_419_1@@H_419_1@@H_419_1@
复制代码@H_419_1@ label4->enableShadow(color3B::RED);

[attachment=67606]@H_419_1@
4、取消所有特效@H_419_1@
复制代码@H_419_1@ label->disableEffect();//取消所有特效

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

以上是内存溢出为你收集整理的【教程分享】Cocos2dx 3.0 -- 有freeType做靠山的Label全部内容,希望文章能够帮你解决【教程分享】Cocos2dx 3.0 -- 有freeType做靠山的Label所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1006437.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存