[cocos2dx学习笔记]用cocos2dx3.X完成塔防游戏王国保卫战--游戏开始界面

@H_403_1@修改AppDelegate中内容，将setDesignResolutionSize中改为

<span style="font-size:14px;">(960,640,ResolutionPolicy::FIXED_HEIGHT)</span>

@H_403_1@

@H_403_1@保持传入的设计分辨率高度不变，根据屏幕分辨率修正设计分辨率的宽度

@H_403_1@通过：

@H_403_1@

auto scene = WelcomeScene::createScene();
director->runWithScene(scene);

来启动新的场景，进入开始游戏界面

@H_403_1@首先是Kingdom Rush的logo以及该logo的动画

@H_403_1@加载资源文件xx.plist

SpriteFrameCache::getInstance()->addSpriteFramesWithFile("mainmenu_spritesheet_32_1-hd.plist");

添加背景图片

@H_403_1@

//从SpriteFrameCache中加载图片
auto sprite_background = Sprite::createWithSpriteFrameName("mainmenu_bg.png");

//设置位置
sprite_background->setPosition(Point(visibleSize.width/2,visibleSize.height/2));

//添加背景，Zorder设置为-1为此场景最底层
addChild(sprite_background,-1);

然后添加kingdom Rush logo

@H_403_1@

sprite_logo = Sprite::createWithSpriteFrameName("logo.png");
//计算logo图应该在的位置
point_logo.x = visibleSize.width/2,visibleSize.height;
point_logo.y = visibleSize.height-(sprite_logo->getContentSize().height/2);
//设置位置,初始大小
sprite_logo->setScale(0.2f);
sprite_logo->setPosition(point_logo);
addChild(sprite_logo,1);

这样logo就显示在了背景图片之上，初始大小为0.2倍，给它设置一个ScaleTo的动画例如 @H_403_1@ScaleTo::create(0.5,1.5,1.5)，然后播放即可

@H_403_1@在logo缩放动画完成后，会有Kingdom从左到右闪烁的动画，通过查看原游戏资源图片发现这是一个帧动画，每一帧的图片已经保存在plist当中，通过播放帧动画即可实现效果。

@H_403_1@

//从资源中加图片，设置位置
auto sprite = Sprite::createWithSpriteFrameName("logo_brillo_0001.png");

sprite->setPosition(point_logo);
//生成帧动画
//参见http://www.cnblogs.com/onlycxue/p/3509610.html
SpriteFrame* frame = NULL;
Vector<SpriteFrame*> aFrames(20);

for (int len = 1;len <= 21; len++)
{
  frame = SpriteFrameCache::getInstance()->spriteFrameByName(String::createWithFormat("logo_brillo_00%02d.png",len)->getCString());
  if(frame!=nullptr)
    aFrames.pushBack(frame);
}
  addChild(sprite,2);
  auto animation = Animation::createWithSpriteFrames(aFrames,0.1f);
  //播放动画
  sprite->runAction(RepeatForever::create(Animate::create(animation)));

动画RepeatForever::create创建一个不间断播放的动画，放置在logo上覆盖，动画效果完成。

@H_403_1@

@H_403_1@创建一个动画序列Sequence，在序列中加入logo的缩放动画和帧动画，即可在logo缩放动画完成之后链接上帧动画，达到原有游戏效果。

@H_403_1@

@H_403_1@接下来是开始按键的生成以及动画

@H_403_1@cocos2dx中，可以采用MenuItemSprite来定义一个精灵按键，方便设置按键效果以及监听

@H_403_1@本文采用给Sprite添加监听的方式来实现一个按键

@H_403_1@首先是加载资源图片

@H_403_1@在上述动画序列@H_403_1@Sequence的最后再添加一个开始按键的下移动画MoveTo即可实现，代码略

@H_403_1@@H_403_1@创建一个@H_403_1@监听

@H_403_1@@H_403_1@auto button_Start_listener = EventListenerTouchOneByOne::create();

@H_403_1@@H_403_1@设置onTouchBegan即点击后的相应

button_Start_listener->onTouchBegan = [&](Touch* touch,Event* event){
  //获取点击目标
  auto target = static_cast<Sprite*>(event->getCurrentTarget());
  //获取将世界坐标中触摸点转换为模型坐标后的点击坐标
  Point locationInNode = target->convertTouchToNodeSpace(touch);
  //获取目标的大小
  Size size = target->getContentSize();
  //创建rect区域
  Rect rect = Rect(0+40,0+30,size.width-80,size.height/3 +15);
  //当点击坐标在区域内时
  if (rect.containsPoint(locationInNode))
  {  
    //改变Button式样达到点击效果
    target->setDisplayFrame(SpriteFrameCache::getInstance()->spriteFrameByName("menu_startchain_0002.png"));			
    return true;  
  }  
  return false;  
};

因为点击整个场景的所有精灵时，都会依次执行所有的 @H_403_1@EventListenerTouchOneByOne，所以需要在onTouchBegan中加入对点击区域的判断，以此来判断是否点击在所需精灵中，rect即精灵所在区域，这里对原有精灵的rect进行了修正，即去掉START按键中链子以及其他的部分，当点击是，改变改精灵的图片，达到点击效果。

@H_403_1@@H_403_1@@H_403_1@设置点击后释放动作监听

button_Start_listener->onTouchEnded = [&](Touch* touch,Event* event){
  auto target = static_cast<Sprite*>(event->getCurrentTarget());
  static_cast<Sprite*>(event->getCurrentTarget())->setDisplayFrame(SpriteFrameCache::getInstance()->spriteFrameByName("menu_startchain_0001.png"));
  button_Start->runAction(MoveTo::create(0.3f,Point(point_logo.x,point_logo.y)));
  button_Start->setVisible(false);
  setSaveMenuVisible();
};

点击后开始按键MoveTo到logo后，隐藏，然后将开始游戏菜单上移

@H_403_1@@H_403_1@
三个“NEW GAME”的背景图片是一个SPRITE,"CLOSE"按键设置监听方式与上述开始按键类似，也可使用MenuItemSprite方式，当点击开始按键后，给这些精灵添加MoveTo动画，移动到场景上。

@H_403_1@@H_403_1@“NEW GAME”采用新建一个自定义精灵的方式

@H_403_1@@H_403_1@

class SlotMenu : public Sprite
{
public:
    SlotMenu();
    ~SlotMenu();
    virtual bool initWithNum(int num);
    CREATE_FUNC(SlotMenu);
    void button_Savelot_Delete_callback(Ref* pSender);
    void conform_delete(Ref* pSender);
    void cancel_delete(Ref* pSender);
    void createNewGame();
    static SlotMenu* createMenu(int num);
protected:
    Label* label_hint;
    MenuItemSprite* button_Savelot_Delete;
    Sprite* savelot;
};

首先我们自定义一个创建方法：

@H_403_1@具体可参见http://cn.cocos2d-x.org/tutorial/show?id=1987

@H_403_1@@H_403_1@

SlotMenu* SlotMenu::createMenu(int num)
{
    auto slotMenu = new SlotMenu();
 
    if (slotMenu && slotMenu->initWithNum(num))
    {
        slotMenu->autorelease();
        return slotMenu;
    }
    CC_SAFE_DELETE(slotMenu);
    return NULL;
}

其中num为传入参数，设置为3个NEW GAME中的哪一个按键
在initWithNum(int num)中，依次添加所有精灵

@H_403_1@@H_403_1@

@H_403_1@通过UserDefault::getInstance()->getBoolForKey方式设置某个记录游戏是否开始，

@H_403_1@若存在则显示当前记录@H_403_1@并且将X按键显示如右图，所不存在则显示NEW GAME

@H_403_1@点击X按键，显示“DELETE SLOT”和两个按键

@H_403_1@例如删除按键：

@H_403_1@

auto confirm_Delete = MenuItemSprite::create(Sprite::createWithSpriteFrameName("mainmenu_saveslot_confirmdelete_0001.png"),Sprite::createWithSpriteFrameName("mainmenu_saveslot_confirmdelete_0001.png"),CC_CALLBACK_1(SlotMenu::conform_delete,this));

以及该按键监听：

@H_403_1@

void SlotMenu::conform_delete(Ref* pSender)
{
	savelot->getChildByTag(LABEL_HINT)->setVisible(false);
	savelot->removeChildByTag(NEWGAME);
	createNewGame();
	UserDefault::getInstance()->setBoolForKey(String::createWithFormat("<span style="font-family: Arial,sans-serif;">is_savelot_%d_exit</span>",this->num)->getCString,false);
}

@H_403_1@文字采用Label方式创建，3个按键采用MenuItemSprite方式设置监听以及点击效果，监听内设置逻辑判断哪一项该隐藏哪一项该显示，具体代码略。

@H_403_1@将整个精灵的底层精灵设置监听，点击后跳转到新游戏界面

@H_403_1@

if (rect.containsPoint(locationInNode)&&!savelot->getChildByTag(LABEL_HINT)->isVisible())
{  
  target->setDisplayFrame(SpriteFrameCache::getInstance()->spriteFrameByName("mainmenu_saveslot_0002.png"));			
  return true;  
}

下一张将讲如何自定义一个跳转场景

[cocos2dx学习笔记]用cocos2dx3.X完成塔防游戏王国保卫战--游戏开始界面

猜你在找的Cocos2d-x相关文章