案例：植物大战僵尸的基础界面

#所用到的资源都是来源于网上，所有代码仅供学习交流！

##具体的语法介绍在代码中展示：
###首先是欢迎界面：

WelcomeLayer.cpp:

#include "WelcomeLayer.hpp"
#include "MenuLayer.hpp"

bool WelcomeLayer::init()
{
    if (!Layer::init()) {
        return false;
    }
    
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    //欢迎界面的背景图片
    Sprite *sp1 = Sprite::create("titlescreen.png");
    sp1->setPosition(Vec2(origin.x + visibleSize.width/2, origin.y + visibleSize.height/2));
    sp1->setScale(4.8);
    this->addChild(sp1);
    
    //上面个的标题图片
    Sprite *sp2 = Sprite::create("pvz_logo.png");
    sp2->setPosition(Vec2(origin.x + visibleSize.width/2 - sp2->getContentSize().height/2, origin.y + visibleSize.height - sp2->getContentSize().height*2));
    sp2->setScale(2.5);
    this->addChild(sp2);
    //图片的特效  特效：进行缩放同时闪烁
    ScaleTo *scale1 = ScaleTo::create(2, 3, 3);
    ScaleTo *scale2 = ScaleTo::create(2, -3, -3);
    ScaleTo *scale3 = ScaleTo::create(2, 3, 3);
    Blink *blink = Blink::create(2.0, 10);
    Spawn * spa = Spawn::create(scale1,scale2,scale3,blink, NULL);
    sp2->runAction(spa);
//    MoveBy * move1 = MoveBy::create(2.0,Vec2(origin.x + visibleSize.width/5, origin.y + visibleSize.height/5));
//    MoveBy * move2 = MoveBy::create(2.0,Vec2(-(origin.x + visibleSize.width/5), -(origin.y + visibleSize.height/5)));
//    Sequence *seq = Sequence::create(move1, move2,NULL);
//    sp2->runAction(seq);
    
    //滚动条的设计分为：最底层的土地，滚轮，以及草的效果，滚轮滚动的同时草要随着进行显示，采用的是进度条动作
    //滚轮滚动到最后要有消失效果，使用瞬时动作去完成
    //下方滚动条的土地图片
    Sprite *sp3 = Sprite::create("down.png");
    sp3->setPosition(Vec2(origin.x + visibleSize.width/2 - sp3->getContentSize().height/2, origin.y + sp3->getContentSize().height*2));
    //缩放
    ScaleTo *sca1 = ScaleTo::create(0, 3.5, 1.5);
    sp3->runAction(sca1);
    this->addChild(sp3);
    
    //设置草地的进度条效果
    ProgressTimer *timer = ProgressTimer::create(Sprite::create("grass.png"));
    timer->setPosition(Vec2(origin.x + visibleSize.width/2 - sp3->getContentSize().height, origin.y + sp3->getContentSize().height*3.2));
    //缩放
    ScaleTo *sca2 = ScaleTo::create(0, 3.5, 4);
    timer->runAction(sca2);
    timer->setMidpoint(Vec2(0, 0));//设置转动的中心点
    timer->setType(ProgressTimer::Type::BAR);//设置显示的类型
    timer->setBarChangeRate(Vec2(1, 0));//0一步到位  1正常速度
    this->addChild(timer);
    //动作
    ProgressTo *proTo = ProgressTo::create(2.0, 100); //时间间隔  百分比
    timer->runAction(proTo);
    
    //设置草地上面的滚轮
    Vec2 posi = timer->getPosition();
    Sprite *sp4 = Sprite::create("scrollgrass.png");
    sp4->setPosition(Vec2(posi.x - timer->getContentSize().width*1.8 ,posi.y + sp4->getContentSize().height/2));
    sp4->setScale(2);
    this->addChild(sp4);
    
    //滚轮移动
    MoveTo *moveTo = MoveTo::create(2, Vec2(posi.x + timer->getContentSize().width*1.7 ,posi.y));
    CallFuncN *funcN = CallFuncN::create(CC_CALLBACK_1(WelcomeLayer::callbackN, this));
    Sequence *sequ = Sequence::create(moveTo,funcN, NULL);
    sp4->runAction(sequ);
    
    //按钮  设计的效果是点击按钮，将进行到下一个界面
    MenuItemImage * menuImg = MenuItemImage::create("popcap.png", "popcap2.png",CC_CALLBACK_1(WelcomeLayer::menuCallback, this) );
    Menu *menu = Menu::create(menuImg, NULL);
    menuImg->setScale(2);
    menu->setPosition(Vec2(origin.x + visibleSize.width/2 + menuImg->getContentSize().width*6, origin.y + visibleSize.height/5 - menuImg->getContentSize().height/2));
    this->addChild(menu);
    
    
    return true;
}
//滚轮的函数
void WelcomeLayer::callbackN(Node * psender)
{
    psender->removeFromParent();
}

//按钮函数
void WelcomeLayer::menuCallback(Ref * psender)
{
    auto * scene = MenuLayer::createScene();
    Director * d = Director::getInstance();
    //进入下一界面时的特效
    TransitionFade *trans = TransitionFade::create(2.0, scene, Color3B(200, 255, 200));
    d->replaceScene(trans);

}
Scene * WelcomeLayer::createScene()
{
    auto scene = Scene::create();
    WelcomeLayer *layer = WelcomeLayer::create();
    scene->addChild(layer);
    
    return scene;
}

