基于cocos2dx的英雄联盟皮肤选择菜单

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了基于cocos2dx的英雄联盟皮肤选择菜单，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

最终效果图

英雄联盟皮肤选择


设计说明

实现目标所需要的动作

移动(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

voidaddMenuItem(cocos2d::MenuItem*item);

其它函数可以看代码

菜单代码

LOLMenu.h

  1. #ifndef __LOL__TE_MENU_H__
  2. #define __LOL__TE_MENU_H__
  3. #include "cocos2d.h"
  4. /*
  5. *模仿英雄联盟的皮肤选择菜单
  6. *不同点在于，英雄联盟当皮肤过多时，部分皮肤会移出边缘，不显示
  7. *我会显示所以菜单项，向边缘移动会不断减缓
  8. */
  9. class LOLMenu :public cocos2d::Layer{
  10. public:
  11. 	//构造方法
  12. 	CREATE_FUNC(LOLMenu);
  13. 	//添加菜单项
  14. 	void addMenuItem(cocos2d::MenuItem *item);
  15. 	//更新位置
  16. 	void updatePosition();
  17. 	//更新位置，有动画
  18. 	void updatePositionWithAnimation();
  19. 	//位置矫正  修改位置forward为移动方向  当超过1/3，进1
  20. 	//true 为正向  false 负
  21. 	void rectify(bool forward);
  22. 	//初始化
  23. 	virtual bool init();
  24. 	//重置  显示所引号设置为0
  25. 	void reset();
  26. private:
  27. 	//设置当前显示索引
  28. 	void setIndex(int index);
  29. 	//设置当前显示菜单项的索引号
  30. 	float getIndex();
  31. 	//返回被选中的item
  32. 	cocos2d::MenuItem * getCurrentItem();
  33. 	//数学计算式width*index/(abs(index)+CALC_A),其中CALC_A为常数
  34. 	float calcFunction(float index,float width);
  35. private:
  36. 	//菜单菜单项的索引号
  37. 	float _index;
  38. 	//上一次菜单项的索引号
  39. 	float _lastIndex;
  40. 	//菜单项集合,_children顺序会变化，新建数组保存顺序
  41. 	cocos2d::Vector<cocos2d::MenuItem *> _items;
  42. 	//监听函数
  43. 	virtual bool onTouchBegan(cocos2d::Touch* touch,cocos2d::Event* event);
  44. 	virtual void onTouchEnded(cocos2d::Touch* touch,cocos2d::Event* event);
  45. 	virtual void onTouchMoved(cocos2d::Touch* touch,cocos2d::Event* event);
  46. 	//动画完结调用函数，这个主要是确定哪一个菜单项在前面
  47. 	void actionEndCallBack(float dx);
  48. 	//当前被选择的item
  49. 	cocos2d::MenuItem *_selectedItem;
  50. };
  51. #endif

LOLMenu.cpp

  1. #include "LOLMenu.h"
  2. #include <math.h>
  3. #define PI acos(-1)
  4. //菜单的缩小比例 最小的比例是1-MENU_SCALE
  5. #define MENU_SCALE 0.3
  6. //菜单的倾斜度 最多为45度
  7. #define MENU_ASLOPE 60.0
  8. //calcFunction(x) 为 x/(x+a),其中a为常数
  9. #define CALC_A 1
  10. //动画运行时间
  11. #define ANIMATION_DURATION  0.3f 
  12. //菜单项的大小与屏幕的比例，当然可以通过setContentSize设置
  13. #define CONTENT_SIZE_SCALE (2.0/3)
  14. //菜单项长度与菜单长度的比例 滑动一个菜单项长度，菜单项变化一个
  15. #define ITEM_SIZE_SCALE (1.0/4)
  16. /*
  17. 	代码里面还有可以设置的参数，这里没有一一例出或给出函数
  18. 	*/
  19. USING_NS_CC;
  20. bool LOLMenu::init(){
  21. 	if (!Layer::init())
  22. 		return false;
  23. 	_index=0;
  24. 	_lastIndex = 0;
  25. 	this->ignoreAnchorPointForPosition(false);
  26. 	_selectedItem = nullptr;
  27. 	auto size = Director::getInstance()->getWinSize();
  28. 	this->setContentSize(size*CONTENT_SIZE_SCALE);
  29. 	this->setAnchorPoint(Vec2(0.5f,0.5f));
  30. 	auto listener = EventListenerTouchOneByOne::create();
  31. 	listener->onTouchBegan = CC_CALLBACK_2(LOLMenu::onTouchBegan,this);
  32. 	listener->onTouchMoved = CC_CALLBACK_2(LOLMenu::onTouchMoved,this);
  33. 	listener->onTouchEnded = CC_CALLBACK_2(LOLMenu::onTouchEnded,this);
  34. 	getEventDispatcher()->addEventListenerWithSceneGraPHPriority(listener,this);
  35. 	return true;
  36. };
  37.  
  38. void LOLMenu::addMenuItem(cocos2d::MenuItem *item){
  39. 	item->setPosition(this->getContentSize() / 2);
  40. 	this->addChild(item);
  41. 	_items.pushBack(item);
  42. 	reset();
  43. 	//如果希望开始没有移动效果，改成updatePosition函数即可
  44. 	updatePositionWithAnimation();
  45. 	return;
  46. }
  47. void LOLMenu::updatePosition(){
  48. 	auto menuSize = getContentSize();
  49. 	for (int i = 0; i < _items.size(); i++){
  50. 		//设置位置
  51. 		float x = calcFunction(i - _index,menuSize.width / 2);
  52. 		_items.at(i)->setPosition(Vec2(menuSize.width/2+x,menuSize.height/2));
  53. 		//设置zOrder,即绘制顺序
  54. 		_items.at(i)->setZOrder(-abs((i - _index) * 100));
  55. 		//设置伸缩比例
  56. 		_items.at(i)->setScale(1.0-abs(calcFunction(i - _index,MENU_SCALE)));
  57. 		//设置倾斜，Node没有setCamera函数，将OrbitCamera的运行时间设为0来达到效果
  58. 		auto orbit1 = OrbitCamera::create(0,1,calcFunction(i - _lastIndex,MENU_ASLOPE),MENU_ASLOPE) - calcFunction(i - _index,0);
  59. 		_items.at(i)->runAction(orbit1);
  60. 	}
  61. 	return;
  62. }
  63. void LOLMenu::updatePositionWithAnimation(){
  64. 	//先停止所有可能存在的动作
  65. 	for (int i = 0; i < _items.size(); i++)
  66. 		_items.at(i)->stopAllActions();
  67. 	auto menuSize = getContentSize();
  68. 	for (int i = 0; i < _items.size(); i++){
  69. 		_items.at(i)->setZOrder(-abs((i - _index)*100));
  70. 		float x = calcFunction(i - _index,menuSize.width / 2);
  71. 		auto moveTo = MoveTo::create(ANIMATION_DURATION,Vec2(menuSize.width / 2 + x,menuSize.height / 2));
  72. 		_items.at(i)->runAction(moveTo);
  73. 		auto scaleTo = ScaleTo::create(ANIMATION_DURATION,(1 - abs(calcFunction(i - _index,MENU_SCALE))));
  74. 		_items.at(i)->runAction(scaleTo);
  75. 		auto orbit1 = OrbitCamera::create(ANIMATION_DURATION,calcFunction(i - _index,MENU_ASLOPE) - calcFunction(i - _lastIndex,0);
  76. 		_items.at(i)->runAction(orbit1);
  77. 	}
  78. 	scheduleOnce(schedule_selector(LOLMenu::actionEndCallBack),ANIMATION_DURATION);
  79. 	return;
  80. }
  81. void LOLMenu::reset(){
  82. 	_lastIndex = 0;
  83. 	_index = 0;
  84. }
  85. void LOLMenu::setIndex(int index){
  86. 	_lastIndex = _index;
  87. 	this->_index = index;
  88. }
  89. float LOLMenu::getIndex(){
  90. 	return _index;
  91. }
  92.  
  93.  
  94.  
  95. MenuItem * LOLMenu::getCurrentItem(){
  96. 	if (_items.size() == 0)
  97. 		return nullptr;
  98. 	return _items.at(_index);
  99. }
  100.  
  101.  
  102. bool LOLMenu::onTouchBegan(Touch* touch,Event* event){
  103. 	//先停止所有可能存在的动作
  104. 	for (int i = 0; i < _items.size(); i++)
  105. 		_items.at(i)->stopAllActions();
  106. 	if (_selectedItem)
  107. 		_selectedItem->unselected();
  108. 	auto position = this->convertToNodeSpace(touch->getLocation());
  109. 	auto size = this->getContentSize();
  110. 	auto rect = Rect(0,size.width,size.height);
  111. 	if (rect.containsPoint(position)){
  112. 		return true;
  113. 	}
  114. 	return false;
  115. }
  116. void LOLMenu::onTouchEnded(Touch* touch,Event* event){
  117. 	auto size = getContentSize();
  118. 	auto xDelta = touch->getLocation().x - touch->getStartLocation().x;
  119. 	rectify(xDelta>0);
  120. 	if (abs(xDelta)<size.width / 24 && _selectedItem)
  121. 		_selectedItem->activate();
  122. 	updatePositionWithAnimation();
  123. 	return;
  124. }
  125. void LOLMenu::onTouchMoved(Touch* touch,Event* event){
  126. 	auto xDelta = touch->getDelta().x;
  127. 	auto size = getContentSize();
  128. 	_lastIndex = _index;
  129. 	_index -= xDelta / (size.width *ITEM_SIZE_SCALE);
  130. 	updatePosition();
  131. 	return;
  132. }
  133.  
  134. void LOLMenu::rectify(bool forward){
  135. 	auto index = getIndex();
  136. 	if (index < 0)
  137. 		index = 0;
  138. 	if (index>_items.size() - 1)
  139. 		index = _items.size() - 1;
  140. 	if (forward){
  141. 		index = (int)(index + 0.4);
  142. 	}
  143. 	else
  144. 		index = (int)(index + 0.6);
  145. 	setIndex((int)index);
  146. }
  147.  
  148. void LOLMenu::actionEndCallBack(float dx){
  149. 	_selectedItem = getCurrentItem();
  150. 	if (_selectedItem)
  151. 		_selectedItem->selected();
  152. }
  153.  
  154. float LOLMenu::calcFunction(float index,float width){
  155. 	return width*index / (abs(index) + CALC_A);
  156. }

演示代码

LOLMenuDemo.h

  1. #ifndef __LOLMenu_SCENE_H__
  2. #define __LOLMenu_SCENE_H__
  3. #include "cocos2d.h"
  4. class LOLMenuDemo : public cocos2d::Layer
  5. {
  6. public:
  7. 	// there's no 'id' in cpp,so we recommend returning the class instance pointer
  8. 	static cocos2d::Scene* createScene();
  9. 	// Here's a difference. Method 'init' in cocos2d-x returns bool,instead of returning 'id' in cocos2d-iphone
  10. 	virtual bool init();
  11. 	// a selector callback
  12. 	void menuCloseCallback(cocos2d::Ref* pSender);
  13. 	void menuItem1Callback(cocos2d::Ref* pSender);
  14. 	void menuItem2Callback(cocos2d::Ref* pSender);
  15. 	void menuItem3Callback(cocos2d::Ref* pSender);
  16. 	void menuItem4Callback(cocos2d::Ref* pSender);
  17. 	void menuItem5Callback(cocos2d::Ref* pSender);
  18. 	void hideAllSprite();
  19. 	cocos2d::Sprite *sprite[5];
  20. 	// implement the "static create()" method manually
  21. 	CREATE_FUNC(LOLMenuDemo);
  22. };
  23. #endif // __HELLOWORLD_SCENE_H__

LOLMenuDemo.cpp

  1. #include "LOLMenuDemo.h"
  2. #include "LOLMenu.h"
  3.  
  4.  
  5. USING_NS_CC;
  6.  
  7. Scene* LOLMenuDemo::createScene()
  8. {
  9. 	// 'scene' is an autorelease object
  10. 	auto scene = Scene::create();
  11.  
  12. 	// 'layer' is an autorelease object
  13. 	auto layer = LOLMenuDemo::create();
  14.  
  15. 	// add layer as a child to scene
  16. 	scene->addChild(layer);
  17.  
  18. 	// return the scene
  19. 	return scene;
  20. }
  21.  
  22. // on "init" you need to initialize your instance
  23. bool LOLMenuDemo::init()
  24. {
  25. 	//////////////////////////////
  26. 	// 1. super init first
  27. 	if (!Layer::init())
  28. 	{
  29. 		return false;
  30. 	}
  31.  
  32. 	Size visibleSize = Director::getInstance()->getVisibleSize();
  33. 	Vec2 origin = Director::getInstance()->getVisibleOrigin();
  34.  
  35. 	auto item1 = MenuItemImage::create("4_LOL_MENU/item1_0.png","4_LOL_MENU/item1_0.png",CC_CALLBACK_1(LOLMenuDemo::menuItem1Callback,this));
  36. 	auto item2 = MenuItemImage::create("4_LOL_MENU/item2_0.png","4_LOL_MENU/item2_0.png",CC_CALLBACK_1(LOLMenuDemo::menuItem2Callback,this));
  37. 	auto item3 = MenuItemImage::create("4_LOL_MENU/item3_0.png","4_LOL_MENU/item3_0.png",CC_CALLBACK_1(LOLMenuDemo::menuItem3Callback,this));
  38. 	auto item4 = MenuItemImage::create("4_LOL_MENU/item4_0.png","4_LOL_MENU/item4_0.png",CC_CALLBACK_1(LOLMenuDemo::menuItem4Callback,this));
  39. 	auto item5 = MenuItemImage::create("4_LOL_MENU/item5_0.png","4_LOL_MENU/item5_0.png",CC_CALLBACK_1(LOLMenuDemo::menuItem5Callback,this));
  40.  
  41. 	LOLMenu *menu = LOLMenu::create();
  42.  
  43. 	menu->addMenuItem(item1);
  44. 	menu->addMenuItem(item2);
  45. 	menu->addMenuItem(item3);
  46. 	menu->addMenuItem(item4);
  47. 	menu->addMenuItem(item5);
  48.  
  49. 	menu->setPosition(visibleSize / 2);
  50. 	this->addChild(menu,2);
  51.  
  52.  
  53. 	for (int i = 0; i < 5; i++){
  54. 		char str[100];
  55. 		sprintf(str,"4_LOL_MENU/item%d.jpg",i + 1);
  56. 		sprite[i] = Sprite::create(str);
  57. 		sprite[i]->setAnchorPoint(Vec2(0.5f,0.5f));
  58. 		sprite[i]->setPosition(visibleSize / 2);
  59. 		this->addChild(sprite[i]);
  60. 	}
  61. 	hideAllSprite();
  62. 	return true;
  63. }
  64.  
  65.  
  66. void LOLMenuDemo::menuCloseCallback(Ref* pSender)
  67. {
  68. #if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
  69. 	MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
  70. 	return;
  71. #endif
  72.  
  73. 	Director::getInstance()->end();
  74.  
  75. #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
  76. 	exit(0);
  77. #endif
  78. }
  79.  
  80. void LOLMenuDemo::menuItem1Callback(cocos2d::Ref* pSender){
  81. 	hideAllSprite();
  82. 	sprite[0]->setVisible(true);
  83. }
  84. void LOLMenuDemo::menuItem2Callback(cocos2d::Ref* pSender){
  85. 	hideAllSprite();
  86. 	sprite[1]->setVisible(true);
  87. }
  88. void LOLMenuDemo::menuItem3Callback(cocos2d::Ref* pSender){
  89. 	hideAllSprite();
  90. 	sprite[2]->setVisible(true);
  91. }
  92. void LOLMenuDemo::menuItem4Callback(cocos2d::Ref* pSender){
  93. 	hideAllSprite();
  94. 	sprite[3]->setVisible(true);
  95. }
  96. void LOLMenuDemo::menuItem5Callback(cocos2d::Ref* pSender){
  97. 	hideAllSprite();
  98. 	sprite[4]->setVisible(true);
  99. }
  100.  
  101. void LOLMenuDemo::hideAllSprite(){
  102. 	for (auto p : sprite){
  103. 		if (p->isVisible())
  104. 			p->setVisible(false);
  105. 	}
  106. }


可运行的程序（需要安装vs2013或相关dll文件)

所有源代码


有任何问题可以发邮件给我 810278677@qq.com

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外接键盘流式标签