Cocos2dx 3.0 過渡篇 (二十一)自從Label有了freeType做靠山以後...
阿新 • • 發佈:2019-02-19
cocos2dx 3.0版本之前,我們一直都是用CCLabelTTF,CCLabelBMFont,CCLabelAtlas來建立文字標籤,但是!3.0版本放出來後...看到這裡你心裡是不是又顫抖了一下?別害怕嘛,我要說的是:3.0版本出來後這些標籤也都是還可以用的啦,只是說我們有了更好的選擇。
---------------------------------------------------
下面簡單介紹Label的用法
1)建立
cocos2dx3.0添加了一種新的文字標籤,這種標籤不同的地方有:使用freetype來使它在不同的平臺上有相同的視覺效果;由於使用更快的快取代理,它的渲染也將更加快速;同時它還提供了繪邊、陰影等特性。
所以因為Label,我決定離開abelTTF和LabelBMFont(這個開頭你猜到了麼?)---------------------------------------------------
常用的介面一覽(因為很多介面都與LabelTTFT等一樣,所以就列一些我所瞭解的“異類”)
稍微提一下一個新東西:TTFConfig//建立普通的文字標籤,效果和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 是一個結構體,裡面包含了你要建立一個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
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);//第一個引數為陰影顏色,第二個引數為陰影相對於標籤的座標,第三個引數設定透明度,第四個引數與模糊有關
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();
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);
label4->enableShadow(Color3B::RED);
label->disableEffect();//取消所有特效
恩,就介紹到這裡。具體的用法可以參考testCpp。
這篇博文內容雖比較簡單,但卻是極耗精力的....