Coloring sprites in Cocos2d

Tutorial about how to change the color of a white sprite.

I used this sprite for the tutorial it is a white block so you can’t see it but it is there.


Add four sprites and a bool value to HelloWorldScene.h  like so.

@interface HelloWorld : CCLayer
CCSprite *_Square;
CCSprite *_RedSquare;
CCSprite *_GreenSquare;
CCSprite *_BlueSquare;
bool _SquareTouched;

Now change HelloWorldScene.m to look like the following.

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

CGSize winSize = [[CCDirector sharedDirector] winSize];

self.isTouchEnabled = YES;

_Square =[CCSprite spriteWithFile:@"whiteSquare.jpg"];
_Square.position = ccp(winSize.width/2,winSize.height/2);
[self addChild:_Square];
return self;

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch* myTouch = [touches anyObject];
CGPoint location = [myTouch locationInView: [myTouch view]];
location = [[CCDirector sharedDirector]convertToGL:location];

CGRect MoveableSpriteRect = CGRectMake(_Square.position.x(_Square.contentSize.width/2),

if (CGRectContainsPoint(MoveableSpriteRect, location)) {

-(void) ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *myTouch = [touches anyObject];
CGPoint point = [myTouch locationInView:[myTouch view]];
point = [[CCDirector sharedDirector] convertToGL:point];
[_Square setPosition:point];

-(void) ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

The above code allows the user to click and drag the  _Square sprite.

Now for the new code, add this to your init method.

_RedSquare=[CCSprite spriteWithFile:@"whiteSquare.jpg"];
_RedSquare.position = ccp(winSize.width-_RedSquare.contentSize.width/2,_RedSquare.contentSize.height/2);
[_RedSquare setColor:ccc3(255,0,0)];
[self addChild:_RedSquare];

_BlueSquare=[CCSprite spriteWithFile:@"whiteSquare.jpg"];
_BlueSquare.position = ccp(_BlueSquare.contentSize.width/2,winSize.height-_BlueSquare.contentSize.height/2);
[_BlueSquare setColor:ccc3(0,0,255)];
[self addChild:_BlueSquare];

_GreenSquare=[CCSprite spriteWithFile:@"whiteSquare.jpg"];
_GreenSquare.position = ccp(winSize.width-_GreenSquare.contentSize.height/2,winSize.height-_GreenSquare.contentSize.height/2);
[_GreenSquare setColor:ccc3(0,255,0)];
[self addChild:_GreenSquare];

We have now created three sprites and changed there colors by setColor:ccc3(red, green, blue).

Download the code for Coloring sprites in Cocos2d

Continue on with the next tutorial Collision in Cocos2d

Copy right Britney Lee Johnson August 2010.

This entry was posted in cocos2d. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>