1. 程式人生 > >Cocos2dx 3.0 過渡篇 (二十一)自從Label有了freeType做靠山以後...

Cocos2dx 3.0 過渡篇 (二十一)自從Label有了freeType做靠山以後...

cocos2dx 3.0版本之前,我們一直都是用CCLabelTTF,CCLabelBMFont,CCLabelAtlas來建立文字標籤,但是!3.0版本放出來後...看到這裡你心裡是不是又顫抖了一下?別害怕嘛,我要說的是:3.0版本出來後這些標籤也都是還可以用的啦,只是說我們有了更好的選擇。

cocos2dx3.0添加了一種新的文字標籤,這種標籤不同的地方有:使用freetype來使它在不同的平臺上有相同的視覺效果;由於使用更快的快取代理,它的渲染也將更加快速;同時它還提供了繪邊、陰影等特性。

所以因為Label,我決定離開abelTTF和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);//
效果如圖所示:


2)另字型看起來緊湊點,也就是設定distanceFieldEnabled = true
直接修改config裡的distanceFieldEnabled,方式如下:

TTFConfig config2("fonts/Marker Felt.ttf",30,GlyphCollection::DYNAMIC,nullptr,true);//修改config的第五個引數為true


3)設定glow(熒光)效果,(我也不知道該怎麼描述glow這詞...)
label2->enableGlow(Color3B::GREEN);//熒光顏色為綠色
效果如圖所示。這裡有個地方要注意下,想要顯示熒光效果,必須令distanceFieldEnabled = true,否則看不到效果。


4)設定描邊

label2->enableOutline(Color4B(255,125,0,255),8);//第一個引數為描邊的顏色,第二個引數為描邊的大小
效果如圖所示。注意,使用描邊效果後,distanceFieldEnabled 將變成 false,這也意味著在有描邊的情況下是顯示不了熒光效果的(我想太多了...)


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();//取消所有特效
恩,就介紹到這裡。具體的用法可以參考testCpp。

這篇博文內容雖比較簡單,但卻是極耗精力的....