【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第十四课：Cocos2D-X UI系统1-4

分类：Cocos2d-x作者：编程之家用户

【麦可网】Cocos2d-X跨平台游戏开发---学习笔记

第十四课：Cocos2D-X UI系统1-4

=======================================================================================================================================================================

课程目标：

-Cocos2D-XUI系统

课程重点：

-Cocos2D-X常用UI控件

考核目标：

-熟练运用Cocos2D-XUI控件

-掌握Cocos2D-X中字体的使用

=======================================================================================================================================================================

一、字体

CCLabelTTF（.ttf）						参考代码：tests->FontTest
CCLabelBMFont(.fnt+.png图片)			<span style="white-space:pre">		</span>参考代码：tests->LabelTest
CCLabelAtlas（.png图片）

CCLabelTTF 例子：
CCSize s = CCDirector::sharedDirector()->getWinSize();
CCLabelTTF *ttffont = CCLabelTTF::laelWithString(“HelloWorld”,”Marker Felt”,20);
addChild(ttffont);
ttffont->setPosition(ccp(s.width/2,s.height)/2);
ttffont->setString(“Hello Cocos2D”);		<span style="white-space:pre">		</span>//更改显示内容
ttffont->setColor(ccc3(255,0));			<span style="white-space:pre">	</span>//设置颜色
ttffont->setScale(3.0f);					//放大3倍
ttffont->setRotation(45.0f);				<span style="white-space:pre">	</span>//旋转45度
ttffont->setOpacity(200)					//透明度设置	（0-全透明，255-不透明）					
CCLabelBMFont例子：
CCLabelBMFont *label = CCLabelBMFont::labelWithString(“Test”,”fonts/bitmapFontTest2.fnt”);

CCLabelAtlas例子：
CCLabelAtlas* label1 = CCLabelAtlas::labelWithString("123 Test","fonts/tuffy_bold_italic-charmap.png",48,64,' ');
使用该字体的三个条件：
1.每个字体的宽度和高度相等
2.指定图片上的第一个字是什么
3.图片上的字是按照acsii码排序的

参考代码：tests->FontTest
----------------标签枚举----------------
enum {												
	kTagLabel1,kTagLabel2,kTagLabel3,kTagLabel4,};

----------------字体数组----------------
static std::string fontList[] =					
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
    "American Typewriter","Marker Felt",#endif
	"fonts/A Damn Mess.ttf","fonts/Abberancy.ttf","fonts/Abduction.ttf","fonts/Paint Boy.ttf","fonts/Schwarzwald Regular.ttf","fonts/Scissor Cuts.ttf",};

----------------字体选择----------------
static const char* nextAction(void)
{
	fontIdx++;
	fontIdx = fontIdx % (sizeof(fontList) / sizeof(fontList[0]));
	return fontList[fontIdx].c_str();
}

static const char* backAction(void)
{
	fontIdx--;
	if (fontIdx < 0)
	{
		fontIdx += (sizeof(fontList) / sizeof(fontList[0]));
	}

	return fontList[fontIdx].c_str();
}

static const char* restartAction(void)
{
	return fontList[fontIdx].c_str();
}

----------------字体构造函数----------------
FontTest::FontTest()
{
	CCSize size = CCDirector::sharedDirector()->getWinSize();
	CCMenuItemImage *item1 = CCMenuItemImage::itemFromNormalImage(s_pPathB1,s_pPathB2,this,menu_selector(FontTest::backCallback));
	CCMenuItemImage *item2 = CCMenuItemImage::itemFromNormalImage(s_pPathR1,s_pPathR2,menu_selector(FontTest::restartCallback));
	CCMenuItemImage *item3 = CCMenuItemImage::itemFromNormalImage(s_pPathF1,s_pPathF2,menu_selector(FontTest::nextCallback));

	CCMenu *menu = CCMenu::menuWithItems(item1,item2,item3,NULL);
	menu->setPosition(CCPointZero);
	item1->setPosition(ccp(size.width/2 - 100,30));
	item2->setPosition(ccp(size.width/2,30));
	item3->setPosition(ccp(size.width/2 + 100,30));
	addChild(menu,1);
    
    showFont(restartAction());
}

