Cocos2d populate layer based on menu in a different layer

Question

I'm working on a species ID app and would like to populate a layer with sprites based on which animal you select on the main layer. I've made each animal a menu item, and can get my info layer to appear when pressing the button, but how can I set it up so the layer shows the right data depending on which animal you select? The info layer is not a full screen layer, but rather an overlaying layer that only fills about 75% of the screen, which is why I'm going with a layer rather than a scene. I know I can create a new layer for each animal (approx 50) and code it so each button calls its own layer, but I think populating based on which button is pressed would make for cleaner code. If flamingoButton is pressed, sprite is filled with flamingo.png and label is populated with flamingo information. How do I get my info layer to listen to the buttons on the main layer?

MainLayer.m code:

-(id) init
{
    if( (self=[super init])) 
    {        
        CCMenuItemImage *flamingoButton = [CCMenuItemImage itemFromNormalImage:@"Explore-sign.png" selectedImage:@"Explore-sign.png" target:self selector:@selector(showSecondLayer:)];
        flamingoButton.position = CGPointMake(0, 60);
        flamingoButton.tag = 101;
        CCMenu *menu = [CCMenu menuWithItems:flamingoButton, nil];
        [self addChild:menu];
    }
    return self;
}

-(void) showSecondLayer: (id) sender
{    
    CCMenuItemImage *item = (CCMenuItemImage *) sender;
    int itemID = item.tag;

    secondLayer = [SecondLayer node];
    secondLayer.position = CGPointMake(0, 700);
    [self addChild:secondLayer];
    CCMoveTo *moveLayer = [CCMoveTo actionWithDuration:1.0 position:CGPointMake(0, 0)];
    [secondLayer runAction:moveLayer];
}

SecondLayer.m (the info layer)

-(id) init
{
    if( (self=[super init])) 
    {

        //Change this sprite image based on button from main layer. I don't have it coded in yet, but I understand the concept of putting a variable in the file string using %@ or %d

        CCSprite *infoCard = [CCSprite spriteWithFile:@"species1.png"];
        infoCard.anchorPoint = CGPointMake(0.5, 0);
        infoCard.position = CGPointMake(512, 0);
        [self addChild:infoCard];    
    }
    return self;
}

