【麦可网】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,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, this, menu_selector(FontTest::restartCallback));
	CCMenuItemImage *item3 = CCMenuItemImage::itemFromNormalImage(s_pPathF1, s_pPathF2, this, 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, pFont, 32);
	CCLabelTTF *center = CCLabelTTF::labelWithString("alignment center", CCSizeMake(s.width, 50), CCTextAlignmentCenter, pFont, 32);
	CCLabelTTF *right = CCLabelTTF::labelWithString("alignment right", CCSizeMake(s.width, 50), CCTextAlignmentRight, pFont, 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, 0, kTagLabel1);						//添加带标签的节点
	addChild(right, 0, kTagLabel2);
	addChild(center, 0, kTagLabel3);
	addChild(top, 0, 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, CCRectMake(0,23*1,115,23));
	CCSprite* spriteDisabled = CCSprite::spriteWithFile(s_MenuItem, CCRectMake(0,23*0,115,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, this, menu_selector(MenuLayer1::menuCallback) );
	
	// 图片创建MenuItem
	CCMenuItem* item2 = CCMenuItemImage::itemFromNormalImage(s_SendScore, s_PressSendScore, this, menu_selector(MenuLayer1::menuCallback2) );

	// 标签创建MenuItem (字体：LabelAtlas)
	CCLabelAtlas* labelAtlas = CCLabelAtlas::labelWithString("0123456789", "fonts/fps_images.png", 16, 24, '.');
	CCMenuItemLabel* item3 = CCMenuItemLabel::itemWithLabel(labelAtlas, this, 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", this, 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, this, menu_selector(MenuLayer1::menuCallbackConfig));

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

	// 字体创建MenuItem
	CCMenuItemFont* item6 = CCMenuItemFont::itemFromString("Quit", this, menu_selector(MenuLayer1::onQuit));
	
	CCActionInterval* color_action = CCTintBy::actionWithDuration(0.5f, 0, -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, item2, item3, 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.youkuaiyun.com/qiulanzhu