Here’s the thing, Flash can color a sprite in ways that vanilla Cocos2d does not. We’ve seen quite a few articles on the web about how to color a CCSprite in order to use one sprite for a variety of purposes. And they have been excellent articles at that, here’s a couple if you want to check them out:

• Cheetah Lurk’s: Coloring Sprites with Cocos2d-iPhone
• Brandon Trebs’: Cocos2D Tutorial – Dynamically Coloring Sprites

And this works incredibly well… until you need additive coloring. And don’t even think about tinting, that’s a whole new level of crazy.  You might be saying, there’s CCTintTo and CCTintBy actions in Cocos2d, it CAN tint. Well we’ll leave that to semantics, but to me CCTintTo and CCTintBy are not tinting anything. It’s just more of the same “subtractive” style of coloring that we get with Cocos2d. Before we go on, if you don’t know how to color a sprite as illustrated in the two articles above, I recommend you check them out. I’ll go into it with slight detail but it’s going to be important that you understand it because much of the same methods will be employed to get our additive and tinting effects.

Seeing is Believing

Okay so before I explain how we’re going to achieve coloring bliss let’s just take a look at what we’re going to be able to do.

Has this got you excited? No. Okay well let me explain. I took the same graphic created 3 sprites and used three different coloring methods to apply a setColor of pure blue. So in other words I ran [sprite setColor:ccc3(0, 0, 255)] on all three sprites and produced different results.

• SPRITE – This is our wonderful sprite before we’ve done any coloring.
• DEFAULT – This is standard cocos2d way of coloring sprites. If you are wondering what really happened here then let me explain. We didn’t add any blue on the contrary we removed all the red and green. By setting red and green to 0 we removed all of their color from the sprite.
• ADD – This is the first new method of coloring that we are going to discuss. In this situation we did the exact opposite of what Cocos2d does by default. Instead of subtracting red and green, we added blue. Using this we can turn a black sprite any color but a white sprite will always stay white. Also using add we have to set the color to ccc3(0, 0, 0) by default instead of ccc3(255, 255, 255) or every sprite will automatically appear white. It’s quite the reverse of the cocos2d standard
• TINT – My favorite, that took me a few headaches to figure out. We literally just turned every pixel in that sprite blue. And while, at the moment, this seems almost pointless you are missing the best part. I can turn it blue incrementally instead of completely by adding a new variable to control the amount of tinting.

Here’s some tinting in increments instead of all out. This is tinting to a magenta color ([sprite setColor:ccc3(255, 0, 255)]).  Tint amount is set on a 0-255 scale.

Now, if you are still not excited then this isn’t for you. Come back later when this looks like fun

How does this work, exactly?

It’s magic voodoo. Wait, no it’s something worse… OpenGL. I posed a question a few months back in the Cocos2d forums trying to produce the above tinting effect. What I wanted was Flash like tinting. In Flash I’ve always been able to use colorTransform and change incrementally any graphic to a color I wanted. This can be huge for games! I can make a character green if they are poisoned, red if they are burnt, flash if they are selected, the list goes on. But I couldn’t do this with Cocos2D without using at least two sprites. I even thought it was going to take two sprites no matter what I tried, I just wanted an easy solution. In the end the above effects are accomplished with one sprite, which makes me very happy.

So Birkemose on the Cocos2d forum pointed me in the right direction… openGL and glTexEnv. **Head explodes** Okay, okay, maybe not explode. In seriousness though, I spent the next few days breaking code repetitively searching for a solution and trying to understand with what I was dealing. Months later, I’m still not sure I fully understand

Okay so here’s the basics… we need to change up the texture  pipeline. If you want the full details of how what we are getting to experiment with works then read this, http://ofps.oreilly.com/titles/9780596804824/chadvanced.html. I do recommend the reading; however, if you just want to get things working just follow me for now.

Let’s get Additive

So if you’ve used Cocos2d before you know that all our OpenGL is performed in the draw call. So we know that’s where we are going to start and, for additive sprite coloring, it’s also where we are going to end.  So if you are following along with me, you have two choices either edit CCSprite directly or subclass it and copy the draw method from CCSprite into the subclass. I named my subclass CCSpriteAdd but you can do whatever you want.

Here’s what the CCSprite draw method looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