###在对应的.h函数中要进行声明，接下来是游戏的主界面，下面是代码：

#include "MenuLayer.hpp"

bool MenuLayer::init()
{
    if (!Layer::init()) {
        return false;
    }
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    //背景图片
    Sprite *sp1 = Sprite::create("main_background.png");
    sp1->setPosition(Vec2(origin.x + visibleSize.width/2, origin.y + visibleSize.height/2));
    sp1->setScale(2);
    this->addChild(sp1);
    
    //商店，图鉴，成就，关卡等具体方法没有实现，它对应的可以设置成不同的场景
    //商店图片 
    MenuItemImage * menuImg1 = MenuItemImage::create("shop1.png", "shop0.png",CC_CALLBACK_1(MenuLayer::shopCallback, this) );
    menuImg1->setScale(2);
    Menu *menu1 = Menu::create(menuImg1, NULL);
    menu1->setPosition(Vec2(origin.x + visibleSize.width/6, origin.y + visibleSize.height/4));
    this->addChild(menu1);
    
    //图鉴
    MenuItemImage * menuImg2 = MenuItemImage::create("SelectorScreen_AlmanacHighlight.png", "SelectorScreen_Almanac.png",CC_CALLBACK_1(MenuLayer::helpCallback, this) );
    menuImg2->setScale(2);
    Menu *menu2 = Menu::create(menuImg2, NULL);
    menu2->setPosition(Vec2(origin.x + visibleSize.width - menuImg2->getContentSize().width*5, origin.y + visibleSize.height/5.5));
    this->addChild(menu2);
    
    //成就
    MenuItemImage * menuImg3 = MenuItemImage::create("chengjiu.png", "chengjiu1.png",CC_CALLBACK_1(MenuLayer::achieveCallback, this) );
    menuImg3->setScale(2);
    Menu *menu3 = Menu::create(menuImg3, NULL);
    menu3->setPosition(Vec2(origin.x + visibleSize.width/2 - menuImg3->getContentSize().width*2 , origin.y + visibleSize.height/5));
    this->addChild(menu3);
    
    //关卡
    MenuItemImage * menuImg4 = MenuItemImage::create("select11.png", "select10.png",CC_CALLBACK_1(MenuLayer::levelCallback1, this) );
    menuImg4->setScale(4.1);
    Menu *menu4 = Menu::create(menuImg4, NULL);
    menu4->setPosition(Vec2(origin.x + visibleSize.width - menuImg4->getContentSize().width*3.6, origin.y + visibleSize.height - menuImg4->getContentSize().height*2));
    this->addChild(menu4);
    
    MenuItemImage * menuImg5 = MenuItemImage::create("select21.png", "select20.png",CC_CALLBACK_1(MenuLayer::levelCallback2, this) );
    menuImg5->setScale(4.3);
    Menu *menu5 = Menu::create(menuImg5, NULL);
    menu5->setPosition(Vec2(origin.x + visibleSize.width - menuImg5->getContentSize().width*3.7, origin.y + visibleSize.height - menuImg5->getContentSize().height*5.2));
    this->addChild(menu5);
    
    MenuItemImage * menuImg6 = MenuItemImage::create("select31.png", "select30.png",CC_CALLBACK_1(MenuLayer::levelCallback3, this) );
    menuImg6->setScale(4.3);
    Menu *menu6 = Menu::create(menuImg6, NULL);
    menu6->setPosition(Vec2(origin.x + visibleSize.width - menuImg6->getContentSize().width*3.9, origin.y + visibleSize.height/2 + menuImg6->getContentSize().height*0.8));
    this->addChild(menu6);
    
    MenuItemImage * menuImg7 = MenuItemImage::create("select41.png", "select40.png",CC_CALLBACK_1(MenuLayer::levelCallback4, this) );
    menuImg7->setScale(4.6);
    Menu *menu7 = Menu::create(menuImg7, NULL);
    menu7->setPosition(Vec2(origin.x + visibleSize.width - menuImg7->getContentSize().width*4.55, origin.y + visibleSize.height/2 - menuImg7->getContentSize().height*2));
    this->addChild(menu7);
    
    return true;
}
//商店方法
void MenuLayer::shopCallback(Ref * psender)
{
    
}
//成就方法
void MenuLayer::achieveCallback(Ref * psender)
{
    
}
//图鉴方法
void MenuLayer::helpCallback(Ref * psender)
{
    
}
//关卡方法
void MenuLayer::levelCallback1(Ref * psender)
{
    
}
void MenuLayer::levelCallback2(Ref * psender)
{
    
}
void MenuLayer::levelCallback3(Ref * psender)
{
    
}
void MenuLayer::levelCallback4(Ref * psender)
{
    
}


Scene * MenuLayer::createScene()
{
    auto scene = Scene::create();
    MenuLayer * layer = MenuLayer::create();
    scene->addChild(layer);
    
    return scene;
}

###以上是界面的主要代码。
##接下来，展示一下，以上代码所实现的主要效果

####首先是欢迎的主界面：

####加载进度条的执行过程

####加载结束后，点击按钮，进入下一个界面

####下一个界面

##等有空我会继续写一些，僵尸的具体动作实现过程