基于Cocos2d-x的英雄联盟皮肤选择菜单

最终效果图

英雄联盟皮肤选择

设计说明

实现目标所需要的动作

移动(MoveTo),伸缩(ScaleTo),倾斜(OrbitCamera)

实现目标所需要函数(这是一个数学函数）

x/(x+a)

其中a为常量，用来计算上面三个动作的值

大小

与原版Menu不同，大小不是全屏的，默认是屏幕的(2/3)，可以通过setContentSize()函数设置

_index变量

将所有的菜单项平铺构成一个长方形，_index表示目前在中间位置的点，如下图

显示方式

将菜单项距中心的距离(i-_indxe)作为函数变量x,具体内容查看LOLMenu::updatePosition();

操作说明

滑动四分之一菜单宽的距离为一个单位的_index,距离大于0.6小于1.0的部分进1

使用

使用这个菜单只要知道两个函数：

1.构造函数：LOLMenu::create()(由CREATE_FUNC创建)

2.添加MenuItem：void addMenuItem(cocos2d::MenuItem *item);

其它函数可以看代码

菜单代码

LOLMenu.h

#ifndef__LOL__TE_MENU_H__ #define__LOL__TE_MENU_H__ #include"cocos2d.h" /* *模仿英雄联盟的皮肤选择菜单 *不同点在于，英雄联盟当皮肤过多时，部分皮肤会移出边缘，不显示 *我会显示所以菜单项，向边缘移动会不断减缓 */ class LOLMenu: public cocos2d::Layer{ : //构造方法 CREATE_FUNC(LOLMenu); //添加菜单项 void addMenuItem(cocos2d::MenuItem*item); //位置矫正修改位置forward为移动方向当超过1/3，进1 //true为正向false负 rectify( bool forward); //初始化 virtual init(); //重置显示所引号设置为0 reset(); //设置当前显示索引 void setIndex( int index); //设置当前显示菜单项的索引号 float getIndex(); //返回被选中的item cocos2d::MenuItem*getCurrentItem(); private : //更新位置 updatePosition(); //更新位置，有动画 updatePositionWithAnimation(); //数学计算式width*index/(abs(index)+CALC_A),其中CALC_A为常数 float calcFunction( index, width); : //菜单菜单项的索引号 _index; //上一次菜单项的索引号 _lastIndex; //菜单项集合,_children顺序会变化，新建数组保存顺序 cocos2d::Vector<cocos2d::MenuItem*>_items; //监听函数 onTouchBegan(cocos2d::Touch*touch,cocos2d::Event*event); virtual onTouchEnded(cocos2d::Touch*touch,cocos2d::Event*event); onTouchMoved(cocos2d::Touch*touch,cocos2d::Event*event); //动画完结调用函数，这个主要是确定哪一个菜单项在前面 actionEndCallBack( dx); //当前被选择的item cocos2d::MenuItem*_selectedItem; }; #endif

LOLMenu.cpp

#include"LOLMenu.h"

#include<math.h>

#definePIacos(-1)

//菜单的缩小比例最小的比例是1-MENU_SCALE

#defineMENU_SCALE0.3

//菜单的倾斜度最多为45度

#defineMENU_ASLOPE60.0

//calcFunction(x)为x/(x+a),其中a为常数

#defineCALC_A1

//动画运行时间

#defineANIMATION_DURATION0.3f

//菜单项的大小与屏幕的比例，当然可以通过setContentSize设置

#defineCONTENT_SIZE_SCALE(2.0/3)

//菜单项长度与菜单长度的比例滑动一个菜单项长度，菜单项变化一个

#defineITEM_SIZE_SCALE(1.0/4)

/*

代码里面还有可以设置的参数，这里没有一一例出或给出函数

*/

USING_NS_CC;

bool LOLMenu::init(){

if (!Layer::init())

return false ;

_index=0;

_lastIndex=0;

this ->ignoreAnchorPointForPosition( );

_selectedItem=nullptr;

autosize=Director::getInstance()->getWinSize();

->setContentSize(size*CONTENT_SIZE_SCALE);

->setAnchorPoint(Vec2(0.5f,0.5f));

autolistener=EventListenerTouchOneByOne::create();

listener->onTouchBegan=CC_CALLBACK_2(LOLMenu::onTouchBegan, );

listener->onTouchMoved=CC_CALLBACK_2(LOLMenu::onTouchMoved,monospace!important; font-size:1em!important; min-height:inherit!important; color:black!important">);

listener->onTouchEnded=CC_CALLBACK_2(LOLMenu::onTouchEnded,monospace!important; font-size:1em!important; min-height:inherit!important; color:black!important">);

getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener,monospace!important; font-size:1em!important; min-height:inherit!important; color:black!important">);

true ;

};

void LOLMenu::addMenuItem(cocos2d::MenuItem*item){

item->setPosition( ->getContentSize()/2);

->addChild(item);

_items.pushBack(item);

reset();

//如果希望开始没有移动效果，改成updatePosition函数即可

updatePositionWithAnimation();

return ;

}

LOLMenu::updatePosition(){

automenuSize=getContentSize();

for ( int i=0;i<_items.size();i++){

//设置位置

float x=calcFunction(i-_index,menuSize.width/2);

_items.at(i)->setPosition(Vec2(menuSize.width/2+x,menuSize.height/2));

//设置zOrder,即绘制顺序

_items.at(i)->setZOrder(- abs ((i-_index)*100));

//设置伸缩比例

_items.at(i)->setScale(1.0- (calcFunction(i-_index,MENU_SCALE)));

//设置倾斜，Node没有setCamera函数，将OrbitCamera的运行时间设为0来达到效果

autoorbit1=OrbitCamera::create(0,1,calcFunction(i-_lastIndex,MENU_ASLOPE),MENU_ASLOPE)-calcFunction(i-_index,0);

_items.at(i)->runAction(orbit1);

}

;

}

LOLMenu::updatePositionWithAnimation(){

//先停止所有可能存在的动作

i=0;i<_items.size();i++)

_items.at(i)->stopAllActions();

automenuSize=getContentSize();

i=0;i<_items.size();i++){

((i-_index)*100));

automoveTo=MoveTo::create(ANIMATION_DURATION,Vec2(menuSize.width/2+x,menuSize.height/2));

_items.at(i)->runAction(moveTo);

autoscaleTo=ScaleTo::create(ANIMATION_DURATION,(1- _items.at(i)->runAction(scaleTo);

autoorbit1=OrbitCamera::create(ANIMATION_DURATION,calcFunction(i-_index,MENU_ASLOPE)-calcFunction(i-_lastIndex,0);

_items.at(i)->runAction(orbit1);

}

scheduleOnce(schedule_selector(LOLMenu::actionEndCallBack),ANIMATION_DURATION);

;

}

LOLMenu::reset(){

_lastIndex=0;

_index=0;

}

LOLMenu::setIndex( index){

_lastIndex=_index;

->_index=index;

}

LOLMenu::getIndex(){

_index;

}

MenuItem*LOLMenu::getCurrentItem(){

(_items.size()==0)

nullptr;

_items.at(_index);

}

LOLMenu::onTouchBegan(Touch*touch,Event*event){

//先停止所有可能存在的动作

i=0;i<_items.size();i++)

_items.at(i)->stopAllActions();

(_selectedItem)

_selectedItem->unselected();

autoposition= ->convertToNodeSpace(touch->getLocation());

autosize= ->getContentSize();

autorect=Rect(0,size.width,size.height);

(rect.containsPoint(position)){

;

}

;

}

LOLMenu::onTouchEnded(Touch*touch,Event*event){

autosize=getContentSize();

autoxDelta=touch->getLocation().x-touch->getStartLocation().x;

rectify(xDelta>0);

( (xDelta)<size.width/24&&_selectedItem)

_selectedItem->activate();

updatePositionWithAnimation();

;

}

LOLMenu::onTouchMoved(Touch*touch,Event*event){

autoxDelta=touch->getDelta().x;

autosize=getContentSize();

_lastIndex=_index;

_index-=xDelta/(size.width*ITEM_SIZE_SCALE);

updatePosition();

;

}

LOLMenu::rectify( forward){

autoindex=getIndex();

(index<0)

index=0;

(index>_items.size()-1)

index=_items.size()-1;

(forward){

index=( )(index+0.4);

}

else

)(index+0.6);

setIndex(( )index);

}

LOLMenu::actionEndCallBack( dx){

_selectedItem=getCurrentItem();

(_selectedItem)

_selectedItem->selected();

}

LOLMenu::calcFunction( index, width){

width*index/( (index)+CALC_A);

}

LOLMenuDemo.cpp

#include"LOLMenuDemo.h"