Using CCMenuAdvanced - Cocos2d

Question

I'm trying to make an items scroller of sorts for my game. I decided upon the extension CCMenuAdvanced, and I was able to implement a working menu list with working buttons. However, I don't quite understand how to properly contain my menu inside a boundaryRect. It is clear to me that boundaryRect does not make "out of bounds" part of the menu list disappear - it seems to only be responsible for scrolling. The question then is what else do I have to do to get a self-contained items list using CCMenuAdvanced that becomes invisible and unresponsive when no longer in the boundary? Do I have to schedule an additional update method that tracks the location of individual elements and changes their opacity and visibility or is there a supported solution to this?

    NSArray *menuItems = [self labelsFromInventory];
    CCMenuAdvanced *menu = [CCMenuAdvanced menuWithItems: nil]; 
    for (CCMenuItem *item in menuItems)
        [menu addChild: item];  

    [menu alignItemsVerticallyWithPadding: 10 bottomToTop: NO]; //< also sets contentSize and keyBindings on Mac
    //menu.isRelativeAnchorPoint = YES; 
    menu.position = ccp(30, 40);
    [self addChild:menu z:2 tag:101];

    menu.scale = MIN ((winSize.width / 2.0f) / menu.contentSize.width, 0.75f );
    menu.boundaryRect = CGRectMake(menu.position.x, menu.position.y, 190.0, 20.0);
    [menu fixPosition];

Thanks

Answer 1

I started off with CCMenuAdvanced to create a menu that clamps in a boundary box. Instead of moving the position of the menu, i chose to move the position of the menu items contained in the menu. This gave me the ability to set the visibility and other properties of the menu items if they were going to be outside the boundaries (I added a boundaryBox property to the menu, as well as properties for spacing between menu items, height of a top and bottom buffer zone in points). My scrolling menu also provides a top and bottom buffer zone where i fade out the menu item when nearing the top or bottom.

I determine in the ccTouchMoved method whether a move is possible or not (ie the menu items are already at the maximum Y or minimum Y they could be). If a move is possible, I apply the deltaY to all the menu items and set each menu item's opacity and visibility properties. The hard part was the clamping.

Answer 2

Unfortunately in Cocos2d, items don't clip to bounds. So when an item escapes its boundaries, it just continues going until a) it leaves the main window boundaries or b) it falls "under" another item in the z-order.

To do what you wish, you can first try to add another sprite to the layer that is an "opacity mask" of sorts that is higher in the z-order than the scrollable portion so that, when the item scrolls beyond the bounds of its container, it will be "hidden" by the higher z-order item.

The alternate route, and the one I took, was using a UIView (in my case, a UITableView) and wrapping it using the CCUIViewWrapper to add it onto the window. In that case, you would have to keep in mind that the UIView item will ALWAYS be placed above everything in your GL view and it doesn't exactly play nicely with things, so it does take a bit of finesse to get working. The good news is that you can use Interface Builder to design your interface and you'll get scroll masking, etc. right out of the box.

Either way is a trade-off; there is really no simple solution to this in Cocos2d currently -- at least, none that I know of.