----------------字体显示----------------
void FontTest::showFont(const char *pFont)
{
	removeChildByTag(kTagLabel1,true);			<span style="white-space:pre">		</span>//根据标签删除节点
	removeChildByTag(kTagLabel2,true);
	removeChildByTag(kTagLabel3,true);
	removeChildByTag(kTagLabel4,true);

	CCSize s = CCDirector::sharedDirector()->getWinSize();

	CCLabelTTF *top = CCLabelTTF::labelWithString(pFont,pFont,24);
	CCLabelTTF *left = CCLabelTTF::labelWithString("alignment left",CCSizeMake(s.width,50),CCTextAlignmentLeft,32);
	CCLabelTTF *center = CCLabelTTF::labelWithString("alignment center",CCTextAlignmentCenter,32);
	CCLabelTTF *right = CCLabelTTF::labelWithString("alignment right",CCTextAlignmentRight,32);

	top->setPosition(ccp(s.width/2,250));
	left->setPosition(ccp(s.width/2,200));
	center->setPosition(ccp(s.width/2,150));
	right->setPosition(ccp(s.width/2,100));

	addChild(left,kTagLabel1);						//添加带标签的节点
	addChild(right,kTagLabel2);
	addChild(center,kTagLabel3);
	addChild(top,kTagLabel4);
}

----------------获取某一个字母----------------
	CCLabelBMFont *label = CCLabelBMFont::labelWithString("Bitmap Font Atlas","fonts/bitmapFontTest.fnt");
	addChild(label);
	
	CCSize s = CCDirector::sharedDirector()->getWinSize();
	
	label->setPosition( ccp(s.width/2,s.height/2) );
	label->setAnchorPoint( ccp(0.5f,0.5f) );
	
	
	CCSprite* BChar = (CCSprite*) label->getChildByTag(0);
	CCSprite* FChar = (CCSprite*) label->getChildByTag(7);
	CCSprite* AChar = (CCSprite*) label->getChildByTag(12);


二、菜单

