How to layer a CCSprite on top of a CCSprite?

Question

In my game, I have a series of avatars, currently each avatar has a small rectangular container to denote that this image is a button and can be clicked.

However, I've realised that I need to change the color of the container to denote a visual effect (such as the button click).

For example:

Off state = Grey container. On state = Red container

Rather than repeating each avatar with the off/on state on, I'd like to seperate the container and the avatars, a bit like this crude drawing;

+------+    +------+  
|      |    |      |    O
| OFF  |    | ON   |   / \
|      |    |      |   --- 
+------+    +------+

Thus, we seperate the off container, the on container and the avatars.

Then, in my game I want to be able to re-construct the sprite with the layers I want to use, in addition I want the newly constructed sprite to act like a singular CCSprite, so I can position it properly, or do other things with the sprite.

Sorta like creating a CCSprite from various CCSprites layered on top of each other.

Thus, how can I layer multiple sprites on top of each other, and then create a CCSprite using layered CCSprites?

Thanks.

/Edit: Added some code.

I have created some code using CCLayer and then added my sprites as part of a layer.

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:
         @"avatars.plist"];

        CCSpriteBatchNode *spriteSheet = [CCSpriteBatchNode 
                                          batchNodeWithFile:@"avatars.png"];
        [self addChild:spriteSheet];

        CCSprite *empty = [CCSprite spriteWithSpriteFrameName:@"hold_empty.png"];
        CCSprite *boss1 = [CCSprite spriteWithSpriteFrameName:@"hold_boss_1.png"];

        CCLayer *holderExample = [[CCLayer alloc] init];
        [holderExample setContentSize:CGSizeMake(70, 72)];
        [holderExample setPosition:CGPointMake(100, 100)];
        [holderExample addChild:empty];
        [holderExample addChild:boss1];

        [self addChild:holderExample];

This seems to make a layer with two sprites inside it. This seems right, but I'm not sure if this is correct because I'm not sure if I can make it clickable, or handle other events.

In addition, I'm wanting to add a layer for the color.

In Z-Order:

1) -2 empty.png

2) -1 color layer

3) 0 avatar

Answer 1

You can make images for the on/off states and add as child of a custom CCSprite that has the on, off and avatar images. Also, you can apply a color to the avatar to make the selection effect. Don't know if this is exactly what you need.

//Edit1 Check this sources and let me know if this is what you need. Is pretty simple what i did just to show you what i mean about the color. Hope this help https://rapidshare.com/files/3668681798/TestAvatar.zip