RGB ColorTransform

epa_neto

Hello everyone,

I was wondering how could I set the color of a SPImage, but being able to set the red, green, blue and alpha values instead of just setting a uint value as explained at this tutorial http://wiki.sparrow-framework.org/tutorials/modifying_the_color_of_an_image

Is it possible to achieve that? It would be similar to a ColorTransform at flash.

Thanks in advance,
Epa

Shilo

Hello,

The following Sparrow macros make it very easy to set/get the red, green, and blue color components separately: (Note: there shouldn't be a need to set the alpha value, since it can be set via the "alpha" property.)

#define SP_COLOR_PART_ALPHA(color) (((color) >> 24) & 0xff)
#define SP_COLOR_PART_RED(color) (((color) >> 16) & 0xff)
#define SP_COLOR_PART_GREEN(color) (((color) >> 8) & 0xff)
#define SP_COLOR_PART_BLUE(color) ( (color) & 0xff)

#define SP_COLOR(r, g, b) (((int)(r) << 16) | ((int)(g) << 8) | (int)(b))
#define SP_COLOR_ARGB(a, r, g, b) (((int)(a) << 24) | ((int)(r) << 16) | ((int)(g) << 8) | (int)(b))

Here is a simple example:

//set the quad to black
quad.color = 0x000000;

//change just the red value of a color
uint redValue = 255;
quad.color = SP_COLOR(redValue, SP_COLOR_PART_GREEN(quad.color), SP_COLOR_PART_BLUE(quad.color));

Alternatively, I just created an extension that extends this concept:
http://wiki.sparrow-framework.org/users/shilo/extensions/spquad_colorcomponents

I also just realized I created a similar extension awhile ago, which allows color components to also be changed on SPButtons, SPTextField, and SPStage, along with SPQuad/SPImage. It also has a few methods to allow you to smoothly tween colors. I haven't tested it with Sparrow 2.X, but it looks like it should work. It can be found here:
http://wiki.sparrow-framework.org/users/shilo/extensions/shanimatablecolor

Daniel

Thanks, Shilo!

BTW, in case you missed it, Epa, those macros are already part of Sparrow, so you can use them directly, just as in Shilo's sample.

(Thanks also for the bug report about the smilies -- I've just fixed that!)

epa_neto

Thank you a lot guys for the support. I will try all those features today, specially the color with tween, It's exactly what I need.

All the best,
Epa

epa_neto

I'm kinda trying to adapt the SHAnimateTableColor for my need, which is use different values for each color, so I created these methods:

(void)animateRedWithTargetValue:(uint)value {
[self animateProperty:@"redColor" targetValue:SP_COLOR_PART_RED(value)];
}
(void)animateGreenWithTargetValue:(uint)value {
[self animateProperty:@"greenColor" targetValue:SP_COLOR_PART_GREEN(value)];
}
(void)animateBlueWithTargetValue:(uint)value {
[self animateProperty:@"blueColor" targetValue:SP_COLOR_PART_BLUE(value)];
}

-(void)animateAlphaWithTargetValue:(uint)value{
[self animateProperty:@"alpha" targetValue:SP_COLOR_PART_ALPHA(value)];
}

And I am calling these methods like this:

SPImage *background = [[SPImage alloc] initWithTexture:texture];
SPTween * tween = [[SPTween alloc]init];

tween = [SPTween tweenWithTarget:background time:1];
[tween animateRedWithTargetValue:60];
[tween animateGreenWithTargetValue:20];
[tween animateBlueWithTargetValue:50];
[tween animateAlphaWithTargetValue:1];
[Sparrow.juggler addObject:tween];

What happens is that the square turn black. The color values are between 0-255 and the alpha between 0-1, right? At AS3 I could also change the red green and blue offset, but I'm not sure if that applies to Objective-C.

What exactly is responsible for turning my background black? I'm sure that the color is right, because when I set the tween time to like 5 seconds, I can see the right color before the background turns black. The problem is probably with the alpha channel.

[EDIT]
If i leave the alpha channel unchanged, i get a shaped color, losing all the texture in the background.

Shilo

Hello,

The reason it is animating the color to a black tint, is because you are using SP_COLOR_PART_XXXX() when it is unnecessary in these specific methods. SP_COLOR_PART_XXXX() is only necessary if you want to convert a full hex color value to the specific color component. Example: SP_COLOR_PART_GREEN(0x00ff00) would convert to 255.

If you were to leave the majority of your code intact, you could just use the full hex value for the target values, like so:

//red: 60 green: 20 blue: 50 = 3C1432
tween = [SPTween tweenWithTarget:background time:1];
[tween animateRedWithTargetValue:0x3C1432];
[tween animateGreenWithTargetValue:0x3C1432];
[tween animateBlueWithTargetValue:0x3C1432];
[tween animateAlphaWithTargetValue:1];
[Sparrow.juggler addObject:tween];

Also, SP_COLOR_PART_ALPHA() is unneeded in this case also, since it applies to hex values, so the method should be like this:

-(void)animateAlphaWithTargetValue:(uint)value{
[self animateProperty:@"alpha" targetValue:value];
}

That should make the color far less black, but in my color-blind eyes, I still see that this color is pretty dark. Test the color here, if you are interested: http://www.javascripter.net/faq/rgbtohex.htm

Alternatively, like I suggested, you could do without any of the SP_COLOR_PART_XXXX() macros, and I think that would be the logical route to take, here is the complete code:

- (void)animateRedWithTargetValue:(uint)value {
[self animateProperty:@"redColor" targetValue:value];
}

- (void)animateGreenWithTargetValue:(uint)value {
[self animateProperty:@"greenColor" targetValue:value];
}

- (void)animateBlueWithTargetValue:(uint)value {
[self animateProperty:@"blueColor" targetValue:value];
}

-(void)animateAlphaWithTargetValue:(uint)value{
[self animateProperty:@"alpha" targetValue:value];
}

SPImage *background = [[SPImage alloc] initWithTexture:texture];

SPTween * tween = [SPTween tweenWithTarget:background time:1];
[tween animateRedWithTargetValue:60];
[tween animateGreenWithTargetValue:20];
[tween animateBlueWithTargetValue:50];
[tween animateAlphaWithTargetValue:1];
[Sparrow.juggler addObject:tween];

The code above removes the SP_COLOR_PART_XXXX() macros.

Also, be sure that the "setRedColor:", "setGreenColor:", and "setBlueColor:" methods are using SP_COLOR(). And "redColor", "greenColor", "blueColor" methods are using the appropriate SP_COLOR_PART_XXXX(self.color) macros. I assume you are using the code I provided in SHAnimatedColor extension, so that part should be fine.

Note that I removed this line in your code:

SPTween * tween = [[SPTween alloc]init];

This line is unneeded, because you allocate the tween again with the following line:

tween = [SPTween tweenWithTarget:background time:1];

If you are having trouble understanding objective-c allocations, you might need to read up on some of the basics.

epa_neto

Thanks @Shilo.
Actually it was much more simple than I expected, thanks for your explanation. It's working perfectly.

All the best,
Epa