Export to GitHub

cocos2d-iphone - issue #1517

Grid Like Structure unavailable in CCLayoutBox


Posted on Jul 3, 2014 by Grumpy Elephant

In previous version (V2.1), CCMenu was providing a grid like structure of CCMenuItems. But this kind of structure is not available in the current version of framework. So I added another type of CCLayoutBoxDirection named "CCLayoutBoxDirectionGrid" and added two extra NSInter type properties named rowsInGrid and columnsInGrid. I also added code to arrange the children as grid like structure.

  • (void) layout { [super layout]; if (_direction == CCLayoutBoxDirectionHorizontal) { // Existing Code... } else if(_direction == CCLayoutBoxDirectionVertical) { // Existing Code... } else if(_direction == CCLayoutBoxDirectionGrid) // We need a Grid Like Structure {
    if (self.children.count != _rowsInGrid * _columnsInGrid) { CCLOG(@"CCLayoutBox ERROR: Total No. of children is not equal to grid size"); } else // Positioning the nodes { // Get the maximum width and height float maxWidth = 0; float maxHeight = 0; for (CCNode* child in self.children) { float width = child.contentSizeInPoints.width; float height = child.contentSizeInPoints.height; if (width > maxWidth) maxWidth = width; if (height > maxHeight) maxHeight = height; } float height = 0; for (NSInteger rowCount = 0; rowCount < _rowsInGrid; rowCount++) {
    float width = 0;
    // Rowwise distribution for (NSInteger columnCount = 0; columnCount < _columnsInGrid; columnCount++) {

                CCNode *child = [self.children objectAtIndex:(rowCount * _rowsInGrid + columnCount)];
                CGSize childSize = child.contentSizeInPoints;
                CGPoint offset = child.anchorPointInPoints;
                CGPoint localPos = ccp(roundf(width), roundf((maxHeight-childSize.height)/2.0f - height) );
                CGPoint position = ccpAdd(localPos, offset);
    
                child.position = position;
                child.positionType = CCPositionTypePoints;
    
                // Increasing the width after traversing each child
                width += childSize.width;
                width += _spacing;
            }
    
            height += maxHeight/2;
            height += _spacing;                
        }
    }    
    

    } }

// ====================================== // USAGES OF CCLayoutBox with CCLayoutBoxDirectionGrid // ======================================

    // Creating a CCLayout Box for creating the Level Grid

    CCLayoutBox *layoutBox = [[CCLayoutBox alloc] init];
    layoutBox.anchorPoint = ccp(0.5, 0.5);

    // Adding 9 Level Selecting Button as a grid in the middle of the screen
    for (int i = 0; i &lt; 9; i++) {
        CCButton* singleButton = [CCButton buttonWithTitle:[NSString stringWithFormat:@&quot;%d&quot;,i+1] fontName:@&quot;AmericanTypewriter-Bold&quot; fontSize:40.0];
        singleButton.name = [NSString stringWithFormat:@&quot;%d&quot;,i+1];
        selectedLevel = [NSNumber numberWithInt:i+1];
        [singleButton setTarget:self selector:@selector(loadGameLevel:)];
        [layoutBox addChild:singleButton];

    }

    // Configuring the layout for the level grid
    layoutBox.spacing = 30.0f;
    layoutBox.rowsInGrid = 3;
    layoutBox.columnsInGrid = 3;
    layoutBox.direction = CCLayoutBoxDirectionGrid;
    [layoutBox layout];
    layoutBox.positionType = CCPositionTypeNormalized;
    layoutBox.position = ccp(0.9f,0.9f);
    [&lt;CCScene&gt; addChild:layoutBox];
Attachments

Status: New

Labels:
Type-Defect Priority-Medium