参考代码：Tests->Menu Tests
MenuLayer1::MenuLayer1()
{
	CCMenuItemFont::setFontSize( 30 );
	CCMenuItemFont::setFontName("Courier New");

<span style="white-space:pre">	</span>setIsTouchEnabled(true);

	// 精灵创建MenuItem
	CCSprite* spriteNormal = CCSprite::spriteWithFile(s_MenuItem,CCRectMake(0,23*2,115,23));
	CCSprite* spriteSelected = CCSprite::spriteWithFile(s_MenuItem,23*1,23));
	CCSprite* spriteDisabled = CCSprite::spriteWithFile(s_MenuItem,23*0,23));
	//dynamic_cast<CCNode*>(mgr)->addChild(spriteNormal);
	//dynamic_cast<CCNode*>(mgr)->addChild(spriteSelected);
	//dynamic_cast<CCNode*>(mgr)->addChild(spriteDisabled);

	CCMenuItemSprite* item1 = CCMenuItemSprite::itemFromNormalSprite(spriteNormal,spriteSelected,spriteDisabled,menu_selector(MenuLayer1::menuCallback) );
	
	// 图片创建MenuItem
	CCMenuItem* item2 = CCMenuItemImage::itemFromNormalImage(s_SendScore,s_PressSendScore,menu_selector(MenuLayer1::menuCallback2) );

	// 标签创建MenuItem (字体：LabelAtlas)
	CCLabelAtlas* labelAtlas = CCLabelAtlas::labelWithString("0123456789","fonts/fps_images.png",16,24,'.');
	CCMenuItemLabel* item3 = CCMenuItemLabel::itemWithLabel(labelAtlas,menu_selector(MenuLayer1::menuCallbackDisabled) );
	item3->setDisabledColor( ccc3(32,32,64) );
	item3->setColor( ccc3(200,200,255) );
	
	// 文字创建MenuItem
	CCMenuItemFont *item4 = CCMenuItemFont::itemFromString("I toggle enable items",menu_selector(MenuLayer1::menuCallbackEnable) );

	item4->setFontSizeObj(20);
	item4->setFontName("Marker Felt");
	
	// 标签创建MenuItem (字体：CCLabelBMFont)
	CCLabelBMFont* label = CCLabelBMFont::labelWithString("configuration","fonts/bitmapFontTest3.fnt");
	CCMenuItemLabel* item5 = CCMenuItemLabel::itemWithLabel(label,menu_selector(MenuLayer1::menuCallbackConfig));

	// Testing issue #500
	item5->setScale( 0.8f );

	// 字体创建MenuItem
	CCMenuItemFont* item6 = CCMenuItemFont::itemFromString("Quit",menu_selector(MenuLayer1::onQuit));
	
	CCActionInterval* color_action = CCTintBy::actionWithDuration(0.5f,-255,-255);
	CCActionInterval* color_back = color_action->reverse();
	CCFiniteTimeAction* seq = CCSequence::actions(color_action,color_back,NULL);
	item6->runAction(CCRepeatForever::actionWithAction((CCActionInterval*)seq));

	CCMenu* menu = CCMenu::menuWithItems( item1,item4,item5,item6,NULL);
	menu->alignItemsVertically();				//垂直摆放
	
	
	// elastic effect
	CCSize s = CCDirector::sharedDirector()->getWinSize();
	
	int i=0;
	CCNode* child;
	CCArray * pArray = menu->getChildren();
        CCObject* pObject = NULL;
        CCARRAY_FOREACH(pArray,pObject)
	{
		if(pObject == NULL)
			break;

		child = (CCNode*)pObject;

		CCPoint dstPoint = child->getPosition();
		int offset = (int) (s.width/2 + 50);
		if( i % 2 == 0)
			offset = -offset;
		
		child->setPosition( CCPointMake( dstPoint.x + offset,dstPoint.y) );
		child->runAction( CCEaseElasticOut::actionWithAction( CCMoveBy::actionWithDuration(2,CCPointMake(dstPoint.x - offset,0)),0.35f ) );
		i++;
	}

	m_disabledItem = item3; item3->retain();
	m_disabledItem->setIsEnabled( false );			//设置item3不能被点击

	addChild(menu);

}


三、进度条

参考代码：tests->ProgressAction Test
void SpriteProgressToRadial::onEnter()
{
	SpriteDemo::onEnter();
	
	CCSize s = CCDirector::sharedDirector()->getWinSize();

//2秒完成进度100
	CCProgressTo *to1 = CCProgressTo::actionWithDuration(2,100);		CCProgressTo *to2 = CCProgressTo::actionWithDuration(2,100);

	CCProgressTimer *left = 	CCProgressTimer::progressWithFile(s_pPathSister1);
	left->setType( kCCProgressTimerTypeRadialCW );			   //顺时针旋转
	addChild(left);
	left->setPosition(CCPointMake(100,s.height/2));
	left->runAction( CCRepeatForever::actionWithAction(to1));//持续动作to1
	
	CCProgressTimer *right = 	CCProgressTimer::progressWithFile(s_pPathBlock);
	right->setType( kCCProgressTimerTypeRadialCCW );		  //逆时针旋转
	addChild(right);
	right->setPosition(CCPointMake(s.width-100,s.height/2));
	right->runAction(CCRepeatForever::actionWithAction(to2));//持续动作to2
}

六种进度条：
typedef enum {
	/// 逆时针旋转
	kCCProgressTimerTypeRadialCCW,/// 顺时针旋转
	kCCProgressTimerTypeRadialCW,/// 从左到右显示
	kCCProgressTimerTypeHorizontalBarLR,/// 从右到左显示
	kCCProgressTimerTypeHorizontalBarRL,/// 从下到上显示
	kCCProgressTimerTypeVerticalBarBT,/// 从上到下显示
	kCCProgressTimerTypeVerticalBarTB,} CCProgressTimerType;


