cocos2dx-3.0(5)------Label、LabelTTF、LabelAtlas、LabelBMFont使用之法

               我们逐一来分析上面出现的4种label控件作用、用法与什么时候该用什么,什么时候场合使用等

1. Label

这货是3.0以后才来出的,引用star特530文章里的http://www.cocoachina.com/bbs/read.php?tid=197179,使用他在不同的平台上有相同的视觉效果,

由于使用更快的缓存代理,它的渲染也将更加快速,同时它还提供了绘边、阴影等特性。

//这个创建和LabelTTF::create()是一样的
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);
//这个创建和LabelTTF::create()是一样的,只不过第二个参数font可以为字体名字或者字体文件,通过看名字就知道
//字体一些形状特性和平台有关	
static Label* createWithSystemFont(const std::string& text, const std::string& font, float fontSize,
        const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
        TextVAlignment vAlignment = TextVAlignment::TOP);

//通过读取TTFConfig配置的方式创建标签,稍后给出TTFConfig是个什么货
static Label* createWithTTF(const TTFConfig& ttfConfig, const std::string& text, TextHAlignment alignment = 		TextHAlignment::LEFT, int maxLineWidth = 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);
//下面两个是.png文件获取方式不同的函数
static Label * createWithCharMap(Texture2D* texture, int itemWidth, int itemHeight, int startCharMap);
static Label * createWithCharMap(const std::string& plistFile);

//特效的种类有一下四种:
enum class LabelEffect {
    NORMAL, //普通标签(纯粹的、脱离了低级趣味的label)
    OUTLINE, //文艺标签(有描边)
    SHADOW, //2B标签  (有阴影)
    GLOW //土豪标签(有荧光)
 
};
下面是TTFConfig的描述
typedef struct _ttfConfig
{
    std::string fontFilePath;
    int fontSize;
    GlyphCollection glyphs;
    const char *customGlyphs;
    bool distanceFieldEnabled;
    int outlineSize;

	//构造函数
    ...
	//注意:当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);

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

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


3)设置glow(荧光)效果

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

4)设置描边

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


5)设置阴影

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


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();//取消所有特效


下面看一个整体的效果图


代码:

bool HelloWorld::init()  
{  
   if ( !Layer::init() )  
   {  
     return false;  
   }  
   
   Size visibleSize = Director::getInstance()->getVisibleSize();  
   Point origin = Director::getInstance()->getVisibleOrigin();  
   auto closeItem = MenuItemImage::create(  
                      "CloseNormal.png",  
                      "CloseSelected.png",  
                 CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));  
   
  closeItem->setPosition(Point(origin.x+ visibleSize.width - closeItem->getContentSize().width/2 ,  
                origin.y + closeItem->getContentSize().height/2));  
   
  
   auto menu = Menu::create(closeItem, NULL);  
   menu->setPosition(Point::ZERO);  
   this->addChild(menu, 1);  
   
  autolabel1 = Label::createWithSystemFont("Hello World1","Arial", 36);								   //A  
  label1->setPosition(Point(origin.x+ visibleSize.width/2,  
     origin.y + visibleSize.height - 100));  
  this->addChild(label1,1);  
   
  autolabel2 = Label::createWithTTF("Hello World2", "fonts/MarkerFelt.ttf", 36);					   //B  
  label2->setPosition(Point(origin.x+ visibleSize.width/2,  
     origin.y + visibleSize.height - 200));  
  this->addChild(label2,1);  
   
  autolabel3 = Label::createWithBMFont("fonts/BMFont.fnt", "HelloWorld3");							//C  
  label3->setPosition(Point(origin.x+ visibleSize.width/2,  
     origin.y + visibleSize.height - 300));  
  this->addChild(label3,1);  
   
  TTFConfigttfConfig("fonts/Marker Felt.ttf",  
     36,  
     GlyphCollection::DYNAMIC);																								  //D  
  autolabel4 = Label::createWithTTF(ttfConfig, "Hello World4");												  //E  
  label4->setPosition(Point(origin.x+ visibleSize.width/2,  
     origin.y + visibleSize.height - 400));  
  this->addChild(label4, 1);  
   
  ttfConfig.outlineSize= 4;																									 //F  
  autolabel5 = Label::createWithTTF(ttfConfig, "Hello World5");												  //G  
  label5->setPosition(Point(origin.x+ visibleSize.width/2,  
     origin.y + visibleSize.height - 500));  
  label5->enableShadow(Color4B(255,255,255,128),Size(4, -4));										//H 
  label5->setColor(Color3B::RED);																								 //I  
  this->addChild(label5,1);  
   
  return true;  
}

在上面的代码中//A行是通过 createWithSystemFont 函数创建 Label 对象
代码//B行是通过 createWithTTF 是创建 TTF 字体标签对象
代码//C是 createWithBMFont 是创建位图字体标签对象
代码//D行TTFConfig ttfConfig("fonts/Marker Felt.ttf", 36, GlyphCollection::DYNAMIC)是创建一个TTFConfig结构体变量,前面已经介绍这个结构体了
代码//E行Label::createWithTTF(ttfConfig,"Hello World4") 是通过指定 TTFConfig 创建 TTF 字体标签
代码//F行代码 ttfConfig.outlineSize = 4 设置 TTFConfig 的描边字段
代码//G行代码 Label::createWithTTF(ttfConfig,"Hello World5") 是重新创建 TTF 字体标签。
代码//H行代码 label5->enableShadow(Color4B(255,255,255,128),Size(4, -4)) 是设置标签的阴影效果
代码//I行代码 label5->setColor(Color3B::RED) 是设置标签的颜色


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值