cpp-tests Node::Layer及Node::Menu

～～～～我的生活，我的点点滴滴！！

1、Layer层

Layer 游戏中的背景容器，Layer类是Node类的一个子类，它实现了触屏事件代理（TouchEventsDelegate）协议。

LayerColor是Layer的一个子类，它实现了RGBAProtocol协议。

LayerGradient是LayerColor的一个子类，它在背景上画渐变效果。 

LayerMultiplex类是一个能够使它的子类进行复用的布景层类。

Sprite精灵不能直接放入舞台中，它需要作为Layer的子节点，通过Layer加入舞台场景中显示。

cpp-tests例子中Node::Layer测试了很多Layer及其子类的作用与用法，比如递归设置Cascading与opacity来让在Layer层上面的精灵具有及相应的属

性等等，LayerMultiple类在MenuTest里面讲解，下面讲解一下渐变Layer即LayerGradient。

LayerGradient它实现了LayerColor类的所有功能，还添加了以下这些新功能：

1、渐变方向

2、渐变最终颜色

3、插值模式

颜色沿着给定的向量插在起始颜色和终止颜色之间（从起点开始，到终点结束）。如果没有提供向量，则默认到（0，-1）点一个从顶部到底部的淡入

淡出。

如果“compressedInterpolation”不可用，你将看不到非基本向量的起始颜色和终止颜色；不过无论如何，一个平滑的渐变  (包括终点)最终还是会

呈现出来。

 
如果“compressedInterpolation”是可用的(默认模式)，你将看到渐变的起始颜色和终止颜色。


看下面代码：

LayerGradientTest::LayerGradientTest(){//渐变，第一个参数是起始颜色，第二个参数是终止颜色，第三个参数是渐变方向是通过与原点减来求矢量的;//这里(0.9f,0.9f)与(0,0)计算后的夹角是45度往x轴正方向，也就是向右;//如果没有第三个参数，则默认到(0，-1)一个从顶部到底部的淡入淡出;    auto layer1 = LayerGradient::create(Color4B(255,0,0,255), Color4B(0,255,0,255), Vec2(0.9f, 0.9f));    addChild(layer1, 0, kTagLayer);    auto listener = EventListenerTouchAllAtOnce::create();    listener->onTouchesMoved = CC_CALLBACK_2(LayerGradientTest::onTouchesMoved, this);    _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);    auto label1 = Label::createWithTTF("Compressed Interpolation: Enabled", "fonts/Marker Felt.ttf", 26);    auto label2 = Label::createWithTTF("Compressed Interpolation: Disabled", "fonts/Marker Felt.ttf", 26);    auto item1 = MenuItemLabel::create(label1);    auto item2 = MenuItemLabel::create(label2);//设置一个toggle开关，来演示Compressed，本人目测效果不明显;    auto item = MenuItemToggle::createWithCallback( CC_CALLBACK_1(LayerGradientTest::toggleItem, this), item1, item2, nullptr);    auto menu = Menu::create(item, nullptr);    addChild(menu);    auto s = Director::getInstance()->getWinSize();    menu->setPosition(Vec2(s.width / 2, 100));}void LayerGradientTest::toggleItem(Ref *sender){    auto gradient = static_cast<LayerGradient*>( getChildByTag(kTagLayer) );    gradient->setCompressedInterpolation(! gradient->isCompressedInterpolation());}void LayerGradientTest::onTouchesMoved(const std::vector<Touch*>& touches, Event *event){    auto s = Director::getInstance()->getWinSize();    auto touch = touches[0];    auto start = touch->getLocation();        auto diff =  Vec2(s.width/2,s.height/2) - start;    diff = diff.getNormalized();    auto gradient = static_cast<LayerGradient*>( getChildByTag(1) );//设置一个移动矢量方向    gradient->setVector(diff);}

上面代码会产生一个从左下角红色慢慢变到右上角绿色的Layer层，当鼠标点击移动后，根顺着鼠标移动方向切换渐变颜色位置。

效果图：

2、Menu菜单

菜单按钮有好多了，像MenuItemSprite、MenuItemFont、MenuItemLabel、MenuItemImage、MenuItemToggle等等，都是大同小异，直接看后缀也大概

知道分别代表什么意思，怎么使用了。

下面代码列出了上面的使用方法：

MenuLayerMainMenu::MenuLayerMainMenu(){    _touchListener = EventListenerTouchOneByOne::create();    _touchListener->setSwallowTouches(true);    _touchListener->onTouchBegan = CC_CALLBACK_2(MenuLayerMainMenu::onTouchBegan, this);    _touchListener->onTouchMoved = CC_CALLBACK_2(MenuLayerMainMenu::onTouchMoved, this);    _touchListener->onTouchEnded = CC_CALLBACK_2(MenuLayerMainMenu::onTouchEnded, this);    _touchListener->onTouchCancelled = CC_CALLBACK_2(MenuLayerMainMenu::onTouchCancelled, this);    //注意这里使用的是FixedPriority而不是SceneGraphPriority;//FixedPriority会依据手动设置的值的顺序来决定触摸的优先级，但是不能为0;//0已经留给scene了    _eventDispatcher->addEventListenerWithFixedPriority(_touchListener, 1);    // Font Item    // 这里其实是一张图片有三个等分小图片，通过计算其位置来获得图片，plist文件里面其实也是这样的;// 这里的Rect值算的有问题，x,y坐标要缩小一倍，width与height也要缩小一倍;// 要不然显示出来的就是一个空白黄色立方形;    auto spriteNormal = Sprite::create(s_MenuItem, Rect(0,23*0.5*2,115*0.5,23*0.5));    auto spriteSelected = Sprite::create(s_MenuItem, Rect(0,23*0.5*1,115*0.5,23*0.5));    auto spriteDisabled = Sprite::create(s_MenuItem, Rect(0,23*0.5*0,115*0.5,23*0.5));    auto item1 = MenuItemSprite::create(spriteNormal, spriteSelected, spriteDisabled  , CC_CALLBACK_1(MenuLayerMainMenu::menuCallback, this) );    // Image Item    auto item2 = MenuItemImage::create(s_SendScore, s_PressSendScore, CC_CALLBACK_1(MenuLayerMainMenu::menuCallback2, this) );    // Label Item (LabelAtlas)    auto labelAtlas = LabelAtlas::create("0123456789", "fonts/labelatlas.png", 16, 24, '.');    auto item3 = MenuItemLabel::create(labelAtlas, CC_CALLBACK_1(MenuLayerMainMenu::menuCallbackDisabled, this) );    /*设置一层覆盖颜色,上一行代码给item3设置了一个触摸回调函数,后面代码;_disabledItem = item3; item3->retain();    _disabledItem->setEnabled( false );把_disabledItem指向item3并且设置setEnabled为false让其不可用状态;这样相当于在item3上面覆盖一层，这样触摸就可控制了;为什么不直接使用item3？？？？;;;;*/item3->setDisabledColor( Color3B(232,0,0) );//设置字体颜色;    item3->setColor( Color3B(200,200,255) );        // Font Item    auto item4 = MenuItemFont::create("I toggle enable items", [&](Ref *sender) {    //设置是否可用;_disabledItem->setEnabled(! _disabledItem->isEnabled() );//此处能不能直接用item3了????????;//当然可以呀，但是需要把item3设置为成员变量，这样在lambda表达式中就能捕获到;//item3->setEnabled( !item3->isEnabled() );});    item4->setFontSizeObj(20);    item4->setFontName("fonts/Marker Felt.ttf");        // Label Item (LabelBMFont)    auto label = Label::createWithBMFont("fonts/bitmapFontTest3.fnt", "configuration");    auto item5 = MenuItemLabel::create(label, CC_CALLBACK_1(MenuLayerMainMenu::menuCallbackConfig, this));    // Testing issue #500    item5->setScale( 0.8f );    // Events    MenuItemFont::setFontName("fonts/Marker Felt.ttf");    // Bugs Item    auto item6 = MenuItemFont::create("Bugs", CC_CALLBACK_1(MenuLayerMainMenu::menuCallbackBugsTest, this));    // Font Item    auto item7= MenuItemFont::create("Quit", CC_CALLBACK_1(MenuLayerMainMenu::onQuit, this));        auto item8 = MenuItemFont::create("Remove menu item when moving", CC_CALLBACK_1(MenuLayerMainMenu::menuMovingCallback, this));    //设置item7 "Quit"一闪一闪效果;    auto color_action = TintBy::create(0.5f, 0, -255, -255);    auto color_back = color_action->reverse();    auto seq = Sequence::create(color_action, color_back, nullptr);    item7->runAction(RepeatForever::create(seq));    auto menu = Menu::create( item1, item2, item3, item4, item5, item6, item7, item8,  nullptr);    menu->alignItemsVertically();        //设置出场时动态效果;    // elastic effect    auto s = Director::getInstance()->getWinSize();        int i=0;    for(const auto &child : menu->getChildren()) {//这里得到的是相应Menu的位置，其值是很小的，x轴基本上都是0，y轴从正到负(竖直排列从上往下);        auto dstPoint = child->getPosition();        int offset = (int) (s.width/2 + 50);        if( i % 2 == 0)            offset = -offset;                child->setPosition( Vec2( dstPoint.x + offset, dstPoint.y) );//EaseElasticOut效果        child->runAction(                         EaseElasticOut::create(MoveBy::create(2, Vec2(dstPoint.x - offset,0)), 0.35f)                         );        i++;    }    _disabledItem = item3; item3->retain();    _disabledItem->setEnabled( false );    addChild(menu);    menu->setPosition(Vec2(s.width/2, s.height/2));    menu->setScale(0);//效果图从右上角出来时特别小，然后慢慢变大，通过ScaleTo实现这样就造成了从远到近的效果;    menu->runAction(ScaleTo::create(1,1));}bool MenuLayerMainMenu::onTouchBegan(Touch *touch, Event * event){    return true;}void MenuLayerMainMenu::onTouchEnded(Touch *touch, Event * event){}void MenuLayerMainMenu::onTouchCancelled(Touch *touch, Event * event){}void MenuLayerMainMenu::onTouchMoved(Touch *touch, Event * event){}MenuLayerMainMenu::~MenuLayerMainMenu(){//FixedPriority需要手动释放监听    _eventDispatcher->removeEventListener(_touchListener);    _disabledItem->release();}void MenuLayerMainMenu::menuCallback(Ref* sender){//LayerMultiplex是一个能够使它的子类进行复用的布景层类;//它支持一个或多个子类,但是一次仅能激活一个孩子;//下标从0开始;    static_cast<LayerMultiplex*>(_parent)->switchTo(1);}void MenuLayerMainMenu::menuCallbackConfig(Ref* sender){    static_cast<LayerMultiplex*>(_parent)->switchTo(3);}void MenuLayerMainMenu::allowTouches(float dt){//还原;    _eventDispatcher->setPriority(_touchListener, 1);//取消了所有定时器，不过对Actions的动作特效没有影响;//这里其实只要取消那个5s的定时器就好了;    unscheduleAllSelectors();    log("TOUCHES ALLOWED AGAIN");}void MenuLayerMainMenu::menuCallbackDisabled(Ref* sender) {    // hijack all touch events for 5 seconds//当前的zorder是0，这里设置成-1,他的优先级高;//所以这个时候_touchListener的四个函数touchBegan、touchMoved、TouchEnded、TouchCancelled优先被触发;//而这四个函数里面什么也没有干，只是把touchBegan返回true(一定要返回true不然就会往下传递了，因为我们设置了setSwallowTouches(true));//这样就形成了一个天然的触摸屏蔽了;    _eventDispatcher->setPriority(_touchListener, -1);//5秒过后，在allowTouches()回调里面在设置回来了;    schedule(schedule_selector(MenuLayerMainMenu::allowTouches), 5.0f);    log("TOUCHES DISABLED FOR 5 SECONDS");}

看上面的注释，我们能知道怎么屏蔽触摸穿透，怎么又能恢复触摸事件，并且也展示了MenuItem的各种使用方法，大家在用的时候去看下源码接口就知

道怎么使用了，里面那个屏蔽触摸是5s内任务触摸无效，5s后就一切正常，场景出来的画面也很有意思。

效果图：




前面在讲Layer时我们说过LayerMultiplex 会在这里讲解，老实说这个类方法在切换layer时没有任何过渡效果，感觉有点鸡肋，但总还是有他的用处，喜

欢的就用，不喜欢的就不用，他是一个把多个layer层添加在一起的一个容器，他里面是互斥的一次只能激活(显示)一个layer，但是其他的layer里面设置

依然保存，也就是上一次是什么样子的，下一次切换回来时依然是那个样子。


下面看简单的代码：

void MenuTestScene::runThisTest(){    MenuItemFont::setFontSize(20);    //产生了各种layer层，然后在下面全添加到LayerMultiplex中存放。    auto layer1 = new MenuLayerMainMenu();    auto layer2 = new MenuLayer2();    auto layer3 = new MenuLayer3();    auto layer4 = new MenuLayer4();    auto layer5 = new BugsTest();    auto layer6 = new RemoveMenuItemWhenMove();/*在这里创建的LayerMultiplex;一个能够使它的子类进行复用的布景层类。 功能： 它支持一个或多个子类;一次仅能激活一个孩子;    */       auto layer = LayerMultiplex::create(layer1, layer2, layer3, layer4, layer5, layer6, nullptr);    addChild(layer, 0); //?????为什么要手动release    layer1->release();    layer2->release();    layer3->release();    layer4->release();    layer5->release();    layer6->release();    Director::getInstance()->replaceScene(this);}

这样加完后，中间很多代码像Lyaer2、Layer3、Layer4等代码这里都省略了，大家想看直接去cpp-tests例子下面MenuTest里面去看

效果图如下：




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

当没有切换Layer层的时候，刚开始出来的Layer上"Quit"菜单是有动态效果的，一闪一闪的，但是只要切换一次，在切回来就不会闪了，

也就是说使用LayerMultiplex时会使用运动的actions停止，这只适合于静态layer层，感觉太鸡肋了吧。

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