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

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了基于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);
@H_502_335@ 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)
@H_107_403@ //菜单的缩小比例最小的比例是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){
@H_403_925@width*index/( (index)+CALC_A);
}
LOLMenuDemo.cpp

#include"LOLMenuDemo.h"

#include"LOLMenu.h"
USING_NS_CC;
Scene*LOLMenuDemo::createScene()
{
//'scene'isanautoreleaSEObject
autoscene=Scene::create();
//'layer'isanautoreleaSEObject
autolayer=LOLMenuDemo::create();
//addlayerasachildtoscene
scene->addChild(layer);
//returnthescene
scene;
}
//on"init"youneedtoinitializeyourinstance
LOLMenuDemo::init()
{
//////////////////////////////
//1.superinitfirst
(!Layer::init())
{
;
}
SizevisibleSize=Director::getInstance()->getVisibleSize();
Vec2origin=Director::getInstance()->getVisibleOrigin();
autoitem1=MenuItemImage::create( "4_LOL_MENU/item1_0.png" , ));
autoitem2=MenuItemImage::create( "4_LOL_MENU/item2_0.png" ));
autoitem3=MenuItemImage::create( "4_LOL_MENU/item3_0.png" ));
autoitem4=MenuItemImage::create( "4_LOL_MENU/item4_0.png" ));
autoitem5=MenuItemImage::create( "4_LOL_MENU/item5_0.png" ));
LOLMenu*menu=LOLMenu::create();
menu->addMenuItem(item1);
menu->addMenuItem(item2);
menu->addMenuItem(item3);
menu->addMenuItem(item4);
menu->addMenuItem(item5);
menu->setPosition(visibleSize/2);
->addChild(menu,2);
;
}
LOLMenuDemo::menuItem1Callback(cocos2d::Ref*pSender){
sprite[0]->setVisible( );
}
LOLMenuDemo::menuItem2Callback(cocos2d::Ref*pSender){
sprite[1]->setVisible( );
}
LOLMenuDemo::menuItem3Callback(cocos2d::Ref*pSender){
sprite[2]->setVisible( );
LOLMenuDemo::menuItem4Callback(cocos2d::Ref*pSender){
sprite[3]->setVisible( );
}
LOLMenuDemo::menuItem5Callback(cocos2d::Ref*pSender){
sprite[4]->setVisible( );
}
可以通过 getIndex()函数获取到当前正在显示的是那个页面，最左端页面的index为0，次着index为1，以此类推叠加。

PS.这种类型的菜单在网页里会常见一些，比如优酷的动漫专题或者App Store都可以看到类似的影子，由于是平面的，菜单项的切换不是很自然，我通过倾斜来变得自然。

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

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签