cocos2dx[3.2](14)——新字体标签Label

【唠叨】

在3.x中,废弃了2.x里的LabelTTFLabelAtlasLabelBMFont三个字体类,取而代之的是全新的字体标签Label

实际上Label是将三个字体类进行了融合,进行统一的管理与渲染,这使得创建字体标签Label的方式更加统一,更加方便。

本节来学习一下3.x中新的标签类Label,如果对2.x中的三个字体类不了解的话,建议先去看看那三个类的用法,再来学习本节内容,能够更好的理解。

2.x中的旧标签类,请移步:http://shahdza.blog.51cto.com/2410787/1541002

【致谢】

http://cn.cocos2d-x.org/tutorial/show?id=1446

http://www.cocoachina.com/bbs/read.php?tid=197179

【本节内容】

在3.x中,Label支持四种方式的标签创建。并新增了阴影Shadow、轮廓Outline、发光Glow效果的支持。还支持文字内容的行间距、文字间距、自动换行的设置。

> 创建系统原生字体API : createWithSystemFont

> 创建TTF             : createWithTTF       (原LabelTTF)

> 创建CharMap         : createWithCharMap   (原LabelAtlas)

> 创建BMFont          : createWithBMFont    (原LabelBMFont)

> Label的属性与方法

> 文字效果渲染        : Shadow、Outline、Glow

> 对齐方式            : TextHAlignment、TextVAlignment

> Label的尺寸大小

> 自动换行

> 行间距、文字间距

> 单独设置某个字符

关于图片资源,请在cocos2dx给出的官方样例cpp-tests中寻找。



【createWithSystemFont】

创建系统原生字体的API。

创建方式如下:

//
	static Label* createWithSystemFont(
		const std::string& text,                          //字符串内容
		const std::string& font,                          //字体(字体名称、或字体文件)
		float fontSize,                                   //字号                           
		const Size& dimensions = Size::ZERO,              //label的尺寸大小,默认不设置尺寸
		TextHAlignment hAlignment = TextHAlignment::LEFT, //水平对齐方式,默认左对齐::LEFT
		TextVAlignment vAlignment = TextVAlignment::TOP   //垂直对齐方式,默认顶部  ::TOP
	);
//

使用举例:

//
	//使用系统的字体名称 "Arial" 来创建
	Label* lb1 = Label::createWithSystemFont("123abc", "Arial", 24);
//


【createWithTTF】

创建TTF的方式有以下两种:

> 方式一:与2.x中LabelTTF的创建类似,不过使用的fontFile必须为字体文件。

> 方式二:通过TTF的配置信息数据结构TTFConfig来创建。

1、方式一:与System Font创建类似

注:区别在于fontFile必须为字体文件(如"*.ttf"),即不支持使用系统字体名称来创建。

//
	static Label* createWithTTF(
		const std::string& text,
		const std::string& fontFile, //必须为字体文件(如"*.ttf")
		float fontSize,
		const Size& dimensions = Size::ZERO,
		TextHAlignment hAlignment = TextHAlignment::LEFT,
		TextVAlignment vAlignment = TextVAlignment::TOP
	);
//

2、方式二:通过TTFConfig配置来创建

2.1、TTFConfig配置

//
	typedef struct _ttfConfig 
	{
		std::string fontFilePath;  //字体文件路径,如 "fonts/Arial.ttf"
		int fontSize;              //字体大小,默认"12"
		GlyphCollection glyphs;    //使用的字符集,默认"DYNAMIC"
		const char *customGlyphs;
		bool distanceFieldEnabled; //是否让字体紧凑,默认false
		int outlineSize;           //字体轮廓大小,默认"0"

		//构造函数
		_ttfConfig(
			const char* filePath = "",
			int size = 12,
			const GlyphCollection& glyphCollection = GlyphCollection::DYNAMIC,
			const char *customGlyphCollection = nullptr,
			bool useDistanceField = false,
			int outline = 0
		);
	}TTFConfig;
//

2.2、使用TTFConfig创建TTF

//
	static Label* createWithTTF(
		const TTFConfig& ttfConfig, //TTFConfig配置
		const std::string& text,    //字符串内容
		TextHAlignment alignment = TextHAlignment::LEFT,
		int maxLineWidth = 0        //最大文本行宽,0表示不设置。可用于自动换行只用
	);
//

使用举例:

//
	TTFConfig ttfConfig;
	ttfConfig.fontFilePath = "fonts/Marker Felt.ttf"; //必须配置
	ttfConfig.fontSize = 12;
	ttfConfig.distanceFieldEnabled = false;
	ttfConfig.outlineSize = 0;
	ttfConfig.glyphs = GlyphCollection::DYNAMIC;
	ttfConfig.customGlyphs = nullptr;

	//使用TTFConfig配置,来创建TTF
	Label* lb3 = Label::createWithTTF(ttfConfig, "123abc");
//


【createWithCharMap】

CharMap的用法与2.x中的LabelAtlas是一样的,一般用来显示数字。不过它也可以用来显示其他字符,如英文字符。

字体文件资源一般来自一张.png图片,或.plist文件。

注:图片中每个字符的大小必须是固定的,若要改变字体大小,只能通过setScale放缩来实现。

创建CharMap有三种方式:

> 使用.png图片创建

> 使用纹理Texture2D创建

> 使用.plist创建

从图片中从左到右,一块一块截取。从字符startCharMap开始一一对应。

第一块小图片对应字符startCharMap;第二块小图片对应字符startCharMap+1;第三块对应startCharMap+2 …… 以此类推。

注:startCharMap为ASCII码,即:数字 ‘0‘ 为48。

//
	//charMapFile  : 字符资源图片png
	//itemWidth    : 每个字符的宽
	//itemHeight   : 每个字符的高
	//startCharMap : 图片第一个是什么字符
	static Label* createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);
	static Label* createWithCharMap(Texture2D* texture, int itemWidth, int itemHeight, int startCharMap);
	static Label* createWithCharMap(const std::string& plistFile);
//

0、字符图片资源

digit.png:200*20(每个数字20*20)。

1、使用.png创建

//
	//create 字符图片.png,每个字符宽,高,起始字符
	Label* lb4 = Label::createWithCharMap("fonts/digit.png", 20, 20, ‘0‘);
	lb4->setString("123456"); //设置字符串内容
//

2、使用Texture2D创建

使用方法实际上与.png是类似的。

//
	//创建图片纹理Texture2D
	Texture2D* texture = TextureCache::getInstance()->addImage("fonts/digit.png");

	Label* lb5 = Label::createWithCharMap(texture, 20, 20, ‘0‘);
	lb5->setString("123456"); //设置字符串内容
//

3、使用.plist创建

在digit.plist里需要配置:用到的字符图片资源.png,每个字符的宽、高,起始字符。

如下所示:

//
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
	<plist version="1.0">
	<dict>
		<key>version</key>           <!-- plist版本 -->
		<integer>1</integer>
		<key>textureFilename</key>   <!-- 字符图片资源: digit.png -->
		<string>digit.png</string>
		<key>itemWidth</key>         <!-- 每个字符的宽: 20 -->
		<integer>20</integer>
		<key>itemHeight</key>        <!-- 每个字符的高: 20 -->
		<integer>20</integer>
		<key>firstChar</key>         <!-- 起始字符    : ‘0‘ -->
		<integer>48</integer>
	</dict>
	</plist>
//

使用plist创建CharMap的方法:

//
	//plist的配置信息,如上所示
	Label* lb6 = Label::createWithCharMap("fonts/digit.plist");
	lb6->setString("123456");
//


【createWithBMFont】

BMFont的用法与2.x中的LabelBMFont是一样的。

这个类使用之前,需要添加好字体文件,包括一个图片文件(*.png)和一个字体坐标文件(*.fnt),这两个文件名称必须一样。可以下载一个fnt编辑工具来自定义字体。

值得注意的是:

> 在2.x中,可以使用 getChildByTag(i) 来获取第i个字符,对其单独设置属性、动作等。

> 在3.x中,则是使用 getLetter(i) ,而不再是 getChildByTag(i) 。

这个类也没办法指定字体的字号大小,需要用setScale来缩放调整大小。

//
	static Label* createWithBMFont(
		const std::string& bmfontFilePath, //字体文件.font
		const std::string& text,           //内容
        const TextHAlignment& alignment = TextHAlignment::LEFT,
		int maxLineWidth = 0, 
        const Vec2& imageOffset = Vec2::ZERO       //字符图片的起始左上角坐标。一般不要设置这个参数,因为坐标的配置均已在.font里完成
	);
//

使用举例:

//
	Label* lb7 = Label::createWithBMFont("bitmapFontTest.fnt", "123abc", TextHAlignment::LEFT);
//


【Label的属性与方法】

Label继承于:

SpriteBatchNode : 用于加快字体的渲染速度。

LabelProtocol   : 用于设置Label的字符串内容。

主要函数如下:

