Slider Menu Grid

Extensions
#21

Example code, assets from HelloWorld cocos2dx project, put it in your scene HelloWorld constructor or logic init function.

    CCArray* menuArray = CCArray::createWithCapacity(24);

    CCSize windowSize = CCDirector::sharedDirector()->getOpenGLView()->getDesignResolutionSize();



    float w= 0;
    float h=0;
    for (int i = 0;i<24;i++)
    {
         CCSprite* spr = CCSprite::create("CloseNormal.png");
        CCSprite* selspr = CCSprite::create("CloseSelected.png");
         CCSprite* dis = CCSprite::create(""CloseSelected.png");

        CCMenuItemSprite* itmspr = CCMenuItemSprite::create(spr, selspr,dis, this, menu_selector(HelloWorld::menuItemCallback));
        itmspr->setTag(i);

        if (i > 3) itmspr->setEnabled(false);

        CCLOG ("tag for item %d" , itmspr->getTag());


        menuArray->addObject(itmspr);



    }
    int row = 3;
    int col = 4;
    CCPoint p = ccp(80,80);

//some trick to center menu 
    float eWidth =  (col-1)*(w+p.x);
    float eHeight = (row-1)*(h+p.y);

    CCPoint menuPosition = ccp(
                               windowSize.width/2.0f -eWidth/2.0f ,
                               windowSize.height/2.0f -eHeight/2.0f
                               );

    SlidingMenuGrid* sliderMenu = SlidingMenuGrid::menuWithArray(
                                                                 menuArray,
                                                                 col,
                                                                 row,
                                                                 menuPosition,
                                                                 p
                                                                 );

    sliderMenu->setAnchorPoint(ccp(0.5, 0.5));
//    sliderMenu->setPosition(100,100);


    this->addChild(sliderMenu);

Here goes the menu selector function:

void HelloWorld::menuItemCallback(CCObject* pSender)
{
    CCLOG ("Item CLICKED: %d",  ((CCMenuItemSprite*)pSender)->getTag());


}
#22

Thanks!
one small note: w and h variables are unused, stay at value 0, any purpose for them in mind?

#23

Joe Merhej wrote:

Thanks!
one small note: w and h variables are unused, stay at value 0, any purpose for them in mind?

This menu was a part of bigger tab menu. Tab menu wes created dynamically and sometimes i had to slightly tighten items to change position, so I calculeted w and h corrections.
You can just skip it :slight_smile:

#24

this could be lame, but i new to cocos2dx and c++,
I added the

`CCArray* menuArray = CCArray::createWithCapacity(24);

CCSize windowSize = CCDirector::sharedDirector()->getOpenGLView()->getDesignResolutionSize();

float w= 0;
float h=0;
for (int i = 0;i<24;i++)
{
     CCSprite* spr = CCSprite::create("CloseNormal.png");
    CCSprite* selspr = CCSprite::create("CloseSelected.png");
     CCSprite* dis = CCSprite::create(""CloseSelected.png");

… `

and the menu selector function to the helloworldScene.cpp

but when compiled it gives me

@
jni/…/…/Classes/HelloWorldScene.cpp: In member function ‘virtual bool HelloWorld::init()’:
jni/…/…/Classes/HelloWorldScene.cpp:121:5: error: ‘SlidingMenuGrid’ was not declared in this scope
jni/…/…/Classes/HelloWorldScene.cpp:121:22: error: ‘sliderMenu’ was not declared in this scope
jni/…/…/Classes/HelloWorldScene.cpp:121:35: error: ‘SlidingMenuGrid’ is not a class or namespace

@

error…

what do i do to make SlidingMenuGrid public??

#25

I have also included the header file SlidingMenu.h in the HelloWorldScene.cpp

It still gives me

/game_shared/__/__/Classes/HelloWorldScene.o: in function HelloWorld::init():jni/../../Classes/HelloWorldScene.cpp:130: error: undefined reference to 'SlidingMenuGrid::menuWithArray(cocos2d::CCArray*, int, int, cocos2d::CCPoint, cocos2d::CCPoint)' collect2: ld returned 1 exit status

Please help!

#26

please check any tutorial how to create my first cocos2dx andorid application :slight_smile:
TIP:
Probably you are not compilling SlidingMenu.cpp , you have to edit your make build script and add this file.
As far as I remember it is located in android/jni/helloworld/Android.mk, update your LOCAL_SRC_FILES definition to include the newly created cpp files.

#27

Thank you :slight_smile:

I added it to the Android.mk file
but now I get new errors!
jni/…/…/Classes/SlidingMenu.cpp: In member function ‘bool SlidingMenuGrid::initWithArray(cocos2d::CCArray**, int, int, cocos2d::CCPoint, cocos2d::CCPoint, bool)’:
jni/…/…/Classes/SlidingMenu.cpp:53:23: error: ’setIsTouchEnabled’ was not declared in this scope
jni/…/…/Classes/SlidingMenu.cpp: In member function ’cocos2d::CCMenuItemSprite** SlidingMenuGrid::GetItemWithinTouch(cocos2d::CCTouch*)’:
jni/…/…/Classes/SlidingMenu.cpp:153:78: error: ‘class cocos2d::CCTouch’ has no member named ‘locationInView’
jni/…/…/Classes/SlidingMenu.cpp:166:5: error: ‘CCRectContainsPoint’ is not a member of ‘cocos2d::CCRect’
jni/…/…/Classes/SlidingMenu.cpp: In member function ‘virtual bool SlidingMenuGrid::ccTouchBegan(cocos2d::CCTouch**, cocos2d::CCEvent**)’:
jni/…/…/Classes/SlidingMenu.cpp:177:68: error: ‘class cocos2d::CCTouch’ has no member named ‘locationInView’
jni/…/…/Classes/SlidingMenu.cpp:188:18: error: ‘class cocos2d::CCMenuItem’ has no member named ‘getIsEnabled’
jni/…/…/Classes/SlidingMenu.cpp: In member function ‘virtual void SlidingMenuGrid::ccTouchMoved(cocos2d::CCTouch**, cocos2d::CCEvent**)’:
jni/…/…/Classes/SlidingMenu.cpp:212:18: error: ‘class cocos2d::CCMenuItem’ has no member named ‘getIsEnabled’
jni/…/…/Classes/SlidingMenu.cpp:226:66: error: ‘class cocos2d::CCTouch’ has no member named ‘locationInView’
jni/…/…/Classes/SlidingMenu.cpp: In member function ‘virtual void SlidingMenuGrid::ccTouchEnded(cocos2d::CCTouch**, cocos2d::CCEvent**)’:
jni/…/…/Classes/SlidingMenu.cpp:290:18: error: ‘class cocos2d::CCMenuItem’ has no member named ‘getIsEnabled’
jni/…/…/Classes/SlidingMenu.cpp: In member function ‘void SlidingMenuGrid::moveToCurrentPage(bool)’:
jni/…/…/Classes/SlidingMenu.cpp:307:31: error: ‘actionWithAction’ is not a member of ‘cocos2d::CCEaseBounce’
jni/…/…/Classes/SlidingMenu.cpp:307:62: error: ‘actionWithDuration’ is not a member of ‘cocos2d::CCMoveTo’

#28

ok… I was able to solve most of the errors (migraton to cocos2dx v2.0)
but one

jni/../../Classes/SlidingMenu.cpp: In member function 'void SlidingMenuGrid::moveToCurrentPage(bool)': jni/../../Classes/SlidingMenu.cpp:307:31: error: 'actionWithAction' is not a member of 'cocos2d::CCEaseBounce'

Have searched a lot and dont seem to find a solution for it.

#29

Hey. Can you revise these files for cocos2dx v3? Or at least give some idea on the changes required.

#30

New version for cocos2d-x ver 3.2.
sliding_menu_2_0.zip (4.2 KB)
Sample for using:

Size visibleSize = Director::getInstance()->getVisibleSize();
MenuItemsArray items= MenuItemsArray();//in SlidingMenuGrid: typedef Vector<MenuItem*> MenuItemsArray;
for(int i=0;i<30;i++)
  {
            		auto menuItem = MenuItemImage::create(
            		"ui/animationbuttonnormal.png", "ui/animationbuttonpressed.png",
            		CC_CALLBACK_1(MenuScene::menuItemCallback, this));
            		menuItem->setTag(i);
            		items.pushBack(menuItem);
    }
            	gridMenuLayer=SlidingMenuGrid::createWithArray(&items,2,5,Point(visibleSize.width/2,visibleSize.height/2),Point(visibleSize.width/3,50),true);
    auto label1=Label::createWithBMFont( "fonts/BOMBOM.fnt","Level one",TextHAlignment::CENTER,visibleSize.width);
    auto label2=Label::createWithBMFont( "fonts/BOMBOM.fnt","Level two",TextHAlignment::CENTER,visibleSize.width);
    auto label3=Label::createWithBMFont( "fonts/BOMBOM.fnt","Level three",TextHAlignment::CENTER,visibleSize.width);
            	
    gridMenuLayer->setPageLabel(1,label1);
    gridMenuLayer->setPageLabel(2,label2);
    gridMenuLayer->setPageLabel(3,label3);
    addChild(gridMenuLayer,2,100);
5 Likes
#31

ok I just saw your reply and tried it immediately. there were some runtime errors which I was able to get rid off by commenting out the label1, label2 and label3 part.

Thank you so very much for the help. Really appreciate what you have done.

One query though, i modified one line of your code to this:

SlidingMenuGrid* gridMenuLayer = SlidingMenuGrid::createWithArray(&items, 5, 1, Point(visibleSize.width / 2, visibleSize.height / 2), Point(visibleSize.width / 3, 50), false);

What this does is that 3 icons appear on screen (i.e. Item1, item2, item3), and then when I slide horizontally, those 3 icons move off the screen to the left and item4, item5 and item6 appear. what I want to achieve is scrolling effect when you scroll a webpage. it doesn’t bounces, it just keeps on going and going (which in some cases might result in a item not appearing fully on screen).

Firstly, can u tell me how should I modify your code to achieve this?

Secondly, with the current code, wherever on screen i slide, the menu slides. Is it possible to restrict that just so that it works within a rectangular area or a portion of screen say lower half of the screen?

Thirdly, is it possible to resize the menu? What I want is that there is a sprite on the screen whose width is less then the screen width, I want the menu to scroll about that? I know I am not explaining myself very clear but what I want is to have a background frame for the menu and to resize that menu.
Thanks a lot once again :slight_smile:

#32

Good day!
I understand that you want to achieve the effect of a continuous slip? The fact that this class SlidinMenuGrid is more designed to create the effect of multiple screens with menu items. Maybe you would be more appropriate to use ScrollView?

#33

yes that is what I am trying to achieve. I have tried to use Scroll View but every time errors would come which I couldn’t get rid off. At one point I was able to get rid off the errors but I didn’t have any sample code to create a scroll view. I tried a few things but no success. Can you provide a sample code on initializing the same way as you did above?

#34

Also in the code that you provided, when I start the scroll from a menu item, meaning I touch a menu item and drag to scroll, but it doesn’t scroll. Any idea how to achieve that?

#35

Honestly, I have not used yet in their projects ScrollView. An example can be found in the folder tests \ cpp-test \ Classes \ UITest \ CocoStudioGUITest \ UIScrollViewTest

#36

If you touch the menu item itself, then worked through clicking on this menu item. Scrolling happens if the slip is carried out at any place of the screen not occupied by the menu items.

#37

Works like a charm for me! Thanks @starfair

#38

You are welcome! Nice to help you!

#39

@Amynvirani, it’s been 2 weeks since you posted this so I’m sure you would’ve gotten around your scroll view issue, but if not, tell me what sort of errors are you’re running into.

#40

Great work here @starfair

1 Like