I am trying to figure out your question now .. but, as a quick tip: Developers using cocos2d usually use ccp(x,y) macro to creat CGPoints, instead of CGPointMake — Mazyod, Mar 01 '12 at 20:36
@Mazyod Why is that? Most of my coding is going through dozens of forums, blogs and books and copying/pasting/editing/etc and I've seen it both ways, even in the same code sets. Is there an advantage or is it aesthetic? I'm new to Cocos2d and am noticing a lot of these descrepencies. — BobbyScon, Mar 01 '12 at 20:39
Well, up till now, I think its just a matter of convenience. But, if you use it instead of CGPointMake there is an advantage: You don't have to worry if cocos2d staff decide to use another point system. They'll change ccp macro to something else, and your code will obey. (Same idea goes with NSInteger. It is defined as an int, but will definitely change to long in the future. So, we don't use int, we use NSInteger). — Mazyod, Mar 01 '12 at 20:51

hspain · Answer 1 · 2012-03-01T21:36:24.997

1

Give each menu item a unique id. In the method which you invoke on the tap of the button, you can reference the id of the sender. Use this id to populate the new layer with the unique information.

- (void) buttonPressed: (id) sender
{
    MenuItem* item = (MenuItem*) sender;
    int itemID = item.tag;

    // Get unique data based on itemID and add new layer
}

EDIT: Per your code updates

-(void) showSecondLayer: (id) sender
{    
    CCMenuItemImage *item = (CCMenuItemImage *) sender;
    int itemID = item.tag;

    secondLayer = [SecondLayer node];
    [secondLayer setItem: itemID]; // ADDED
    secondLayer.position = CGPointMake(0, 700);
    [self addChild:secondLayer];
    CCMoveTo *moveLayer = [CCMoveTo actionWithDuration:1.0 position:CGPointMake(0, 0)];
    [secondLayer runAction:moveLayer];
}

SecondLayer.m (the info layer)

-(id) init
{
    if( (self=[super init])) 
    {
        // Removed
    }
    return self;
}

-(void) setItem: (int) item
{
    CCSprite *infoCard = [CCSprite spriteWithFile:[NSString stringWithFormat:@"species%d", item]];
    infoCard.anchorPoint = CGPointMake(0.5, 0);
    infoCard.position = CGPointMake(512, 0);
    [self addChild:infoCard]; 
}

edited Mar 01 '12 at 21:36

answered Mar 01 '12 at 18:30

hspain

17,528
5
19
31

OK, that concept makes sense to me, but I'm not sure how to implement it. How would my SecondLayer code know that flamingoButton was pressed? I've added my code above. Sorry, I'm very new to Cocos2d and am still trying to wrap my head around some concepts. Thanks for the super quick response! – BobbyScon Mar 01 '12 at 18:44
You will add your SecondLayer inside the buttonPressed method. You need to store your "flamingo" data somehow, just give it a unique id and ensure that the button you want to show the flamingo data has that id that means "flamingo". If you show how you are doing it now, it will be easier to show you how you need to change your method. – hspain Mar 01 '12 at 19:14
I've added your code to mine, but had to adjust it a bit because I'm using CCMenuItemImage not CCMenuItem, so I replaced `item.id` with `item.tag`. How do I get SecondLayer to read itemID? – BobbyScon Mar 01 '12 at 20:37

Mazyod · Accepted Answer · 2012-03-01T21:39:31.310

Ok, this might work:

//MainLayer:
-(id) init
{
    if( (self=[super init])) 
    {        
        CCMenuItem *flamingoButton = [CCMenuItemImage itemFromNormalImage:@"Explore-sign.png" 
                                                            selectedImage:@"Explore-sign.png" 
                                                                   target:self 
                                                                 selector:@selector(showSecondLayer:)];
        flamingoButton.position = ccp(0, 60);
        flamingoButton.tag = 1;
        CCMenu *menu = [CCMenu menuWithItems:flamingoButton, nil];
        [self addChild:menu];
    }
    return self;
}

-(void) showSecondLayer: (CCMenuItem*) sender
{    
    secondLayer = [SecondLayer layerWithTag:[sender tag]];
    secondLayer.position = ccp(0, 700);
    [self addChild:secondLayer];
    CCMoveTo *moveLayer = [CCMoveTo actionWithDuration:1.0 position:ccp(0, 0)];
    [secondLayer runAction:moveLayer];
}

//Second Layer.h
+(id)layerWithTag:(NSInteger)aTag;
-(id) initWithTag:(NSInteger)aTag;

//Second Layer.m:
+(id)layerWithTag:(NSInteger)aTag {
    return [[[SecondLayer alloc] initWithTag:aTag] autorelease];
}

-(id) initWithTag:(NSInteger)aTag
{
    if( (self=[super init])) 
    {

        //Change this sprite image based on button from main layer. I don't have it coded in yet, but I understand the concept of putting a variable in the file string using %@ or %d

        CCSprite *infoCard = [CCSprite spriteWithFile:[NSString stringWithFormat:@"species%d.png", aTag]];
        infoCard.anchorPoint = ccp(0.5, 0);
        infoCard.position = ccp(512, 0);
        [self addChild:infoCard];    
    }
    return self;
}

EDIT:

Even though the previous solution works, it's not intuitive, and I feel I am breaking some OOP concepts. Most importantly, it is only useable given that your info about the animal can be retrieved using a single int! .. Using it this way is a BIT better, it's totally up to you to decide:

Ehm, so, I would suggest you set up an Entity Class first:

//AnimalResources.h
#import "Blahblahblah"

//Give it a good name, I was always bad at Science:
@interface AnimalResources {
    //load all your properties:
    NSString* info;
    CCSprite* sprite;
    ...
}

//set the properties as needed:
//Make sure you properly manage this!! It is retained!
@property (nonatomic, retain) CCSprite* sprite;
...

//method prototype (signature.. am not sure)
//Now, we shall build on the fact that it will be easy for you to map an integer to the right resources:
+(id)animalResourcesWithTag:(NSInteger)aTag;
-(id)initAnimalResourcesWithTag:(NSInteger)aTag;

//AnimalResources.m:'

@synthesize sprite, ... ;

+(id)animalResourcesWithTag:(NSInteger)aTag {
    [[[AnimalResources alloc] initAnimalResourcesWithTag:aTag] autorelease];
}
-(id)initAnimalResourcesWithTag:(NSInteger)aTag {
    if ((self = [super init])) {
        //use tag to retrieve the resources:
        //might use the stringFormat + %d approach, or have a dictionary/array plist, that maps an int to a dictionary of resource keys.

        //string way of doing things:
        self.sprite = [CCSprite spriteWithFile:[NSString stringWithFormat:@"species%d.png", aTag]];
        ...

        //Dictionary: dict/array is an NSDictionary/NSArray read from disk sometime. Don't read it here, since it 
        //will read the file from disk many times if you do --> BAD. I could explain a rough way to do that if you 
        //need help
        animalDict = [dict objectForKey:[NSString stringWithFormat:@"species%d.png", aTag]];
        //OR...
        animalDict = [array objectAtIndex:aTag];
        //better to have @"spriteNameKey" defined in a macro somewhere: #define kAnimalResourceKeySprite @"SpriteKey"
        self.sprite = [CCSprite spriteWithFile:[animalDict objectForKey:@"SpriteNameKey"]];
        ....
    }
    return self;
}

Phew! Then .. you guessed it!

    -(void) showSecondLayer: (CCMenuItem*) sender
    {    
        secondLayer = [SecondLayer layerWithAnimalResources:[AnimalResources animalResourcesWithTag:[sender tag]]];
        secondLayer.position = ccp(0, 700);
        [self addChild:secondLayer];
        CCMoveTo *moveLayer = [CCMoveTo actionWithDuration:1.0 position:ccp(0, 0)];
        [secondLayer runAction:moveLayer];
    }

    //Second Layer.h
    +(id)layerWithAnimalResources:(AnimalResources*)resource;
    -(id)initWithAnimalResources:(AnimalResources*)resource;

    //Second Layer.m:
    +(id)layerWithAnimalResources:(AnimalResources*)resource {
        return [[[SecondLayer alloc] initWithAnimalResources:aTag] autorelease];
    }

    -(id) initWithAnimalResources:(AnimalResources*)resource
    {
        if( (self=[super init])) 
        {

            //Change this sprite image based on button from main layer. I don't have it coded in yet, but I understand the concept of putting a variable in the file string using %@ or %d

            CCSprite *infoCard = [resource sprite];
            infoCard.anchorPoint = ccp(0.5, 0);
            infoCard.position = ccp(512, 0);
            [self addChild:infoCard];    
        }
        return self;
    }

That appears to work. It does at least swap out the species.png file when I add a second button with a tag of 2. I am getting a warning on `secondLayer = [SecondLayer layerWithTag:[sender tag]];` that says `Class method '+layerWithTag:' not found (return type defaults to 'id')` And the same warning in the SecondLayer code. Could I use this tag to call from a plist with my species data on it? I'm not asking for you to explain it out (but feel free), but more if that would be an appropriate approach to it rather than coding it into the layer. — BobbyScon, Mar 01 '12 at 21:02
About the warning, you have to add the method signatures to the header file (*.h): +(id)layerWithCardName:(NSString*)name; .. or if you chose the tag way of doin it. About calling from a plist, of course you can! But, I would suggest you add some sort of Mapper (Dictionary) that maps tags (int) to file infos, for less coupling. — Mazyod, Mar 01 '12 at 21:08
Well, the issue with the second set of code you put in is that it's specifying the .png file only. I guess I should clarify that the SecondLayer will be displaying a photo of the animal, text about the animal, a graph that relates to that species, and if there are mutlimedia files, those will also show. My SecondLayer will need to read more along the lines of `if atag = 1 then show photo1 label1 video1` etc. Clearly that isn't real code. I hope that makes sense what my end goal is though. Maybe I'm misreading your edited code. — BobbyScon, Mar 01 '12 at 21:09
Not at all! Your point is loud and heard (if THAT makes sense). I just assumed it was just an image displayed. Well, let me update my answer one more time, because I am going to change many stuff. — Mazyod, Mar 01 '12 at 21:12
D'oh! Missed the SecondLayer.h portion of your code that clears up that warning. All good there now. The multiple items that will relate to the species issue is the reason I'm thinking I should investigate going the plist route. I'll look into how to implement that and a dictionary. — BobbyScon, Mar 01 '12 at 21:23
Check out the entity class approach.. Will tidy things up a bit :) — Mazyod, Mar 01 '12 at 21:35
Holy crap .. I made a gazillion errors.. Using self is important to retain the variable >_<. And the dictionary will have info ABOUT the sprite, not the actual sprite! — Mazyod, Mar 01 '12 at 21:40

Cocos2d populate layer based on menu in a different layer

2 Answers2

EDIT: