CCMenuAdvanced: rows and columns alignment.

[psineur]

Right now only horizontal & verticall alignment is setting CCMenuAdvanced's contentSize. To change full behavior of CCMenu into CCMenuAdvanced rows and columns alignment methods should be changed. It's pretty simple, probably. I just didn't do it, because i didn't use this alignments before.

[cocos2dbeginner]

Mayby someone could port the grid "building" from "SlidingMenuGrid" (which doesn't work for me..it doesn't pages) to CCMenuAdvanced..

[psineur]

Don't know when i will find time for this, but i have idea, how you can do that:

Vertical & Horizontal align in CCMenuAdvanced was taken almost identically from CCMenu. The only difference was - that i choose max item height (for horizontal align) or max item width (for vertical align) and used it to center the items. Summ of items widths (horizontal) or items heights (vertical) with offsets included gives the other part of contentSize for CCMenuAdvanced.

So you can try to grab CCMenu's grid align and do something similar with it. The only difference that you'll need no max item height/max item width, cause you will use summ of sizes and offsets in both directions.

17.06.11 11:44, cocos2dbeginner пишет:

(which doesn't work for me..it doesn't pages)

[cocos2dbeginner]

I had a paging problem with Sliding Menu grid.(it would only page if the next page would be full) but I fixed that and now it works great...I could give you the improved SlidingMenuGrid (don't credit me..someone else made it..i just improved it..with some methods etc...)..

2011/6/17 psineur < reply@reply.github.com>

Don't know when i will find time for this, but i have idea, how you can do that:

Vertical & Horizontal align in CCMenuAdvanced was taken almost identically from CCMenu. The only difference was - that i choose max item height (for horizontal align) or max item width (for vertical align) and used it to center the items. Summ of items widths (horizontal) or items heights (vertical) with offsets included gives the other part of contentSize for CCMenuAdvanced.

So you can try to grab CCMenu's grid align and do something similar with it. The only difference that you'll need no max item height/max item width, cause you will use summ of sizes and offsets in both directions.

17.06.11 11:44, cocos2dbeginner пишет:

(which doesn't work for me..it doesn't pages)

Reply to this email directly or view it on GitHub:

https://github.com/cocos2d/cocos2d-iphone-extensions/issues/15#issuecomment-1386768

[psineur]

Nice!

I think the best way share your changes is to post about it in SlidingMenuGrid topic on cocos2d forums, so others who use it can use & discuss your changes too. Anyway i monitor forum for extensions, but you also can post a link to the topic here - in this issue. Probably i will take a look at SlidingMenuGrid later, but it don't think that it's grid creation can be easily merged to CCMenuAdvanced now.

Thanks!

17.06.11 14:08, cocos2dbeginner пишет

I had a paging problem with Sliding Menu grid.(it would only page if the next page would be full) but I fixed that and now it works great...I could give you the improved SlidingMenuGrid (don't credit me..someone else made it..i just improved it..with some methods etc...)..

2011/6/17 psineur< reply@reply.github.com>

Don't know when i will find time for this, but i have idea, how you can do that:

Vertical& Horizontal align in CCMenuAdvanced was taken almost identically from CCMenu. The only difference was - that i choose max item height (for horizontal align) or max item width (for vertical align) and used it to center the items. Summ of items widths (horizontal) or items heights (vertical) with offsets included gives the other part of contentSize for CCMenuAdvanced.

So you can try to grab CCMenu's grid align and do something similar with it. The only difference that you'll need no max item height/max item width, cause you will use summ of sizes and offsets in both directions.

17.06.11 11:44, cocos2dbeginner пишет:

(which doesn't work for me..it doesn't pages)

Reply to this email directly or view it on GitHub:

https://github.com/cocos2d/cocos2d-iphone-extensions/issues/15#issuecomment-1386768

[nonprofitCoder]

Hello all...

I was trying to get a vertical scrolling menu with grid alignment working in the CCMenuAdvanced. I noticed psineur's comment above regarding the sums of the width and heights and how that worked.

Now, I'm by no means a cocos2d expert (this is my first cocos2d project), but I decided I would give a shot at extending CCMenuAdvanced to handle grid menus. I've posted my attempt below.

Since I'm new to cocos2d, I'd love to have someone review my code and let me know if I've done something incorrectly (or if there's a better way to do it).

Basically, I copied the alignItemsVerticallyWithPadding method and changed the name to alignItemsVerticallyWithGrid (adding a few parameters and adding the declaration to the .h file). Then I copied the code from CCMenu's grid align method and modified it to create a layout that worked for my game. But I'm not sure if I've made it sufficiently generic (i.e. it might be too specific for the layout I was looking for).

Thanks!

-(void) alignItemsVerticallyWithGrid:(int)rows cols:(int)cols padding:(float)padding bottomToTop: (BOOL) bottomToTop
{
    float height     = -padding;
    float width      = -padding;
    float itemHeight = 0;
    float itemWidth  = 0;

    // calculate and set contentSize,
    CCMenuItem *item = nil;
    CCARRAY_FOREACH(children_, item)
    {
        //get the max item height for all items in the menu
        if (item)
        {
            itemHeight = fmaxf(item.contentSize.height * item.scaleY + padding, itemHeight);
            itemWidth  = fmaxf(item.contentSize.width  * item.scaleX + padding, itemWidth);
        }
    }

    //set the height/width based on the number of rows passed in
    height = itemHeight * rows + (padding * rows);
    width  = itemWidth  * cols + (padding * cols);

    // set the content size (had to add some extra padding to the width)
    [self setContentSize: CGSizeMake(width + (padding * cols), height)];

    // set position
    [self setPosition:CGPointMake(width, 0)];

    // get window size
    CGSize winSize = [[CCDirector sharedDirector] winSize];

    // logic vars
    int index = 0;
    int row = 0;
    int rowHeight = 0;
    int rowColumns = 0;
    int columnsOccupied = 0;
    float w  = 0;
    float x  = 0;
    float heightMod = height / 2 + (padding * cols);
    float y = heightMod - itemHeight;

    // loop through the menu items
    CCARRAY_FOREACH(children_, item) {

        //increment index
        index++;

        // if we should start a new row, start new calcs for w and x and reset the rowCols
        if(rowColumns == 0) {
            rowColumns = cols;
            w = winSize.width / (1 + rowColumns);
            x = w + (padding * cols * 2);
        }

        // get the content size of the item
        CGSize itemSize = item.contentSize;

        // get the max height (either the rowHeight or the item height -- i.e. max sure row is tall enough)
        rowHeight = fmaxf(rowHeight, itemSize.height);

        // set the new position of this item and set the position
        [item setAnchorPoint:CGPointMake(0.5,0.0)];
        [item setPosition:ccp(x - winSize.width / 2 + w,
                              y - itemSize.height / 2 + heightMod)];

        // increment x and update number of column filled
        x += w;
        ++columnsOccupied;

        // when the columns for this row are filled up, reset vars for a new row
        if(columnsOccupied >= rowColumns) {

            y -= rowHeight + 5;         
            columnsOccupied = 0;
            rowColumns      = 0;
            rowHeight       = 0;
            ++row;

        } // if(columnsOccupied >= rowColumns)

    } // CCARRAY_FOREACH(children_, item) 

    // Fix position of menuItem if it's the only one.
    if ([children_ count] == 1)
        [[children_ objectAtIndex: 0] setPosition: ccp(width / 2.0f, height / 2.0f ) ];

}