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层，感觉太鸡肋了吧。

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