cocos2d-x 3.3rc0 实现Win8菜单效果

1. 目标

    如下图所示：

2. 应用实现代码

// on "init" you need to initialize your instance
bool MainMenu::init()
{
    //
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }


    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

	log("TEST: x=%f,y=%f,w=%f,h=%f\n",origin.x, origin.y, visibleSize.width, visibleSize.height);

    
    // add "MainMenu" backgroud
    auto sprite = Sprite::create("menubg.png");

    // position the sprite on the center of the screen
    sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

    // add the sprite as a child to this layer
    this->addChild(sprite, 0);    


    
    // add 6 menuitem for main menu
    int itemWidth,startPos,space;

    mainMenuItems[0] = MenuItemImage::create(
                                           "MI1Normal.png",
                                           "MI1Selected.png",
                                           CC_CALLBACK_1(MainMenu::menuKnowCB, this));

    itemWidth = mainMenuItems[0]->getContentSize().width;
    space = 10;
    startPos = (visibleSize.width - itemWidth*6 - space*5)/2;
        
    mainMenuItems[0]->setPosition(Vec2(origin.x + startPos + itemWidth/2,
                                       origin.y + visibleSize.height/2));

    mainMenuItems[1] = MenuItemImage::create(
                                           "MI2Normal.png",
                                           "MI2Selected.png",
                                           CC_CALLBACK_1(MainMenu::menuStudyCB, this));
    startPos += 10;    
    mainMenuItems[1]->setPosition(Vec2(origin.x + startPos + 3*itemWidth/2 ,
                                       origin.y + visibleSize.height/2));    

    mainMenuItems[2] = MenuItemImage::create(
                                           "MI3Normal.png",
                                           "MI3Selected.png",
                                           CC_CALLBACK_1(MainMenu::menuImproveCB, this));
    startPos += 10;    
    mainMenuItems[2]->setPosition(Vec2(origin.x + startPos + 5*itemWidth/2 ,
                                       origin.y + visibleSize.height/2));    


    mainMenuItems[3] = MenuItemImage::create(
                                           "MI4Normal.png",
                                           "MI4Selected.png",
                                           CC_CALLBACK_1(MainMenu::menuEnjoyCB, this));
    startPos += 10;    
    mainMenuItems[3]->setPosition(Vec2(origin.x + startPos + 7*itemWidth/2 ,
                                       origin.y + visibleSize.height/2));   

    mainMenuItems[4] = MenuItemImage::create(
                                           "MI5Normal.png",
                                           "MI5Selected.png",
                                           CC_CALLBACK_1(MainMenu::menuSetCB, this));
    startPos += 10;    
    mainMenuItems[4]->setPosition(Vec2(origin.x + startPos + 9*itemWidth/2 ,
                                       origin.y + visibleSize.height/2));   


    mainMenuItems[5] = MenuItemImage::create(
                                           "MI6Normal.png",
                                           "MI6Selected.png",
                                           CC_CALLBACK_1(MainMenu::menuExitCB, this));
    startPos += 10;    
    mainMenuItems[5]->setPosition(Vec2(origin.x + startPos + 11*itemWidth/2 ,
                                       origin.y + visibleSize.height/2)); 

    /
    // 2. add a menu item with "X" image, which is clicked to quit the program
    //    you may modify it.

    // add a "close" icon to exit the progress. it's an autorelease object
    auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(MainMenu::menuCloseCallback, this));

	closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
                                origin.y + closeItem->getContentSize().height/2));

    // create menu, it's an autorelease object
    auto menu = Menu::create(mainMenuItems[0],
                             mainMenuItems[1],
                             mainMenuItems[2],
                             mainMenuItems[3],
                             mainMenuItems[4],
                             mainMenuItems[5],
                             closeItem,nullptr);//NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);

    /
    // 3. add your codes below...

    // add a label shows "Hello World"
    // create and initialize a label

    auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);

    // position the label on the center of the screen
    label->setPosition(Vec2(origin.x + visibleSize.width/2,
                            origin.y + visibleSize.height - label->getContentSize().height));

    // add the label as a child to this layer
    this->addChild(label, 1);



	//MediaManager::getInstance()->play("/mnt/sdcard/video/cg720p.mp4");

	// every 10s, call MainMenu::playTest
    //this->schedule(CC_SCHEDULE_SELECTOR(MainMenu::test),2);
	flag = 0;

    return true;
}

3. 修改引擎代码

bool MenuItemSprite::initWithNormalSprite(Node* normalSprite, Node* selectedSprite, Node* disabledSprite, const ccMenuCallback& callback)
{
    MenuItem::initWithCallback(callback);
    setNormalImage(normalSprite);
    setSelectedImage(selectedSprite);
    setDisabledImage(disabledSprite);

    // added by MyArrow on 2014-11-12
    // to display the selected image on the topest
    selectedSprite->setGlobalZOrder(normalSprite->getGlobalZOrder()+100.0f);
    
    // to enlarge from menu image center, selected image is larger than normal image
    if (selectedSprite && normalSprite) {
        selectedSprite->setPosition(
            (normalSprite->getContentSize().width-selectedSprite->getContentSize().width)/2.0f,
            (normalSprite->getContentSize().height-selectedSprite->getContentSize().height)/2.0f);
    }
    // added end

    if(_normalImage)
    {
        this->setContentSize(_normalImage->getContentSize());
    }

    setCascadeColorEnabled(true);
    setCascadeOpacityEnabled(true);

    return true;
}