How to make CCScrollLayer have multiple avatars per page

Question

I have a list of about 10 avatars and I am using CCScrollLayer to display paging. Currently, it only shows 1 avatar per page, and I would much prefer if it showed 3 avatars per page but I am unsure of how to do this.

I've attempted to ensure that a new page only generates if there is a MODULUS of 3, but it causes issues because parts of the code needs to be available, such as adding things to the menu.

When I try to use a MODULUS (tied to an if statement) it complains that my menu is out of scope.

My code follows;

// Avatars are generally 70x72
//
GameStateManager *state = [GameStateManager sharedGameStateManager];        
NSLog(@"listOfPlayers.size = %d", [state.listOfPlayers count]);

// Menu of playable characters        
int i=0;

NSMutableArray *pagesArray = [NSMutableArray array];

// --


for (Player *p in state.listOfPlayers) 
{


    // create a blank layer for page
    CCLayer *page = [CCLayer node];
    [page setContentSize:CGSizeMake(200, 100)];

    CCMenu *menu = [CCMenu menuWithItems:nil];
    [menu setContentSize:CGSizeMake(200, 72)];
    [menu alignItemsHorizontallyWithPadding:9.0f];
    [page addChild:menu];


    // --

    NSLog(@"p: %@ (%@) -- locked: %d, playable: %d", p.name, p.fileName, [p.isLocked intValue], [p.isPlayable intValue]);
    //int isLocked    = [p.isLocked intValue];
    int isPlayable  = [p.isPlayable intValue];
    NSString *fileName = [NSString stringWithFormat:@"hold_%@", p.fileName];

    //if ( (isLocked == 0) && (isPlayable == 1) )
    if  (isPlayable == 1) 
    {

        CCSprite *avatarOff = [CCSprite spriteWithSpriteFrameName:fileName];
        CCSprite *avatarOn = [CCSprite spriteWithSpriteFrameName:fileName];

        CCMenuItemSprite *menuItem = [CCMenuItemSprite itemFromNormalSprite:avatarOff selectedSprite:avatarOn target:self selector:nil];
        [menuItem setTag:i];
        [menu addChild:menuItem];

        [pagesArray addObject:page];

        i++;
    }

} // next


// Now create the scroller and pass-in the pages (set widthOffset to 0 for fullscreen pages)
CCScrollLayer *scroller = [[CCScrollLayer alloc] initWithLayers:[NSMutableArray arrayWithArray:pagesArray] widthOffset: 200];


// finally add the scroller to your scene
[self addChild:scroller];

Screenshot follows. It shows 1 avatar per page.

paging avatars

YvesLeBorg · Accepted Answer · 2012-02-04T18:58:18.823

1

seems to me your are seeing what you are programming. Try

// Avatars are generally 70x72
//
GameStateManager *state = [GameStateManager sharedGameStateManager];        
NSLog(@"listOfPlayers.size = %d", [state.listOfPlayers count]);

// Menu of playable characters        
int i=0;

NSMutableArray *pagesArray = [NSMutableArray array];

// --

CCLayer *page=nil;
CCMenu *menu=nil;
int avisOnPage=0;


for (Player *p in state.listOfPlayers) 
{

  if(0==avisOnPage) {
    // create a blank layer for page
    page = [CCLayer node];
    [page setContentSize:CGSizeMake(200, 100)];

    menu = [CCMenu menuWithItems:nil];
    [menu setContentSize:CGSizeMake(200, 72)];
    [menu alignItemsHorizontallyWithPadding:9.0f];
    [page addChild:menu];
    [pagesArray addObject:page];
  } // if new page

// --

  NSLog(@"p: %@ (%@) -- locked: %d, playable: %d", p.name, p.fileName, [p.isLocked intValue], [p.isPlayable intValue]);
  //int isLocked    = [p.isLocked intValue];
  int isPlayable  = [p.isPlayable intValue];
  NSString *fileName = [NSString stringWithFormat:@"hold_%@", p.fileName];

  //if ( (isLocked == 0) && (isPlayable == 1) )
  if  (isPlayable == 1) 
  {

    CCSprite *avatarOff = [CCSprite spriteWithSpriteFrameName:fileName];
    CCSprite *avatarOn = [CCSprite spriteWithSpriteFrameName:fileName];

    CCMenuItemSprite *menuItem = [CCMenuItemSprite itemFromNormalSprite:avatarOff selectedSprite:avatarOn target:self selector:nil];
    [menuItem setTag:i];
    [menu addChild:menuItem];
    avisOnPage++;
    i++;

    if(3==avisOnPage) avisOnPage=0;
  } // if isPlayable
} // for player


// Now create the scroller and pass-in the pages (set widthOffset to 0 for fullscreen pages)
CCScrollLayer *scroller = [[CCScrollLayer alloc] initWithLayers:pagesArray widthOffset: 200];


// finally add the scroller to your scene
[self addChild:scroller];

edited Feb 04 '12 at 18:58

answered Feb 04 '12 at 18:32

YvesLeBorg

9,070
8
35
48

I get an error where it says `[menu addChild:menuItem];` because `NewGameLayer.mm:103: error: 'menu' was not declared in this scope`. – zardon Feb 04 '12 at 18:47
I tried wrapping it in an if statement, but no joy. And I moved the menu out of the if statement, but only a few of the avatars appear. – zardon Feb 04 '12 at 18:51
true, have moved the menu declaration near page. Each page will have a 'menu' in the logic i proposed. If you need differently ... – YvesLeBorg Feb 04 '12 at 18:59
Nearly there! The avatars are layered on top of each other. I'm currently playing about with the code to see if I can force each menu to be a fixed width of saying 100 x 72. – zardon Feb 05 '12 at 08:27
I think I've got it. If I change the widthOffset I can get more things displayed `CCScrollLayer *scroller = [[CCScrollLayer alloc] initWithLayers:pagesArray widthOffset: 400];` it also works without the need of `avisOnPage` but I will continue to tweak and experiment to see if this helps – zardon Feb 05 '12 at 09:05
Your answer is accepted, although I don't like CCScrolllayers inability to have a content size or clip size. But I guess it'll do for now until I can get my game to work – zardon Feb 05 '12 at 19:28
@zardon good approach, make it work, get your bearings on the function, then optimze and refine as needed. – YvesLeBorg Feb 05 '12 at 22:42
I'm going to try a few scrolllayer solutions, including one that uses UIScrollView to see if that makes it better. Anyway, thanks @YvelsLeBorg for your help and assistance – zardon Feb 06 '12 at 04:37
Although I've accepted your answer, it doesn't really work. The Scrollview seems very unresponsive and ideally I'd like to have 3 avatars per page with the avatar on the furthest left rather than its current default position in the centre. Granted, this requires customization; thus I will leave it for now and set up a paid project for it as I need this mechanic throughout my app. Thanks – zardon Feb 11 '12 at 07:21

How to make CCScrollLayer have multiple avatars per page

1 Answers1