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

前端之家收集整理的这篇文章主要介绍了【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第十四课:Cocos2D-X UI系统1-4前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

【麦可网】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

原文链接:https://www.f2er.com/cocos2dx/342567.html

猜你在找的Cocos2d-x相关文章