//
class CC_DLL Label : public SpriteBatchNode, public LabelProtocol
{
/**
 *	字体设置
 *		- setSystemFontName : 字体(字体名字、字体文件)
 *		- setSystemFontSize : 字体大小
 *		- setString         : 字符串内容
 *		- setTextColor      : 文字内容颜色
 **/
	//设置System Font类型的字体(字体名字、字体文件)
	//设置System Font类型的字体大小
	//请不要用于其他Label类型!(TTF、CharMap、BMFont)
	virtual void setSystemFontName(const std::string& systemFont);
	virtual void setSystemFontSize(float fontSize);
	virtual const std::string& getSystemFontName() const { return _systemFont;}
	virtual float getSystemFontSize() const { return _systemFontSize;}

	//改变字符串内容并重新渲染
	//注:如果你没有为Label设置TTF/BMFont/CharMap,会产生很大的开销
	virtual void setString(const std::string& text) override;
	virtual const std::string& getString() const override {  return _originalUTF8String; }

	//设置文字颜色,仅支持TTF和System Font
	//注:区别 Node节点的颜色
	//		Node ::setColor     : Color3B
	//		Label::setTextColor : Color4B
	virtual void setTextColor(const Color4B &color);
	const Color4B& getTextColor() const { return _textColor; }

/**
 *	获取Label的某个字符
 *		- getLetter
 *		- 不支持System Font
 **/
	//不支持System Font
	virtual Sprite* getLetter(int lettetIndex);

/**
 *	文字渲染效果
 *		- Shadow  : 阴影
 *		- Outline : 轮廓,仅支持TTF
 *		- Glow    : 发光,仅支持TTF
 **/
	//阴影Shadow(阴影颜色,相对Label的偏移,模糊度)
	//注: 其中blurRadius在3.2中并未实现
	virtual void enableShadow(const Color4B& shadowColor = Color4B::BLACK,const Size &offset = Size(2,-2), int blurRadius = 0);

	//轮廓Outline,仅支持TTF(轮廓颜色,轮廓粗细)
	virtual void enableOutline(const Color4B& outlineColor,int outlineSize = -1);

	//发光Glow,仅支持TTF
	virtual void enableGlow(const Color4B& glowColor);

	//取消阴影/轮廓/发光渲染效果
	virtual void disableEffect();

/**
 *	对齐方式
 *    > TextHAlignment : 水平对齐方式
 *        - TextHAlignment:LEFT    : 左对齐
 *        - TextHAlignment:CENTER  : 居中对齐,默认
 *        - TextHAlignment:RIGHT   : 右对齐
 *    > TextVAlignment : 垂直对齐方式
 *        - TextVAlignment::TOP    : 顶部,默认
 *        - TextVAlignment::CENTER : 中心
 *        - TextVAlignment::BOTTOM : 底部
 **/
	//设置对齐方式
	void setAlignment(TextHAlignment hAlignment) { setAlignment(hAlignment,_vAlignment);}
	void setAlignment(TextHAlignment hAlignment,TextVAlignment vAlignment);
	TextHAlignment getTextAlignment() const { return _hAlignment;}

	//设置水平对齐方式
	void setHorizontalAlignment(TextHAlignment hAlignment) { setAlignment(hAlignment,_vAlignment); }
	TextHAlignment getHorizontalAlignment() const { return _hAlignment; }

	//设置垂直对齐方式
	void setVerticalAlignment(TextVAlignment vAlignment) { setAlignment(_hAlignment,vAlignment); }
	TextVAlignment getVerticalAlignment() const { return _vAlignment; }

/**
 *	Label尺寸大小
 *		- setLineBreakWithoutSpace : 开启自动换行功能
 *		- setMaxLineWidth          : 文字内容的最大行宽
 *		- setWidth                 : Label尺寸大小,宽
 *		- setHeight                : Label尺寸大小,高
 *		- setDimensions            : Label尺寸大小
 **/
	//是否开启自动换行功能
	void setLineBreakWithoutSpace(bool breakWithoutSpace);

	//最大行宽,内容超过MaxLineWidth,就会自动换行
	//前提条件: 仅在width==0时,起作用。
	//	> width == 0;
	//	> setMaxLineWidth(lineWidth);
	//	> setLineBreakWithoutSpace(true);
	//它的效果与下面是类似的.
	//	> setWidth(lineWidth);
	//	> setLineBreakWithoutSpace(true);
	//只是width==0时,就无法设置文本的对齐方式了.
	void setMaxLineWidth(unsigned int maxLineWidth);
	unsigned int getMaxLineWidth() { return _maxLineWidth;}

	//设置Label的尺寸大小
	//可以理解为Label的文本框大小
	//当setLineBreakWithoutSpace(true)时,内容超过width,会自动换行
	//并且内容支持文本的对齐方式
	//注:设置尺寸大小,使用的是setDimensions,而不是setContentSize !
	void setWidth(unsigned int width) { setDimensions(width,_labelHeight); }
	void setHeight(unsigned int height){ setDimensions(_labelWidth,height); }
	void setDimensions(unsigned int width,unsigned int height);
	unsigned int getWidth() const { return _labelWidth; }
	unsigned int getHeight() const { return _labelHeight; }  
	const Size& getDimensions() const{ return _labelDimensions; }

/**
 *	v3.2 新增
 *		- setLineHeight        : 设置行间距
 *		- setAdditionalKerning : 设置文字间距
 *		- getStringLength      : 字符串内容长度
 */
	//设置行间距,不支持system font
	void setLineHeight(float height);
	float getLineHeight() const;

	//设置文字间距,不支持system font
	void setAdditionalKerning(float space);
	float getAdditionalKerning() const;

	//获取Label的字符串内容长度
	int getStringLength() const;

/**
 *	重写Node父类的方法
 *		- setBlendFunc   : 混合模式
 *		- setScale       : 放缩字体大小
 *		- addChild       : 添加子节点
 *		- getDescription : 显示Label的描述
 **/
	//设置颜色混合模式
	virtual void setBlendFunc(const BlendFunc &blendFunc) override;

	//放缩字体大小(一般用于CharMap、BMFont)
	virtual void setScale(float scale) override;
	virtual void setScaleX(float scaleX) override;
	virtual void setScaleY(float scaleY) override;
	virtual float getScaleX() const override;
	virtual float getScaleY() const override;

	//添加子节点
	virtual void addChild(Node * child, int zOrder=0, int tag=0) override;
	virtual void sortAllChildren() override;

	//Label描述
	virtual std::string getDescription() const override;
};
//


【文字渲染效果】

支持三种渲染效果:

> Shadow  : 阴影

> Outline : 轮廓,仅支持TTF

Glow    : 发光,仅支持TTF

注:其中Outline与Glow两个效果,只会作用一个。即无法一起使用。

使用举例:

//
	Label* lb = Label::createWithTTF("123abc", "fonts/Marker Felt.ttf", 50);
	lb->setPosition(visibleSize / 2);
	this->addChild(lb);

	lb->enableShadow(Color4B::GREEN, Size(10, 10)); //阴影
	lb->enableOutline(Color4B::RED, 3);             //轮廓
	//lb->enableGlow(Color4B::GREEN);                 //发光

	//取消阴影、轮廓、发光效果
	//lb->disableEffect();
//

如图所示:



【对齐方式】

> TextHAlignment : 水平对齐方式

- TextHAlignment:LEFT    : 左对齐

- TextHAlignment:CENTER  : 居中对齐,默认

- TextHAlignment:RIGHT   : 右对齐

> TextVAlignment : 垂直对齐方式

- TextVAlignment::TOP    : 顶部,默认

- TextVAlignment::CENTER : 中心

- TextVAlignment::BOTTOM : 底部

仅在设置了Label的尺寸大小setDimensions(width,height),大于显示的字符串内容的尺寸大小,才会起作用。

对齐方式举例,如下几张图片所示:

对齐方式为:

> TextHAlignment:LEFT

> TextVAlignment::TOP



【自动换行】

在3.x中,自动换行有两种方式。(当然你也可以使用C++里的转移字符‘\n‘进行手动换行)

> 利用lb->setLineBreakWithoutSpace(true),来支持自动换行功能。

> 1. 利用 setMaxLineWidth(maxLineWidth),来控制自动换行。

> 2. 利用 setDimensions(width , height),来控制自动换行。

1、利用setMaxLineWidth

设置每行显示文字的最大宽度。

注:这种方法仅在Label width == 0的情况下,才会有效。

使用方法:

//
	lb->setLineBreakWithoutSpace(true);
	lb->setMaxLineWidth(120); //最大宽度120
//

如图:

2、利用setDimensions

使用方法:

//
	lb->setLineBreakWithoutSpace(true);
	lb->setWidth(80);         //设置Label尺寸宽80
	lb->setMaxLineWidth(120); //设置了Label width,这个就无效了
//

如图:



【文字间距】

间距的调整,是在 v3.2 之后才出现的。可以设置文本内容的行间距与文字间距。

注:不支持System Font。

setLineHeight        : 设置行间距

setAdditionalKerning : 设置额外文字间距

使用举例:

//
	lb->setLineHeight(80);
	lb->setAdditionalKerning(10);
//

图解:



【单独设置某个字符】

学过2.x中的LabelBMFont的同学,应该知道这个是怎么回事吧?

在3.x中,使用TTFCharMapBMFont创建的文字标签,其字符串内容的每个字符都是一个Sprite精灵图片,可以对其进行单独的设置。如精灵放缩、执行动作等。

注:不支持System Font。

> lb->getStringLength() : 获取字符串内容的总长度

> lb->getLetter(i)      : 获取第i个位置上的字符

使用举例:

//
	Label* lb = Label::createWithTTF("123abc", "fonts/Marker Felt.ttf", 50);
	lb->setPosition(visibleSize / 2);
	this->addChild(lb);

	//获取字符串总长度,length = 6
	CCLOG("%d", lb->getStringLength());

	//获取第1个字符
	Sprite* letter1 = lb->getLetter(1);
	letter1->setColor(Color3B::GREEN); //设置颜色
	letter1->setScale(2.0f);           //放缩

	//获取第4个字符
	Sprite* letter4 = lb->getLetter(4);
	letter4->setColor(Color3B::RED);  //设置颜色
	letter4->runAction(RepeatForever::create(RotateBy::create(1.0f, 90))); //执行旋转动作
//

如图:

时间: 2024-10-19 15:51:39

cocos2dx[3.2](14)——新字体标签Label的相关文章

制作标签(Label)

怎样判断是否应当使用标签 当游戏中出现需要程序输出文字的地方,就要使用标签. 创建标签 在Unity顶部选择NGUI菜单.选择Create->Label,即可创建一个Label. Label的文字设置 1.设置字体 如果新创建的Label的组件面板为一片灰色(不可设置)的话,说明还没有设置字体.单击Label组件中的Unity按钮,会弹出两个按钮:NGUI和Unity,如果希望使用NGUI的静态字体,则选择NGUI:如果希望使用动态字体,则选择Unity. 然后单击Font,如果之前选择的NGU

HTML5增加的几个新的标签

HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数 先来记录一下吧! 1.  <canvas>画布标签 HTML5的新标签 举例: 1 <html> 2 <head> 3 <title>canvas画布的应用</title> 4 <p align="center">画一个矩

百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决

当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合API<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></scrip

02字体标签

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--解决乱码 ,告诉浏览器文档类型和编码 5 http-equiv:描述当前网页内容类型 6 context:使用的是html的文本 7 charset:使用的编码是UTF-8,解码也使用UTF-8 8 --> 9 <meta http-equiv="Content-Type" content="text/html" charset=

Cocos2d-x教程(28)-ttf 字体库的使用

欢迎加入 Cocos2d-x 交流群: 193411763 转载请注明原文出处:http://blog.csdn.net/u012945598/article/details/37650843 通常为了使游戏界面更为美观,我们会选用某种字体来达到效果.今天要介绍的便是如何在iOS中引入ttf字体库文件(Cocos2d-x 原理相同) 在iOS中使用字体库的步骤如下(Android无需下述处理,可直接使用): 1.获取ttf字体库文件(网上搜索一搜一堆) 2.在Mac上安装字体库文件(主要用于获取

cocos2dx基础篇(14)——文本框之一CCTextFieldTTF

[引言] 前面我们讲了精灵贴图.标签.菜单.按钮.感觉似乎少了点什么?UI控件里是不是应该还有一个很重要的控件--文本框.在手机网游中,启动游戏,过了开场动画后,基本上显示的第一个界面应该就是游戏的登录界面了吧.输入用户名.密码什么的,这些都是需要借助文本框来实现输入的.点击文本,弹出虚拟键盘,输入账号密码,点击登录. cocos2dx引擎为我们提供了两类文本框的控件: (1)CCTextFieldTTF(基于CCLabelTTF) (2)CCEditBox(基于CCControlButton)

break和continue的区别以及标签label的使用

break表示直接跳出当前循环,break只能运用于switch--case语句以及循环之中 continue则表示跳出当次循环,继续执行下一次循环 label标签则可以选择break,或者continue针对哪一个循环语句 例如:输出1到10的所有数,循环输出四行. 如果i%4==0则break: 如果i%4==0则continue: 1 class TestBreakContinue 2 { 3 public static void main(String[] args) 4 { 5 /*

【HTML5】---【HTML5提供的一些新的标签用法以及和HTML 4的区别】

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求. HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站.其中有些是技术上类似 <div> 和

HTML5新结构标签和移动端页面布局

--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.article 一篇文章 4.section 文章中的章节 5.aside 侧边栏 6.footer 页面底部.页脚pc端兼容需要引用对应的js脚本<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r