-(void) draw
{
 
[super draw];
 
NSAssert(!usesBatchNode_, @"If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");
 
// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Needed states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Unneeded states: -
 
BOOL newBlend = blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST;
if( newBlend )
glBlendFunc( blendFunc_.src, blendFunc_.dst );
 
#define kQuadSize sizeof(quad_.bl)
glBindTexture(GL_TEXTURE_2D, [texture_ name]);
 
long offset = (long)&quad_;
 
// vertex
NSInteger diff = offsetof( ccV3F_C4B_T2F, vertices);
glVertexPointer(3, GL_FLOAT, kQuadSize, (void*) (offset + diff) );
 
// color
 
diff = offsetof( ccV3F_C4B_T2F, colors);
glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize, (void*)(offset + diff));
 
// tex coords
diff = offsetof( ccV3F_C4B_T2F, texCoords);
glTexCoordPointer(2, GL_FLOAT, kQuadSize, (void*)(offset + diff));
 
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
 
if( newBlend )
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);
 
#if CC_SPRITE_DEBUG_DRAW == 1
// draw bounding box
CGPoint vertices[4]={
ccp(quad_.tl.vertices.x,quad_.tl.vertices.y),
ccp(quad_.bl.vertices.x,quad_.bl.vertices.y),
ccp(quad_.br.vertices.x,quad_.br.vertices.y),
ccp(quad_.tr.vertices.x,quad_.tr.vertices.y),
};
 
ccDrawPoly(vertices, 4, YES);
#elif CC_SPRITE_DEBUG_DRAW == 2
// draw texture box
CGSize s = self.textureRect.size;
CGPoint offsetPix = self.offsetPositionInPixels;
CGPoint vertices[4] = {
ccp(offsetPix.x,offsetPix.y), ccp(offsetPix.x+s.width,offsetPix.y),
ccp(offsetPix.x+s.width,offsetPix.y+s.height), ccp(offsetPix.x,offsetPix.y+s.height)
};
 
ccDrawPoly(vertices, 4, YES);
#endif // CC_SPRITE_DEBUG_DRAW
 
}

-(void) draw
{

[super draw];

NSAssert(!usesBatchNode_, @"If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");

// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Needed states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Unneeded states: -

BOOL newBlend = blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST;
if( newBlend )
glBlendFunc( blendFunc_.src, blendFunc_.dst );

#define kQuadSize sizeof(quad_.bl)
glBindTexture(GL_TEXTURE_2D, [texture_ name]);

long offset = (long)&quad_;

// vertex
NSInteger diff = offsetof( ccV3F_C4B_T2F, vertices);
glVertexPointer(3, GL_FLOAT, kQuadSize, (void*) (offset + diff) );

// color

diff = offsetof( ccV3F_C4B_T2F, colors);
glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize, (void*)(offset + diff));

// tex coords
diff = offsetof( ccV3F_C4B_T2F, texCoords);
glTexCoordPointer(2, GL_FLOAT, kQuadSize, (void*)(offset + diff));

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

if( newBlend )
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);

#if CC_SPRITE_DEBUG_DRAW == 1
// draw bounding box
CGPoint vertices[4]={
ccp(quad_.tl.vertices.x,quad_.tl.vertices.y),
ccp(quad_.bl.vertices.x,quad_.bl.vertices.y),
ccp(quad_.br.vertices.x,quad_.br.vertices.y),
ccp(quad_.tr.vertices.x,quad_.tr.vertices.y),
};

ccDrawPoly(vertices, 4, YES);
#elif CC_SPRITE_DEBUG_DRAW == 2
// draw texture box
CGSize s = self.textureRect.size;
CGPoint offsetPix = self.offsetPositionInPixels;
CGPoint vertices[4] = {
ccp(offsetPix.x,offsetPix.y), ccp(offsetPix.x+s.width,offsetPix.y),
ccp(offsetPix.x+s.width,offsetPix.y+s.height), ccp(offsetPix.x,offsetPix.y+s.height)
};

ccDrawPoly(vertices, 4, YES);
#endif // CC_SPRITE_DEBUG_DRAW

}

Okay first of all, if you are subclassing CCSprite, remove that [super draw] call. We need to get it out of the way because we are going to write a draw function in our subclass that replaces the one in CCSprite’s draw. If you are editing CCSprite directly then you’ll just make changes to the draw call. (This isn’t about speed or future proofing but about showing how to manipulate textures. If you would like to write a class after this is over that is optimized for these things then feel free to do so.)

Okay find the line that reads:

1

