Cocos2D - Fill a Sprite with a pattern

Question

I have a CCSprite with a certain shape in Cocos2D and I would like to fill it with a pattern, as seen here:

I've seen a lot of examples where they fill a rectangle with a pattern, or even a dynamically-created polygon, but not another CCSprite. Is it possible to do so?

Thanks!

Answer 1

You have to do two things here:

1. Create a repeating sprite
2. Mask it with the shape

For the repeating sprite you will need a texture that has POT (Power Of Two) sides, e.g. 256x256. When you load your tiled texture you need to set its parameters to repeat:

CCSprite* sprite = [CCSprite spriteWithFile:@"tiled_tex.png"];
ccTexParams params;
params.minFilter = GL_LINEAR;
params.magFilter = GL_LINEAR;
params.rapS = GL_REPEAT;
params.wrapT = GL_REPEAT;
[sprite.texture setTexParameters:&params];

Now when you set your sprites content size it will draw a repeated texture.

Masking part is a bit trickier it would be easiest to have a shader that takes as a parameter the masking texture. Since it is a bit bigger task, here is a mask shader for cocos2d someone else made: Mask Shader for Cocos2D. I have not used this code, but from the looks of it it should work quite well.