cocos2d-x UI常用的类

到目前为止，我们讨论了多个场景和多个层的应用。现在我们来讨论关卡。

大家应该对关卡的概念都很熟悉，所以我不在这里做解释了。设计关卡的难点是决定用什么样的方式来设计基于关卡的游戏。

在Cocos2d-x中个关卡都使用一个场景，或者在同一个场景里设置多个层作为关卡。选择哪种方式取决于关卡在你游戏中的作用。

No.1 每一个关卡都使用一个场景

No.2 同一个场景里设置多个层作为关卡

CCLayerMultiplex 

CCLayerMultiplex类可被用于这种方式中。它可以同时包含多个节点，但是任意时间里只有一个节点是有效的。但是唯一的缺点是你不能在层之间使用过渡效果。因为任意时间里只能有一个层是可视的，所以任何过渡效果都是不可能发生的。

1. CCLayerMultiplex *multiplex=CCLayerMultiplex::layerWithLayers(layer1,layer2,NULL); 
2.         //切换到第二个Layer 
3. multiplex->switchTo(1); 
4.         //切换到第二个Layer并且释放当前Layer 以后就不能切换到当前Layer 
5. multiplex->switchToAndReleaseMe(1); 

CCLayerColor

CCLayerColor类可用于改变背景颜色

1. CCLayerColor *layercolor=CCLayerColor::layerWithColor(ccc4(225,0,225,255)); 
2. this->addChild(layercolor,0); 

  如果你熟悉OpenGL的话，你可能会觉得没有必要为了改变背景颜色而添加一个单独的层。你可以使用以下OpenGL代码得到相同的效果：

1. glClearColor(255,0,255,255); 

一些很酷的CCNode类

以下我会介绍四个基于CCNode可以满足特定要求的类。它们是：

CCProgressTimer，

CCParallaxNode，

CCMotionStreak。

CCProgressTimer进度条

1. CCSize size = CCDirector::sharedDirector()->getWinSize(); 
2.         middle = CCProgressTimer::create(CCSprite::create("time.png")); 
3.  
4. //      setType  设置类型 
5. //      kCCProgressTimerTypeRadial为弧形 
6. //      kCCProgressTimerTypeBar为条形 
7.         middle->setType(kCCProgressTimerTypeRadial); 
8.  
9. //      setMidpoint 实现向左，向右，向上，向下或中间像两头移动的， 
10. //      你只要改变ccp（x，y）中x，y的值来实现 
11. //      ccp（0,0）这表示从左到右的曾加， 
12. //      ccp（1,0）表示从右到左的增加 
13. //      ccp（0,1）表示从下到上的增加 
14. //      ccp（0.5f，0）表示从中间向左向右两头增加, 
15. //      还有很多，看你怎么设置了 
16.         middle->setMidpoint(ccp(0,0)); 
17.         //设置进度  0-100 
18.         middle->setPercentage(proportion); 
19.         middle->setPosition(ccp(size.width/2,size.height/2)); 
20.         addChild(middle); 
21.         //进度条需要预约的更新方法来更新自身的状态 
22.         scheduleUpdate(); 

Update方法代码：

1. void MyScene::update(ccTime time) { 
2.     proportion++; 
3.     middle->setPercentage(proportion); 
4.     if (proportion >= 100) 
5.         proportion= 0; 
6. } 

 CCParallaxNode 视差视图

 “视差”（Parallaxing）是2D游戏中通过让不同层上的图片用不同的速度移动，来创造视觉深度的方法。前景的图片移动的比背景图片要快。cocos2d-x有一个特殊的节点用于实现这个效果

1. bool ParallaxScreen::init() { 
2.     bool bRet = false; 
3.     do { 
4.  
5.         CCSize size = CCDirector::sharedDirector()->getWinSize(); 
6.         node = CCParallaxNode::create(); 
7.         this->addChild(node); 
8.         CCSprite *sprite1 = CCSprite::create("parallax/parallax1.png"); 
9.         CCSprite *sprite2 = CCSprite::create("parallax/parallax2.png"); 
10.  
11.         //设置速度 
12.         CCPoint speed1 = CCPointMake(0.5,0.5); 
13.         CCPoint speed2 = CCPointMake(0.1,0.1); 
14.  
15.         node->addChild(sprite1, 1, speed1, CCPointMake(0,0)); 
16.         node->addChild(sprite2, 2, speed2, CCPointMake(0,size.width/2)); 
17.  
18.         this->scheduleUpdate(); 
19.         bRet = true; 
20.     } while (0); 
21.     return bRet; 
22. } 
23.  
24. void ParallaxScreen::update(ccTime time) { 
25.  
26.     CCSize size = CCDirector::sharedDirector()->getWinSize(); 
27.     CCPoint backgroundScrollVert = CCPointMake(1000,0); 
28.     node->setPosition( 
29.             ccpAdd(node->getPosition(), ccpMult(backgroundScrollVert, time))); 
30.     if (node->getPosition().x > size.width*4) { 
31.         node->setPosition(CCPointMake(0,node->getPosition().y)); 
32.     } 
33. } 

 CCMotionStreak（拖尾效果）

1. bool Ribbon::init() { 
2.     bool bRet = false; 
3.     do { 
4.         CCSize size=CCDirector::sharedDirector()->getWinSize(); 
5. //      第一个参数用于决定元素消失的速度,它的值越小，元素消失的越快
6. //      第二个参数是间隐片断的大小 
7. //      第三个参数是贴图的宽 
8. //      第四个参数是颜色值argb 
9. //      第五个参数是贴图的路径 
10.         motion = CCMotionStreak::create(3, 3, 32, ccc3(255, 255, 0), "s1.png"); 
11.         motion->setPosition(CCPointMake(size.width/2,size.height/2)); 
12.         this->addChild(motion); 
13.         this->setTouchEnabled(true); 
14.         bRet = true; 
15.     } while (0); 
16.     return bRet; 
17. } 
18.  
19. void Ribbon::registerWithTouchDispatcher(){ 
20. CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,0,true); 
21. } 
22.  
23. void Ribbon::ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent) { 
24.     CCLog("拖动"); 
25.     CCPoint point = pTouch->getLocation(); 
26. //  convertToGL: 转换成opengl坐标啊,(0,0)在左下方 
27. //  convertToUI:转换成quartz坐标,(0,0)在左上方的. 
28.     point=CCDirector::sharedDirector()->convertToUI(point); 
29.     motion->setPosition(point); 
30. } 
31.  
32. //bool Ribbon::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent){ 
33. //  CCLog("触摸到屏幕"); 
34. //  return true; 
35. //}