glBindTexture(GL_TEXTURE_2D, [texture_ name]);

glBindTexture(GL_TEXTURE_2D, [texture_ name]);

and add beneath it these lines so that it reads:

1
2
3
4
5

glBindTexture(GL_TEXTURE_2D, [texture_ name]);
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
//the magic
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_ADD);

glBindTexture(GL_TEXTURE_2D, [texture_ name]);
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
//the magic
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_ADD);

That’s it. That’s all the magic.  You may notice an issue, I’m forcing glBlendFunc here. That’s because you are going to need to use this blend function to make it work, there may be other setups that will work as well and may work better but for my case it worked perfectly. You can pull the blendFunc line out and set it on the sprite itself if you want to but this works fine.

Let’s break this down:

• glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE); Okay first we set the GL_TEXTURE_ENV_MODE to GL_COMBINE so we can combine the rgbs of our texture and color. (GL_ADD produces same results)
• glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_ADD); Now when it combines RGB it adds our sprite texture and the setColor color together. So if our sprite has a texture with a pixel that has 10 blue in it and our sprites color is set to 240 then our blue when appear at 250. This occurs in all 3 channels. So in other words, every pixel’s color has the color we set our sprite added to it until it reaches 255.

We’re done, except you really should do one more thing. Reset the glTexEnvi states back to default. If you don’t then every sprite rendered afterwards will go through the same process.

So at the very bottom of the draw method add:

1
2
3

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB,      GL_MODULATE);
glBlendFunc( CC_BLEND_SRC, CC_BLEND_DST );

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB,      GL_MODULATE);
glBlendFunc( CC_BLEND_SRC, CC_BLEND_DST );

That’s it. you’re draw function should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

-(void) draw
 
{
 
NSAssert(!usesBatchNode_, @"If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");
 
// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Needed states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Unneeded states: -
 
BOOL newBlend = NO;
if( blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST ) {
newBlend = YES;
glBlendFunc( blendFunc_.src, blendFunc_.dst );
}
 
#define kQuadSize sizeof(quad_.bl)
 
glBindTexture(GL_TEXTURE_2D, [texture_ name]);
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
//the magic
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_ADD);
 
long offset = (long)&quad_;
 
// vertex
NSInteger diff = offsetof( ccV3F_C4B_T2F, vertices);
glVertexPointer(3, GL_FLOAT, kQuadSize, (void*) (offset + diff) );
 
// color
diff = offsetof( ccV3F_C4B_T2F, colors);
glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize, (void*)(offset + diff));
 
// tex coords
diff = offsetof( ccV3F_C4B_T2F, texCoords);
glTexCoordPointer(2, GL_FLOAT, kQuadSize, (void*)(offset + diff));
 
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
 
if( newBlend )
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);
 
#if CC_SPRITE_DEBUG_DRAW
CGSize s = [self contentSize];
CGPoint vertices[4]={
ccp(0,0),ccp(s.width,0),
ccp(s.width,s.height),ccp(0,s.height),
};
 
ccDrawPoly(vertices, 4, YES);
 
#endif // CC_TEXTURENODE_DEBUG_DRAW
 
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB,      GL_MODULATE);
glBlendFunc( CC_BLEND_SRC, CC_BLEND_DST );
 
}

-(void) draw

{

NSAssert(!usesBatchNode_, @"If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");

// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Needed states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Unneeded states: -

BOOL newBlend = NO;
if( blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST ) {
newBlend = YES;
glBlendFunc( blendFunc_.src, blendFunc_.dst );
}

#define kQuadSize sizeof(quad_.bl)

glBindTexture(GL_TEXTURE_2D, [texture_ name]);
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
//the magic
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_ADD);

long offset = (long)&quad_;

// vertex
NSInteger diff = offsetof( ccV3F_C4B_T2F, vertices);
glVertexPointer(3, GL_FLOAT, kQuadSize, (void*) (offset + diff) );

// color
diff = offsetof( ccV3F_C4B_T2F, colors);
glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize, (void*)(offset + diff));

// tex coords
diff = offsetof( ccV3F_C4B_T2F, texCoords);
glTexCoordPointer(2, GL_FLOAT, kQuadSize, (void*)(offset + diff));

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

if( newBlend )
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);

#if CC_SPRITE_DEBUG_DRAW
CGSize s = [self contentSize];
CGPoint vertices[4]={
ccp(0,0),ccp(s.width,0),
ccp(s.width,s.height),ccp(0,s.height),
};

