A fast, easy to use, free, and community supported 2D game engine
Alright so I'm trying to find a solution to adding colors onto a sprite that are not in the sprite by default... the equivalent of tinting in Flash.
Now I can do this relatively easy with photoshop and creating two files but I'd like to be able to do it programmatically. I think I have a solution; however, I don't know if step two is possible or how to accomplish it. Take a look at this and give me some feedback on it as a solution.
Have you looked at the CCTintTo/CCTintBy actions yet? I think this is what you are after. I did some playing with this a long time ago: http://dothemeep.blogspot.com/
I would try making two sprites, one the original colors, one the tinted color. Then overlay them in the same position. Although according to your pictures, it doesn't really look like you are using additive blending, as the bottom half of your block would be almost completely white if it was really additive. It looks like you are just overlaying the blue-green sprite on top.
Neuron Fire
Member
What you are trying to do will require manipulating the blend functions of the sprites you are dealing with. Take a look at this web based tool:
http://www.andersriggelsen.dk/glblendfunc.php
You can even point it at your own artwork.
zzt4,
You are correct... it's not additive blending. However, I don't know of any better way of phrasing it because I don't exactly know what to call it. In a sense, it's adding because I'm trying to add more of a certain color into the image but technically speaking... I know... it's not additive blending. In the example, I just want to drop a layer of 50% bluegreen on top of a normal sprite. That simple.
Here's what I want... You see the sprite in the most top right... turn it into the one in the bottom right.
I need absolutely no special blend functions whatsoever. Default will work great.
The real question is this... (as noted in red above)
How do I move alpha channel data into red, green, and blue channels?
My ultimate goal is taking a normal sprite and making it solid white, that way I can color it whatever color I need as a solid then throw it on top of the original and blend it however I want.
Mark Sawicki
Member
Hey @Par,
maybe try this:
go get CCTexture2DMutable (by Lam Hoang Pham, improved by Manuel Martinez-Almeida) if you don't already have it.
Then you can do something like this:
[...]
CCSprite *floatingPlatform = [CCSprite spriteWithFile: theFileName];
CCSprite *floatingPlatformMask = [self genSpriteMaskFromCCSprite: floatingPlatform];
[floatingPlatformMask setColor:ccc3(0,255,0)];
[floatingPlatformMask setOpacity: 128];
[self addChild:floatingPlatform z:1];
[self addChild:floatingPlatformMask z:2];
[...]-(CCSprite *) genSpriteMaskFromCCSprite:(CCSprite *) aSprite
{
CCTexture2DMutable *mutTexture = [[CCTexture2DMutable alloc] initWithImage: [self convertSpriteToImage: aSprite] ];
for(int i=0;i<mutTexture.pixelsWide;i++)
{
for(int j=0;j<mutTexture.pixelsHigh;j++)
{
if([mutTexture pixelAt:ccp(i,j)].a > 0)
{
[mutTexture setPixelAt:ccp(i,j) rgba:ccc4(255, 255, 255, 255)];
}
}
}
[mutTexture apply];
CCSprite *finalSprite = [CCSprite spriteWithTexture:mutTexture];
[mutTexture release];
[finalSprite setFlipY:YES];
return finalSprite;
}
-(UIImage *) convertSpriteToImage:(CCSprite *)sprite
{
CGPoint p = sprite.anchorPoint;
[sprite setAnchorPoint:ccp(0,0)];
CCRenderTexture *renderer = [CCRenderTexture renderTextureWithWidth:[sprite boundingBox].size.width height:[sprite boundingBox].size.height];
[renderer begin];
[sprite visit];
[renderer end];
[sprite setAnchorPoint:p];
return [UIImage imageWithData:[renderer getUIImageAsDataFromBuffer:kCCImageFormatPNG]];
}HTH,
-Mark
P.S. All the above is found 'round the forums here. I make no claims to have come up with any of it, just cobbled it together..
MisterX
Member
Ha ha! This is something my game makes use of extensively. Most of my sprites are good ole' black and white (grayscale) on my sprite sheet. I then programmatically tint them to the desired color.
I'm not sure why your wanting to move alpha channel data.. I'm not sure what the above poster's code with the masks is supposed to accomplish. Just make your sprite a .png file or similar that contains an alpha channel. You just then simply set the sprite's color like so:
[grayscaleSprite setColor:ccc3(255,0,0)]; // your sprite will now be tinted Red
[grayscaleSprite setColor:ccc3(0,255,0)]; // your sprite will now be tinted Green
[grayscaleSprite setColor:ccc3(0,0,255)]; // your sprite will now be tinted Blue
That is all there is to it. Works great for me..
I just looked at your original post again. You seem to be trying to create an unnecessary step. Just take your sprite in the upper right corner, set its color "setColor:cc3(0,128,255)", or whatever your desired color is and bam, you should get the sprite you have in your lower right corner. No need to create a second tinted sprite and overlay it on top of the first.
I understand what you are looking for Par, been looking for the same thing for a while. Logically it seems to simple to just replace a textures r,g,b values with alpha, but I haven't found anything that works.
SetColor only removes color, so that wont work. I tried to use masks before, and did manage to get the second sprite you are showing in your image. But that just kept increasing my memory use until the program crashed. The code is here if you want to have a look: http://dl.dropbox.com/u/7279678/MaskTest2.zip
I gave up on this problem some time ago :/
Here is a suggestion on how to solve this issue:
1) Convert your sprite to a white alpha shape (the white outline of the tile you show under your "THE QUESTION")
2) Color this white sprite using .color property on CCSprite to aqua (just set the .color value to aqua)
3) Overlay this new sprite with, say, 50% opacity over your old sprite. In other words, for every colored tile, you will actually have textures for 2 tiles, and show one with one sprite on top of the other with another sprite, with the top sprite being somewhat transparent
This should do a decent approximation of what you need. Now the trick is accomplishing step 1. Here are three solutions for that:
1) Pre-create these overlay shapes in Photoshop for each sprite you need to color. If you use Actions, you can pretty much automate this process. Your textures will now take more memory on disk, but it's the easiest solution out there.
2) Use the "genSpriteMaskFromCCSprite" method that @Mark Sawicki posted above
3) Write a slightly different form of that method using the following algorithm:
(CCTexture2D*) extractAlphaFrom:(CCTexture2D*)ORIGINAL {
CCTexture2D* NEW = new texture of the same size as ORIGINAL;
[NEW - clear with 255, 255, 255, 0];
[render into NEW, but only into the ALPHA channel];
CCSprite* temp = [CCSprite with ORIGINAL];
[temp visit];
[stop rendering into NEW];
return [NEW autorelease];
}Then you can use this new texture as a white alpha mask for all your coloring delights. Hope this helps!
@MisterX,
This works for you because your sprites are grayscale... which means they have an even amount of red green and blue. If you look at the sprite(in the example) above, you'll notice there is no blue in the green. Using setColor will not make blue in the blue channel when it does not exist originally.
@Mark Sawicki, @Zhenmuron
Thanks guys, these are some good solutions! Both work as far as my tests go. Both have different oddities around the edges with the < 255 alpha pixels. However, both work great... I'm more worried about speed than anything else though.
@Zhenmuron what do you mean about it increasing memory? Is there a leak or did you have a lot of sprites being masked?
Either of you, have any idea how we this could be applied to BatchNodes and animation?
@psykano, take a sprite with multiple colors in it. For example, the one I used above has two shades of green and two shades of yellow. If that was grayscale I cannot produce the green and the yellow in the same sprite from grayscale. It would take at least two sprites. Then when I want to put blue in both of those sprites I would have to come up with some kind of formula to apply it evenly to each sprite. Possibly a simple formula. But if I have to use at least two sprites, I'd be better off doing what me and @pfg2009 discussed which will always be only two sprites.
Are their situations where grayscale works? Yes, I've used it a few times... but this isn't one of those situations. Sprites with obviously more than one hue will not work in grayscale using the setColor coloring method.
You should be able to use glTexEnv to blend the texture with a color of your choice.
Try have a look at chapter 8
http://ofps.oreilly.com/titles/9780596804824/index.html
@Par: re: "And I figure if it can be done in a relatively non-expensive manner, that'd be awesome"
Follow the pseudo code in solution #3. It's both inexpensive and fast, especially if you pre-create these new textures before your game begins. It makes even more sense if you use sprite sheets - that way you convert all your sprites at once AND you can reuse your existing CCSpriteFrames from the original sprites. To make things even simpler, you could subclass CCSprite to create and manage its own overlay sprite and set it as its child. All the scaling, rotation, and translation of this child sprite would automatically mimic that of the parent and you could manually push properties such as opacity and color from the parent to the child. ~1 day of work and you have yourself a CCSprite that you can color using ADD instead of SUBTRACT.
@Birkemose, that sounds like a fantastic solution (if it works)... I have absolutely no idea how to do it. I looked at Chapter 8 but I couldn't find anything about how to set a color. I'm assuming glColor4f? But I'm serious when I say I don't pretend to understand openGL. I know/understand extremely little of it, that's why I use cocos2d. I'm assuming I'd need to modify the draw function of CCSprite to make this work (or use a subclass). However, my attempts all failed to do anything. However, I'm guessing at the moment. I'll keep researching this. Thanks for the pointer @Birkemose.
@pfg2009, your solution reminds me of what @Zhenmuron was doing only more concise. One question by CCTexture2D do you mean CCRenderTexture? Because I have no idea how to render into a CCTexture2D. Past that subclassing CCSprite and using sprite sheets is exactly what I am looking to do. I'm wanting to make this work with animation in the end.
@Par
Yes, it would require adding some openGL stuff, and glTexEnv is probably the most complicated part of openGL.
Basically you would need to set the texture stage to ex add, and then add with a constant color.
While glTextEnv can be tricky to set up and understand, it would not have any FPS penalty, and would by far outperform rendering the texture twice. Batch node or no batch node.
MisterX
Member
@MisterX,
This works for you because your sprites are grayscale... which means they have an even amount of red green and blue. If you look at the sprite(in the example) above, you'll notice there is no blue in the green. Using setColor will not make blue in the blue channel when it does not exist originally.
I was mistaken on what you were trying to accomplish. Oh well.. The end result, in your lower right corner, looks like a monochrome sprite tinted a shade of green and that is what I was going by. Guess your wanting to exclusively tint multi-hued sprites. I've used Flash before, but don't remember how the tinting works in it.
@Par: yes, I meant CCRenderTexture. If you go this route, don't create the textures in your loop. Pre-create them during the load time
@Birkemose: thanks for sharing the link to the OpenGL ES book. There is some method behind the glVoodoo() madness... who knew?! I might have to do some reading this weekend.
@Birkemose, glTextEnv works fantastic!
@Zhenmuron, I think you will definitely want to look at this because I am capable of getting the exact effect your code creates using one sprite.
Okay so let me explain what I've done. I created a subclass of CCSprite and simply override the draw function with this.
BTW, I'm not claiming this will work 100% in all situations. I may need to turn off a few more of the OpenGL settings/states/whatever after rendering... but as far as I can tell this seems to work excellent.
-(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)
//set blend function...
//glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); //you can force it here or set it on the sprite
glActiveTexture( GL_TEXTURE0 );
glEnable( GL_TEXTURE_2D );
glBindTexture(GL_TEXTURE_2D, [texture_ name]);
//the magic
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_ADD); //you can change me... GL_REPLACE, GL_SUBSTRACT produce nice effects
glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB, GL_PREVIOUS); //setColor
glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB, GL_TEXTURE); //your texture
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); //go back to default
}Now, I still do not claim to understand OpenGL. But I do understand some of this... at least what it does... :D You need the blendFunc to be:
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
You can force it in the draw class or set it in the sprite like such:
[sprite setBlendFunc:(ccBlendFunc){GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA}];
If you compile you will notice your sprite goes completely white. Why? Not sure... but I am sure it has something to do with setColor and the way it's applied to the vertices. As a matter of fact what we have just done is made setColor be additive. Take a look at
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_ADD);
By setting it to GL_ADD whatever we set setColor to will additively(literally) be applied to our texture. Since the default color is (255, 255, 255) we are adding white to our texture which makes it go solid white. By default you need to make the color be (0, 0, 0) now instead of (255, 255, 255).
Now, if you change GL_ADD to GL_REPLACE it will make your sprite be entirely the color set with setColor. Which is exactly what I was trying to do earlier. With this I can apply a sprite over another sprite to produce the effect in my graphic.
Last GL_SUBSTRACT inverts the image... (255, 255, 255) is a full inversion. Change it to a color like orange and you get some pretty cool effects depending on the sprite being manipulated.
There are more options but these are the three I thought were useful and interesting. If you guys find out more information and ways to make this work better please post it! :D
Dillion
Member
@Par
In your current solution you will be rendering the sprite twice, once for the sprite with overridden draw that acts as an overlay, and another for the normal sprite.
Actually in your overridden draw you can make use of the second texture unit by calling glActiveTexture(GL_TEXTURE1) and getting the end result directly in 1 draw call (maybe http://www.opengl.org/wiki/Texture_Combiners can help).
If you just want to change the way setColor works you can try setting glBlendEquationOES, glTexEnvf and the colorpointer array in your overridden draw
Another thing is that you lose the ability to batch draw with ccspritebatchnode, unless you override the ccspritebatchnode draw, but then all sprites from that batch node will be drawn using the new custom params
Also, for setting the blendfunc, you should replace CC_BLEND_SRC and CC_BLEND_DST in
BOOL newBlend = NO;
if( blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST ) {
newBlend = YES;
glBlendFunc( blendFunc_.src, blendFunc_.dst );
}with the blendfunc you need to ensure, instead of setting it separately later to reduce unnecessary state calls
@psykano, I think it makes sense and I agree with @Zhenmuron it would be easy to do.
@Dillion... I'll look into this but I can't find a Texture Combiner that will let me (essentially) put something at 50% alpha on top of another. I'm still learning how all this works though, but as of right now I haven't seen anything that produces the results I would need. (I could probably do it with shaders easily)
I agree on replacing CC_BLEND_SRC and CC_BLEND_DST. Earlier I was simply describing how to make it work.
With a little more testing I've found that CC_ADD will create black lines around your sprite by blacking semi-transparent pixels. Makes sense... I'm not really sure there is any way to fix this while using CC_ADD and black. Probably better to render normally if you are not using setColor. Of course this depends on the types of sprites you use as well... all mine are bright and colorful so this issue is blatantly obvious.
Dillion
Member
@Par setColor takes in (ccColor3B) but you can override setColor and updateColor to use (ccColor4B), to supply an alpha value. You could in fact apply custom ccColor4B to each of the vertices in the quad displaying your sprite, so that the color data array
diff = offsetof( ccV3F_C4B_T2F, colors);
glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize, (void*)(offset + diff));contains all your custom color information, including the alpha values. Then for the glTexEnvi part you just need to find a configuration that does overlay of the first texture unit (combined with color data array) over the second texture unit (ignore color data array).
But I do agree that experimenting with all the glTexEnv values to get the effect you want is a laborious process, I tried to use texture combiners for some form of bump mapping but creating the bump mapped texture itself is a headache for me.
Hope this works out for you! I emphasized on draw calls in my previous post because if you are planning to apply this to every sprite, taking into consideration your subclassed sprites cannot be batched, the fragment pipeline fills up fast and your fps will start to go down. I only discovered renderer utilization was maxed out late in my project due partly to such customization.
You can do early load tests using large numbers of your custom sprites and running the opengles instruments
@Par
You are very close, but you do NOT need to render the textures twice.
Reason why image turns white when you use GL_ADD, is because cocos2d uses glColorPointer, so in order to get it to work, you have to disable that.
glDisableClientState( GL_COLOR_ARRAY );Now. Set up texenv as you did, but replace GL_ADD with GL_ADD_SIGNED
glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB, GL_ADD_SIGNED );Now you can set your tinting color
If you do not want any tinting, the color would be
glColor4f( 0.5, 0.5, 0.5, 1 );A ex nice yellow tint is obtained by setting the color to
glColor4f( 1, 1, 0.5, 1 );HTH
EDIT:
You could actually also use GL_ADD, but I do it this way in order to be able to subtract color as well.
You must log in to post.