League of Legends skin selection menu based on Cocos2d-x

ultimately

League of Legends Skin selection

Design description of the actions required to achieve the goal

Move (MoveTo), telescopic (scaleto), tilt (orbitcamera)

Functions required to achieve the goal(This is a mathematical function)

x/(X+a)

Where a is a constant used to calculate the value of the above three actions

Size

Unlike the original Menu , the size is not full screen, the default is the screen (2/3), can be set by the setcontentsize () function

_index Variable

Tile all the menu items to form a rectangle,_index represents the point currently in the middle position, such as

Display mode

The distance of the menu item from the center (I-_INDXE) as the function variable x, the specific content view lolmenu::updateposition ();

Operating instructions

Slide One-fourth menu Wide distance of one unit of _index, distance greater than 0.6 less than 1.0 part into 1

Use

Use this menu as long as you know two functions

1.constructor Function

Lolmenu::create () (created by Create_func)

2.AddMenuItem

void AddMenuItem (Cocos2d::menuitem *item);

Other functions can see the code

Menu Code LOLMenu.h

#ifndef __lol__te_menu_h__#define __lol__te_menu_h__#include "cocos2d.h"/** mimic League of Legends Skin Selection menu * The difference is that league of legends when the skin is too heavy, Part of the skin will move out of the edge, do not show * I will show so menu item, move to Edge will continue to slow down */class lolmenu:p ublic cocos2d::layer{public://construction Method Create_func (Lolmenu);// Add menu item void AddMenuItem (Cocos2d::menuitem *item);//update position void updateposition ();//update position, animated void Updatepositionwithanimation ();//Position correction modify position forward for moving direction when more than 1/3, into 1//true for positive false negative void rectify (bool forward);// Initialize virtual bool init ();//reset display quotation marks set to 0void Reset ();p rivate://Set the current display index void setindex (int index);//Set the index number of the currently displayed menu item float GetIndex ();//Returns the selected Itemcocos2d::menuitem * Getcurrentitem ();//Mathematical Formula width*index/(ABS (Index) +calc_a), where calc_ A is a constant float calcfunction (float index, float width);p The index number of the rivate://menu item Float _index;//The index number of the last menu item float _lastindex;// menu item collection, _children order changes, new array save order Cocos2d::vector<cocos2d::menuitem *> _items;//listener function virtual BOOL Ontouchbegan ( cocos2d::touch* Touch, cocos2d::event* event), virtual void ontouchended (cocos2d::touch* touch, cocos2d::event* event); virtual void OntoucHmoved (cocos2d::touch* Touch, cocos2d::event* Event);//animation end Call function, this is primarily to determine which menu item is in front of void actionendcallback (float dx);// The currently selected Itemcocos2d::menuitem *_selecteditem;}; #endif

LOLMenu.cpp

#include "LOLMenu.h" #include <math.h> #define PI ACOs (-1)//The minimum scale of the menu reduction is 1-menu_scale#define menu_scale 0.3// Menu tilt up to 45 degrees # # Menu_aslope 60.0//calcfunction (x) is x/(X+a), where A is a constant # define CALC_A 1//animation run time # define Animation_ DURATION 0.3f//The size of the menu item is proportional to the screen, of course, you can setcontentsize set the # define Content_size_scale (2.0/3)//menu item length and the menu length to slide one menu item length, menu item Changes A # define Item_size_scale (1.0/4)/* Code also has parameters that can be set, there are no one by one cases out of or given function */using_ns_cc;bool Lolmenu::init () {if (! Layer::init ()) Return False;_index=0;_lastindex = 0;this->ignoreanchorpointforposition (false); _selectedItem = Nullptr;auto size = director::getinstance ()->getwinsize (); this->setcontentsize (Size*content_size_scale); This->setanchorpoint (VEC2 (0.5f, 0.5f)), Auto Listener = eventlistenertouchonebyone::create ();listener-> Ontouchbegan = Cc_callback_2 (Lolmenu::ontouchbegan, this); listener->ontouchmoved = Cc_callback_2 (LOLMenu::o Ntouchmoved, this): listener->ontouchended = Cc_callback_2 (lolmenu::ontouchended, this); Geteventdispatcher ()-> addeventlistenerwithscenegraphpriority (listener, this); return true;}; void Lolmenu::addmenuitem (Cocos2d::menuitem *item) {item->setposition (This->getcontentsize ()/2);this-> AddChild (item); _items.pushback (item); Reset ();//If you want to start without moving effect, change to updateposition function to Updatepositionwithanimation (); return;}  void Lolmenu::updateposition () {Auto menusize = Getcontentsize (); for (int i = 0; i < _items.size (); i++) {//Set position float x = Calcfunction (i-_index, MENUSIZE.WIDTH/2); _items.at (i)->setposition (VEC2 (menusize.width/2+x, MENUSIZE.HEIGHT/2 ),///set ZOrder, that is, draw order _items.at (i)->setzorder (-abs ((i-_index) * 100));//Set Scaling ratio _items.at (i)->setscale (1.0-abs ( Calcfunction (i-_index, Menu_scale)));//Set tilt, node does not have Setcamera function, set Orbitcamera run time to zero to achieve the effect auto Orbit1 = Orbitcamera:: Create (0, 1, 0, calcfunction (i-_lastindex, Menu_aslope), calcfunction (i-_lastindex, Menu_aslope)-Calcfunction (i-_i Ndex, Menu_aslope), 0, 0); _items.at (i)->runaction (orbit1);} return;} void Lolmenu::updatepositionwithanimatiOn () {//First stop all possible actions for (int i = 0; i < _items.size (); i++) _items.at (i)->stopallactions (); Auto Menusize = GetContent Size (); for (int i = 0; i < _items.size (); i++) {_items.at (i)->setzorder (-abs ((i-_index) *100); float x = Calcfunctio N (i-_index, MENUSIZE.WIDTH/2); auto MoveTo = Moveto::create (animation_duration, VEC2 (MENUSIZE.WIDTH/2 + x, menuSize.h EIGHT/2)); _items.at (i)->runaction (moveTo); auto Scaleto = Scaleto::create (Animation_duration, (1-abs ( Calcfunction (i-_index, Menu_scale))); _items.at (i)->runaction (scaleto); auto orbit1 = Orbitcamera::create ( Animation_duration, 1, 0, calcfunction (i-_lastindex, Menu_aslope), calcfunction (i-_index, Menu_aslope)-CalcFunction ( I-_lastindex, Menu_aslope), 0, 0); _items.at (i)->runaction (orbit1);} Scheduleonce (Schedule_selector (lolmenu::actionendcallback), animation_duration); return;} void Lolmenu::reset () {_lastindex = 0;_index = 0;} void Lolmenu::setindex (int index) {_lastindex = _index;this->_index = index;} Float LOLmenu::getindex () {return _index;} MenuItem * Lolmenu::getcurrentitem () {if (_items.size () = = 0) return Nullptr;return _items.at (_index);} BOOL Lolmenu::ontouchbegan (touch* Touch, event* Event) {//First stop all possible actions for (int i = 0; i < _items.size (); i++) _items.at (i )->stopallactions (); if (_selecteditem) _selecteditem->unselected (); Auto position = this-> Converttonodespace (Touch->getlocation ()); Auto size = This->getcontentsize (); Auto rect = rect (0, 0, Size.width, Size.Height); if (Rect.containspoint (position)) {return true;} return false;} void lolmenu::ontouchended (touch* Touch, event* Event) {Auto size = getcontentsize (); Auto XDelta = Touch->getlocation ( ). X-touch->getstartlocation (). x;rectify (xdelta>0); if (ABS (XDelta) <size.width/24 && _selecteditem ) _selecteditem->activate (); Updatepositionwithanimation (); return;} void Lolmenu::ontouchmoved (touch* Touch, event* Event) {Auto XDelta = Touch->getdelta (). X;auto size = Getcontentsize () ; _lastindex = _index;_index-=XDelta/(Size.width *item_size_scale); updateposition (); return;} void Lolmenu::rectify (bool forward) {Auto index = GetIndex (); if (Index < 0) index = 0;if (Index>_items.size ()-1) Inde x = _items.size ()-1;if (forward) {index = (int) (index + 0.4);} Elseindex = (int) (index + 0.6); Setindex ((int) index);} void Lolmenu::actionendcallback (float dx) {_selecteditem = Getcurrentitem (); if (_selecteditem) _selecteditem-> Selected ();} Float lolmenu::calcfunction (float index, float width) {return width*index/(ABS (Index) + calc_a);}

Demo Code LOLMenuDemo.h

#ifndef __lolmenu_scene_h__#define __lolmenu_scene_h__#include "Cocos2d.h" class Lolmenudemo:public cocos2d::layer{ public://there ' s no ' id ' in CPP, so we recommend returning the class instance pointerstatic cocos2d::scene* Createscene () ;//Here ' s a difference. Method ' init ' in cocos2d-x returns BOOL, instead of the returning ' ID ' in cocos2d-iphonevirtual bool init ();//a selector call Backvoid Menuclosecallback (cocos2d::ref* psender); void Menuitem1callback (cocos2d::ref* pSender); void Menuitem2callback (cocos2d::ref* psender); void Menuitem3callback (cocos2d::ref* psender); void Menuitem4callback ( cocos2d::ref* psender); void Menuitem5callback (cocos2d::ref* psender); void Hideallsprite (); Cocos2d::sprite *sprite[5 ];//implement the "Static Create ()" Method Manuallycreate_func (Lolmenudemo); #endif//__helloworld_scene_h__

LOLMenuDemo.cpp

#include "LOLMenuDemo.h" #include "LOLMenu.h" USING_NS_CC; scene* Lolmenudemo::createscene () {//' scene ' is a autorelease objectauto scene = Scene::create ();//' layer ' is an Autorel Ease Objectauto layer = lolmenudemo::create ();//Add layer as a child to scenescene->addchild (layer);//Return the Scen Ereturn scene;} On "Init" need to initialize your Instancebool lolmenudemo::init () {////////////////////////////////1. Super init F Irstif (! Layer::init ()) {return false;} Size visiblesize = director::getinstance ()->getvisiblesize (); VEC2 origin = Director::getinstance ()->getvisibleorigin (); Auto item1 = Menuitemimage::create ("4_lol_menu/item1_0". PNG "," 4_lol_menu/item1_0.png ", Cc_callback_1 (Lolmenudemo::menuitem1callback, this)); Auto item2 = Menuitemimage:: Create ("4_lol_menu/item2_0.png", "4_lol_menu/item2_0.png", Cc_callback_1 (Lolmenudemo::menuitem2callback, this)); Auto Item3 = menuitemimage::create ("4_lol_menu/item3_0.png", "4_lol_menu/item3_0.png", Cc_callback_1 (LOLMenuDemo:: MenuitEm3callback, this)); Auto Item4 = Menuitemimage::create ("4_lol_menu/item4_0.png", "4_lol_menu/item4_0.png", CC_ Callback_1 (Lolmenudemo::menuitem4callback, this)), Auto ITEM5 = Menuitemimage::create ("4_lol_menu/item5_0.png", "4_ Lol_menu/item5_0.png ", Cc_callback_1 (Lolmenudemo::menuitem5callback, this)); Lolmenu *menu = Lolmenu::create (); Menu->addmenuitem (item1); Menu->addmenuitem (item2); Menu->addmenuitem ( ITEM3); Menu->addmenuitem (ITEM4); Menu->addmenuitem (ITEM5); Menu->setposition (VISIBLESIZE/2);this-> AddChild (menu, 2); for (int i = 0; i < 5; i++) {char str[100];sprintf (str, "4_lol_menu/item%d.jpg", i + 1); Sprite[i] = Sp Rite::create (str); Sprite[i]->setanchorpoint (VEC2 (0.5f, 0.5f)); Sprite[i]->setposition (VISIBLESIZE/2); this- >addchild (Sprite[i]);} Hideallsprite (); return true;} void Lolmenudemo::menuclosecallback (ref* psender) {#if (Cc_target_platform = = CC_PLATFORM_WP8) | | (Cc_target_platform = = CC_PLATFORM_WINRT) MessageBox ("You pressed the Close button. Windows StOre Apps do not implement a close button. "," "Alert"); return; #endifDirector:: getinstance ()->end (); #if (cc_target_ PLATFORM = = Cc_platform_ios) exit (0), #endif}void lolmenudemo::menuitem1callback (cocos2d::ref* psender) { Hideallsprite (); sprite[0]->setvisible (true);} void Lolmenudemo::menuitem2callback (cocos2d::ref* psender) {hideallsprite (); sprite[1]->setvisible (true);} void Lolmenudemo::menuitem3callback (cocos2d::ref* psender) {hideallsprite (); sprite[2]->setvisible (true);} void Lolmenudemo::menuitem4callback (cocos2d::ref* psender) {hideallsprite (); sprite[3]->setvisible (true);} void Lolmenudemo::menuitem5callback (cocos2d::ref* psender) {hideallsprite (); sprite[4]->setvisible (true);} void Lolmenudemo::hideallsprite () {for (auto P:sprite) {if (p->isvisible ()) p->setvisible (false);}}

Executable program (requires installation of vs2013 or related DLL files)
If you have any questions, please email me [email protected]
PS This type of menu will be common in the Web page, such as Youku animation theme or App store can see similar shadow, because it is flat, menu item switching is not very natural, I through the tilt to become natural.
By the way, a job .

League of Legends skin selection menu based on Cocos2d-x