ccDrawPoly(vertices, 4, YES);

#endif // CC_TEXTURENODE_DEBUG_DRAW

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB,      GL_MODULATE);
glBlendFunc( CC_BLEND_SRC, CC_BLEND_DST );

}

Crazy simple, huh? If you are bored play with some of the different settings for GL_COMBINE_RGB including GL_REPLACE, GL_BLEND, and GL_ADD_SIGNED. I recommend trying out GL_ADD_SIGNED in place of GL_ADD as it can produce some very useful effects as well. GL_ADD_SIGNED can be used to remove and add a color to the rendered sprite.

Cocos2D Sprite Tinting: the Real Way

Okay so I recommend subclassing CCSprite again and name this sprite CCSpriteClr or CCSpriteTint or whatever you prefer. Copy the draw function, remove the [super draw] call and let’s get started adding code. But before we modify draw we are going to need a new variable called colorOpacity. colorOpacity will be the amount of tint we are applying to our sprite. We will also want to have setColorOpacity and colorOpacity methods so we can access it outside the sprite. You can synthesize this but I prefer to write the methods myself incase we need to modify how they function later. So my CCSpriteClr.h reads as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13

#import
#import "cocos2d.h"
 
@interface CCSpriteClr : CCSprite {
 
GLubyte colorOpacity;
 
}
 
-(void)setColorOpacity:(GLubyte)o;
-(GLubyte)colorOpacity;
 
@end

#import
#import "cocos2d.h"

@interface CCSpriteClr : CCSprite {

GLubyte colorOpacity;

}

-(void)setColorOpacity:(GLubyte)o;
-(GLubyte)colorOpacity;

@end

And the added functions to CCSpriteClr.m look like this:

1
2
3
4
5
6
7
8
9

-(GLubyte)colorOpacity
{
return colorOpacity;
}
 
-(void) setColorOpacity:(GLubyte)o
{
colorOpacity = o;
}

-(GLubyte)colorOpacity
{
return colorOpacity;
}

-(void) setColorOpacity:(GLubyte)o
{
colorOpacity = o;
}

Now you can call [sprite setColorOpacity:128]; to tint your sprite about 50%. Let’s jump to the draw method and start setting up our texture pipeline.

Like before find:

1

glBindTexture(GL_TEXTURE_2D, [texture_ name]);

glBindTexture(GL_TEXTURE_2D, [texture_ name]);

and add to it so it reads:

1
2
3
4
5
6
7
8
9
10
11
12
13

glBindTexture(GL_TEXTURE_2D, [texture_ name]);
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
float tinting[4] = { color_.r/255.0f, color_.g/255.0f, color_.b/255.0f, colorOpacity/255.0f };
glTexEnvfv(GL_TEXTURE_ENV, GL_TEXTURE_ENV_COLOR, tinting);
 
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB,      GL_INTERPOLATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB,         GL_TEXTURE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB,         GL_CONSTANT);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC2_RGB,         GL_CONSTANT);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB,   GL_ONE_MINUS_SRC_ALPHA);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_SUBTRACT);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

glBindTexture(GL_TEXTURE_2D, [texture_ name]);
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
float tinting[4] = { color_.r/255.0f, color_.g/255.0f, color_.b/255.0f, colorOpacity/255.0f };
glTexEnvfv(GL_TEXTURE_ENV, GL_TEXTURE_ENV_COLOR, tinting);

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB,      GL_INTERPOLATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB,         GL_TEXTURE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB,         GL_CONSTANT);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC2_RGB,         GL_CONSTANT);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB,   GL_ONE_MINUS_SRC_ALPHA);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_SUBTRACT);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

Wow, that’s a lot more code than before and it can be pretty confusing. There’s a lot of math involved and rather than explain it in detail allow me to simply touch on what is going on here.

• float tinting[4] = { color_.r/255.0f, color_.g/255.0f, color_.b/255.0f, colorOpacity/255.0f }; Here we are taking the color we set with setColor and mixing our colorOpacity in with it.
• glTexEnvfv(GL_TEXTURE_ENV, GL_TEXTURE_ENV_COLOR, tinting); We are setting the color that we will combine with our texture. The color of course being drawn from the tinting variable we created in the line before.
• glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB,      GL_INTERPOLATE); This thing (GL_INTERPOLATE) combines three separate sources to create our final product using this math: OutputColor = Arg0 ∗ Arg2 + Arg1 ∗ (1 − Arg2)
• glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB,         GL_TEXTURE); This is the first source which is our sprite texture.
  
• glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB,         GL_CONSTANT); glTexEnvi(GL_TEXTURE_ENV, GL_SRC2_RGB,         GL_CONSTANT); The second and third source are the same (GL_CONSTANT).  GL_CONSTANT refers to our GL_TEXTURE_ENV_COLOR that we set a few lines before.
• glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB,   GL_ONE_MINUS_SRC_ALPHA); We change the way we want  the third source  to mix with the others.
• glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_SUBTRACT); glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_ONE_MINUS_SRC_ALPHA); Change the way the alpha combines.

If you want to understand the math behind what is going on above then you can get all the information you need here: http://ofps.oreilly.com/titles/9780596804824/chadvanced.html

A much better person than I has explained how each of these different settings work at the above link. Using it you can probably create all kinds of cool effects.  But before we get off track we need to do one more thing, reset all our settings. So at the end of your draw function add this:

1
2
3
4
5
6
7

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_PREVIOUS);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_SRC_ALPHA);
 
glBlendFunc( CC_BLEND_SRC, CC_BLEND_DST );

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_PREVIOUS);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_SRC_ALPHA);

glBlendFunc( CC_BLEND_SRC, CC_BLEND_DST );

And your full draw function should look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

-(void) draw
{
NSAssert(!usesBatchNode_, @"If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");
 
// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Needed states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Unneeded states: -
 
BOOL newBlend = NO;
if( blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST ) {
newBlend = YES;
glBlendFunc( blendFunc_.src, blendFunc_.dst );
}
 
#define kQuadSize sizeof(quad_.bl)
 
glBindTexture(GL_TEXTURE_2D, [texture_ name]);
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
 
float tinting[4] = { color_.r/255.0f, color_.g/255.0f, color_.b/255.0f, colorOpacity/255.0f };
glTexEnvfv(GL_TEXTURE_ENV, GL_TEXTURE_ENV_COLOR, tinting);
 
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_INTERPOLATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB, GL_TEXTURE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_CONSTANT);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC2_RGB, GL_CONSTANT);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB, GL_ONE_MINUS_SRC_ALPHA);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_SUBTRACT);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
 
long offset = (long)&quad_;
 
// vertex
NSInteger diff = offsetof( ccV3F_C4B_T2F, vertices);
glVertexPointer(3, GL_FLOAT, kQuadSize, (void*) (offset + diff) );
 
// color
diff = offsetof( ccV3F_C4B_T2F, colors);
glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize, (void*)(offset + diff));
 
// tex coords
diff = offsetof( ccV3F_C4B_T2F, texCoords);
glTexCoordPointer(2, GL_FLOAT, kQuadSize, (void*)(offset + diff));
 
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
 
if( newBlend )
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);
 
#if CC_SPRITE_DEBUG_DRAW
CGSize s = [self contentSize];
CGPoint vertices[4]={
ccp(0,0),ccp(s.width,0),
ccp(s.width,s.height),ccp(0,s.height),
};
ccDrawPoly(vertices, 4, YES);
#endif // CC_TEXTURENODE_DEBUG_DRAW
 
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_PREVIOUS);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_SRC_ALPHA);
 
glBlendFunc( CC_BLEND_SRC, CC_BLEND_DST );
 
}

-(void) draw
{
NSAssert(!usesBatchNode_, @"If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");

// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Needed states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Unneeded states: -

BOOL newBlend = NO;
if( blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST ) {
newBlend = YES;
glBlendFunc( blendFunc_.src, blendFunc_.dst );
}

#define kQuadSize sizeof(quad_.bl)

glBindTexture(GL_TEXTURE_2D, [texture_ name]);
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );

float tinting[4] = { color_.r/255.0f, color_.g/255.0f, color_.b/255.0f, colorOpacity/255.0f };
glTexEnvfv(GL_TEXTURE_ENV, GL_TEXTURE_ENV_COLOR, tinting);

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_INTERPOLATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB, GL_TEXTURE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_CONSTANT);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC2_RGB, GL_CONSTANT);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB, GL_ONE_MINUS_SRC_ALPHA);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_SUBTRACT);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

long offset = (long)&quad_;

// vertex
NSInteger diff = offsetof( ccV3F_C4B_T2F, vertices);
glVertexPointer(3, GL_FLOAT, kQuadSize, (void*) (offset + diff) );

// color
diff = offsetof( ccV3F_C4B_T2F, colors);
glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize, (void*)(offset + diff));

// tex coords
diff = offsetof( ccV3F_C4B_T2F, texCoords);
glTexCoordPointer(2, GL_FLOAT, kQuadSize, (void*)(offset + diff));

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

if( newBlend )
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);

#if CC_SPRITE_DEBUG_DRAW
CGSize s = [self contentSize];
CGPoint vertices[4]={
ccp(0,0),ccp(s.width,0),
ccp(s.width,s.height),ccp(0,s.height),
};
ccDrawPoly(vertices, 4, YES);
#endif // CC_TEXTURENODE_DEBUG_DRAW

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_PREVIOUS);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_MODULATE);
glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND1_ALPHA, GL_SRC_ALPHA);

glBlendFunc( CC_BLEND_SRC, CC_BLEND_DST );

}

There you go! You should be set to tint and add color to sprites!

Taking Sprite Coloring to a Whole New Level

Okay so first of all, you may want to optimize this a bit. Maybe you want to set it up so that you have one sprite subclass that can jump between multiple modes and do additive and tinting both in the same sprite. Maybe you want to move this up so it works in batch nodes as well (If that’s the case, look at the CCTextureAtlas). Maybe you just want to play around and see what you can create, I recommend this I’d love to see a “cookbook” of different ways you can change the pipeline to do a variety of effects. If you create something new then please post it in the comments! Before we go here’s the source code if you want to download it:

Well first of all by TDRPG we are talking about Tower Defense Role Playing Game. And this may be a stretch of the imagination to really call this game an RPG it undoubtably is going to be dazzled with RPG elements. We’re talking 20% RPG and 80% TD. After all you are running around as cute little forest characters trying to save the day from external evil forces. If that’s not RPG then what is?

Building on the RPG direction you can’t forget upgrades. What RPG doesn’t allow you to upgrade your characters abilities and improve your chances against your foes. It’s all about getting stronger and taking down enemies with ease that you once fell over dead in their proximity. Based on your skill in defending a battle you’re awarded “stars” that will allow you to upgrade your characters and improve your odds in the levels to come.

So what’s this upgrade system look like? Check out the screen shot below.

Okay, so let me elaborate a bit. To the left is the side bar that keeps you updated on what ability you have selected and gives you the opportunity to unlock it if eligible. To gain an ability it must be connected to another unlocked ability and you must have the required stars available to complete the unlock. It’s a simple system really, but the beauty is in deciding which paths to take in order to unlock the needed abilities. In the screenshot above there are 93 upgrades (of course, you can only see about 17 of them) available; however, I’m in the process of adding another 36 to each character.

Ultimately, I think this feature will really add a new level of depth to how to play the game. Not only do you need to choose the correct tower combinations to defend properly but you’ll need to upgrade your character in order to be successful.

The most difficult thing about this project has been really nailing things down. Without a doubt, this has become an incredible learning experience. Work on this project was started about a year ago. Of course, as I write this article now I’m remembering one year ago (practically to the day) writing a prototype for GooMonsters and watch little solid colored circles chase a block around the screen. GooMonsters was an intentional derailment from this game, mostly because I’ve found making decisions on how to address aspects of the game to be incredibly difficult. This game has depth at a level that nothing I’ve developed in the past could have, probably because strategy is a huge key. Figuring out how to balance the game and incorporate a sense of achievement has always haunted me. I have multiple pages full of numbers and organized thoughts trying to pinpoint how this game is going to work, flow, and balance. And while I will be balancing until right before the game is released I definitely think it’s coming together.

The past two weeks have been huge. Two of the biggest mental hurdles I was cowering behind finally came down. Mostly because forcing a decision and going at it full force produced results. Hurdle 1) Get the Faeries in game and working. Hurdle 2) Make this game a TDRPG not just another TD game.

Since the beginning I knew one thing about this game was certain, I wanted a story. I think back to the first Digitally Bold release, Fly Away Rabbit, and am saddened I didn’t give that poor rabbit a good solid reason for flying into the clouds. I know that game could have been twice as successful if I had cultivated a desire in the player to see this rabbit succeed. But I digress, Project Faery needed a story because I want this TD game to feel like you have a purpose for helping these forest guardians save the day. And I wanted the levels to progress ultimately to a final goal. It’s TD but with a purpose.

So all that said, RPG elements just make sense. Why not be able to upgrade as you progress through levels. Who doesn’t like upgrades? After all there’s a popular flash game Upgrade Complete where you quite literally upgrade everything. So while upgrading has always been a goal, how to do it has been a complete mess of ideas that went from blatantly simple to so complex my head hurts thinking about programming it. At the moment I’ve happily stuck with blatantly simple for the user and just mildly complex programmatically.  Also at the moment, I love the upgrade system, I can’t wait to show off some examples as it gets more fully developed, but for now know it’s a definitely inspired by some of the Final Fantasies.

The Grass Tower

This was the first tower designed for the game. While its function has took some overhauls in recent days due to its naturally tesla looking shape (becoming a lightning tower), it’s still a fundamental tower in the game. This tower works fantastic for weakening (and taking out) unarmored enemies due to it’s fast reload and wide spread attack. Above you can see it attacking a “Goober” with both a damage and burn enhancement added to the tower.  Many enhancements such as burn, will effect the target over time resulting in color tinting. This lets you track what attacks are currently affecting your enemies.  [A little development note on tinting: this is an effect I was able to achieve using just OpenGLES that I will write a blog post on later. If you want some details now be sure to check out this thread]

If you like Digitally Bold please follow us on Twitter so we can keep you up to date on what’s happening

Building on last week’s screenshot you can see we still have our trusty forest friend the fox as the player character. Likewise we are showing a newly created menu. The Faery HUD let’s you select a faery to assist you in defending. (We’ll reveal what you are defending later but know that it’s a slightly different twist on defending than in other TD games)  Each of the 5 faeries has a different ability that it can perform to either attack and enemy, enhance your defenses, or assist the player character. We’ll talk about this more in detail in the future. For now enjoy the sneak peak.

Also you will notice a pink/red creature moving in the bottom left of the screen. If you are Digitally Bold fan you’ll no doubt have seen “Goober” before in our previous game GooMonsters home screen. Goober was the first enemy created for the this upcoming TD project and as an easter egg was introduced in GooMonsters. Goober is one of the weakest land based enemies in Project Faery and has no special abilities. It’s the most basic of the basic mobs.

• It’s a Tower Defense Game.
• It’s in the style of a top-down RPG (RPG elements may be included in gameplay).
• You play as one of many characters.

Here’s a screenshot of the game currently. You can get a really good feel for the art style and one of the playable characters. Likewise you are looking at one of the tower building screens. Currently there’s planned 4 to 5 towers. We’ll talk more about that later but let’s just say it’s 4 or 5 towers each with nearly infinite upgrade possibilities.

This is a new style of development at Digitally Bold, typically we keep things secret until release but this time around we really want your help building this game. Your opinions on TD games and what would make a great one definitely is in our consideration. So here’s our first poll question.

The joystick controls now allow for you to play two ways. The two joystick modes are Solo Stick and Dual Stick. Solo stick gives you one joystick that controls the character movement. Swinging is completed the same way as in tilt mode, you swing in the direction your character is moving.
Dual stick has a two joystick interface. One is for movement like Solo stick, the other is for swinging. The swing joystick is used by putting your finger in the center and swiping out in the direction you want to attack. So if an enemy is below your character then put your finger in the center of the stick and swipe downward.

Hopefully now every fan of action and adventure games can really enjoy the gameplay of GooMonsters. Go Hack, Slash, and Splatter!

Solo stick interface

Dual Stick interface

GooMonsters iTunes Link

So what’s the big idea? Well here it is. Zombie games are all the rage… and well… for good reason. But they’re typically dark, moody, and bloody. Well, I don’t mind the light hints at blood but I wanted a game with some color and vibrance. GooMonsters is all about splattering bright color all over the screen. It leaves the game with a more casual feel and all the fun cartoon “gore”.

The majority of graphics and programming for GooMonsters was completed in early March. The goal was the end of February but… missed it by that much. From that time the game went into beta testing and sound development. Digitally Bold brought in Whitaker Blackall, sound designer for games like Tilt to Live, Casey’s Contraption, Velocispider, and now GooMonsters.  Sound design and beta testing went from March to August.

Now GooMonsters is officially on it’s way to the AppStore. Look to see it out soon. Head over to the GooMonsters page to see the video trailer and screenshots.