四、计时器

----------------方式一----------------
schedule( schedule_selector(Atlas3::step) );

void CCNode::schedule(SEL_SCHEDULE selector)
{
	this->schedule(selector,1);				//一秒执行一次
}

----------------方式二----------------
schedule(schedule_selector(LabelsEmpty::updateStrings),1.0f);//一秒一次

===================================================================

总结：

只有熟练的掌握字体、菜单、计时器等才能做出好看的UI。

开心一刻：

小明告诉妈妈，今天客人来家里玩的时候，哥哥放了一颗图钉在客人的椅子上，被我看到了。妈妈说：“那你是怎幺做的呢？”小明说：“我在一旁站着，等客人刚要坐下来的时候，我将椅子从他后面拿走了。”

【麦可网】Cocos2d-X跨平台游戏开发---教程下载:http://pan.baidu.com/s/1kTio1Av

【麦可网】Cocos2d-X跨平台游戏开发---笔记系列:http://blog.csdn.net/qiulanzhu

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

如何使用CCRenderTexture创建动态纹理 Cocos2d-x 2 1 4
    本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》，文中使用Cocos2D，我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章，将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
Cocos-code-ide使用入门学习
Cocos-code-ide使用入门学习地点：杭州滨江邮箱：appdevzw@163.com微信公众号：HopToad 欢迎转载，转载标注出处：http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址：http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
Cocos2D-x-3.0 编译(Win7)
第一次開始用手游引擎挺激动！！！进入正题。下载资源1：从Cocos2D-x官网上下载，进入网页http://www.cocos2d-x.org/download，点击Cocos2d-x以下的Download  v3.0，保存到自定义的文件夹2：从python官网上下载。进入网页https://www.python.org/downloads/，我当前下载的是3.4.0（当前最新
Cocos2d-x 2 0 在Windows平台下的使用
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发引擎，易学易用，支持多种智能移动平台。官网地址：http://cocos2d-x.org/当前版本：2.0    有很多的学习资料，在这里我只做为自己的笔记记录下来，错误之处还请指出。在VisualStudio2008平台的编译：1.下载当前稳
quick-cocos2d-x实例之挑战记忆极限设计文档
1.  来源 QuickV3sample项目中的2048样例游戏，以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱：appdevzw@163.com微信公众号：HopToadAPK下载地址：http://download.csdn.net/detailotbaron/8446223源码下载地址：http://download.csdn.net/
Cocos2d-x 3 X CMake MinGW版本编译运行
   Cocos2d-x3.x已经支持使用CMake来进行构建了，这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址：https://github.com/cocos2d/cocos2d-x1.打开QtCreator，菜单栏→"打开文件或项目..."，打开cocos2d-x目录下的CMakeLists.txt文件；2.弹出CMake向导，如下图所示：设置
vs 2013 编译cocos2d-x-3.9
 下载地址：链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后，解压进入build目录使用vs2013打开工程设置平台工具集，打开设置界面设置： 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32，里面就是编译
cocos2d-x游戏开发系列教程-超级玛丽01-前言
分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！http://www.captainbed.net前言上次用象棋演示了cocos2dx的基本用法，但是对cocos2dx并没有作深入的讨论，这次以超级马里奥的源代码为线索，我们一起来学习超级马里奥的实
Cocos2d-x CCControlPotentiometer之圆形音量button及特效
1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像，所以就这么叫它吧~先看效果：好了，不多解释，本篇到此为止。（旁白： 噗。就这样结束了？）啊才怪~我们来看看代码：[cpp] viewplaincopyprint?CCContro
Cocos2d-x入门教程二简单的静态显示对象
原文链接：http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d，我们将自己写一个场景类，但我们不会走的太远，凡是都要循序渐进，哪怕只前进一点点，那也至少是前进了，总比贪多嚼不烂一头雾水的好。在上一节中我们建
cocos2d-x中CCScale9Sprite的另一种实现
2019独角兽企业重金招聘Python工程师标准>>>cocos2d2.0之后加入了一种九宫格的实现，主要作用是用来拉伸图片，这样的好处在于保留图片四个角不变形的同时，对图片中间部分进行拉伸，来满足一些控件的自适应（PS: 比如包括按钮，对话框，最直观的形象就是ios里的短信气泡了），这就要求图
Cocos2d-x v2.2.2版本+Win7+VS2010环境搭建
原文链接：http://www.cnblogs.com/linji/p/3599478.html1.环境和工具准备Win7VS2010/2012，至于2008v2版本之后似乎就不支持了。 2.安装pythonv.2.0版本之前是用vs模板创建工程的，到vs2.2之后就改用python创建了。到python官网下载版本2.7.5的，然后
Ubuntu14.04+eclipse下cocos2d-x3.0正式版环境的搭建
环境:ubuntu14.04adt-bundle-linux-x86_64android-ndk-r9d-linux-x86_64cocos2d-x-3.0正式版apache-ant1.9.3python2.7(ubuntu自带)加入环境变量exportANDROID_SDK_ROOT=/home/yangming/adt-bundle-linux/sdkexportPATH=${PATH}:/$ANDROID_SDK_ROOTools/export
分别基于WIN32 API界面编程和Cocos2d-x实现的两个版本FlappyBird游戏
1开发背景游戏程序设计涉及了学科中的各个方面，鉴于目的在于学习与进步，本游戏《FlappyBird》采用了两个不同的开发方式来开发本款游戏，一类直接采用win32底层API来实现，另一类采用当前火热的cocos2d-x游戏引擎来开发本游戏。2需求分析2.1数据分析本项目要开发的是一款游
Cocos2d-x 开发小记二：控件
原文链接：http://www.cnblogs.com/linji/p/3599912.html//纯色色块控件（锚点默认左下角）CCLayerColor*ccc=CCLayerColor::create(ccc4(255,0,0,128),200,100);//渐变色块控件CCLayerGradient*ccc=CCLayerGradient::create(ccc4(255,0,0,
Cocos2d-x 开发小记一：基本动作
原文链接：http://www.cnblogs.com/linji/p/3599488.html//载入一张图片CCSprite*leftDoor=CCSprite::create("loading/door.png");leftDoor->setAnchorPoint(ccp(1,0.5));//设置锚点为右边中心点leftDoor->setPosition(ccp(240,160));/
买Cocos2d-x视频课程送纸质图书
为了答谢广大学员对智捷课堂以及关老师的支持，现购买51CTO学院关老师的Cocos2d-x课程之一可以送智捷课堂编写图书一本（专题可以送3本）。一、Cocos2d-x课程列表：1、Cocos2d-x入门与提高视频教程__Part22、Cocos2d-x数据持久化与网络通信__Part33、Cocos2d-x架构设计与性能优化内存优
‎Cocos2d-x 学习笔记(11.10) Spawn
Spawn让多个action同时执行。Spawn有多种不同的create方法，最终都调用了createWithTwoActions(FiniteTimeAction*action1,FiniteTimeAction*action2)方法。createWithTwoActions调用initWithTwoActions方法：对两个action变量初始化：_one=action1;_two=action2;如果两个a
quick-cocos2d-x-develop资源打包环境安装
需要环境：php,luajit.昨天在cygwin上安装php和luajit环境，这真特么是一个坑。建议不要用虚拟环境安装打包环境，否则可能会出现各种莫名问题。折腾了一下午，最终将环境转向linux。其中，luajit的安装脚本已经在quick-cocos2d-x-develop/bin/中，直接luajit_install.sh即可。我的lin
Cocos2d-x 3.0心得01－图片载入与混合模式
v3.0相对v2.2来说，最引人注意的。应该是对触摸层级的优化。和lambda回调函数的引入（嗯嗯，不枉我改了那么多类名。话说，每次cocos2dx大更新。总要改掉一堆类名函数名）。这些特性应该有不少人研究了，所以今天说点跟图片有关的东西。v3.0在载入图片方面也有了非常大改变，仅仅只是
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot