分类导航
iOSAndroidSwiftHybridCocos2d-xFluttersilverlightCordova

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

Cocos2d-x   发布时间：2022-05-03  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了基于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);
//位置矫正修改位置for@R_772_10225@为移动方向当超过1/3，进1
//true为正向false负
rectify( @H_339_197@bool for@R_772_10225@);
//初始化
virtual init();
//重置显示所引号设置为0
reset();
//设置当前显示索引
void seTindex( @H_339_197@int indeX);
//设置当前显示菜单项的索引号
@H_339_197@float geTindex();
//返回被选中的item
cocos2d::MenuItem*getCurrentItem();
private :
//更新位置
updatePosition();
//更新位置，有动画
updatePositionWithAnimation();
//数学计算式width*index/(abs(indeX)+CALC_A),其中CALC_A为常数
@H_339_197@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
@H_197_407@#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;
@H_339_197@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 ( @H_339_197@int i=0;i<_items.size();i++){
//设置位置
@H_339_197@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));
number70 index69 alt1" style="color:rgb(51,menuSize.width/2);
automoveTo=MoveTo::create(ANIMATION_DURATION,Vec2(menuSize.width/2+x,menuSize.height/2));
_items.at(i)->runAction(moveTo);
autoscaleTo=ScaleTo::create(ANIMATION_DURATION,(1- :1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,MENU_SCALE))));
_items.at(i)->runAction(scaleTo);
autoorbit1=OrbitCamera::create(ANIMATION_DURATION,calcFunction(i-_index,MENU_ASLOPE)-calcFunction(i-_lasTindex,0);
_items.at(i)->runAction(orbit1);
}
@H_127_674@scheduLeonce(schedule_SELEctor(LOLMenu::actionEndCallBACk),ANIMATION_DURATION);
;
}
LOLMenu::reset(){
_lasTindex=0;
_index=0;
}
LOLMenu::seTindex( indeX){
_lasTindex=_index;
->_index=index;
}
LOLMenu::geTindex(){
_index;
}
@H_238_727@menuItem*LOLMenu::getCurrentItem(){
(_items.size()==0)
nullptr;
_items.at(_indeX);
}
@H_197_742@
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( for@R_772_10225@){
autoindex=geTindex();
(index<0)
index=0;
(index>_items.size()-1)
index=_items.size()-1;
(for@R_772_10225@){
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"

#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()
{
@H_674_1008@//////////////////////////////
//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" @H_738_1058@));
autoitem4=MenuItemImage::create( "4_LOL_MENU/item4_0.png" ));
autoitem5=MenuItemImage::create( "4_LOL_MENU/item5_0.png" ));
LOLMenu*menu=LOLMenu::create();
@H_799_1084@menu->addMenuItem(item1); @H_657_554@menu->addMenuItem(item2); @H_520_1090@menu->addMenuItem(item3); @H_78_562@menu->addMenuItem(item4); @H_867_565@menu->addMenuItem(item5);
@H_273_1102@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的英雄联盟皮肤选择菜单所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：cocoscocos2ddx基于皮肤联盟英雄菜单选择
猜你在找的Cocos2d-x相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap